【WordPress】LION MEDIA(ライオン メディア)をカスタマイズして更新日時を表示させる方法

  • 2018年5月19日
  • 2018年9月24日
  • WordPress
  • 973view

ブログを更新していて、ふと気づいたのですが「LION   MEDIA」は投稿の更新日時が表示されないようです。

自分がネットで調べものをするときのことを考えると公開日時更新日時って結構気にするんですよね。「この記事は公開日時が古いから、情報が古いかも?」逆に「公開日時は古いけど、更新日時が新しいから情報も最新化されているのかな?」などと思うのは僕だけではないと思います。

サイト訪問者が、いつ時点の情報か目安にするうえで更新日時は重要だと思うので、「LION   MEDIA」をカスタマイズして更新日時を表示できるようにしました。

更新日時の表示個所

今回、新たに更新日時を表示できるようにカスタマイズした個所は以下の4か所です。

1.記事一覧ページのアイキャッチ下に表示している投稿日時の横

2.記事ページ上部に表示している投稿日時の横

3.記事ページ下部:「関連する記事一覧」に表示している投稿日時の横

4.サイドバーのランキングに表示している投稿日時の横

修正対象のPHPファイル

実際にPHPファイルの修正に取り掛かる前に、どのPHPファイルを修正するか特定する必要があります。

僕の場合、少々泥臭い方法ですが、まずGrep調査で投稿日時を表示をしている処理を洗い出し、その中から今回の変更対象に関わる処理を特定しました。

Grep方法

エックスサーバにSSH接続し、LION MDIAテーマのディレクトリまで移動します。

①TeraTermからエックスサーバにSSH接続

TeraTermからエックスサーバにSSH接続する方法はこちらを参考にしてください。

TeraTermでエックスサーバにSSH接続する手順

②Lion Mediaのテーマが置いてあるディレクトリまで移動

以下のコマンドを実行

cd  ワードプレスをインストールしたディレクトリ/wp-content/themes/lionmedia

③Grepで投稿日時を表示している処理を洗い出す

続いて以下のコマンドを実行

grep -rn “the_time” *

何故、”the_time”をキーワードにGrepするのか?

「LION  MEDIA」はWordPressに用意してあるthe_time()という関数を利用して公開日時を取得しているため、”the_time”をキーワードにGrepすることで、公開日時の表示箇所を洗い出しました。WordPressに触れてまもないのと「LION MEDIA」テーマしか利用したことがないので、他のテーマについては分かりませんが、おそらく他のテーマも「LION MEDIA」と同様、the_time()を利用して公開日時を表示していると思います。

※the_time()関数についてはコチラを参照

Grepコマンドを実行すると複数ファイルが結果に挙がってきますが、今回の修正対象ファイルは以下のファイルです。

  1. loop.php(記事一覧のアイキャッチ下の投稿日時)
  2. single.php(記事ページ上部、記事ページ下部の関連記事の投稿日時)
  3. functions.php(右サイドバー ランキングの投稿日時)

修正方法

テーマファイルはWordPressから編集できます。

外観>テーマの編集をクリックし、編集するテーマ(LION MEDIA)を選択します。続いて、修正ファイルを選択すれば編集が可能です。

念のため、修正前にバックアップを取得しておくことをオススメします。

loop.phpの修正方法

loop.phpには記事一覧の表示処理があります。次のとおり修正すれば記事一覧のアイキャッチ下に更新日時が表示されるようになります。

■修正前(24行目あたり)

■修正後

the_modified_dateとは?

the_modified_dateとはWordPressに用意してある、記事の更新日時を取得するための関数です。

※the_modified_date()関数についてはコチラを参照。

更新日時横に表示するアイコンに「icon-loop2」というアイコンを指定しますが、こちらはLION MEDIAのもとから用意されているアイコンではありません。

コチラの記事を参考にアイコンを追加しました。

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

今回は、LION MEDIAで使用している「IcoMoon」フォントにアイコンを追加する方法を解説します。

single.phpの修正方法

single.phpには記事ページの表示処理があります。次の通り修正すれば、記事ページ上部、記事ページ下部の関連記事に更新日時が表示されるようになります。

記事ページ上部

■修正前(51行目あたり)

■変更後

記事ページ下部の関連記事

■修正前(357行目あたり)

■変更後

functions.phpの修正方法

functions.phpには右サイドバーの表示処理があります。次の通り修正すれば、ランキング一覧に更新日時が表示されるようになります。

■修正前(5117行目あたり)

■修正後

まとめ

サイト訪問者にとって更新日時は情報を参考するうえでの判断材料となりうるので、表示できるように修正することをオススメします。