WordPressで最終更新日を表示して、読者とGoogleに記事更新をアピール！

ねえねえ、俺ブログやっているんだけど、公開日はちゃんと表示されるんだけど、最終更新日が表示できなくて困ってるんだ！ブログで最終更新日を表示させるやり方を、WordPressにうとい俺にもわかるように教えてよー。

確かに最終更新日は表示しておいた方がいいよね。一読者としては、古い記事は読む気にならないからね。今回は私が実際にこのブログで最終更新日を表示させた方法を紹介するよ。コピペでできるから是非やってみて！

この記事で記載するコードは、こちらのブログ：寝ログさんを参考にさせていただきました。

■記事の更新日をHTML5対応にして正しくGoogleに伝える方法[WordPressカスタマイズ]

良く参考にさせていただいております、寝ログさんいつもありがごうございます。

最終更新日を表示する手順

WordPressブログに最終更新日を表示するには、次の2つの手順を行います。

手順①functions.phpにコードを追加する。
手順②single.phpにコードを追加する。
手順③CSSでデザインを調整する。

※今回コードを追加するfunctions.phpとsingle.phpは作業前に必ずバックアップを取っておいてください。記載ミスをするとブログが表示さなくなるケースもあり、めちゃくちゃ焦ります。

では実際にやっていきましょう。

手順①functions.phpにコードを追加する。

functions.phpの場所を確認

WordPress管理画面の外観にカーソルをあて「テーマエディタ」をクリック。

画面右側の「テーマのための関数（functions.php）」をクリック。これがfunctions.phpです。

functions.phpにコードを追加

functions.phpを開けたら、次のコードを追加します。※functions.phpの一番下でOKです。

/*
  get_the_modified_time()の結果がget_the_time()より古い場合はget_the_time()を返す。
  同じ場合はnullをかえす。
  それ以外はget_the_modified_time()をかえす。
*/
 
function get_mtime($format) {
    $mtime = get_the_modified_time('Ymd');
    $ptime = get_the_time('Ymd');
    if ($ptime > $mtime) {
        return get_the_time($format);
    } elseif ($ptime === $mtime) {
        return null;
    } else {
        return get_the_modified_time($format);
    }
}

get_the_modified_time()の結果がget_the_time()より古い場合はget_the_time()を返す。

同じ場合はnullをかえす。

それ以外はget_the_modified_time()をかえす。

