WordPressに投稿日と更新日を表示させる。time要素でタイムゾーンも仕込んでみた

記事のタイトル部分に「投稿日」だけでなく「更新日」も表示させるようにしてみました。せっかく書き直しても古い日付だけなのもナンですから。
一度も更新してない記事には「更新日」は表示されないようにしています。
ついでにHTMLの<time>要素の「datetime属性」でタイムゾーンも仕込みました。

で、日付だけ表示する場合でも「the_date」より「the_time」のほうがイイとか、今回調べたことをメモっておきます。

本日のINDEX

スポンサーリンク

投稿日と更新日の表示のコード

投稿日と更新日の表示のためのコードの例です。time要素も仕込んでいます。
投稿・固定ページとも同じコードで使えます。
必ずループ内で使用。(じゃないと日時が抽出されないから)

<p><img src="アイコン">
<time datetime="<?php the_time('Y-m-d'); ?>T<?php the_time('H:i:sP'); ?>">
<?php the_time('Y年n月j日'); ?>
</time>
<?php if (get_the_modified_time('Y-m-d') != get_the_time('Y-m-d')) : ?>
<time datetime="<?php the_modified_time('Y-m-d'); ?>T<?php the_modified_time('H:i:sP'); ?>">
(<?php the_modified_time('Y年n月j日') ?>更新)
</time><?php endif; ?>
</p>

上の記述で、HTMLでは下記のように書きだされます(更新があった場合)

<p><img src=“アイコン”/>
<time datetime="2015-07-11T13:23:27+09:00">2015年7月11日</time>
<time datetime="2016-07-20T14:45:15+09:00">(2016年7月20日更新)</time>
</p>

本ブログでの表示例です。

更新がなければ投稿日だけの表示になります。
同じ日に更新しても、更新日の表示はでません。(投稿と更新の比較の対象を「年月日」にしたので)

<p><img src=“アイコン”/>
<time datetime="2015-07-11T13:23:27+09:00">2015年7月11日</time>
</p>

本ブログでの表示例です。

the_time と the_dateの違い

投稿日を表示するテンプレートタグは the_time を使いました。

年月日しか表示しないんなら the_date でイイんじゃないかと思うところですが、
the_date は「同じ日に複数の記事がある場合は、最初の記事とともに一度だけ出力される」という仕様だそうです。
なので、同日に複数投稿すると、最初に書いた記事だけに「投稿日」が表示されて、2番目以降の記事には何も表示されないんです。
同じファイル内に the_date を複数書いても同じ現象でした。最初だけ表示されて、2個目以降は表示無し。

それに対して the_time は、複数投稿があっても、同じファイルに複数記述しても、2個目以降もちゃんと表示されます。秒単位で時間を抽出しているから同じ値にならないのね。
「time」と言いながら「年月日」も出してくれるので、こっちのほうが the_date より投稿日を表示するには使い勝手がイイかんじ。

テンプレートタグ/the time|WordPress Codex 日本語版
テンプレートタグ/the date|WordPress Codex 日本語版

the_time と the_date のデフォルトの表示

the_time() はパラメータ無し(デフォルト)だと、
wordPressの「管理画面」>「設定」>「一般」の「時刻フォーマット」で指定した書式を表示します。

<?php the_time(); ?>
12:27 pm <!--管理画面で設定した書式で表示されます-->

同じように the_date() はパラメータ無し(デフォルト)だと、
wordPressの「管理画面」の「日付のフォーマット」を表示します。

<?php the_date(); ?>
2016年7月22日 <!--管理画面で設定した書式で表示されます-->

the_time() のほうに「管理画面」の「日付のフォーマット」を表示させたい場合は、get_option(‘date_format’) を使います。こりゃ便利ですね。

<?php the_time(get_option('date_format')); ?>

逆に、the_date() に「管理画面」の「時刻のフォーマット」を表示させたい場合は、get_option(‘time_format’) を使います。あんまり需要なさそうだけど。時間を表示させても「最初の1回しか表示しない」性格は変わらないので。(実験済み:マジで1回しか出しませんでした)

<?php the_date(get_option('time_format')); ?>

管理画面で設定した以外のフォーマットで表示させたい場合は、日付や時刻のパラメータを使って記述します。

<?php the_time('Y-m-d'); ?>

この Y とか m とかのパラメータについては、こちら↓で一覧にまとめました。
WordPressの日付と時刻の書式を、コピペ用に一覧にしてみた

投稿日と更新日が異なる場合だけ更新日を表示する

更新日の表示には the_modified_time() が用意されています。modified は修正・変更されたって意味。
これは、記事が最後に更新された時刻 (と日付) を表示します。便利ですね WordPress。

