[Twenty Fourteenカスタマイズ]タイトル下に更新日付を追加する方法。


どうもCHASUKEでございます。

WordPressカスタマイズなんかも書いてこうと思います。(備忘も込めて)
これぞ雑多ブログのイイところだw

HTMLやPHP言語は専門ではありませんが、職業柄コードをいじるのは好きです◎

当ページで使用しているのは「Twenty Fourteen」というWordpressテーマです。

このテーマを2014年から使用しているわけですが、タイトル下の表記が気に入らなかったのでカスタマイズいたしました。

 

カスタム後の
ビフォーアフターはこんな感じ。

◆PC表示

BEFORE
pc_a_upd

AFTER
pc_b_upd

 

◆モバイル表示

BEFOREとAFTER
mobile_upd

 

修正は意外と簡単でした。
では、実際のソースを交えて解説。

 

SPONSORED LINKS

カスタマイズしたポイント

タイトル下の表示について、次のとおり変更した。

  • 更新日付の追加
  • 投稿日・更新日という文字の追加
  • 投稿者の削除
  • [コメントどうぞ]の削除

 

なぜカスタマイズしたか

■更新日付の追加について
ブログを読んでいて情報が古い?って思うことがあります。そんなときに更新日が明記してあればすっきりします。何より信頼性が増すます。

■投稿日・更新日という文字の追加
これは見た目だけの問題です。更新日を追加したので、見やすいように表示されるようにしました。

投稿者と[コメントどうぞ]の削除
投稿者は私(chasuke)しかおりませんw。それにタイトルを見ただけでコメントをしていただけるような神はいませんので削除しました。

 

コード修正案

今回イジったソースは以下の3つ。
・content.php
・template-tags.php
・style.css

 

※コード修正を行う場合は、必ず触る前にソースのバックアップをとっていつでももどせるようにしておきましょうね。

 

『content.php』の修正

このソースでタイトル下の表示を制御してます。つまり表示したくないものは決してやります。

 

▼[修正前]content.php

上記の箇所をcontent.phpから見つけてください。

8行目で[コメントどうぞ]を表示します。
4行目で投稿日・投稿者を表示します。

ここでは8行目のみコメントアウト(無意味化)します。4行目もコメントアウトしてしまうと、投稿日まで消えてしまうので注意!

 

▼[修正後]content.php

 

これで[コメントどうぞ]がタイトル下から消えたはずです。

 

『template-tags.php』の修正

このファイルはテーマフォルダ内の[inc/template-tags.php]にあります。

このソースは[content.php]の投稿日・投稿者を表示するコードから呼び出され、結果を返します。

つまり、ここをイジって投稿日・更新日を返すように修正します。

 

▼[修正前]tmplate-tags.php

 

▼[修正後]tmplate-tags.php

 

修正前のコードはコメントアウトして、すぐ下に投稿日と更新日を返すように書き換えています。

ちなみに更新日は投稿日より未来の日付の場合に表示するようになってます^^

『更新日』ではなく『最終更新日』と表示させたい場合もコチラを修正すればOK。

 

『style.css』の修正

先ほどのtemplate-tags.phpの更新日のところで新しいクラス属性[upd-date]を使用してます。

つまり、クラス属性をstyle.cssに追加する必要があります。

[修正後]style.css

 

基本的には投稿日のクラス属性[entry-date]を真似します。
追加する行に色をつけてありますので参考にしてください。(11-13, 22, 36-42行目)

 

38行目の[content]は更新日の左に表示されるアイコン(f420)を指定してます。Twenty Fourteen ではGenericonsというアイコンフォントが採用されてます。アイコン一覧は以下。

[リンク] Genericonsのアイコン一覧

一覧にある420番のアイコンを更新日の左に付けてます♪

以上でカスタマイズは終わりです。

最後に

ページ更新日があったらいいなぁって前々から思ってたが、やってみたら意外と簡単にできてしまった。

参考になるページを探してみてもTwentyFourteenテーマが古いのか見つからなかったので、需要のある方は参考にしてみてください。

今後も少しずつカスタマイズして個性のあるページ(自己満?)にしていきたいと思っとりますm(_ _)m

 

SPONSORED LINKS
シェアお願いします♪

コメントを残す

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