【WordPress】更新日を取得し、表示する方法【簡単コピペ】

私たちがWebで検索するとき、何気なくスニペットの日付やページの更新日時を確認しませんか？
特に情報関係の検索する時は、より新しい情報を得たいですよね！
そこで、今回は更新日時を表示する方法をご紹介します。
このような表示をします。

phpファイルを編集しますので、編集前にファイルのバックアップは取っておきましょう！
今回はこちらのファイルを編集しました。

１．関数を追加
・functions.php

２．投稿日、更新日を表示させる
・home.php
・loop-content.php
・search.php
・single.php

３．スタイルの変更
・header.php
・style.css

本記事は本ブログで利用している自作テーマを変更して対応しています。
コードを追加する場所さえ注意していれば、コピペで同じ内容を対応することができます。

関数を追加
投稿日・更新日を取得し、表示させる
スタイルの変更
まとめ

関数を追加

まずはfunctions.phpに関数を追加します。
表示させるだけであれば関数の追加は不要なのですが、予約投稿した時や投稿後一度も更新されない時など、更新日が投稿日以前の場合、更新日を表示させないようにします。

更新日が投稿日より新しい日付かどうかをチェックする関数を追記しました。

function is_new_modified_date($format) {
    $ptime = get_the_time('Ymd');
    $mtime = get_the_modified_time('Ymd');
    return $mtime > $ptime;
}

投稿日・更新日を取得し、表示させる

投稿日と更新日を表示させるコードを追加します。
対象ファイル　single.php
※ 最終的に4ファイルとも同じ内容を記載していますが、想定通りの出力が確認できるまで、single.phpファイルのみ変更をしていきましょう。

<!--投稿日を表示-->
<span class="article-date">
    <i class="fa fa-calendar"></i>
    <time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
        <?php echo get_the_date(); ?>
    </time>
</span>

<!--更新日を表示-->
<span class="article-date">
    <?php if (is_new_modified_date('Y-m-d')) : ?>
    <i class="fa fa-redo"></i>
    <time datetime="<?php echo the_modified_date( 'Y-m-d' ); ?>">
        <?php echo the_modified_date(); ?>
    </time>
    <?php endif; ?>
</span>

投稿日、更新日の表示について、詳しく説明します。

・2、10行目　
日付を出力する枠組を設定します。classはcssでスタイルを設定します。

・3行目　
　12行目　
日付の左側にある、アイコンを設定しています。
スタイルの変更で詳しく説明します。

・4～6行目
　<time datetime=”<?php echo get_the_date( ‘Y-m-d’ ); ?>“>
　　<?php echo get_the_date( ‘Y-m-d’ ); ?>
　</time>
get_the_date( ‘Y-m-d’ );で取得した投稿日付を出力し、timeタグのdatetime属性で日付の情報を設定しています。

・11行目、16行目
　<?php if (is_new_modified_date( ‘Y-m-d’ )) : ?>
　<?php endif; ?>
先ほどfunction.phpで設定した関数を使って更新日が投稿日より新しい日付かどうかをチェックしています。
新しい日付であれば、12～15行目のソースを実行します。

・13～15行目
　<time datetime=”<?php echo get_the_modified_date( ‘Y-m-d’ ); ?>“>
　　<?php echo get_the_modified_date( ‘Y-m-d’ ); ?>
　</time>
get_the_modified_date( ‘Y-m-d’ );で取得した更新日付を出力し、timeタグのdatetime属性で日付の情報を設定しています。

スタイルの変更

アイコンの設定

まずはアイコンを設定するため、リンクを設定します。
今回は「FontAwesome」を使用しています。
ファイル　header.phpのheadタグにアイコン設定用のリンクを設定します。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

出力させたい場所にiタグとクラスを設定するだけで、簡単にアイコンを設定することができます。
こちらの記事がクラスを設定したタグまで準備してくれるので、おすすめさせていただきます。
「Font Awesomeアイコンを素早く検索しコピー。Photoshopなどでの使い方」

今回は
　
　
を使用しました。

iタグを使わず、cssで設定することも可能です。
その場合はiタグは除き、疑似要素 [before]でスタイルを設定します。
以下は投稿日の例です。

<span class="article-date">
    <time class="date" datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
        <?php echo get_the_date(); ?>
    </time>
</span>

.article-date .date::before{
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
    content: "\f133";
    display: inline-block;
}

スタイルの設定

ファイル　style.cssに article-dateクラスのスタイルを設定していきます。
本ブログのスタイルで設定していますが、この辺りはお好みでカスタマイズしてみてください！

.article-content .article-info .article-date {
    font-size: .8rem;
    display: inline-block;
    margin-right: .5rem;
    color: #888;
}

.article-list .text .article-date{
    font-size: .75rem;
    display: inline-block;
    margin: 0 .5rem .5rem 0;
    color: #888;
}

ここまで設定できましたら、投稿ページに投稿日と更新日が出力されていることを確認してみましょう。