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

仕事ツール

WordPressで使っているテーマに、更新日表示機能がない場合は、プラグインで付けられます。

なかでも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 (2023/02/08 11:25:35時点 Amazon調べ-詳細)
タイトルとURLをコピーしました