現在テーマ変更中です

【WordPress】Spaciousで「更新日時」を表示するようにしてみた

最近気づきましたが、自分でも何かを調べている時に「この記事、いつ書かれたものなんだろうか・・・」と思うことがままあります。

特にプログラミングとかガジェットとかサービスとか、ざーっと読んだ後に公開日が数年前だったりして情報が古かったりして調べなおしたりします。

本当は「公開日」が数年前で「更新日」は最近されていたりしても、「更新日」が表示されないタイプのブログだと古い記事だと勘違いされたままの場合がありますので、更新日は表示された方がいいなと思いました。

それで自分のブログを確認したところ、表示されていないので表示するように改造します。

テーマは相変わらず「Spacious」です。今回も資料が少ないということで忘備録として書いておきます。

アーカイブ、記事下部に「更新日時」を表示する

元の状態だと左から「記事を書いた人」「公開日」「カテゴリ」「Edit(WordPressにログインしている人だけ表示する)」です。

表示されるのはアーカイブと、
スクリーンショット_2016-12-22_17_43_40.jpg

 

記事の下の方です。

スクリーンショット_2016-12-22_17_44_11.jpg

ここのスペースに「更新日」も表示します。

 

方法は、以下のサイトを参考にしました。

http://www.crystalsnowman.com/?p=405

 

WordPressで投稿日を表示するには「get_the_date()」、更新日を表示するには「get_the_modified_date()」という関数を使用します。

関数の詳しい説明はWordPress Codex 日本語版を参照してください。他にもいろいろな関数が載っているのでWordPressをいじる際は参照してください。

 

通常はsingle.php とindex.phpに「get_the_modified_date()」を追記すれば完了ですが、Spaciousでは「spacious_entry_meta()」という独自の関数で「記事を書いた人」「公開日」「カテゴリ」を取得しているので「spacious_entry_meta()」の内容を変更します。

「Spacious」で修正するファイル

【2017/11/15大幅に修正しました】

今回修正するファイルは子テーマのfunctions.phpです。

元々は「/wp-content/themes/spacious/inc/functions.php」に【spacious_entry_meta】をいう関数が定義されていますので、この関数だけを子テーマのfunctions.phpによって上書きします。そうするとテーマのアップデートの時も修正箇所が消えることはありません。

子テーマのfunctions.phpに以下のコードを追加します。既に追加してある他のコードの邪魔にならなければどこに記述しても問題ありません。

 

 

元々の処理と比較すると、if文を追加して「公開日と更新日が違う場合、以下の処理をする」としました。

get_the_dateは削ってget_the_modified_date()で更新日だけを取得します。

「span class=”date”」のままでは公開日と同じアイコンが出てしまうので、「span class=”date2″」と記述しました。

 

次にこの”date2″をcssで定義します。

修正するファイルは子テーマのstyle.cssです。

以下のコードを追加します。これも他の定義の邪魔にならなければどこに記述しても問題ありません。

 

親テーマのstyle.cssにentry-metaについての定義があるのでdate2の為にそのまま持ってきています。そして

.post .entry-meta .date2:before { content: ‘\f420’; }

としていますが、contentのあとがアイコンの指定になっています。

ちなみに公開日とか編集者とかのアイコンはWordPressのdashiconsで定義されているのですが、Spaciousは更に個別に「 spacious/genericons/genericons.css」で定義してあるので苦労しました。どうりで公式と違うなと思いました

「\f420」はリフレッシュアイコンです。genericons.cssに書いてあるので使いたいアイコンがあれば解読していきましょう。

 

以上の修正をすると、このようになります。

スクリーンショット_2017-11-15_01_28_20.jpg
無事更新日も表示されました。更新してない場合は公開日のみ表示されます。
そしてアイコンも公開日とは違う更新してるっぽいアイコンにすることができました。

(当初公開していた内容では、直接親テーマを修正する、アイコンが公開日と一緒というなんとも残念な内容でしたが今回無事スタイリッシュに決めることができました)