賢威にブログ記事の最終更新日を表示する方法

公開日: 2014年02月22日
最終更新日: 2014年06月09日

更新

ブログの記事において、情報の鮮度というのは非常に重要ですよね!今回は、Wordpressで構築しているブログで、過去記事を修正したり加筆したりした場合に、自動で最終更新日を表示させるようにカスタマイズする方法をご紹介したいと思います。

もくじ

はじめに

ブログの記事は、一般的に「記事公開日」だけが表示されていますよね。

賢威でも、このようになっています↓
記事公開日のみ表示

しかし、例えば過去記事の内容を修正した場合や、何かしら追加情報を加筆した場合などに、できれば最終更新日も併記されていた方が良いと思います。

なぜなら、ブログにおいて、情報の鮮度というのは非常に重要だからです。

特にWeb業界(というかパソコン全般)は変化が非常に激しいので、2年前に書かれた記事と今年に書かれた記事とでは、ユーザーの感じ方が全く異なります。

私自身、Web制作やアプリ制作などの際に色々と検索しまくっているのですが、情報の鮮度はとても重要視します。

Google検索では以下のように、「検索ツール」→「期間指定なし」の部分からドロップダウンメニューを表示させて、期間指定で検索することも出来ますよね。
期間指定検索

ということで、古い記事を修正したり加筆したりした際に、自動で最終更新日を表示する方法をご紹介したいと思います。

細かいコード挿入位置に関しては、inosh blogに使用しているテーマ「賢威 6.1コーポレート版」を例に進めますが、特にテーマは関係なく応用いただけます。

functions.phpやsingle.phpにコードを追記する

まず、パシフィカスさんのWordPressで最終更新日を表示する方法(予約投稿にも対応) | WP SEOブログで紹介されているように、functions.phpの最下部に以下のコードをコピペします。

functions.php

/*
  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);
    }
}

あとは、更新日を表示させたい場所に以下のコードをコピペするだけです。

single.php

<?php if ($mtime = get_mtime('Y/m/d')) echo '最終更新日: ', $mtime; ?>

Y/m/dのところはY/n/jでも良いですし、Y年m月d日などのように表記することも可能です。

ちなみにY/m/dだと「2014/02/09」と表示され、Y/n/jだと「2014/2/9」と表示されます。一桁の数字の際に、ゼロをつけるかつけないかの違いですね。

また「最終更新日」の部分も、任意の文字列に置き換えていただいても大丈夫です。

ちなみに私は賢威で、記事公開日の部分を以下のようにカスタマイズしました。

single.php(デフォルト)

<div class="post">
<h2 class="post-title"><?php the_title(); ?></h2>
<p class="post-meta"><span class="post-data"><?php the_time('Y年m月d日') ?></span> <?php if (!is_attachment()) { ?>[<span class="post-cat"><?php the_category(', ') ?></span>]<?php } ?></p>

下矢印

single.php(最終更新日を追加と一部カスタマイズ)

<div class="post">
<h2 class="post-title m5-b"><?php the_title(); ?></h2>
<p class="post-time"><span class="post-data">公開日: <?php the_time('Y年m月d日') ?></span><br />
<span class="post-data"><?php if ($mtime = get_mtime('Y年m月d日')) echo '最終更新日: ', $mtime; ?></span></p>
<p class="post-category"><?php if (!is_attachment()) { ?><span class="post-cat"><?php the_category(' ') ?></span><?php } ?></p>

最終更新日を表示するコードの追加以外にも、下記の点を変更しています。

変更した点

  1. 記事タイトルのmargin-bottomを5pxとするクラスを追加(ブログトップやカテゴリーページに表示される記事タイトルのmargin-bottomは変更しない)
  2. 記事公開日とカテゴリーを包括していたpタグ(クラス:post-meta)を削除
  3. 記事公開日と最終更新日を包括するpタグ(クラス:post-time)と、カテゴリー部分を包括するpタグ(クラス:post-category)を追加
  4. 文字列「公開日: 」の追加
  5. ほか

これにより、表示は以下のように変わりました。
記事公開日のみ表示

下矢印

最終更新日も表示された

これで最終更新日が表示されるとともに、公開日の右側に表示されていたカテゴリー一覧が下の方に下がりましたね。

あとは、これらをスタイルシートで調整します。

スタイルシート(CSS)で装飾する

inosh blogでは、以下のように装飾しました。

mystyle.css

#main-contents p.post-time {
    text-align:right;
    font-size:14px;
    margin-bottom:0;
}

#main-contents p.post-category {
    font-size:13px;
}

span.post-cat a {
    color:#fff;
    text-decoration:none;
    background:#000;
    padding:3px 8px 3px;
    -webkit-transition:0.3s;
    -moz-transition:0.3s;
    -o-transition:0.3s;
    transition:0.3s;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    -ms-border-radius:3px;
    -o-border-radius:3px;
    border-radius:3px;
}

span.post-cat a:hover {
    background:#e41858;
}

これにより、以下のようになりました。
公開日と最終更新日の表示部分を装飾

「賢威のカスタマイズ日誌」の部分は、カーソルが表示されていませんが、マウスカーソルをあてている状態になります。

おわりに(HTML5の場合の対応など)

賢威はXHTML1.0で記述されています。
もしHTML5で記述されているテーマの場合は、time要素も記述しておくと、なお良いと思います(たぶん)。

私が自作したHTML5のテーマでは、最終更新日の部分にtime要素を記述するようにしています。

ただ、「最終更新日を検索エンジンに優先して伝えることができ、検索結果にも反映される」とのことなのでtimeタグで最終更新日をくくるようにしたのですが、必ずしもそこの日付が反映されるとは限らない?ようです。(私の場合)

ちなみに、「検索結果に反映される」とはこういうやつのことです↓
検索結果

私の場合、何かしらの情報を求めて検索した際、タイトルの次にこの日付の部分を真っ先に見るかもしれません。(検索内容にもよりますが)

例えば、ここが2006年とかになってると、見る気になりませんよね…。

ただ、time要素に関しては色々な記述方法があるようで、私自身よく分かっていない(おい)部分でもありますw

もしも最終更新日をtimeタグでくくるように設定したいという方は、WordPressで記事の最終更新日を表示する方法 HTML5対応版が参考になると思います。

以上、丸投げで終わりたいと思います。

\(^o^)/ ぼっけぇシェア \(^o^)/

コメントを残す

サブコンテンツ
ページトップへ戻る ページエンドへ進む