1. TOP
  2. wordpressテーマカスタマイズ
  3. WordPressの記事に更新日・公開日を追加し検索エンジンやユーザーに伝える

WordPressの記事に更新日・公開日を追加し検索エンジンやユーザーに伝える

記事の更新日や公開日の表示は、ユーザーに記事の情報が新しいのか古いのかを伝える重要な要素の一つです。

また、適切な記述でWordPressのテンプレート内に追加することで、検索エンジンに記事の公開日や更新日を伝えることができ、検索結果に表示してもらうことができます。

公開日や更新日を適切に出力し、ユーザーにも検索エンジンにも好かれるようにWordPressのテーマを調整しましょう。

今回は、WordPressのテーマに更新日や公開日を適切に追加する方法についてご紹介します。

記事の公開日・更新日を追加する

記事の更新日や公開日は、WordPressのテーマ内の『single.php(記事)』や『page.php(固定ページ)』・『index.php(一覧ページ)』などの、記事を出力しているテンプレートのループ内に下記のコードを挿入するだけで適切に追加することができます。

公開日

<time class="entry-date date">
公開日:<?php echo get_the_date(); ?>
</time>

最終更新日

<time class="update date">
更新日:<?php the_modified_date(); ?>
</time>

更新日や公開日は、検索エンジンに適切に情報を伝えるために、必ず『<time>~</time>』で囲んで記述するようにしましょう。また、公開日に『class=”entry-date”』更新日に『class=”update”』と付けてあげることで、よりわかりやすく伝えることができます。

公開日や更新日などの文言を日付に付け加えたいときは、上記のソースコードのように『更新日:<?php~』とphpの記述の前に記述するだけでOKです。

きちんと反映されれば、更新日や公開日をの追加は完了です。また、検索エンジンに適切に情報を伝えることにより、検索結果にもいつ投稿された記事なのかが表示されるようになります。
※基準が不明ですが、出力されない場合もあるようです。

ノウハウ系サイトや技術系サイトの場合は、記事の更新日を表示させることで、情報の新しさが伝わりやすくなるので、検索エンジンからの流入が以前より増えること間違えなしです!

公開日や更新日の日付の表示方法を変更する

日付の『◯年◯月◯日』表示は、WordPressの管理画面から一括で変更することができます。

個別に設定する

上記の方法では一括で設定されてしまいますが、上記で紹介した公開日や更新日を挿入するWordPressコードに手を加えることで個別に設定することもできます。

<?php the_modified_date('Y/m/d') ?>

上記のソースコードのように『()』の中に日付の指定を加えると、WordPressの管理画面の設定ではなく個別に指定した日付表示が適応されます。

日付の指定方法については、『WordPress Codex』で詳しく説明されてますので、参考にしてみてください。

Font Awesomeを使って日付の前にアイコンを表示する

日付をお洒落に表示させたい場合は、アイコンフォントを日付の前に追加しましょう。WordPressでアイコンを使用する場合は、FontAwesomeを利用することで簡単に設置することができます。

Font Awesomeを利用する場合は、WordPressテーマの『header.php』の中に下記のコードを追加してください。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

上記のコードを設置するだけで、WordPressで簡単にアイコンフォントを使用することができるようになります。

FomtAwesome用のコードの設置が終わったら、実際に日付の前にアイコンを設置してみましょう。

<!--公開日-->
<time class="entry-date date">
<i class="fa fa-refresh"></i><?php echo get_the_date('Y年m月d日'); ?>
</time>
<!--更新日-->
<time class="update date">
<i class="fa fa-pencil"></i><?php the_modified_date('Y年m月d日'); ?>
</time>

『<i class=”fa アイコンコード”></i>』を付け加えるだけで上記の画像のように、公開日・更新日の前にアイコンを表示させることができます。

WordPressでFont Awesomeを使う方法については、下記の記事で詳しく紹介しているので、是非読んで見てください。

以上で、WordPressの記事に公開日や更新日を表示さえるための作業は完了です。ユーザーや検索エンジンに好まれるサイトを作成するためにも設置していない場合は設置してみてください!