LION BLOGでブログ記事の更新日を表示するカスタマイズ

多機能かつオシャレなデザインで人気の無料WordPressテーマLION BLOG。

残念ながら、LION BLOGでは、記事の『最終更新日』が表示されません。

↑このように、記事の投稿日だけが表示されています。

最終更新日が表示されていないと、せっかく古い記事に最新情報を追加しても、それが閲覧者に伝わりませんよね。

私たちも、投稿日を見て『この記事の情報は古い』と判断して、さっさとブラウザの戻るボタンを押すことがあります。

ユーザー目線から見ると、記事に最終更新日を表示しないのは非常にもったいないことです。

ということで、この記事では、LION BLOGで記事の最終更新日を表示するためのカスタマイズ方法を紹介したいと思います。

なお、今回のカスタマイズでは、以下の『LION MEDIA』用カスタマイズ記事を参考にさせていただきました。

参考 LION MEDIAをカスタマイズしてWordPressブログの更新日時を表示させるMutakkoのブログ

『LION BLOG』と『LION MEDIA』は、どちらもfit社が配布している無料WordPressテーマ。

この2つのテーマは、基本的な機能が同じです。

そのため、LION MEDIAのカスタマイズ方法が、LION BLOGにも応用できることが多いです。

前置きが長くなりましたが、以下、LION BLOGに記事の最終更新日を表示させる具体的な方法です。

LION BLOGで記事の更新日を表示させるカスタマイズ手順
カレンダーアイコンを差し替える方法
カレンダーアイコンの追加が面倒な方へ

LION BLOGで記事の更新日を表示させるカスタマイズ手順

作業としては、親テーマのsingle.phpにコードを3行追加するだけです。

注意

テーマのphpファイルを編集しますので、作業前に必ずバックアップを取ってください。

更新日を表示させるカスタマイズ手順1

まずは、以下の手順でLION BLOGの親テーマのsingle.phpの内容（コード）を表示します。

WordPress管理画面の「外観」－「テーマ編集」を開く
「編集するテーマを選択」からLION BLOGを選択（LION BLOG Childではありません）
「テーマファイル」リストからsingle.phpをクリック

これで、画面にsingle.phpの内容（コード）が表示されたかと思います。

更新日を表示させるカスタマイズ手順2

次に、single.phpの49行目から始まる以下の記述を見つけます。

コード

<!-- heading-dateList -->
<h1 class="heading heading-primary"><?php the_title(); ?></h1><ul class="dateList dateList-single">
<?php if (get_option('fit_post_time') != 'value2' ) : ?><li class="dateList__item icon-calendar"><?php the_time('Y.m.d'); ?></li><?php endif; ?>
<li class="dateList__item icon-folder"><?php the_category(' ');?></li>
<?php if(has_tag() == true) : ?><li class="dateList__item icon-tag"><?php the_tags(''); ?></li><?php endif; ?>
</ul>

更新日を表示させるカスタマイズ手順3

次に、青字の記述の下に、以下のコードを追加します。

コード

<?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?>
<li class="dateList__item icon-calendar"><?php the_modified_date('Y.m.d') ?></li>
<?php endif; ?>

コード追加後の完成形は、以下のようになります。

コード

<!-- heading-dateList -->
<h1 class="heading heading-primary"><?php the_title(); ?></h1><ul class="dateList dateList-single">
<?php if (get_option('fit_post_time') != 'value2' ) : ?><li class="dateList__item icon-calendar"><?php the_time('Y.m.d'); ?></li><?php endif; ?>
<?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?>
<li class="dateList__item icon-calendar"><?php the_modified_date('Y.m.d') ?></li>
<?php endif; ?> 
<li class="dateList__item icon-folder"><?php the_category(' ');?></li>
<?php if(has_tag() == true) : ?><li class="dateList__item icon-tag"><?php the_tags(''); ?></li><?php endif; ?>
</ul>
<!-- /heading-dateList -->

更新日を表示させるカスタマイズ手順4

記述に間違いがないことを確認したら「ファイルを更新」ボタンを押します。

実際に記事を開くと、記事タイトル下の投稿日の右側に、もうひとつ日付が表示されているはずです。

↑『2018.07.16』が、この記事の最終更新日です。

しかし、このままだと投稿日・更新日とも同じ『カレンダー』アイコンなので、どっちがどっちなのかちょっと分かりにくいですね・・・。

カレンダーアイコンを差し替える方法

更新日の表示に使われている『カレンダー』アイコンを、別なアイコンに差し替えてカッコ良くカスタマイズする方法が、以下の記事で紹介されています。

参考 LION MEDIAのカスタマイズ・「IcoMoon」を編集してWebフォントを追加しようMutakkoのブログ

なお、私もこの方法でアイコンを差し替えてみましたが、私の環境のせいなのか、正しく作業をしても、すぐには新しいアイコンが表示されませんでした。

「正しく作業したのに『更新』アイコンが表示されない！」

という方は、そのまま数時間放置してみてください。

私の場合は、時間がたったら正しくアイコンが表示されるようになりました。

カレンダーアイコンの追加が面倒な方へ

でも、

『アイコンの追加って、なんか難しそうだな・・・』

『面倒だな・・・』

と思った方のために、もっと手っ取り早い方法を紹介します。

『更新』アイコンの追加が面倒な場合に手っ取り早い方法、それは、

カレンダーアイコンの横に、ズバリ『更新日:』と表示する方法です（笑）

先ほどsingle.phpに追加したコードに、以下のとおり『更新日:』と追加します。

コード

<?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?>
<li class="dateList__item icon-calendar">更新日:<?php the_modified_date('Y.m.d') ?></li>
<?php endif; ?>

そうすると、↓以下のようになります。