function get_mtime($format) {

$mtime = get_the_modified_time('Ymd');

$ptime = get_the_time('Ymd');

if ($ptime > $mtime) {

return get_the_time($format);

} elseif ($ptime === $mtime) {

return null;

} else {

return get_the_modified_time($format);

}

このコードを追加する目的は、WordPressで「予約投稿」を行った場合に、公開日よりも最終更新日が前になるのを防ぐのが目的です。

「予約投稿」を使わない方はピンと来ないかもしれませんが、今後「予約投稿」を使う可能性もありますし、上記コードの中で最終更新日を取得する関数も指定しているので、phpに詳しい方意外はそのままコピペするのがお勧めです。（※私もそのままコピペして記載しています。）

手順②single.phpにコードを追加する。

続いて、single.phpにコードを追加していきましょう。

single.phpの場所を確認

WordPress管理画面の外観にカーソルをあて「テーマエディタ」をクリック。

画面右側の「個別投稿（single.php」をクリック。（※テーマファイルを少し下にスクロールすると見つかります！）

公開日を表示するコードが書かれている場所を探す

single.phpを開いたら、公開日を表示するコードが書かれている場所を探します。下記画像のように「Ctrl + F」で検索して探しましょう。

①コードが書かれている画面のどこかを1度クリックする。
②「Ctrl + F」で検索窓を表示する。
③検索窓に「time」と入力し、クリック。
④「time」がハイライトされる。このあたりに「公開日」が記載されているはずです。

※使っているテーマによって「公開日」が記載されている箇所が違います。記載場所がわからない場合は、twitterまでご連絡ください。私のわかる範囲でお答えします。

「公開日」と「最終更新日」の両方を表示する場合

「公開日」と「最終更新日」の両方を表示する場合、現在の「公開日」が記載されているコードを削除し、下記のコードに書き換えて下さい。

<?php if (get_mtime('c') == null) : ?>
<p class="time">公開日：<time class="entry-date date published" datetime="<?php the_time('c') ;?>"><?php the_time('Y年n月j日') ;?></time></p>
<?php endif; ?>
<?php if (get_mtime('c') != null) : ?>
<p class="time">公開日：<?php the_time('Y年n月j日') ;?></p><br>
<time class="entry-date date updated" datetime="<?php if ($mtime = get_mtime('c')) echo $mtime; ?>"><?php if ($mtime = get_mtime('Y年n月j日')) echo '最終更新日：' , $mtime; ?></time>
<?php endif; ?>

<?php if (get_mtime('c') == null) : ?>

公開日：<time class="entry-date date published" datetime="<?php the_time('c') ;?>"><?php the_time('Y年n月j日') ;?></time>

<?php endif; ?>

<?php if (get_mtime('c') != null) : ?>

公開日：<?php the_time('Y年n月j日') ;?>

<?php endif; ?>

わたしもあまり詳しくないのですが、いろいろなサイトさんを参考にして、公開日や最終更新日をGoogle（検索エンジン）に正確に伝えるためにタグを使用しています。公開日に「class=”entry-date”」、最終更新日に「class=”update”」を付けることでより伝わりやすくなるようです。

【参考記事】
■WordPressの記事に更新日・公開日を追加し検索エンジンやユーザーに伝える

更新していない記事は「公開日」を、更新している記事には「最終公開日」だけを表示する場合

更新していない記事は「公開日」を、更新している記事には「最終公開日」だけを表示する場合は、現在の「公開日」が記載されているコードを削除し、下記のコードに書き換えて下さい。

<?php if (get_mtime('c') == null) : ?>
<p class="time">公開日：<time class="entry-date date published" datetime="<?php the_time('c') ;?>"><?php the_time('Y年n月j日') ;?></time></p>
<?php endif; ?>
<?php if (get_mtime('c') != null) : ?>
<time class="entry-date date updated" datetime="<?php if ($mtime = get_mtime('c')) echo $mtime; ?>"><?php if ($mtime = get_mtime('Y年n月j日')) echo '最終更新日：' , $mtime; ?></time>
<?php endif; ?>

<?php if (get_mtime('c') == null) : ?>

公開日：<time class="entry-date date published" datetime="<?php the_time('c') ;?>"><?php the_time('Y年n月j日') ;?></time>

<?php endif; ?>

<?php if (get_mtime('c') != null) : ?>

<?php endif; ?>

【参考記事】
■WordPressの記事に更新日・公開日を追加し検索エンジンやユーザーに伝える

これで、最終更新日が表示されているはずです。このブログでは、更新していない記事は「公開日」を、更新している記事には「最終公開日」だけを表示しているので、次のような表示になりました。

では、最後にCSSで表示デザインを調整します。

手順③CSSでデザインを調整する。

CSSを記載する場所を確認

WordPressには、「追加CSS」という便利な機能があるので、今回はそこにコードを書きていきます。WordPressの管理画面から「外観」にカーソルを当てて「カスタマイズ」をクリック。

「追加CSS」をクリック。

下記画像の緑枠内にCSSコードを記載します。

追加CSSにコードを記載しデザインを調整する

CSSのデザインはテーマデザインや好みが人ぞれぞれ違うので、コードをコピペして使うには無理があります。。ここでは一例として、当ブログで使用したデザインコードを掲載しておきますが、あくまで参考程度にお考え下さい。

.blog-inner time{
　　font-size: 1.3rem;
    color: #7B7B7B;
    margin: 30px 0 10px;
}
.blog-inner p.time{
　　font-size: 1.3rem;
    color: #7B7B7B;
    margin: 30px 0 10px;
}

.blog-inner time{

　　font-size: 1.3rem;

color: #7B7B7B;

margin: 30px 0 10px;

}

.blog-inner p.time{

　　font-size: 1.3rem;

color: #7B7B7B;

margin: 30px 0 10px;

}

※「blog-inner」の部分は、使っているテーマによって違うので自分のテーマの記述に変える必要があります。わからない場合は、twitterまでご連絡ください。私のわかる範囲でお答えします。

■文字の大きさを調整する
⇒上記コードサンプルの2行目・7行目「font-size」の数字を調整する。

■文字色を調整する。
⇒上記コードサンプルの3行目・8行目「color」で文字色を指定する。

■上下の幅を調整する。
⇒上記コードサンプルの4行目・9行目「margin」で調整する。

私は文字サイズを少し小さく、色をクレーに変え、上下の幅を下記のように調整してみました。

おわりに

お疲れ様でした、以上がWordPressブログでの「最終更新日」の表示方法となります。

個人的には更新日の表示は必須だと思っています。古い情報はやはり信用度が低いです。せっかく記事を最新情報に更新したなら、ちゃんとにそれを表示して読者に安心して読んでもらもらいましょう。

それではまた明日！

最終更新日を表示する手順

手順①functions.phpにコードを追加する。

functions.phpの場所を確認

functions.phpにコードを追加

手順②single.phpにコードを追加する。

single.phpの場所を確認

公開日を表示するコードが書かれている場所を探す

「公開日」と「最終更新日」の両方を表示する場合

更新していない記事は「公開日」を、更新している記事には「最終公開日」だけを表示する場合

手順③CSSでデザインを調整する。

CSSを記載する場所を確認

追加CSSにコードを記載しデザインを調整する

おわりに

関連記事

おすすめ記事