（本サイトは、アフィリエイト広告を利用しています）

WordPressテーマCenoteで、投稿日と更新日を表示する方法。どこを変えたらいいの？？を解決！

2018年12月28日Webデザイン

WordPressで「更新日」を表示するモチベーション

色々なブログの記事を読んでいて、ブログの「更新日」って結構重要に思いませんか？

私もネットで情報を読んでいて、「こんなこと書いてあるけど、やってみたら情報が古くて今と状況が違うじゃないか…」と残念に思うこともしばしば。

進歩が激しい世の中、昨日のことはもう古い。そのくらい、情報の鮮度って重要になってきています。そんな想いで自分のブログを見てみると、はて？情報の鮮度をちゃんと読者に伝えているのか？と思い始めました。

 

少し調べてみたところ、WodPressで投稿日（公開日）と更新日を併記する方法を色々な方が紹介しています。

その中には、なぜ、更新日が重要か？といった理由付きで説明されている記事もあります。助かります。

 

【WordPress】公開日と最終更新日を表示する

 

 

変更箇所ってテーマ毎に違うよね？？

そうかー。じゃ、自分のブログWordPressもそれに習って、自分のブログも変更してみよう。そう考えるのは当たり前。

ところが、あれ、どこを変えるんだろう？？？あれ、あれ？？？ 自分のテーマは、PHPのどこのコードで「投稿日」表示してるの？？？

となってしまい、結局自分のテンプレートのPHPのソースコードとにらめっこすることになってしまいました。

 

WordPressテーマCenoteだとこうする！

私のブログは、この記事を執筆時点(2018年12月26日)では、「Cenote」というデザインテーマを使用しています。バージョンは、1.2.4です。デザインとしてはとてもシンプルです。私が気に入っているポイントは、トップページなどで、ブログ記事の一覧を出すときにタイリング表示してくれるところ。

そんなお気に入りCenoteのデザイン・テーマ。調べた結果、以下のように変更することで「更新日」を表示できるようになります。

ソースコードの変更箇所

表示をしている箇所は、template-parts/content-single.phpです。

ここで、

    cenote_posted_by();
    cenote_posted_on();

という記載がある箇所が、「投稿者名 — 日付」と表示している箇所でした。そして、このcenote_posted_on()があるのは、inc/template-tags.phpです。

中身を見ると、一応、更新日もHTMLをレンダリングしているようですが、class="updated"はCSSで非表示(display:none)にしています。なら、CSSを書き換えて、updatedの文字を表示させればいいじゃん！とも考えました。

でも、cenote_posted_on()で表示している箇所は他にもあります。

例えば、「関連する投稿」にリストアップされる記事の表示です。この部分まで「更新日」がいちいち表示されるようになるのは期待動作ではありません。あくまで、「更新日」を表示したいのは、投稿の記事のタイトルの周辺の表示だけでいいのです。

 

WordPressでCSSを扱いたい場合は、「追加CSS」という機能があるので、ソースコードをいじらなくても、追加でCSSを操作することができます。

そのやり方は、以下に詳細に記載していますので、そちらもご参照下さい。

CSS関連記事: WordPressで見出し文字のサイズや色を自在に変える。「追加CSS」を操ろう

 

変更後のソースコード

ということで、template-parts/content-single.phpを書き換えて、cenote_posted_on()を呼ばずに、独自にHTMLを吐き出すように修正しました。

その際に、cenote_posted_by()によって表示されていた、「投稿者」も消しました。私のブログ、私しか投稿しません。なのに、一々記事のヘッダに投稿者「shizuka.na.kazushi」が表示されるのはナンセンス。

と言う訳で、以下のように、オリジナルのcenote_posted_on()の別バージョン、その名もkaz_content_single_posted_on()をcontent-single.phpに追加しました。

<?php
/**
 * This is copied from: inc/template-tags.php
 * The original was cenote_posted_on()
 * This new version for posted on is only for single post page and
 * Prints HTML with meta information for the current post-date/time and modified date
 * The original version cenote_posted_on () prints modified date with CSS 'updated' class, however, it's not display as it's set as display:none.
 */
function kaz_content_single_posted_on() {
	$time_string = '<time class="entry-date published updated" datetime="%1$s">投稿日:&nbsp;%2$s</time>';
	if ( get_the_date() !== get_the_modified_date() ) {
		$time_string = '<time class="entry-date published" datetime="%1$s">投稿日:&nbsp;%2$s</time><time class="updated2" datetime="%3$s">&nbsp;/&nbsp;更新日：&nbsp;%4$s</time>';
	}

	$time_string = sprintf($time_string,
		esc_attr( get_the_date( 'c' ) ),
		esc_html( get_the_date() ),
		esc_attr( get_the_modified_date( 'c' ) ),
		esc_html( get_the_modified_date() )
	);

	$posted_on = sprintf('%s',
		'<a href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . $time_string . '</a>'
	);

	echo $posted_on; // WPCS: XSS OK.
}
?>

そして、先程のcontent-single.phpの２行、cenote_posted_by(); cenote_posted_on();を、

kaz_content_single_posted_on();

に書き換えれば完成です！

色々関数があっちにあったりこっちにあったりしましたが、ファイル１個の書き換えで済みました。

WordPressテーマCenoteでの「更新日」表示

オリジナルバージョンは以下のように、投稿者（cenote_posted_by()で表示）と、投稿日（cenote_posted_on()で表示)の２つでした。

で、私のバージョンは、まず、投稿者(shizuka.na.kazushi)の表示をやめました。

そして、「投稿日」ともし投稿時間と更新時間が異なる場合は、「更新日」も表示するようになりました。

 

それぽいです。

ちなみに、今まであった、投稿者と投稿日の間の線。これは、CSSで、「.entry-meta .posted-on::before {」のように記載があり、日付（class="posted-on")の手前の要素としてCSSで書かれていたのでした。なので、posted-onも一緒に外しています。

これで情報の鮮度をお伝えすることが出来るようにないましたー。

 

 

 

Cenote,CSS,WordPress,デザイン・テーマ

Posted by しずかなかずし