WordPress – 投稿日の代わりに更新日を表示する方法(日付操作)

なんてこった!昔の記事を編集して新しい情報を追加したのに、日付が古いまま。せっかく中身を更新したのに読者に新しい情報だと認識してもらえない。日付を見ただけでブログから人が離れていってしまうかも?

というわけで、投稿日の代わりに更新日を表示させましょう!

この記事では投稿日や更新日を表示したり非表示にしたりする方法を解説していきます。スタイルシートを用いて、とても簡単に表示・非表示を切り替えることができますので、更新日を表示させたい方は、ぜひ参考にしてみてください。

この方法が使えるテーマかどうかをチェックする


通常は日付を編集するには、子テーマを作成して PHP のファイルを編集するという難しい作業を行わなければなりませんが、スタイルシートを利用する場合は、とても簡単に更新日を表示させることができます。

ただし、どのテーマでもこの方法を使えるわけではありませんので、最初にこの方法が利用できるテーマなのかをチェックする必要があります。

 

1. ページのソースを表示する

まずあなたが運営しているブログをブラウザで開いてください。そして右クリックから ページのソースを表示 を選んでください。画像は Windows の Chrome でソースを表示する例です。違う環境の場合でも、ブラウザでソースを表示できますのでソースを表示する項目を探してみてください。

 

2. ページ内検索を行う

ずらっと文字が並んだページが表示されます。これがブログのソースです。ここでページ内検索を行います。

キーボードの Ctrl + F を押して、検索ウィンドウを出してください。違う環境では、ブラウザで ページ内検索 という項目を探すと同じことができます。

そして半角英字で time class と入力してみてください。画像のように、<time>タグがソース内に存在していると、このページで解説している方法で更新日を表示することができます。

スタイルシートを追加できる環境を作る


まずはスタイルシートを追加できる環境を作ります。このブログではテーマに依存しない形でスタイルシートを追加・編集するために、Simple Custom CSS and JS というプラグインの利用を推奨しています。

Simple Custom CSS and JS をインストールしていない方は、以下のページを参考にインストールしてみてください。

WordPressに自作のCSS・JavaScript・HTMLを追加するには?

もしなんらかの理由があってプラグインのインストールをしたくない場合は、ダッシュボード > 外観 > カスタマイズ内にある 追加 CSS を開いてスタイルシートを入力するようにしてください。

投稿日を更新日に入れ替える


1. スタイルシートを追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom CSS を選択して、スタイルシートを入力するページに移動します。

 

2. スタイルシートを追加する

タイトルに Datetime of the Article と入力して、その下の /* */ に囲まれた英文をすべて削除してから、以下のコードを貼り付けてください。タイトルは自分で管理する用ですので、覚えやすいタイトルに変えていただいて構いません。

貼り終えたら右側にある公開ボタンを押してください。

 

3. 更新日が表示されているかチェック

やりました!投稿日が消えて、代わりに更新日が表示されています。これで古い記事だと思われなくなりましたね。

投稿日には投稿日: 更新日には更新日: と表示する


上記の方法でもぜんぜん問題ないのですが、投稿日が表示されているのか、更新日が表示されているのかわからないため、なんの日付なのかを表示するようにします。

ダッシュボード > Custom CSS & JS > All Custom Code

さきほど追加したスタイルシートを編集します。画像のページに移動して、編集 と書かれた部分を押してください。そしてコードをすべて削除して、以下のコードを貼り付けてください。

貼り付け終わったら右側の 更新 ボタンを押しましょう。

 

投稿日

更新日&投稿者

投稿後、一度も更新されていない記事は 投稿日: が追加されて表示されます。更新されたことのある記事は、更新日: が追加されて表示され、投稿者との間に半角スラッシュ / が入ります。

投稿日と更新日を同時に表示する


上記ではどちらか一方だけ表示していましたが、両方表示したい場合は、以下のコードをさきほどのスタイルシートの代わりに貼り付けてください。

同時に表示

投稿日と更新日が同時に表示され、区切り文字として半角スラッシュ / が表示されています。

詳しく解説


解説したとおりに行っても、テーマによっては正常に表示されないことがあります。その場合、自分でスタイルシートを編集する必要があります。詳しく解説しますので、表示に問題のある部分が出てきた場合は、該当する部分を編集してみてください。

 

日付と投稿者を表すタグ

投稿日
<time class="entry-date published" datetime="2017-12-09T18:50:19+09:00">2017年12月9日</time>

更新日
<time class="updated" datetime="2017-12-30T19:07:21+09:00">2017年12月30日</time>

投稿者
<span class="byline"> 投稿者: <span class="author vcard"><a class="url fn n" href="https://gameusers.org/dev/blog/author/az1979/">あづみ</a></span>

デフォルトで存在しているテーマの Twenty Fifteen、Twenty Sixteen、Twenty Seventeen などは、投稿日・更新日の表示を<time>タグを利用して行っています。

通常は投稿日の日付だけが表示される設定になっており、更新日のタグも存在しているのですが、表示されない設定になっています。このページではその隠されているタグをスタイルシートで表示しています。

 

スタイルシートの解説

/* 投稿日の日付の前に文字列を追加する
   content: '' の中に文字を入れる */
article time.published:before {
  content: '';
}

/* 投稿日の日付の後に文字列を追加する
   content: '' の中に文字を入れる */
article time.published:after {
  content: '';
}

/* 更新日が存在する場合は、投稿日を非表示にする
   投稿日を常に表示したい場合は必要ありません */
article time.published:not(.updated) {
  display: none;
}

/* 隠されている更新日を表示する */
article time.updated:not(.published) {
  display: inline;
}

/* 更新日の日付の前に文字列を追加する
   content: '' の中に文字を入れる */
article time.updated:not(.published):before {
  content: '';
}

/* 更新日の日付の後に文字列を追加する
   content: '' の中に文字を入れる */
article time.updated:not(.published):after {
  content: '';
}

/* 投稿者の前に文字列を追加する
   content: '' の中に文字を入れる */
article .byline:before {
  content: '';
}

/* 投稿者の後に文字列を追加する
   content: '' の中に文字を入れる */
article .byline:after {
  content: '';
}

上記のスタイルシートを参考にしながら編集してみてください。更新日: という文字や、区切り文字の半角スラッシュ / は content: ” の中に文字を入れることによって実現しています。

例えば英語表記にしたい場合は、更新日: と書かれている部分を、Updated: などに変更すると英語表記になります。いろいろ文字を入力して、ブログに合う文字を探してみてください。

最後に


検索サイトは昔の記事もこまめにチェックして更新していると、評価が高くなるようなので、記事の内容が古くなっている場合は定期的に見直してみましょう。

更新した日付が表示されていると、検索サイトに対してだけでなく、ブログにアクセスしてくれた読者に対しても、新しい情報であることを示せるのでメリットが非常に大きいです。

スタイルシートの解説を見ると難しそうに感じてしまうかもしれませんが、やることはコピペして、content: ” の中身を書き換えるくらいなので、一度やってみれば簡単だと思えるはずです。

更新日の表示はブログにとって結構重要な要素なので、記事を参考にしながら、頑張って設定してみてください。

コメントを残す

メールアドレスが公開されることはありません。