PR

WordPressで更新日を表示する【WP Last Modified Info】

仕事ツール

ブログには、更新日を表示しておきましょう。最新情報に更新していることを読者へ知らせると、安心感を持ってもらえます。

使っているテーマに更新日の表示機能がない場合、プラグインで実現できます。

なかでもWP Last Modified Infoは、ボタン一つで更新日が表示され、カスタムも可能。使い勝手が良いです。

この記事では、WP Last Modified Infoの使い方とカスタマイズ方法を解説します。

スポンサーリンク

WordPress・更新日表示のプラグイン【WP Last Modified Info】

まずは、プラグインをインストールしましょう。

WordPressの「プラグイン > 新規追加」で、検索窓に「WP Last Modified Info」と入力してください。

プラグインを見つけたら、インストールして有効化します。

設定方法

インストールすると、ダッシュボードの「設定」に「WP Last Modified Info」が出現します。クリック後、「Post Options」タブで設定します。

設定画面は以下の通り。

「Post Options」の画面
「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. 著者名をとる
  2. 表記を日本語に
  3. 公開日と最終更新日を同じ場所に表記する
  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の完成が以下

以上のカスタムで、以下のような表記にできます。

WP Last Modified Infoのカスタム例
WP Last Modified Infoのカスタム例

ページごとに更新を調整

更新日は、投稿ページによっては変更したくない場合があると思います。その際は、投稿一覧から更新日のアップデートを止めることができます。

投稿一覧のクイック編集を押すと、公開日の下にModifiedの項目があります。

その一番右の「Disable Update」にチェックを入れると、それ以降の更新が更新日として反映されなくなります。

まとめ

以上、WP Last Modified Infoの使い方とカスタムの紹介でした。

簡単に表示できて、カスタムにも対応しています。使いやすいプラグインです。

使っているテーマに更新日の表示がない場合は、WP Last Modified Infoを試してみてください。

created by Rinker
¥1,832 (2024/11/21 21:50:49時点 Amazon調べ-詳細)
created by Rinker
¥2,156 (2024/11/21 21:50:50時点 Amazon調べ-詳細)
タイトルとURLをコピーしました