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で記事の更新日を表示させるカスタマイズ手順

作業としては、

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

です。

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

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

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

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

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

(例えばロリポップなら「ロリポップ!FTP」など)

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

参考 Windowsだけで使える!WinSCPの使い方【初心者向け】TECH ACADEMY magazine
手順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フォルダにコピーすれば作業完了です。

2. 子テーマのsingle.phpをカスタマイズ

次は、先ほど子テーマにコピーしたsingle.phpファイルをカスタマイズします。

注意
テーマのphpファイルを編集しますので、念のため作業前にWordPress全体のバックアップをオススメします。

(1) single.phpの内容を表示

まずは以下の手順でLION BLOG子テーマsingle.phpの内容(コード)を表示します。

  1. WordPress管理画面で「外観」-「テーマ編集」を開く
  2. 「編集するテーマを選択」からLION BLOG Childを選択(LION BLOGではありません
  3. 「テーマファイル」リストから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 -->

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

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

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

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

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

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

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

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

ブラウザのキャッシュや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は文字が小さすぎ?テキストサイズをカスタマイズ

2 COMMENTS

Anonymous

single.phpを子テーマにコピーして編集ではダメなんですか?

あと、名前とメールアドレスの入力が必須だとコメントし辛いですね…

返信する
えいさら

もちろん「single.phpを子テーマにコピーして編集」でもOKです!(別ブログで動作確認済)
ご指摘どうもありがとうございます。その点を記事に追記させていただきます。

名前・メールアドレス入力は、ブログ開設時にとりあえず「必須」に設定し、特に見直しもせずそのまま現在に至っておりました。
ご意見を踏まえて、試しに解除してみようかな…

返信する

コメントを残す

メールアドレスが公開されることはありません。