【Cocoon カスタマイズ】日本語環境で日付を英語表記に変える!

Cocoon
スポンサーリンク

暫く記事の更新をしておりませんでしたが、テーマを無料のWordpressテーマ【Cocoon】に変えました。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

このテーマは、サイト公開時から使用させていただいてたテーマ【Simplicity2】の後継にあたるもので、【Simplicity2】も無料とは思えないほど高機能でしたが、さらに進化したテーマとなっています。

このサイトでは日付を英語表記に変えていましたが、テーマの変更に伴って全てリセットされてしまったので、改めてCocoonで日付を英語表記する方法について考えてみました。

日付の設定を変更する

まずはじめに、日付形式の設定を表示させたい形式に変更してみましょう。

日付や時刻のフォーマットについては以下のページをご確認ください。

日付と時刻の書式
日付と時刻の書式をカスタマイズする WordPress の関数の中には、the_date() や the_ti…

管理画面(ダッシュボード)から Cocoon 設定 → 全体タブ へ移動し、いちばん下の日付フォーマットの入力欄に

M jS, Y

と入力します。

管理画面(ダッシュボード)から → 設定 → 一般設定 へ移動し、日付形式でカスタムを選択し、同じく入力欄に

M jS, Y

と入力します。

Cocoon では、Cocoon 設定の日付フォーマットを取得する

get_site_date_format()

という独自の関数を使っている為、WordPressの汎用的な関数 get_option() を使ってPHPを書く場合はこちらも設定しておく必要があります。

日付フォーマットを取得するには date_format オプションを使用し

get_option( 'date_format' )

となります。

若干逸れましたが、話を元に戻してどのように表示されているか確認してみましょう。期待通りの表示なら

Jul 23th, 2020

のようになるはずです。

しかし、テーマ側の仕様にもよりますが日本語版のWordPressでは多くの場合

7月 23th, 2020

のように日本語に翻訳されて表示されてしまいます。Cocoonでも同様に、更新日以外の表記が日本語にローカライズされて表示されてしまいました。

それでは、どのように期待通りの表示にするのか順に見ていきます。

以下の内容にはfunctions.phpに追記又は変更する内容が含まれます。

functions.phpの追記又は変更については、必ずバックアップをとってから行っていただき、不具合等が生じた場合にご自分で対処できる方のみ行ってください。

当サイトでは責任を負いかねますので予めご了承ください。

投稿日を英語に

まずはじめに、Cocoonではどの日付関連のテンプレートタグを使って投稿日を表示しているか確認してみましょう。

一覧で表示されるエントリーカードでは

the_time()

が使われていました。

the_time() は投稿日時を表示するテンプレートタグで、この関数内では投稿日時を取得する get_the_time() というテンプレートタグが使われています。

表示と取得の違いは echo を使う必要が有るか無いかです。

次に、個別の投稿ページも確認してみたところ

get_the_date_tags()

という独自の関数が使われていることが分かったのですが、この関数の中身が確認できませんでした。

各ファイルをじっくり確認すれば見つかるかもしれませんが、時間が掛りそうなので、場所(ファイル)を特定するのは諦めました。。。

ただ、get_the_date_tags() 関数内でどのような処理がされているのかは確認できませんでしたが、

echo get_the_date_tags();

のように echo を使って投稿日と更新日を表示しているので、この関数内では the_time() は使っていないだろうと推測できます。また、例えば

echo get_the_time();

のように投稿日を表示している場合、the_time() のフィルターフックを使っても期待通りの表示ができません。

そこで、この get_the_time() のフィルターフックを使って投稿日を英語表記に変える事にします。

ソースコード

子テーマの functions.php に次のコードを追加します。

ちょっと強引ですが、ループ処理で置換えています。

もっとスマートな方法があれば誰か教えて欲しいところですが、現状不具合等出ていないので暫くはこれで良いかなと思っています。

フルスペルで表示させたい場合等は$valueの値を”Nov”のような省略型から”November”など好きな表示に変えてください。

月表示の配列の順番が気になる方もいると思いますが、“11月”と”12月”は必ず最初に並べてください。

1月から順番に並べた時に起こる不具合について

