ブログには、更新日を表示しておきましょう。最新情報に更新していることを読者へ知らせると、安心感を持ってもらえます。
使っているテーマに更新日の表示機能がない場合、プラグインで実現できます。
なかでもWP Last Modified Infoは、ボタン一つで更新日が表示され、カスタムも可能。使い勝手が良いです。
この記事では、WP Last Modified Infoの使い方とカスタマイズ方法を解説します。
WordPress・更新日表示のプラグイン【WP Last Modified Info】
まずは、プラグインをインストールしましょう。
WordPressの「プラグイン > 新規追加」で、検索窓に「WP Last Modified Info」と入力してください。
プラグインを見つけたら、インストールして有効化します。
設定方法
インストールすると、ダッシュボードの「設定」に「WP Last Modified Info」が出現します。クリック後、「Post Options」タブで設定します。
設定画面は以下の通り。
画像の各項目に、①〜⑨の番号を振りました。順番に設定していきましょう。
① 更新日の表示
デフォルトでは、更新日が非表示になっています。
そこで、「Enable for Posts/Pages on Frontend」のボタンをクリックし、赤から緑へ変えます。
変更後は左下の「Save Setting」をクリックしてください(以下、変更したら、すべてこのボタンを押してセーブ)。
これで記事内に更新日が表示されます。
② 表示する場所の調整
「Last Modified Info Display Method」で、記事のどこに更新日を表示するかを決めます。
プルダウンで、以下の4種類から位置を選べます。
- 「Before Content」… 記事の前
- 「After Content」… 記事の後
- 「Replace Published Date」… 使っているテーマに更新日の表示がある場合、WP Last Modified Infoのものに入れ替える
- 「Manual(use shortcode)」… ショートコードを記載して、好きな場所に表示
③ 時間の表示形式の選択
「Last Modified Info Format for Posts」は、更新日の表示形式の選択です。
選べるのは、以下2つ。
- 「Traditional Format」… 更新した日にちの表示
- 「Human Readable Format」… 更新後に経過した時間の表示
④ 年月日の表示の調整
「Last Modified Info Date Time Format」は、更新した年月日の表示形式です。
年月日のすべてを表示させるなら、デフォルトの「Y-m-d」のままでOK。例えば日にちをなくし、年月のみにしたい場合は、「Y-m」だけにします。
⑤ 公開日から何日後に表示するか
「Published Time & Modified Time Gap」では、公開日から何日後の更新から表示させるかを設定できます。
公開した翌日などに、文章の軽微な修正をすることがありますよね。
そんな軽微な修正を更新日にしたくない場合、「公開から〇〇日後の更新から、更新日を表示」と指定できます。
⑥ 修正者の表記の調整
「Display Last Modified Author Name」は、修正を行ったひとの表記の調整です。
最後に修正したひとを表記するなら、「Last Modified Author」を選択。
誰が修正したかに関わらず、毎回同じひとを表記したいなら「Custom Author」を選択します。
⑦ 更新日を表記させないページの調整
「Disable Output on these Archive(s)」は、更新日を表記しないページの選択です。デフォルトでは、投稿ページ以外は全て非表示になっています。
⑧ HTMLコード
「HTML Template to Display on Posts」では、実際にページに表記される文字をHTMLコードで変更できます。
記事の後半で、HTMLコードでカスタムする方法を紹介します。
⑨ 表記するページの選択
「Posts Types to Show Modified Info」は、更新日を表記させたいページを指定します。
デフォルトでは、投稿ページになっています。
表記のカスタム方法
WP Last Modified Infoは、そのままの表記ではわかりづらい部分があります。
まずデフォルトでは、表記が英語になっています。英語はわかりづらいので、変えたいですね。
著者名の表記は、1人でブログを書いている場合は不要です。また公開日と更新日が離れているのも、ちょっとよろしくないです。
さらに公開日と更新日には、わかりやすいようアイコンをつけたいです。
ということで、以下4点のカスタム方法を解説します。
1. 著者名をとる
ここからは、先ほど紹介した「⑧ HTMLコード」に修正を加えていきます。
著者名をとるには、コードの以下の部分を削除します。
by <a href="%author_url%" target="_blank" class="last-modified-author">%author_name%</a>
2. 表記を日本語に
表記を日本語にするため、「⑧ HTMLコード」の「Last Updated on」を「最終更新日」に変更します。
3. 公開日と最終更新日を同じ場所に
更新日がなくても、公開日はほとんどのテーマが表示できると思います。
WP Last Modified Infoを使うと、公開日と最終更新日が離れてしまいますね。そのため、2つの表記を同じ場所にします。
テーマの公開日を設定で非表示にしたあと、「⑧ HTMLコード」の「最終更新日」の前に、以下のコードを付け加えます。
公開日 %post_published%
HTMLコードを以下に変える
1〜3で紹介した内容を、「⑧ HTMLコード」に書き換えます。
<p class="post-modified-info"> 公開日 %post_published% <span> 最終更新日 %post_modified%</span></p>
「公開日」と「最終更新日」それぞれ異なるアイコンを付けるため、「最終更新日 %post_modified%」には<span>のタグを付けています。
4. 公開日と最終更新日にアイコンをつける
公開日と最終更新日は、アイコンをつけたほうがわかりやすいです。
アイコンをつけるため、プラグインの「Font Awesome 4 Menus」をインストールし有効化します。
テーマの追加CSSに記述する
「Save Setting」をクリックして保存した後、WordPressの「カスタマイズ > 追加CSS」へ移動し、以下のコードを付け加えます。
.entry-content p.post-modified-info:before {
font-family: FontAwesome;
content: "\f017";
}
.entry-content p.post-modified-info span:before {
font-family: FontAwesome;
content: "\00a0\f021";
}
上記のコードは、「『公開日』と『最終更新日』それぞれの直前に、指定したFontAwesomeのアイコンをつけよ」という指示です。
クラス名の「.entry-content 」は、ぼくが使っているテーマのクラス名です。ここは使っているテーマのクラス名を調べ、任意のクラス名にかえてください。
WP Last Modified Infoの完成が以下
以上のカスタムで、以下のような表記にできます。
ページごとに更新を調整
更新日は、投稿ページによっては変更したくない場合があると思います。その際は、投稿一覧から更新日のアップデートを止めることができます。
投稿一覧のクイック編集を押すと、公開日の下にModifiedの項目があります。
その一番右の「Disable Update」にチェックを入れると、それ以降の更新が更新日として反映されなくなります。
まとめ
以上、WP Last Modified Infoの使い方とカスタムの紹介でした。
簡単に表示できて、カスタムにも対応しています。使いやすいプラグインです。
使っているテーマに更新日の表示がない場合は、WP Last Modified Infoを試してみてください。