• HOME
  • BLOG
  • Web制作
  • 最終更新日を記事内に表示する方法(WordPress/WP Last Modified Info)

最終更新日を記事内に表示する方法(WordPress/WP Last Modified Info)

white and black braille typewriter

他の人が運営されているブログで、記事の「投稿日」と「最終更新日」が表示されているのをよく見かけます。探し物や調べ物をしているときは、「いつ書かれた記事なのか」を知りたいので、記事の最初でそれがわかると、とても助かります。

記事を書く側として考えると、特に技術的なことを書いた記事など、後から編集したい場面は結構あると思います。が、WordPressのデフォルトだと、記事を「投稿した日時」しか表示できないので、そのままだと、更新日時がどこにも表示できない(つまり、いつ更新されたかわからない)か、投稿した日時を更新することになります。

一度投稿した日時を変えるのもイヤだし、ひっそり更新したようになるのもイヤ。やっぱり、投稿日と最終更新日が並んで表示されるようにしたい。ということで、今回もWordPressプラグインに頼って、他の人が運営されているようなブログにあるような「投稿日」と「更新日」が記事の最初並んで表示されるようにしたいと思います。

使用するプラグイン

今回はこちらのプラグインを使います。

WP Last Modified Info
https://wordpress.org/plugins/wp-last-modified-info/

プラグインのインストールと有効化

WordPress管理画面「プラグイン」>「新規追加」で「WP Last Modified Info」を検索。検索結果に表示されたら「今すぐインストール」をクリック。

インストールできたら、「Activate(有効化)」をクリック。これでプラグインが使えるようになりました。

プラグインの設定

それでは、プラグインの設定をしていきましょう。WordPress管理画面の「設定」>「WP Last Modified Info」から設定画面を表示します。

このプラグインではいろいろな設定ができますが、今回は基本的なところのみを行います。「Post Options」タブを開いて設定していきましょう。

この画面では、次の設定ができます。

1. Enable for Posts/Pages on Frontend

これを「ON」にするとブログの投稿/ページでの表示が有効になります。

有効にした時点ではこのような感じで表示されます。この表示内容を以下の設定で少しカスタマイズしてみます。

2. Last Modified Info Display Method:

投稿の最終更新日の表示位置。次の中から選べます。

  • Before Content: コンテンツ(記事)の前
  • After Content: コンテンツ(記事)の後
  • Replace Published Date: 投稿日と入れ替える
  • Manual(use shortcode): ショートコードを使って表示

今回は、デフォルトの「コンテンツ(記事)の前」である「Before Content」のままでOKです。

3. Last Modified Info Format for Posts:

投稿の最終更新日の表示形式。次の中から選べます。

  • Traditional Format: 従来の形式(例:○○年○月○日)
  • Human Readable Format: 人間が読める形式(例:3日前、10日前など)

今回は、「従来の形式」である「Traditional Format」にしましょう。

4. Last Modified Info Date Time Format:

最終更新日時の表示形式。

これは、デフォルトで入っている「Y年n月j日」のままでよいでしょう。「2021年7月28日」のように表示されます。

5. Published Time & Modified Time Gap:

投稿の公開日時と最終更新日時の差がどれくらいある場合に表示するかを選べます。

  • No Gap: 常に表示
  • 1day(24hours): 24時間差があるときに表示
  • 2days(48hours): 48時間差があるときに表示
  • 3days(72hours): 72時間差があるときに表示
  • 5days(120hours): 120時間差があるときに表示
  • 7day(168hours): 168時間差があるときに表示
  • 15days(360hours): 360時間差があるときに表示
  • 30days(720hours): 720時間差があるときに表示

今回は、常に表示されるようにしたいので、「No Gap」を選びます。

6. Display Last Modified Author Name:

表示する「著者名」。次の中から選べます。

  • Last Modified Author: 最終更新した著者
  • Custom Author: カスタムした著者(選択できます)

ここは、特別な理由がない限り「Last Modified Author」(最終更新した著者)でよいでしょう。

7. Disable Output on these Archive(s):

最終更新日を表示しないページを選べます。

  • Home Page: トップページ
  • Author Archive: 著者別アーカイブページ
  • Post Category Archive: カテゴリ別アーカイブページ
  • Post Tag Archive: タグ別アーカイブページ
  • Search Page: 検索ページ

これもデフォルトのままでよいと思います。

8. HTML Template to Display on Posts:

最終更新日を表示するときのhtmlを編集できます。

<p class="post-modified-info">最終更新日: %post_modified% by <a href="%author_url%" target="_blank" class="last-modified-author">%author_name%</a></p>

下記のタグを入れるといろいろな項目が表示できます。

  • %authorname% :著者名
  • %authorurl% :著者のWebサイトのURL
  • %authoremail% :著者のメールアドレス
  • %authorarchive% :著者の投稿記事アーカイブ
  • %postpublished% :記事を投稿した日
  • %postlink% :投稿のリンク
  • %postmodified% :記事の最終更新日

このままでもよいですが、他のブログやサイトでよく見る形式を参考に、今回はこのように変更してみましょう。

<p class="post-modified-info">投稿日:%post_published% | 最終更新日:%post_modified%</p>

9. Posts Types to Show Modified Info:

最終更新日を表示する投稿のタイプ。

これもデフォルトの「投稿」のままでよいでしょう。

表示の整え例

ここまで設定したら、投稿ページでの表示を見てみましょう。

記事の一番上にこんな感じに表示されているかと思います。

このままでも見やすくていいのですが、ちょっと体裁を整えてみましょう。

まず、先ほどの設定項目「8. HTML Template to Display on Posts:」のhtmlを下記のように変更します。(<p>タグを<div>タグに変更)

<div class="post-modified-info">投稿日:%post_published% | 最終更新日:%post_modified%</div>

CSSタグの追加

次に、以下のCSSタグを WordPress管理画面の「外観」>「カスタマイズ」>「追加CSS」に書き込みます。書いたら「公開」ボタンを押します。

書き込むCSSは、2種類つくってみたので、お好みでお使いください。

シンプルタイプ

  • ソース
    .post-modified-info { font-size:0.8em; color: #666; margin-bottom:3em; }
  • 見ためのイメージ

背景ありタイプ

  • ソース
    .post-modified-info { background: #eee; font-size: 0.8em; padding: 22px 20px; margin-bottom:3em; }
  • 見ためのイメージ

記事の投稿・編集画面での表示

また、プラグインが有効になると、 WordPressの記事編集画面で更新時刻が編集できるようになります。これは、プラグインを有効化した段階で、特に編集しなくても、最終更新日時が表示されます。

まとめ

このように「WP Last Modified Info」プラグインを使うことで、WordPressでつくったブログの投稿記事に最終更新日を表示することができます。お使いのWordPressテーマにその機能が無くても後からつけられるので便利。読者にとっても、いまから読む記事がいつ更新されたものかがわかると親切なので、ぜひ使ってみてください。

WEB制作・開発、iPhoneアプリ、DTMなどのTipsやメモを書いています。

関連記事