暫く記事の更新をしておりませんでしたが、テーマを無料のWordpressテーマ【Cocoon】に変えました。
このテーマは、サイト公開時から使用させていただいてたテーマ【Simplicity2】の後継にあたるもので、【Simplicity2】も無料とは思えないほど高機能でしたが、さらに進化したテーマとなっています。
このサイトでは日付を英語表記に変えていましたが、テーマの変更に伴って全てリセットされてしまったので、改めてCocoonで日付を英語表記する方法について考えてみました。
日付の設定を変更する
まずはじめに、日付形式の設定を表示させたい形式に変更してみましょう。
日付や時刻のフォーマットについては以下のページをご確認ください。
管理画面（ダッシュボード）から 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でも同様に、更新日以外の表記が日本語にローカライズされて表示されてしまいました。
それでは、どのように期待通りの表示にするのか順に見ていきます。
投稿日を英語に
まずはじめに、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 に次のコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/*日付の英語表記*/ function my_get_the_time($date){ $transArray = array( "11月" => "Nov", "12月" => "Dec", "1月" => "Jan", "2月" => "Feb", "3月" => "Mar", "4月" => "Apr", "5月" => "May", "6月" => "Jun", "7月" => "Jul", "8月" => "Aug", "9月" => "Sep", "10月" => "Oct", ); foreach($transArray as $key => $value) { $date = str_replace("$key", $value, $date); } return $date; } add_filter('get_the_time','my_get_the_time'); |
ちょっと強引ですが、ループ処理で置換えています。
もっとスマートな方法があれば誰か教えて欲しいところですが、現状不具合等出ていないので暫くはこれで良いかなと思っています。
フルスペルで表示させたい場合等は$valueの値を”Nov”のような省略型から”November”など好きな表示に変えてください。
月表示の配列の順番が気になる方もいると思いますが、“11月”と”12月”は必ず最初に並べてください。
1月から順番に並べた時に起こる不具合について
この関数で行っている事は、受け取った値を順番に突き合わせして該当した場合に英語に置換えて表示しています。その為、1月から順番に並べた場合”1月”や”2月”に該当する部分が先に置き換えられてしまうので、
“11月” は ”1Jan” に
“12月” は ”1Feb” に
それぞれ変換されてしまいます。
その他の方法（Cocoon以外の汎用的な例）
投稿日を英語で表記する方法は
でも書きましたが、フィルターフックを使って functions.php に次のコードを追加します。
|
1 2 3 4 5 6 7 8 |
/*投稿日を英語で表示*/ add_filter( 'the_time','my_date_format'); //テーマによっては↓を採用 //add_filter( 'get_the_date','my_date_format'); function my_date_format(){ $my_date_format = get_post_time(get_option( 'date_format' )); return $my_date_format; } |
get_post_time()は日付をローカライズせずに値を返してくれます。
Cocoonの場合、インデックスページ等の一覧ページに表示されるエントリーカードの投稿日は英語に変わるものの、個別の投稿ページや固定ページの投稿日は変わりませんでした。
get_the_time() のフィルターフックでも試してみたところ、投稿日はどちらも英語で表示できましたが、独自関数 get_the_date_tags() の影響なのか更新日が表示されなくなってしまう為、先に紹介した方法に落ち着きました。
使用するフィルターフックについてはテーマ側でどの日付関連のテンプレートタグを使っているかで変わってくると思いますが、ここで紹介した方法はどちらも他のテーマでも応用できるのではないかなと思います。
更新日を英語に
Cocoonの更新日の表示について
Cocoonの場合、日付形式の設定変更だけで更新日の表示が英語表記に変わりました。
その為、更新日については何もすることはありませんが、今後のWordPressやCocoonのバージョンアップによって仕様が変わる可能性が無いわけではありません。
その他の方法（Cocoon以外の汎用的な例）
フィルターフックを使って functions.php に次のコードを追加します。
|
1 2 3 4 5 6 |
/*更新日を英語で表示*/ add_filter( 'get_the_modified_time','my_mdate_format'); function my_mdate_format(){ $my_mdate_format = get_post_modified_time(get_option( 'date_format' )); return "$my_mdate_format"; } |
get_post_modified_time()は日付をローカライズせずに値を返してくれます。
コメントの日付を英語に
Cocoonデフォルトウィジェットの「[C] 最近のコメント」を使用している場合、ここにもコメントした日付が表示されます。また各個別投稿ページに表示されるコメントにも日付や時間が表示されているので、ここも英語表記に変えていきたいと思います。
コメントの日付を取得する関数について
まずはじめに、コメントの日付を表示する comment_date() テンプレートタグとその中で使われているフィルターフック get_comment_date() の中身を確認してみたいと思います。
|
550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 |
function get_comment_date( $d = '', $comment_ID = 0 ) { $comment = get_comment( $comment_ID ); if ( '' == $d ) { $date = mysql2date( get_option( 'date_format' ), $comment->comment_date ); } else { $date = mysql2date( $d, $comment->comment_date ); } /** * Filters the returned comment date. * * @since 1.5.0 * * @param string|int $date Formatted date string or Unix timestamp. * @param string $d The format of the date. * @param WP_Comment $comment The comment object. */ return apply_filters( 'get_comment_date', $date, $d, $comment ); } /** * Display the comment date of the current comment. * * @since 0.71 * @since 4.4.0 Added the ability for `$comment_ID` to also accept a WP_Comment object. * * @param string $d Optional. The format of the date. Default user's settings. * @param int|WP_Comment $comment_ID WP_Comment or ID of the comment for which to print the date. * Default current comment. */ function comment_date( $d = '', $comment_ID = 0 ) { echo get_comment_date( $d, $comment_ID ); } |
この get_comment_date() 関数内で使われている mysql2date() 関数が曲者で、パラメータ $translate に false を指定していない場合データベースから受け取った値をローカライズして返します。
また、この mysql2date() 関数はWordPressのフィルターフックではない為、get_comment_date() のフィルターフックを使って取得した日付を強引に変換する必要があります。
ソースコード
やり方は「投稿日を英語に」で紹介した方法と同じです。
functions.php に以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function my_comment_date($date){ $transArray = array( "11月" => "Nov", "12月" => "Dec", "1月" => "Jan", "2月" => "Feb", "3月" => "Mar", "4月" => "Apr", "5月" => "May", "6月" => "Jun", "7月" => "Jul", "8月" => "Aug", "9月" => "Sep", "10月" => "Oct", ); foreach($transArray as $key => $value) { $date = str_replace("$key", $value, $date); } return $date; } add_filter('get_comment_date', 'my_comment_date'); |
コメント時間も英語に
各個別投稿ページに表示されるコメントには時間も表示されますが、24時間表記にしていない場合「午前」や「午後」と表示されてしまうので、これを「AM」や「PM」に変えます。
同じように、functions.php に以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 |
function my_comment_time($date){ $transArray = array( "午前" => "AM", "午後" => "PM", ); foreach($transArray as $key => $value) { $date = str_replace("$key", $value, $date); } return $date; } add_filter('get_comment_time', 'my_comment_time'); |
アーカイブウィジェットを英語に
このサイトではCocoon開発者わいひらさんのブログ
の記事を参考に折り畳み式のアーカイブウィジェットを作成し、そのコードをアレンジして英語で表示しています。
動作については、このサイトのサイドバーにある「MONTHLY ARCHIVES」（アーカイブウィジェット）でご確認ください。
主な手順
参考記事に習い以下の手順で進めます。
- style.cssにCSSを記述（コピペでＯＫ！）
- javascript.jsにjQueryコードを記述（コピペでＯＫ！）
style.cssに記述（コピペ）するCSSについて
style.css に以下のコードを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/************************************ ** 折り畳みアーカイブウィジェット ************************************/ .widget_archive a.year{ cursor: pointer; } .widget_archive .years ul { -webkit-transition: .3s ease; transition: transform .3s ease; margin: 0; margin-bottom: 1em; } /*アーカイブウィジェットとカテゴリウィジェットの共通スタイル*/ #sidebar .widget_archive ul.years li,#sidebar .widget_categories ul li { margin-bottom: 0; line-height:1.5em; padding-left:12px; } |
ここで注目して欲しいのは、参考記事では非表示させる為に
.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に以下のコードを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
///////////////////////////////// // 折り畳み式アーカイブウィジェット ///////////////////////////////// (function($) { $(function() { var wgts = $(".widget_archive");//アーカイブウィジェット全てを取得 //アーカイブウィジェットを1つずつ処理する wgts.each(function(i, el) { var wgt = $(el); //日付表示＋投稿数か var has_date_count = wgt.text().match(/\d+年\d+月\d+/); //日付表示だけか var has_date_only = wgt.text().match(/\d+年\d+月/) && !has_date_count; //日付表示されているとき（ドロップダウン表示でない時） if ( has_date_count || has_date_only ) { var clone = wgt.clone(),//アーカイブウィジェットの複製を作成 year = []; //クローンはウィジェットが後にに挿入。クローンはcssで非表示 wgt.after(clone); clone.attr("class", "archive_clone").addClass('hide'); var acv = wgt, //ウィジェット acvLi = acv.find("li"); //ウィジェット内のli全て //ul.yearsをアーカイブウィジェット直下に追加してそのDOMを取得 var acv_years = acv.append('<ul class="years"></ul>').find("ul.years"); //liのテキストから年がどこからあるかを調べる acvLi.each(function(i) { var reg = /(\d+)年(\d+)月/; //日付表示＋投稿数か if ( has_date_count ) { reg = /(\d+)年(\d+)月(\d+)/; } var dt = $(this).text().match(reg); year.push(dt[1]); }); $.unique(year); //重複削除 acvLi.unwrap(); //liの親のulを解除 //投稿年があるだけ中にブロックを作る var yearCount = year.length, monthCount = 0, ii = 0; while (ii < yearCount) { acvLi.each(function() { if ( has_date_count ) { reg = /(\d+)年(\d+)月(\d+)/; } var dt = $(this).text().match(reg); //月の追加 if (year[ii] === dt[1]) { monthCount = monthCount + Number(dt[3]); } }); acv_years.append('<li class="year_' + year[ii] + '"><a class="year">for ' + year[ii] + " (" + monthCount + ')</a><ul class="month"></ul></li>'); monthCount = 0; ii++; } //作ったブロック内のulに内容を整形して移動 //オリジナルのクローンは順番に削除 var j = 0; acvLi.each(function(i, el) { var reg = /(\d+)年(\d+)月/; //日付表示＋投稿数か if ( has_date_count ) { reg = /(\d+)年(\d+)月(\d+)/; } var dt = $(this).text().match(reg), href = $(this).find("a").attr("href"), month = { "1":"January", "2":"February", "3":"March", "4":"April", "5":"May", "6":"June", "7":"July", "8":"August", "9":"September", "10":"October", "11":"November", "12":"December", }; //月の追加 var rTxt = '<li><a href="' + href + '">' + "" + month[dt[2]]; //日付表示＋投稿数か if ( has_date_count ) { rTxt += ' <span class="post-count">(' + dt[3] + ")</span>" + '</a></li><a href="' + href + '">'; //投稿数の追加 } rTxt += "</a>"; //作成した月のHTMLを追加、不要なものは削除 if (year[j] === dt[1]) { acv_years.find(".year_" + year[j] + " ul").append(rTxt); $(this).remove(); } else { j++; acv_years.find(".year_" + year[j] + " ul").append(rTxt); $(this).remove(); } }); //クローン要素を削除 clone.remove(); //直近の年の最初以外は非表示 acv.find("ul.years ul:not(:first)").css("display","none"); //年をクリックでトグルshow acv.find("a.year").on("click", function() { $(this).next().toggle(300); }); }//if has_date_count || has_date_only });//wgts.each }); })(jQuery); |
内容としては、取得したアーカイブウィジェトのHTMLソースから ○年○月記事数 となっている部分の数字だけを取り出し、必要な処理を加えてHTMLソースを整形し直ています。
63行目は年の部分の整形後のHTMLソースでブラウザ上では
for 2020 (1)
のように表示されます。
94~100行目は月の部分の整形後のHTMLソースでブラウザ上では
July (1)
のように表示されます。
116行目はクラスを付加せずに、インラインでCSSスタイルを追加しています。
//直近の年の最初以外は非表示
acv.find("ul.years ul:not(:first)").css("display","none");これにclickアクションのアニメーションとCSSによるスタイルを適用して表示しています。
アーカイブページのタイトルを英語に
アーカイブページのタイトルについては、テーマ側でフォーマットを固定してしまっている為、簡単に変更ができません。
そこで、アーカイブタイトルを取得する関数を丸ごと functions.php に記述し、フォーマットを直接編集します。
ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
/*アーカイブタイトル英語化（アーカイブタイトルの取得を上書き）*/ if ( !function_exists( 'get_archive_chapter_title' ) ): function get_archive_chapter_title(){ $chapter_title = null; if( is_category() ) {//カテゴリページの場合 $cat_id = get_query_var('cat'); $icon_font = '<span class="fa fa-folder-open" aria-hidden="true"></span>'; if ($cat_id && get_the_category_title($cat_id)) { $chapter_title .= $icon_font.get_the_category_title($cat_id); } else { $chapter_title .= single_cat_title( $icon_font, false ); } } elseif( is_tag() ) {//タグページの場合 $tag_id = get_query_var('tag_id'); $icon_font = '<span class="fa fa-tags" aria-hidden="true"></span>'; if ($tag_id && get_the_tag_title($tag_id)) { $chapter_title .= $icon_font.get_the_tag_title($tag_id); } else { $chapter_title .= single_tag_title( $icon_font, false ); } } elseif( is_tax() ) {//タクソノミページの場合 $chapter_title .= single_term_title( '', false ); } elseif( is_search() ) {//検索結果 $search_query = trim(strip_tags(get_search_query())); if (empty($search_query)) { $search_query = __( 'キーワード指定なし', THEME_NAME ); } $chapter_title .= '<span class="fa fa-search" aria-hidden="true"></span>"'.$search_query.'"'; } elseif (is_day()) { //年月日のフォーマットを取得 $chapter_title .= '<span class="fa fa-calendar" aria-hidden="true"></span>'.get_post_time('F jS, Y');//フォーマット変更（Fはフルスペル英語表記） } elseif (is_month()) { //年と月のフォーマットを取得 $chapter_title .= '<span class="fa fa-calendar" aria-hidden="true"></span>'.get_post_time('F Y');//フォーマット変更（Fはフルスペル英語表記） } elseif (is_year()) { //年のフォーマットを取得 $chapter_title .= '<span class="fa fa-calendar" aria-hidden="true"></span>'.get_the_time('Y'); } elseif (is_author()) {//著書ページの場合 $chapter_title .= '<span class="fa fa-user" aria-hidden="true"></span>'.esc_html(get_queried_object()->display_name); } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { $chapter_title .= 'Archives'; } else { $chapter_title .= 'Archives'; } return apply_filters('get_archive_chapter_title', $chapter_title); } endif; |
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 に記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
//ブログカードの日付英語化（内部URLからブログカードタグの取得を上書き） if ( !function_exists( 'url_to_internal_blogcard_tag' ) ): function url_to_internal_blogcard_tag($url){ if ( !$url ) return; $url = strip_tags($url);//URL $id = url_to_postid( $url );//IDを取得（URLから投稿ID変換） //内部ブログカード作成可能なURLかどうか if ( !is_internal_blogcard_url($url) ) return; //_v($url); $no_image = get_no_image_160x90_url(); if (!$no_image) { $no_image = get_site_screenshot_url($url); } $thumbnail = null; $date_tag = null; //投稿・固定ページの場合 if ($id) { //global $post; $post_data = get_post($id); setup_postdata($post_data); wp_reset_query(); $title = $post_data->post_title;//タイトルの取得 //メタディスクリプションの取得 $snippet = get_the_page_meta_description($id); //投稿管理画面の抜粋を取得 if (!$snippet) { $snippet = $post_data->post_excerpt; } //All in One SEO Packのメタディスクリプションを取得 if (!$snippet) { $snippet = get_the_all_in_one_seo_pack_meta_description($id); } //記事本文の抜粋文を取得 if (!$snippet) { $snippet = get_content_excerpt($post_data->post_content, get_entry_card_excerpt_max_length()); } $snippet = preg_replace('/\n/', '', $snippet); //日付表示 $date = null; $post_date = mysql2date(get_site_date_format(), $post_data->post_date,false);//falseで翻訳無効に switch (get_internal_blogcard_date_type()) { case 'post_date': $date = $post_date; break; case 'up_date': $date = mysql2date(get_site_date_format(), $post_data->post_modified,false);//falseで翻訳無効に if (!$date) { $date = $post_date; } break; } if (is_internal_blogcard_date_visible()) { $date = '<div class="blogcard-post-date internal-blogcard-post-date">'.$date.'</div>';//日付の取得 $date_tag = '<div class="blogcard-date internal-blogcard-date">'.$date.'</div>'; } //サムネイルの取得（要160×90のサムネイル設定） $thumbnail = get_the_post_thumbnail($id, get_internal_blogcard_thumbnail_size(), array('class' => 'blogcard-thumb-image internal-blogcard-thumb-image', 'alt' => '')); } elseif (is_home_url($url)){ //トップページの場合 $title = get_front_page_title_caption(); $snippet = get_front_page_meta_description(); $image = get_ogp_home_image_url(); if (!empty($image)) { $thumbnail = get_blogcard_thumbnail_image_tag($image); } } elseif ($cat = get_category_by_path($url, false)){ //カテゴリページの場合 $cat_id = $cat->cat_ID; $title = get_the_category_title($cat_id); $snippet = get_the_category_snippet($cat_id); $image = get_the_category_eye_catch_url($cat_id); if ($image) { $thumbnail = get_blogcard_thumbnail_image_tag($image); } } elseif ($tag = url_to_tag_object($url)) { $tag_id = $tag->term_id; $title = get_the_tag_title($tag_id); $snippet = get_the_tag_snippet($tag_id); $image = get_the_tag_eye_catch_url($tag_id); if ($image) { $thumbnail = get_blogcard_thumbnail_image_tag($image); } } //タイトルのフック $title = apply_filters('cocoon_blogcard_title',$title); $title = apply_filters('cocoon_internal_blogcard_title',$title); //スニペットのフック $snippet = apply_filters( 'cocoon_blogcard_snippet', $snippet ); $snippet = apply_filters( 'cocoon_internal_blogcard_snippet', $snippet ); //サムネイルが存在しない場合 if ( !$thumbnail ) { $thumbnail = get_blogcard_thumbnail_image_tag($no_image); } //ブログカードのサムネイルを右側に $additional_class = get_additional_internal_blogcard_classes(); //新しいタブで開く場合 $target = is_internal_blogcard_target_blank() ? ' target="_blank" rel="noopener"' : ''; //ファビコン $favicon_tag = '<div class="blogcard-favicon internal-blogcard-favicon">'. '<img src="//www.google.com/s2/favicons?domain='.get_the_site_domain().'" class="blogcard-favicon-image internal-blogcard-favicon-image" alt="" width="16" height="16">'. '</div>'; //サイトロゴ $domain = get_domain_name(punycode_decode($url)); $site_logo_tag = '<div class="blogcard-domain internal-blogcard-domain">'.$domain.'</div>'; $site_logo_tag = '<div class="blogcard-site internal-blogcard-site">'.$favicon_tag.$site_logo_tag.'</div>'; //取得した情報からブログカードのHTMLタグを作成 //_v($url); $tag = '<a href="'.$url.'" title="'.esc_attr($title).'" class="blogcard-wrap internal-blogcard-wrap a-wrap cf" '.$target.'="">'. '<div class="blogcard internal-blogcard'.$additional_class.' cf">'. '<div class="blogcard-label internal-blogcard-label">'. '<span class="fa"></span>'. '</div>'. '<figure class="blogcard-thumbnail internal-blogcard-thumbnail">'.$thumbnail.'</figure>'. '<div class="blogcard-content internal-blogcard-content">'. '<div class="blogcard-title internal-blogcard-title">'.$title.'</div>'. '<div class="blogcard-snippet internal-blogcard-snippet">'.$snippet.'</div>'. '</div>'. '<div class="blogcard-footer internal-blogcard-footer cf">'. $site_logo_tag.$date_tag. '</div>'. '</div>'. '</a>'; return $tag; } |
ここでも、内部URLからブログカードを取得する関数 url_to_internal_blogcard_tag() を丸ごと functions.php に記述し、ここに書いた内容を優先的に実行させます。
46行目と52行目で使われているmysql2date()でパラメータ$translateにfalseを指定し翻訳を無効にします。
まとめ
しばらく新規記事の投稿をしておりませんでしたが、ありがたい事に
の記事にはちょこちょこと新規のユーザーさんのアクセスもある事から、日本語環境でも日付だけ英語で表示させたい方が少なからずいるんだなと思い、今回Cocoonで日付を英語で表記する方法についてまとめました。
最後にCocoonで日付を英語にするためのコードをまとめます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 |
/*記事投稿日の英語表記*/ function my_get_the_time($date){ $transArray = array( "11月" => "Nov", "12月" => "Dec", "1月" => "Jan", "2月" => "Feb", "3月" => "Mar", "4月" => "Apr", "5月" => "May", "6月" => "Jun", "7月" => "Jul", "8月" => "Aug", "9月" => "Sep", "10月" => "Oct", ); foreach($transArray as $key => $value) { $date = str_replace("$key", $value, $date); } return $date; } add_filter('get_the_time','my_get_the_time'); /*コメント投稿日の英語表記*/ function my_comment_date($date){ $transArray = array( "11月" => "Nov", "12月" => "Dec", "1月" => "Jan", "2月" => "Feb", "3月" => "Mar", "4月" => "Apr", "5月" => "May", "6月" => "Jun", "7月" => "Jul", "8月" => "Aug", "9月" => "Sep", "10月" => "Oct", ); foreach($transArray as $key => $value) { $date = str_replace("$key", $value, $date); } return $date; } add_filter('get_comment_date', 'my_comment_date'); /*コメント投稿時間の英語表記*/ function my_comment_time($date){ $transArray = array( "午前" => "AM", "午後" => "PM", ); foreach($transArray as $key => $value) { $date = str_replace("$key", $value, $date); } return $date; } add_filter('get_comment_time', 'my_comment_time'); /*アーカイブタイトル英語化（アーカイブタイトルの取得を上書き）*/ if ( !function_exists( 'get_archive_chapter_title' ) ): function get_archive_chapter_title(){ $chapter_title = null; if( is_category() ) {//カテゴリページの場合 $cat_id = get_query_var('cat'); $icon_font = '<span class="fa fa-folder-open" aria-hidden="true"></span>'; if ($cat_id && get_the_category_title($cat_id)) { $chapter_title .= $icon_font.get_the_category_title($cat_id); } else { $chapter_title .= single_cat_title( $icon_font, false ); } } elseif( is_tag() ) {//タグページの場合 $tag_id = get_query_var('tag_id'); $icon_font = '<span class="fa fa-tags" aria-hidden="true"></span>'; if ($tag_id && get_the_tag_title($tag_id)) { $chapter_title .= $icon_font.get_the_tag_title($tag_id); } else { $chapter_title .= single_tag_title( $icon_font, false ); } } elseif( is_tax() ) {//タクソノミページの場合 $chapter_title .= single_term_title( '', false ); } elseif( is_search() ) {//検索結果 $search_query = trim(strip_tags(get_search_query())); if (empty($search_query)) { $search_query = __( 'キーワード指定なし', THEME_NAME ); } $chapter_title .= '<span class="fa fa-search" aria-hidden="true"></span>"'.$search_query.'"'; } elseif (is_day()) { //年月日のフォーマットを取得 $chapter_title .= '<span class="fa fa-calendar" aria-hidden="true"></span>'.get_post_time('F jS, Y');//フォーマット変更（Fはフルスペル英語表記） } elseif (is_month()) { //年と月のフォーマットを取得 $chapter_title .= '<span class="fa fa-calendar" aria-hidden="true"></span>'.get_post_time('F Y');//フォーマット変更（Fはフルスペル英語表記） } elseif (is_year()) { //年のフォーマットを取得 $chapter_title .= '<span class="fa fa-calendar" aria-hidden="true"></span>'.get_the_time('Y'); } elseif (is_author()) {//著書ページの場合 $chapter_title .= '<span class="fa fa-user" aria-hidden="true"></span>'.esc_html(get_queried_object()->display_name); } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { $chapter_title .= 'Archives'; } else { $chapter_title .= 'Archives'; } return apply_filters('get_archive_chapter_title', $chapter_title); } endif; /*ブログカードの日付英語化（内部URLからブログをカードタグの取得を上書き）*/ if ( !function_exists( 'url_to_internal_blogcard_tag' ) ): function url_to_internal_blogcard_tag($url){ if ( !$url ) return; $url = strip_tags($url);//URL $id = url_to_postid( $url );//IDを取得（URLから投稿ID変換） //内部ブログカード作成可能なURLかどうか if ( !is_internal_blogcard_url($url) ) return; //_v($url); $no_image = get_no_image_160x90_url(); if (!$no_image) { $no_image = get_site_screenshot_url($url); } $thumbnail = null; $date_tag = null; //投稿・固定ページの場合 if ($id) { //global $post; $post_data = get_post($id); setup_postdata($post_data); wp_reset_query(); $title = $post_data->post_title;//タイトルの取得 //メタディスクリプションの取得 $snippet = get_the_page_meta_description($id); //投稿管理画面の抜粋を取得 if (!$snippet) { $snippet = $post_data->post_excerpt; } //All in One SEO Packのメタディスクリプションを取得 if (!$snippet) { $snippet = get_the_all_in_one_seo_pack_meta_description($id); } //記事本文の抜粋文を取得 if (!$snippet) { $snippet = get_content_excerpt($post_data->post_content, get_entry_card_excerpt_max_length()); } $snippet = preg_replace('/\n/', '', $snippet); //日付表示 $date = null; $post_date = mysql2date(get_site_date_format(), $post_data->post_date,false);//falseで翻訳無効に switch (get_internal_blogcard_date_type()) { case 'post_date': $date = $post_date; break; case 'up_date': $date = mysql2date(get_site_date_format(), $post_data->post_modified,false);//falseで翻訳無効に if (!$date) { $date = $post_date; } break; } if (is_internal_blogcard_date_visible()) { $date = '<div class="blogcard-post-date internal-blogcard-post-date">'.$date.'</div>';//日付の取得 $date_tag = '<div class="blogcard-date internal-blogcard-date">'.$date.'</div>'; } //サムネイルの取得（要160×90のサムネイル設定） $thumbnail = get_the_post_thumbnail($id, get_internal_blogcard_thumbnail_size(), array('class' => 'blogcard-thumb-image internal-blogcard-thumb-image', 'alt' => '')); } elseif (is_home_url($url)){ //トップページの場合 $title = get_front_page_title_caption(); $snippet = get_front_page_meta_description(); $image = get_ogp_home_image_url(); if (!empty($image)) { $thumbnail = get_blogcard_thumbnail_image_tag($image); } } elseif ($cat = get_category_by_path($url, false)){ //カテゴリページの場合 $cat_id = $cat->cat_ID; $title = get_the_category_title($cat_id); $snippet = get_the_category_snippet($cat_id); $image = get_the_category_eye_catch_url($cat_id); if ($image) { $thumbnail = get_blogcard_thumbnail_image_tag($image); } } elseif ($tag = url_to_tag_object($url)) { $tag_id = $tag->term_id; $title = get_the_tag_title($tag_id); $snippet = get_the_tag_snippet($tag_id); $image = get_the_tag_eye_catch_url($tag_id); if ($image) { $thumbnail = get_blogcard_thumbnail_image_tag($image); } } //タイトルのフック $title = apply_filters('cocoon_blogcard_title',$title); $title = apply_filters('cocoon_internal_blogcard_title',$title); //スニペットのフック $snippet = apply_filters( 'cocoon_blogcard_snippet', $snippet ); $snippet = apply_filters( 'cocoon_internal_blogcard_snippet', $snippet ); //サムネイルが存在しない場合 if ( !$thumbnail ) { $thumbnail = get_blogcard_thumbnail_image_tag($no_image); } //ブログカードのサムネイルを右側に $additional_class = get_additional_internal_blogcard_classes(); //新しいタブで開く場合 $target = is_internal_blogcard_target_blank() ? ' target="_blank" rel="noopener"' : ''; //ファビコン $favicon_tag = '<div class="blogcard-favicon internal-blogcard-favicon">'. '<img src="//www.google.com/s2/favicons?domain='.get_the_site_domain().'" class="blogcard-favicon-image internal-blogcard-favicon-image" alt="" width="16" height="16">'. '</div>'; //サイトロゴ $domain = get_domain_name(punycode_decode($url)); $site_logo_tag = '<div class="blogcard-domain internal-blogcard-domain">'.$domain.'</div>'; $site_logo_tag = '<div class="blogcard-site internal-blogcard-site">'.$favicon_tag.$site_logo_tag.'</div>'; //取得した情報からブログカードのHTMLタグを作成 //_v($url); $tag = '<a href="'.$url.'" title="'.esc_attr($title).'" class="blogcard-wrap internal-blogcard-wrap a-wrap cf" '.$target.'="">'. '<div class="blogcard internal-blogcard'.$additional_class.' cf">'. '<div class="blogcard-label internal-blogcard-label">'. '<span class="fa"></span>'. '</div>'. '<figure class="blogcard-thumbnail internal-blogcard-thumbnail">'.$thumbnail.'</figure>'. '<div class="blogcard-content internal-blogcard-content">'. '<div class="blogcard-title internal-blogcard-title">'.$title.'</div>'. '<div class="blogcard-snippet internal-blogcard-snippet">'.$snippet.'</div>'. '</div>'. '<div class="blogcard-footer internal-blogcard-footer cf">'. $site_logo_tag.$date_tag. '</div>'. '</div>'. '</a>'; return $tag; } endif; |
アーカーブウィジェットについてはCSSとjQueryで実装しているので「アーカイブウィジェットを英語に」を参照してください。
今回の内容についてはCocoonのカスタマイズとして書いていますので、他のテーマではそのままでは動作しない可能性があります。他のテーマで応用する場合はテーマ内で使われている関数等よく理解した上で、ご自身の責任のもと行ってください。
COMMENT ▼コメントはこちら▼