この関数で行っている事は、受け取った値を順番に突き合わせして該当した場合に英語に置換えて表示しています。その為、1月から順番に並べた場合”1月”や”2月”に該当する部分が先に置き換えられてしまうので、

“11月” は ”1Jan” に

“12月” は ”1Feb” に

それぞれ変換されてしまいます。

その他の方法(Cocoon以外の汎用的な例)

投稿日を英語で表記する方法は

でも書きましたが、フィルターフックを使って functions.php に次のコードを追加します。

get_post_time()

は日付をローカライズせずに値を返してくれます。

Cocoonの場合、インデックスページ等の一覧ページに表示されるエントリーカードの投稿日は英語に変わるものの、個別の投稿ページや固定ページの投稿日は変わりませんでした。

get_the_time() のフィルターフックでも試してみたところ、投稿日はどちらも英語で表示できましたが、独自関数 get_the_date_tags() の影響なのか更新日が表示されなくなってしまう為、先に紹介した方法に落ち着きました。

使用するフィルターフックについてはテーマ側でどの日付関連のテンプレートタグを使っているかで変わってくると思いますが、ここで紹介した方法はどちらも他のテーマでも応用できるのではないかなと思います。

更新日を英語に

Cocoonの更新日の表示について

Cocoonの場合、日付形式の設定変更だけで更新日の表示が英語表記に変わりました。

その為、更新日については何もすることはありませんが、今後のWordPressやCocoonのバージョンアップによって仕様が変わる可能性が無いわけではありません。

その他の方法(Cocoon以外の汎用的な例)

フィルターフックを使って functions.php に次のコードを追加します。

get_post_modified_time()

は日付をローカライズせずに値を返してくれます。

コメントの日付を英語に

Cocoonデフォルトウィジェットの「[C] 最近のコメント」を使用している場合、ここにもコメントした日付が表示されます。また各個別投稿ページに表示されるコメントにも日付や時間が表示されているので、ここも英語表記に変えていきたいと思います。

コメントの日付を取得する関数について

まずはじめに、コメントの日付を表示する comment_date() テンプレートタグとその中で使われているフィルターフック get_comment_date() の中身を確認してみたいと思います。

この get_comment_date() 関数内で使われている mysql2date() 関数が曲者で、パラメータ $translate に false を指定していない場合データベースから受け取った値をローカライズして返します。

また、この mysql2date() 関数はWordPressのフィルターフックではない為、get_comment_date() のフィルターフックを使って取得した日付を強引に変換する必要があります。

ソースコード

やり方は「投稿日を英語に」で紹介した方法と同じです。

functions.php に以下のように記述します。

コメント時間も英語に

各個別投稿ページに表示されるコメントには時間も表示されますが、24時間表記にしていない場合「午前」や「午後」と表示されてしまうので、これを「AM」や「PM」に変えます。

同じように、functions.php に以下のように記述します。

アーカイブウィジェットを英語に

このサイトではCocoon開発者わいひらさんのブログ

折り畳み式アーカイブウィジェットを作成するWordPressカスタマイズ方法。プラグイン不要コピペのみ。
今回は、Wordpressアーカイブウィジェットのリスト表示を、プラグインを必要とせず、コピペのみでスッキリと表示できるコードを書いてみたので、そのカスタマイズ方法の紹介です。アーカイブのリスト表示は更新するほど長くなるWordpressの

の記事を参考に折り畳み式のアーカイブウィジェットを作成し、そのコードをアレンジして英語で表示しています。

動作については、このサイトのサイドバーにある「MONTHLY ARCHIVES」(アーカイブウィジェット)でご確認ください。

主な手順

参考記事に習い以下の手順で進めます。

  1. style.cssにCSSを記述(コピペでOK!)
  2. javascript.jsにjQueryコードを記述(コピペでOK!)

style.cssに記述(コピペ)するCSSについて

style.css に以下のコードを記述

ここで注目して欲しいのは、参考記事では非表示させる為に

.widget_archive ul.years .hide {
  margin: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
}

のようにしていましたが、ここではここではその記述が無い点です。

参考記事で紹介しているjQueryコードでは

