WordPressテーマ「MAG」に更新日を表示させる方法【PHPにコードを追記するだけ】

WordPress テーマ「MAG」って投稿日しか表示されないけど、更新日も表示するにはどうすればいいんだろう…

と悩んでいる人もいるでしょう。

そこで、この記事では下記の内容を解説します。

この記事で分かること

「MAG」に更新日を表示させる方法
記事を更新したときだけ更新日も一緒に表示させる方法
Font Awesome の記号も表示させる方法

WordPress テーマ「MAG」では後になって記事を更新しても、日付は投稿した日が表示されたままになってしまうんですよね。

これだと記事を新しくしたことが分からないので、ユーザーに更新された記事だということを伝えづらくなってしまいます。

そこで、WordPressテーマ「MAG」に更新日を表示させる方法を紹介しましょう。

「MAG」に更新日を表示させる方法【公式編】

実は、TCD の公式として「MAG」に更新日を表示させる方法が公開されています。

その方法をそのまま紹介しておくと、個別投稿（single.php）の 19 行辺りにこのような記述箇所があります。

single.php

?php if ($options['show_date']){ ?><p class="date"><time class="entry-date updated" datetime="<?php the_modified_time('c'); ?>"><?php the_time('Y.m.j'); ?></time></p><?php }; ?>

この部分を、このようにコードを追加します。

single.php

?php if ($options['show_date']){ ?><p class="date"><time class="entry-date updated" datetime="<?php the_modified_time('c'); ?>"><?php the_time('Y.m.j'); ?></time></p><?php }; ?><p class="date_update">最終更新日: <?php the_modified_date('Y.m.j'); ?></p>

分かりやすいように赤文字にしましたが、元々の記述に続けて更新日が表示されるコードを追加するだけです。

ただ、これだけだとデザインのバランスが悪くなるため、CSS も追加して整えます。

「追加 CSS」にはこちらを追記してください。

CSS

#post_meta_top .date { float: left; }
#post_meta_top .date_update { font-size: 12px; }
@media screen and (max-width: 770px) {
#post_meta_top .date { margin: 0 10% 0 0; }
#post_meta_top .date_update { font-size: 10px; } }

公式でこれだけ教えてくれているので十分と言えば十分ですが、これだと更新していない記事にも「2022.01.01 更新日：2022.01.01」のように表示されてしまいます。

参照：TCDテーマMAG：記事の最終更新日を表示する方法

そこで、投稿した日は投稿日だけ、更新したときには更新日が表示させるようにする方法を続けて紹介しておきます。

「MAG」に更新したときだけ更新日を表示させる方法

もう一度、元の個別投稿（single.php）の 19 行辺りを表示しておきましょう。

single.php

?php if ($options['show_date']){ ?><p class="date"><time class="entry-date updated" datetime="<?php the_modified_time('c'); ?>"><?php the_time('Y.m.j'); ?></time></p><?php }; ?>

そして、このように更新した時だけ表示するコードを追加します。

single.php

?php if ($options['show_date']){ ?><p class="date"><time class="entry-date updated" datetime="<?php the_modified_time('c'); ?>"><?php the_time('Y.m.j'); ?></time><span class="date_update"><?php if(get_the_time('U') !== get_the_modified_time('U')){the_modified_date('更新日：Y.m.j'); } ?></span></p><?php }; ?>

これで、更新したときだけ更新日が表示されるようになります。

もちろん、公式で教えてくれている CSS も追加してデザインを整える必要はあります。

更新日に Font Awesome の記号を使う場合

文字で「更新日」と表示させるのではなく、記号を表示させたい場合には Font Awesome を使うと簡単です。

すでに Font Awesome を使っている人なら上記に追加すればいいだけですが、もし初めて使うという人は呼び出すためのコードを追加する必要があります。

まずは Font Awesome を呼び出すための準備

Font Awesome の記号を記事で表示できるようにするには、テーマ自体にデータを保存するか、もしくはデータを呼び出せるようにする必要があります。

個人的には呼び出した方がラクだと思っているので、呼び出し方法だけを紹介しておきます。

Font Awesome にはバージョンがいくつかあるのですが、今回は Font Awesome 5 を使った呼び出し方法にします。

WordPress 管理画面のメニューから「TCDテーマオプション」を開き、「基本設定」の「カスタムスクリプト（タグ内に挿入されます）」に下記のコードを追記して保存します。

HTML

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

以上で準備は完了です。

「更新日」の文字を記号に変える

Font Awesome の準備が整ったら、先ほど記述したコードに少しだけ追加します。

single.php

?php if ($options['show_date']){ ?><p class="date"><time class="entry-date updated" datetime="<?php the_modified_time('c'); ?>"><?php the_time('Y.m.j'); ?></time><span class="date_update"><?php if(get_the_time('U') !== get_the_modified_time('U')){ echo '<i class="fas fa-sync-alt"></i> '; the_modified_date('Y.m.j'); } ?></span></p><?php }; ?>

先ほどのコードに「echo ‘<i class=”fas fa-sync-alt”></i> ‘;」を追加して、「更新日：」という文言を消しただけになります。

今回は例として「Refresh（<i class=”fas fa-sync-alt”></i>）」のマークを使っていますが、時計のマークなどを表示させたいときはこの部分を変更すれば OK です。

別のマークを使うときは、下記の URL で探してみてください。

https://fontawesome.com/v5/search?s=solid%2Cbrands