WordPress:更新日時をテーマデザインに合わせて自然に追加

WordPress:更新日時をテーマデザインに合わせて自然に追加

当ブログで使用しているテーマLION MEDIAでは、記事の更新日時表記がありません。

スポンサーリンク

更新日時は記事のメンテナンス頻度を示し、記事の信頼性向上にも重要な情報です。実際に自分がウェブ情報を参照するときも、更新日時を記事の信頼性を判断する基準の一つにしています。

当ブログでは、テーマのデザインに合わせて更新日時を追加しています。カスタマイズの内容をご紹介いたします。LION MEDIA を例にご紹介いたしますが、考え方は他のテーマでも使えるものと思います。

なお、個別記事ページではなくトップページの記事一覧における「投稿日」を「更新日」に変更するやり方は、WordPress:トップページで、更新された記事のみ更新日を記載 で示しています。

目指す内容と考え方

記事公開日の横に、記事更新日を表示します。「更新日」であることが一目でわかるよう、適切なアイコン(赤丸)を冒頭に表示します。

  1. 公開日の記述がある部分を見つける
  2. 更新日の記述を追記
  3. 更新日マーク  を追記

公開日の記述に合わせて更新日を記述することで、テーマに合わせたデザインで表示します。

公開日の記述がある部分を見つける

記事公開日の記載があるPHPファイルを探していきます。

LION MEDIA の場合は

「外観」→「テーマの編集」→「編集するテーマを選択 “LION MEDIA Child”」→「個別投稿(single.php)」

から、子テーマのヘッダー部分、公開日がある部分を探します。「the_time」などで検索すると見つかります。テーマによっては、single.phpではなくpage.phpなどにあるかもしれません。

<ul class="dateList dateList-singleTitle">
	<li class="dateList__item icon-calendar"><?php the_time('Y.m.d'); ?></li>
	<li class="dateList__item icon-folder"><a class="hc<?php if (isset($cat_meta[$cat_id])) { echo esc_html($cat_meta[$cat_id]);} ?>" href="<?php echo $cat_link; ?>" rel="category"><?php echo $cat_name; ?></a></li>
	<?php if(has_tag() == true) : ?><li class="dateList__item icon-tag"><?php the_tags(''); ?></li><?php endif; ?>
</ul>

LION MEDIAの場合は、<li>要素で公開日、カテゴリが並んで表示されています。公開日はicon-calendarを含む<li>要素、カテゴリはicon-folderを含む<li>要素です。icon-calendar やicon-folderでテーマに含まれるアイコンを呼び出しているものと思われます。

更新日の記述を追記

この公開日の記述と同じやり方で、更新日を追記していきます。

更新日の追記に必要な最低限のコードは下記です。

<?php if (get_the_modified_date('Y.m.d') != get_the_time('Y.m.d')) : ?>
<?php the_modified_date('Y.m.d') ?> 
<?php endif; ?>

参照サイト:wordpressで記事内に「公開日」「更新日」を表示させる方法

PHPのif構文になっており、更新日情報があるときのみ表示するようになっています。

このコードを、挿入したいところ(当ブログの場合は公開日のあと、カテゴリの前)に追記すればOKです。

ただし、テーマのデザインに合わせるため、次項のアイコン表記と合わせて記載していきます。

更新日マークを追記

ブログでよく見る更新日アイコンを表示します。

こんなアイコンです。

アイコンをブログに表示できるようにするには、アイコンファイルをテーマのアイコンファイル格納フォルダに追加して参照するのが最も単純な方法と思いましたが、以外とうまくいきませんでした。プラグインの利用が容易だったため、無料プラグインで対処しました。

アイコンプラグインのインストール

好きなアイコンがあるプラグインをインストールし、目当てのアイコンを記事に挿入してみます。今回は、WP SVG iconsを選びました。

アイコンの表示ソース確認

適当な記事にアイコンを挿入したら、実際の記事のソースコードを確認します。同プラグインの場合は、次のようなコードでした。

<i class="wp-svg-history history"></i>

前項の更新日表記の手前にこのコードを配置すれば、一応このアイコンと更新日が表示されるようになるはずです。

テーマデザインに合わせて微調整

ここで、LION MEDIAの記述に合わせて微調整することで、テーマデザインに沿った表示にしていきます。

前述の通り、LION MEDIAでは<li>要素で公開日やカテゴリを表示しているようですので、それにならい更新日も<li>要素で記載していきます。PHPのif構文を考慮して、更新日の<li>要素をifループの中にいれます。

また、LION MEDIAでは<li>要素のclassでアイコンを呼び出して公開日(カレンダーアイコン)やカテゴリ(フォルダアイコン)を表示しています。今回インストールしたWP SVG iconsのclassで指定している「wp-svg-history history」が、このアイコンを指定する内容のようです。<li>要素のclassで指定すれば良さそうです。

上記の内容を全て反映したコードは次の通りです。3行目から6行目が該当部分です。

<ul class="dateList dateList-singleTitle">
	<li class="dateList__item icon-calendar"><?php the_time('Y.m.d'); ?></li>
	<?php if (get_the_modified_date('Y.m.d') != get_the_time('Y.m.d')) : ?>
	<li class="dateList__item wp-svg-history history"><?php the_modified_date('Y.m.d') ?> 
	</li>
	<?php endif; ?>
	<li class="dateList__item icon-folder"><a class="hc<?php if (isset($cat_meta[$cat_id])) { echo esc_html($cat_meta[$cat_id]);} ?>" href="<?php echo $cat_link; ?>" rel="category"><?php echo $cat_name; ?></a></li>
	<?php if(has_tag() == true) : ?><li class="dateList__item icon-tag"><?php the_tags(''); ?></li><?php endif; ?>
</ul>

まとめ

以上、あとは動作確認して終了です。このやり方はPHPファイルを操作しますので、編集時には十分ご注意ください。

LION MEDIAを例にご紹介しましたが、基本的な考え方はどんなテーマでも同じです。ワードプレスカスタマイズのご参考に。

スポンサーリンク