WordPressに最終更新日を表示させる方法

最近のテーマは最終更新日がデフォルトで表示されるようになってることが多いし、あんまり気にする必要ないかな？と思っていたのですが、全然そんなことなくてですね💦

やっぱり何かに迷ったとき日本語のほうが助かるので、どうしても日本の方が作成したテーマに偏って見ていて勝手に思い込んでいただけで、最新※投稿日現在のWordPress公式テーマ「Twenty Nineteen」ですら、更新日が表示されないことに気づいたのですよ!!
今更すぎるのに、大発見みたいな体で言っちゃってなんかすみませんw

それでよくよく確認してみたら、自分の使っているテーマ※投稿日現在は一応最終更新日が元から表示される仕様ではあるんだけど、SEO的には修正が必要なことに気づいてしまって、直してみたのでメモを残します。素人すぎて３時間もかかってしまった…。

更新日を表示させる上での注意点

テーマによって、修正する箇所やコードが微妙に変わってくるので、同じテーマを使っていない限り、まったく同じようにとはいきません。
投稿ページの日付関係のコードは「single.php」に書かれていることが多いらしいのですが(←ネット情報w)、今回私が修正した２つのテーマはどちらもsingle.phpにはコードが見つかりませんでした。

なので、私や他の人のやり方を参考にしながら、自分の使っているテーマに当て嵌めて、少しずつカスタマイズしていくのがいいと思います。(私もそうしました)

更新日表示の基本的なコード

<?php if (get_the_modified_date(‘Y/n/j’) != get_the_time(‘Y/n/j’)) : ?>
更新日：← 表示したい単語やアイコンを入れる。<time class="updated" datetime="<?php the_modified_date(”) ?>"><?php the_modified_date(”) ?></time>
<?php endif; ?>

記事の更新を検索エンジンにお知らせしつつ、(最終)更新日の表示をさせたい時に使う基本的なコードです。これを踏まえた上でこの記事を読んでいただくと、ご自身のテーマにも当て嵌めやすいと思います。

WordPress公式テーマ「Twenty Nineteen」の場合

次に予定している記事の説明用に使いたかったので修正を試みてみました。
自分の使用テーマで３時間も悪戦苦闘したせいか、 変更箇所はあっという間に見つかって、コードの修正も難なく終了したのですが、変更箇所が反映されないっていう事象にドはまりしてしまい、半日ぐらい無駄にしてしまいました…。この浪費が人柱となって誰かの助けになることがあるなら、少しは浮かばれます。俺の屍を超えてゆけっ！(´；ω；｀)ｳｯ…

日付を表示させているphpファイルを探す

「Twenty Nineteen」の場合は「template-tags.php」というファイルの中にありました。

「template-tags.php」の中を見てみると、

if ( ! function_exists( 'twentynineteen_posted_on' ) ) :
	/**
	 * Prints HTML with meta information for the current post-date/time.
	 */
	function twentynineteen_posted_on() {
		$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';
		if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
			$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
		}

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

		printf(
			'<span class="posted-on">%1$s<a href="%2$s" rel="bookmark">%3$s</a></span>',
			twentynineteen_get_icon_svg( 'watch', 16 ),
			esc_url( get_permalink() ),
			$time_string
		);
	}
endif;

という部分があって、あれ？ちゃんと更新日の記述があるな？となるわけなんですが、(つまりbotにとっては親切だけど、訪問者さんにとっては不親切な作り)

子テーマのCSSを書き足す

親テーマのCSSのほうに、

.updated:not(.published) {
  display: none;
}

というコードがあって、表示されないようになっていました。
削除してしまえば表示されるようになるのですが、親テーマのCSSを削除してもアップデートがあった時に更新すると元に戻ってしまいます。

そのため子テーマのCSSに、

.updated:not(.published) {
  display: inline;
}

この３行を書き加えます。

そうすると、こんな感じで更新日が表示されるようになります。

子テーマの作り方はこちら
WordPressの子テーマを簡単に作れるプラグイン「子テーマメーカー」
WordPressに少し慣れたら、デフォルト機能のカスタマイズ(「外観」→「カスタマイズ」)だけでなく、もっと自分で色…

incフォルダの中の子テーマファイルが反映されない

そしてここが私がドはまりした部分なのですが、やはりカスタマイズは親テーマではなく、子テーマでやりたいので「template-tags.php」を子テーマにコピーして、該当箇所を書き加えたんですね。階層もちゃんと親テーマに合わせてincフォルダ下にして。

