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

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

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

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

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

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

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

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

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

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

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

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

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

作業としては、

子テーマにsingle.phpをコピーしてコードを3行追加するだけ

です。

MEMO

まだ子テーマを入れていないという人は、まず以下の記事を読んで子テーマをインストールしてください。

LION BLOGの子テーマをインストールする方法・手順

1. 子テーマにsingle.phpをコピー

まずはftpソフトを利用するなどして、親テーマのファイルsingle.phpを子テーマにコピーします。

レンタルサーバによってはブラウザ上で使えるftpツールを用意をしている場合がありますので、それを利用しても良いでしょう。

（例えばロリポップなら「ロリポップ!FTP」など）

Windows用の無料ftpソフトならWinSCPがおススメです。

手順1

ftpソフトなどでWordPressがインストールされている場所を見るとこのような構成になっているはずです。

この中のwp-contentというフォルダを展開してください。

手順2

wp-contentsフォルダの中にあるthemesを開きます。

手順3

themesフォルダの中にあるlionblogというフォルダを開きます。このフォルダにLION BLOGのテーマファイルが格納されています。

 

手順4

lionblogフォルダの中にsingle.phpというファイルがあります。これが子テーマにコピーするファイルです。

 

手順5

ひとつ上の階層（themes）に戻ってその中のlionblog-childフォルダを見つけます。このフォルダにLION BLOGの子テーマファイルが格納されています。

先ほどのsingle.phpファイルをこのlionblog-childフォルダにコピーすれば作業完了です。

これで、画面に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>

先ほど見つけた青字部分の直下に、以下のコードを追加します。

<?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 -->

記述に間違いがないことを確認したら、画面の下のほうにある「ファイルを更新」ボタンをクリックします。

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

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

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

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

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

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

ブラウザのキャッシュやWordPressのキャッシュ系プラグインのキャッシュをクリアしてもダメな場合は、数時間放置してみてください。

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

カレンダーアイコンの追加が面倒な場合

「アイコンの追加ってなんか難しそうだな・・・」

「面倒だな・・・」

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

カレンダーアイコンの横にズバリ「更新日:」と表示してしまいますw

先ほど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; ?>

・・・あまり格好良くはありませんが、更新日だということはわかりますねw

以上、LION BLOGに記事の最終更新日を表示させるカスタマイズについてでした。

LION BLOGは文字が小さすぎ？テキストサイズをカスタマイズ