//直近の年の最初以外は.hide
        acv.find("ul.years ul:not(:first)").addClass("hide");

のように、直近の年の最初以外に hide という名前のクラスを付けた上で、開閉のアニメーションに

toggleClass("hide")

を使って hide という名前のクラスの有無を切り替える事で表示・非表示を切り替えていましたが、動きがあまり滑らかではなくカクカクした感じだったので、好みの動作になるように

toggle()

を使って実装しています。

このメッソドを実行すると、インラインで display:block; と display:none; の切り替えを行う為 visibility: hidden; を使った場合、display:block; のスタイルが適用されても、visibility: hidden; が上書きされず非表示のままになってしまいます。

javascript.jsに記述(コピペ)するjQueryコードについて

javascript.jsに以下のコードを記述

内容としては、取得したアーカイブウィジェトのHTMLソースから ○年○月記事数 となっている部分の数字だけを取り出し、必要な処理を加えてHTMLソースを整形し直ています。

64行目は年の部分の整形後のHTMLソースでブラウザ上では

for 2020 (1)

のように表示されます。

94~101行目は月の部分の整形後のHTMLソースでブラウザ上では

July (1)

のように表示されます。

117行目はクラスを付加せずに、インラインでCSSスタイルを追加しています。

//直近の年の最初以外は非表示
        acv.find("ul.years ul:not(:first)").css("display","none");

これにclickアクションのアニメーションとCSSによるスタイルを適用して表示しています。

アーカイブページのタイトルを英語に

アーカイブページのタイトルについては、テーマ側でフォーマットを固定してしまっている為、簡単に変更ができません。

そこで、アーカイブタイトルを取得する関数を丸ごと functions.php に記述し、フォーマットを直接編集します。

ソースコード

31行目の get_post_time(‘Y-m-d’) と 34行目の get_post_time(‘Y-m’) を表示させたいフォーマットに変更します。

コメントアウトで上書きと書いていますが、実際の処理はアーカイブタイトルを取得する関数 get_archive_chapter_title() を functions.php に記述することで、ここに書いた内容が優先的に実行されます。

本体のソース読込時には !function_exists() で関数が定義済かをチェックしているので、競合することはありません。

ブログカード(内部リンク)の日付を英語に

Cocoonでは簡単にブログカード型のリンクを設置することができますが、内部リンクのブログカードの場合、Cocoon 設定で投稿日または更新日を表示させることが可能となっています。

日付表示を投稿日または更新日に設定している場合に、この日付も月の表示が日本語に翻訳されてしまうので、ここも英語に変えていきます。

Cocoonではブログカードの日付を取得する為に、mysql2date() 関数が使われています。

「コメントの日付を英語に」でも触れましたが、この関数はパラメータ$translate に false を指定していない場合データベースから受け取った値を強制的に翻訳して返します。

そこで、ブログカードタグを取得する関数を丸ごと functions.php に記述し、パラメータ $translate に false を指定します。

ソースコード

以下のコードを functionns.php に記述します。

ここでも、内部URLからブログカードを取得する関数 url_to_internal_blogcard_tag() を丸ごと functions.php に記述し、ここに書いた内容を優先的に実行させます。

46行目と52行目で使われているmysql2date()でパラメータ$translateにfalseを指定し翻訳を無効にします。

まとめ

しばらく新規記事の投稿をしておりませんでしたが、ありがたい事に

の記事にはちょこちょこと新規のユーザーさんのアクセスもある事から、日本語環境でも日付だけ英語で表示させたい方が少なからずいるんだなと思い、今回Cocoonで日付を英語で表記する方法についてまとめました。

最後にCocoonで日付を英語にするためのコードをまとめます。

アーカーブウィジェットについてはCSSとjQueryで実装しているので「アーカイブウィジェットを英語に」を参照してください。

今回の内容についてはCocoonのカスタマイズとして書いていますので、他のテーマではそのままでは動作しない可能性があります。他のテーマで応用する場合はテーマ内で使われている関数等よく理解した上で、ご自身の責任のもと行ってください。

COMMENT ▼コメントはこちら▼

タイトルとURLをコピーしました