Xeoryで記事の最終更新日時を表示させる方法(3分)|WordPress

相原 有希(Aihara Yuki)
28歳男/国家公務員、TABI LABOライター、LINE経理を担当/オーストラリアへの二度の留学経験に加え、TOEIC985点・英検1級を保持/プロフィールを読む▶︎

 


こんにちは、相原 有希です。

今回の記事では、WordPressテーマXeoryで記事をリライトしたときに「最終更新日時」を表示させるカスタマイズを紹介します。

HTML・CSS初心者でも2〜3分で完了するので、記事を読みながら挑戦してみてください!

 

Xeoryはデフォルトでは「投稿日時」しか表示されない

バズ部の「Xeory Base」は非常にシンプルで軽量なWordpressテーマなので気に入っているのですが、デザイン面で一箇所だけ気に入らない部分が ……。

それが、記事ページ上部に「最終更新日」がデフォルトでは表示されないという点。

デフォルトでは投稿日しか表示されない

SEOを狙う上でも、記事の信憑性(情報の鮮度)を担保することのできる「最終更新日」の情報は出しておきたいですよね。

完成図

これは簡単なカスタマイズで実装できますので、一緒にみていきましょう!

 

Xeoryの記事ページに「最終更新日」を表示させる方法

今回は記事ページの表示をいじっていくので、single.phpというファイルに手を加えます。

1親テーマ → 子テーマに single.php をコピー

WordPressのsingle.phpをいじるときには、親テーマのオリジナルファイルではなく、必ず子テーマに複製したコピーファイルを編集するようにしましょう。

親テーマ側のCSSをいじっても、テーマ自体がアップデートされたときに書き換えられてしまい、これまでのカスタマイズが水の泡になります。子テーマ側のCSSならば、このようなことが起きません。

また、親テーマにあるファイルをそのまま編集すると、万が一ファイルが破損した場合にWordpressにアクセスできなくなる可能性もあります。バックアップは必ず取っておいてくださいね。

 

2single.phpをテキストエディタでひらき、34行目ぐらいにある「header class=”post-header”」という表記を探す

下までスクロールしていくと、以下のような表記があるはず。

次のステップでは、この部分を修正していきます。

 

3コードを差し替える

34行目から42行目までを、下記修正用のコードにまるごと差し替えてみましょう!

保存をして、終了します。

コードの中身に関する補足その1

最終更新日という表記の左側はfontawesomeというアイコンを使用しています。

このアイコンに”rewrite”というクラス名をつけることで、style.cssで色などを変更 することを可能にしました。

コードの中身に関する補足その2

日付の表記は、YMDの箇所を変更すれば、

  • Y/m/d : 2018/02/23
  • Y-m-d : 2018-02-23

といったように表示形式を変更できます。が、必要性を感じないので特にいじる必要はないかと。

 

4style.cssで見た目を修正する

この時点では、画像のような見た目になっているはず。

更新日にインパクトが欲しい気がする

このままでも問題ないと思いますが、もう一捻りして、最終更新日が目に飛び込んでくるように修正してみましょう。

style.cssを開いて、次のコードを追記します。


こうすれば、以下の画像のように最終更新日のアイコンがオレンジ色に変わり、視認性がグッとあがりました。

アイコンをオレンジ色に変更。修正前よりも目を引くように!

色はお好みで変えることもできますので、自由にカスタマイズしてみてください。

WEB色見本 原色大辞典 – HTMLカラーコード

 

Xeoryの記事ページで「最終更新日」の情報を表示させることができました!

当初の狙い通り、記事ページの上部に「最終更新日時」を表示させることができました!

single.phpというファイルにコードを追記して、style.cssで見た目をほんの少し整形するだけで簡単に済むので、SEOに注力されている方は是非やってみてください。

ご精読ありがとうございました。

 

現在お使いのWordpressブログテーマに不満はありませんか?

ほんとうに使いやすいブログテーマが見つかれば、生産性もケタ違いに上がりますしモチベーションも高まります!

これまでに無料・有料あわせて15種類以上のWordpressテーマを使用してきたぼくが、「これは!」と本気で惚れ込んだ3つのテーマを厳選しました。

「今よりもブログを楽しみたい!」という方は、以下のボタンからレビュー記事へどうぞ!

シェアしてね!

 

【初心者用】ブログで月に1万円稼ぐ方法を徹底紹介!

ブログ運営歴2年の筆者が、ブログ収益「月1万円」のラインを達成するまでに行った全てのことを公開。

実際のスクショ画面をふんだんに盛り込んだ生々しい情報と共に、圧倒的なボリュームで語り尽くしています。

冒頭部分は無料ですので、まずは試し読みしてみて、続きが気になった方のみ購読をお願いします!

note.muにてワンコインで有料公開中!

 




この記事を読んだ人は、こんな記事も読んでいます