こんにちは！だちたまです。
WordPressテーマ「Twenty Seventeen」は初期状態で記事の投稿日が表示されるものの、最終更新日が表示されません。
そこで今回は、最終更新日を表示するためCSSの修正を行いましたので、そのカスタマイズ方法を紹介したいと思います。
ついでに可愛い時計のアイコンも飾り付けちゃいますよ♪
- 本記事で紹介するカスタマイズはテーマ「Twenty seventeen」でカスタマイズを行いました。
- 本記事を参考にカスタマイズをする場合は、自己責任でお願いします。
- カスタマイズをするときは、データのバックアップと、子テーマを設定することをおすすめします。
Contents
【WordPress Twenty Seventeen】最終更新日を表示した完成イメージ
今回の対応を加えると、投稿日がこのように表示されます。
投稿日の横に更新日が表示されるようになりました。
ちなみに、更新が無い場合は、投稿日のみが表示されるようになっています。
ただし、同日に更新を行うと投稿日も更新日も同じ日付で表示されてしまうので、今後改善が必要ですかね。
有料のテーマとかで良く見かける感じで満足。
このカスタマイズを行うにあたり、以下のサイトを参考にさせていただきました。
WordPress – 投稿日の代わりに更新日を表示する方法（日付操作）【WordPress Twenty Seventeen】最終更新日を表示する修正方法
CSSを修正する際は、あらかじめ子テーマを作成しておきましょう。
修正するファイルはstyle.css。このファイルは以下のフォルダに格納されています。
style.cssの格納フォルダ
public_html/wp-content/themes/子テーマ
【事前準備】アイコンを表示するには
アイコンは「FontAwesome」のWebフォントを使用しています。
「FontAwesome」を記事中に使いたい場合には、プラグイン「Font Awesome 4 Menus」を導入しておくと良いです。
導入の仕方は、以下の記事から「Font Awesome 4 Menusの使い方」の【１】をご覧ください。
インストールして「有効化」しておくと、記事中にショートコードを入力するだけで「FontAwesome」のWebフォントを表示できるようになります。
コードの追加
準備ができたら、style.cssに以下のコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 |
time.published:before { font-family: FontAwesome; content: "\f017"; } time.updated:not(.published) { display: inline; } time.updated:not(.published):before { font-family: FontAwesome; content: "\00a0\f021"; } |
- １行目から４行目で、投稿日の前に時計型のアイコンを追加しています。
- ５行目から７行目で更新日を表示しています。ただし、更新が無い場合は表示されません。
- 8行目から11行目で、更新日の前に更新を示すアイコンを表示しています。アイコンの前には、スペースを入れています。
なお、以下のコードを追加すると、更新があった場合には、投稿日ではなく更新日のみが表示されるようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
time.published:not(.updated) { display: none; } time.published:before { font-family: FontAwesome; content: "\f017"; } time.updated:not(.published) { display: inline; } time.updated:not(.published):before { font-family: FontAwesome; content: "\00a0\f017"; } |
また、以下のようにカスタマイズすると、投稿日も更新日も非表示にすることができます。
|
1 2 3 4 5 6 7 |
time.published { display: none; } time.updated { display: none; } |
【WordPress Twenty Seventeen】最終更新日を表示してアイコンを飾り付けるカスタマイズまとめ
以上、更新日を表示する方法でした。
記事の更新日が表示されないと、せっかくリライトしても読者にとっては古い記事に見えてしまうので、読者に記事の新鮮度を知ってもらいたい場合には表示すべきです。
参考にしてみてくださいね。
なお、当サイトでは、他にもWordPressテーマ「Twenty Seventeen」のカスタマイズ記事を書いています。
Twenty Seventeenをより便利に、かつ、より可愛らしいデザインで使いたい場合には、参考にしてみてください。