コレをパラメータ無しで使うと、管理画面の「日付のフォーマット」を表示するんだって。
timeなのにデフォが「日付」とは妙な仕様です。
ですので、管理画面の時刻のフォーマットを表示したければ「get_option(‘time_format’)」を使います。まあ更新日の表示に使うなら、日付だけで充分なんですけどね。

投稿日と更新日を比べる

投稿日の表示には the_time更新日の表示には the_modified_time を使えばOKだとわかったけど、それだけだと、1回も書き直していない記事にまで更新日が出ちゃいます。the_modified_time は「最後に更新された日時」を表示する仕様なので。

投稿日と更新日を比較して、それが異なる場合だけ更新日を表示するように、if文を仕込みます。

<?php the_time('Y年n月j日'); ?>
<?php if (get_the_modified_time('Y-m-d') != get_the_time('Y-m-d')) : ?>
(<?php the_modified_time('Y年n月j日') ?>更新)
<?php endif; ?>

投稿日と更新日を比較する if文では、get_the_modified_timeget_the_time を使っています。
get_the_modified_time は、更新日を取得します。表示じゃなくて値をゲットするだけ。
同じく get_the_time は、投稿日を取得します。

このとき、両方のパラメータの指定を「日付」のフォーマットにしておくことが重要
パラメータ無しだと、両方とも管理画面の時刻フォーマットになります。
(the_modified_timeはデフォは日付でしたが、get_the_modified_timeはなぜか時刻です)
時刻のままだと、同じ日にちょこっと書き直しただけでも「更新日」として出ちゃう。
これを避けるには、日付のフォーマットにしておく必要があります。
「get_option(‘date_format’)」を使うか、自分でパラメータを指定して「日付」にします。
*このパラメータについては、こちら↓で一覧にまとめました。
 WordPressの日付と時刻の書式を、コピペ用に一覧にしてみた

テンプレートタグ/the modified time|WordPress Codex 日本語版
テンプレートタグ/get the modified time|WordPress Codex 日本語版
テンプレートタグ/get the time|WordPress Codex 日本語版

time要素で正確な日時やタイムゾーンを記述する

HTMLの<time>要素はヒトのためでなく機械用。
datetime属性でタイムゾーンを含んだ記述をすることで、ウェブサービス(検索エンジンのクローラとか)に正しい日時を供給するんだって。

タイムゾーンとは、「協定標準時(グリニッジ標準時)」に対して何時間の時差があるかを示すもので「+hh:mm」か「-hh:mm」と書きます。

日本は「協定標準時」より9時間早いので、タイムゾーンは「+09:00」なんです。
例えば、日本の 2020年7月24日正午のタイムゾーンを含んだ日時表記は、
2020-07-24T12:00:00+09:00となります。

HTMLの<time>要素についてはこちらに詳細:
[25] 新しい要素
タイムゾーンについてはこちらをご覧ください:
datetime属性で使う「日付と時間」の表記方法|ほんっとにはじめてのHTML5とCSS3

タイムゾーンで使えるパラメータで「c」ってのがあるんですが、これはこの1文字でタイムゾーンまで含んだ日時が一発で出て、スゴイんだけど、このタイムゾーンは「協定標準時(00:00)」になっちゃう。(まあ別に大したこと書いてないブログなら、これで充分っちゃ充分なんですけどね…ww)

<?php the_time('c') ?>
2016-07-22T12:27:35+00:00

ですので、手動で整えてこんなかんじにしました。

<?php the_time('Y-m-d'); ?>T<?php the_time('H:i:sO'); ?>
2016-07-22T12:27:35+09:00

上のコードで、タイムゾーンのところに「O(アルファベット大文字)」を使っています→(‘H:i:sO’)。これは「協定標準時との時差」を自動で出してくれる 優れもののパラメータです。
コレも含めて、タイムゾーンで使えるパラメータはこちら↓で一覧でまとめました。
WordPressの日付と時刻の書式を、コピペ用に一覧にしてみた

関連記事

WordPressの Embedカードのリンクを別ウィンドウで開く(PCのみ。スマホ・タブレットはそのまま)

WordPressの Embedカード(ブログカード)のリンクは、デフォルトでは同ウィンドウで開くようになっていますが、これを別ウィンドウ(別タブ)で開くように [記事を読む]

WordPressの Embedカードのスタイルを編集する方法2つ

前回の記事で、WordPress 4.5 の Embedカード(ブログカード)の「テンプレートの構成」や「HTML要素のクラス名」などを調べました。これを元に、 [記事を読む]

WordPress4.5で Embedカードの PHPファイルの構造がだいぶ変わったみたい

前回から WordPressの Embedカード(ブログカード)について調べたことをメモっています。 今回は Embedカードの PHPファイルの構造について [記事を読む]

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

^