こんにちは!「ダチたま」です。

WordPressテーマ「Twenty Seventeen」は初期状態で記事の投稿日が表示されるものの、最終更新日が表示されません。

そこで、今回は最終更新日を表示するためCSSの修正を行いましたので、その方法を書いていきたいと思います。ついでに可愛い時計のアイコンも飾り付けちゃいました。

スポンサーリンク



日付表示の完成形イメージ

今回の対応を加えると、投稿日がこのように表示されます。


投稿日の横に更新日が表示されるようになりました。

更新が無い場合は、投稿日のみ表示されます。ただし、同日に更新を行うと、両方同じ日付で表示されるので、そこは改善するか検討中です。

アイコンも表示され可愛い!有料のテーマとかで良く見かけますよね。

このカスタマイズを行うにあたり、以下のサイトを参考にさせていただきました。

WordPress – 投稿日の代わりに更新日を表示する方法(日付操作)

 

修正方法

style.cssにコードを追加していきます。なお、私はテーマ「Twenty Seventeen」でコードの追加を行いました。子テーマを作成しておくと良いです。

 

POINTstyle.cssの格納フォルダ⇒public_html/wp-content/themes/子テーマ

 

アイコンを表示するには

アイコンは「FontAwesome」のWebフォントを使用しています。

「FontAwesome」を記事中に使いたい場合には、プラグイン「Font Awesome 4 Menus」を導入しておくと良いです。

導入の仕方は、以下のリンクから「Font Awesome 4 Menusの使い方」の【1】をご覧ください。インストールして「有効化」しておくと、記事中にショートコードを入力するだけで「FontAwesome」のWebフォントを表示できるようになります。

 

 

コードの追加

準備ができたら、style.cssに以下のコードを追加します。

 

ちょっとだけ解説

  • 1行目から4行目で、投稿日の前に時計型のアイコンを追加しています。
  • 5行目から7行目で更新日を表示しています。ただし、更新が無い場合は表示されません。
  • 8行目から11行目で、更新日の前に更新を示すアイコンを表示しています。アイコンの前には、スペースを入れています。

 

参考までに、以下のコードを追加すると、更新があった場合には、投稿日ではなく更新日のみが表示されるようになります。

 

また、以下の様にすると、投稿日も更新日も非表示にすることができます。

 

終わりに

いかがでしたか?
更新日が表示されないと、せっかくリライトしても読者にとっては古い記事に見えてしまうので、表示するべきだと思います。

以上、更新日を表示する方法でした。

 

この記事をシェアする

“WordPressで最終更新日を表示してアイコンを飾り付けるカスタマイズ(非表示も可)” への1件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です