なのに!!それなのに…!! 反映されない!!!!! 半日ほど迷走しまくり、心が折れかけながらやっと解決方法が見つかりました。気づけば単純だった…😭

反映されない原因は、親テーマのほうのfunctions.phpに
require get_template_directory() . ‘/inc/template-tags.php’;
という記述があって、親テーマのほうのphpファイルを読み込んでいたからでした。
子テーマのファイルを読み込んでくれない(＝親テーマのファイルを読み込んでいる)っていうのはわかるんだけど、そのコードがどこにあるのか全然見つけられなくて右往左往してしまいましたTT

じゃあどうすればいいのかっていうと、

子テーマの functions.php に記述する

$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">　更新日：%4$s</time>';

上記の「template-tags.php」のコードの17行目をこのように書き足した上で、10行目から35行目までまるっと子テーマの「functions.php」にコピーしました。
見栄え的にはアイコンを表示させたほうがバランスが取れると思うのですが、アイコンの導入をここでやってしまうと趣旨がずれてしまうので、今回は更新日の追加の仕方に終始します。

こんな感じですね。

やりました😭😭😭

WordPressテーマ「chocolate」の場合

投稿日現在私の使っているテーマです。「Twenty Nineteen」とはまた全然違うやり方だったので、こちらもメモに残します。

日付を表示させているphpファイルを探す

/* ----------------------------------------------
 * 5.2 - View Last updated 
 * --------------------------------------------*/

if ( ! function_exists( 'chocolat_last_update' ) ) :
function chocolat_last_update() {
	$options = chocolat_get_option();
	if ( ! empty( $options['show_last_date'] ) ) {
		if ( is_singular() &amp;&amp; ( get_the_modified_date() != get_the_date() ) ) {
			echo '<div class="last-update">'.__( 'Last updated', 'chocolat' ).' : '.get_the_modified_date().'</div>';
		}
	}
}
endif;

こちらのテーマの場合は「functions.php」にこのような記述があり、「content-single.php」に<?php chocolat_last_update(); ?>というコードで書き出していました。

子テーマの functions.php に記述する 

echo '<div class="last-update"><time class="last-update" datetime="'.get_the_modified_date(c).'">'.__( 'Last updated', 'chocolat' ).' : '.get_the_modified_date().'</time></div>';

上記の10行目の部分をこのように書き足し、1行目から(5行目からでもOK)14行目までまるっと子テーマの「functions.php」にコピーしました。

記事の見た目は変わらないのですが、それぞれのソースを見てみると、
※わかりやすくするため、編集しています。(実際は間にも色々コードが入っています)

上がデフォルトのままの表示で、下が修正したあとのものです。(クリックで拡大)
投稿日はtimeタグで囲まれているのですが、更新日は囲まれていません。それを更新日もタイムタグで囲むよう修正し、datetimeにも更新日を引っ張ってくるようにしました。
※divで囲んでいるのは、CSSで右寄せにするためです。

＊timeタグとは？

検索エンジンで検索した時に表示される日付がありますが、timeタグを付けることによって、検索エンジンのシステムのほうに「更新しましたよー」と伝えることができるらしいです。(→表示される日付を更新してもらえる)

自分の求めている情報がなかなか手に入らないときなど、期間を絞って検索したりすることもあると思うのですが、そのようなユーザーさんにせっかく記事を更新したのに反映されず、見逃されてしまったら悲しいですよね。
冒頭でSEOが～とか言ってみましたけど、私自身は全然SEO対策してません(笑)。記事の質を意識するのが一番のSEOだと思っているので、それ以外はなにも。ただ、せっかく頑張って書いた記事を更新しても、それを正しく検索エンジンに受け取ってもらえないのは嫌だなっていう思いから手を入れました。自己満足の世界です！

ちなみに、 .get_the_modified_date(c)の「c」っていうのは、どのように日付を表示させるかというのを指定する関数で、色々な種類があります。 日付と時刻の書式

「更新日を表示させる」ただそれだけのことなのに奥が深かった…！

私が今回奮闘するにあたって、一番参考になったサイトがこちら。
WordPressで最終更新日時を取得・表示する関数。SEOにも有効！

説明が単純明快ですごくわかりやすかったです。この記事のお陰で構成(？)がわかって、応用ができました。私もわかりやすい記事がかけるようになりたい…。

この記事をシェアしますか？

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トラックバック URL

https://posiactive.com/wordpress-last-updated/trackback/

PAGE TOP