Wordpressの投稿時間をクライアント時間で表示する方法

Frog Advent Calendar 2016 21日目です。
現在、バンクーバーで語学学校に通っています。上から目線でこれからバンクーバーに来る人にアドバイスするとすれば、英語は日本で勉強してきた方がいいです。少なくともTOEIC200点台で来ると、日本でできる文法や単語の勉強をバンクーバーでやることになるので、もったいなく感じています。

その日本とバンクーバーは時差が17時間です。バンクーバーが21日の午前9時だと、日本は22日の午前2時。つまり、バンクーバー時間で21日に書いた記事は、Wordpressの設定が東京になっていると22日として投稿されてしまう可能性があります。
そこで、Wordpressのタイムゾーンの設定や仕組みは検索すればたくさん出てくるので、今回は斜め下あたりからタイムゾーンを使ってみようと思います。

Wordpressの記事は投稿時間をWordpressで設定したタイムゾーンの時間GMT時間の2つの値でデータベースに持っています。このGMT時間を利用して、記事が投稿された時間をクライアントのタイムゾーンに合わせて表示してみるという、需要がないかもしれないことをやってみようと思います!

この記事では、GMTとUTCの値は同じとして扱っています!定義があいまいですみません。

PHPでWordpressの投稿時間を取得して、JavaScriptを使ってクライアントのタイムゾーンに変換します。

もくじ

  1. とりあえず、Wordpressのデータベースを見てみよう
  2. WordpressのGMT時間を取得
  3. クライアントのタイムゾーンで投稿日時を表示するJavaScript

とりあえず、Wordpressのデータベースを見てみよう

まず初めに、投稿日時がデータベースにどのように登録されているのか確認します。
Wordpressが使っているデータベースのwp_postsというテーブルに投稿の情報が入っています。
その中の、post_dateがWordpressで設定したタイムゾーンの時間を持っていて、post_date_gmtがGMT時間を持っています。

実際に、タイムゾーンを[東京]に設定した場合と、[バンクーバー]に設定した場合の値を見てみましょ。

まず、Wordpresの設定のタイムゾーンを[東京]にした場合

1
2
3
post_date | post_date_gmt
------------------------------
2016-12-21 17:43:59 | 2016-12-21 08:43:59

Wordpresの設定のタイムゾーンを[バンクーバー]にした場合

1
2
3
post_date | post_date_gmt
------------------------------
2016-12-21 00:46:40 | 2016-12-21 08:46:40

設定の変更に約3分かかっているので、GMT時間で約3分の誤差がありますが、Wordpressのタイムゾーンを変更しても、GMT時間は変わらないということがわかりました。
このGMT時間を使っていきます。

WordpressのGMT時間を取得

GMT時間はWordpress関数のget_post_time( 'U', true )を使って取得することができます。
第一引数にUを指定すると、Unixタイムスタンプ(1970年1月1日からの経過秒数)で取得することができます。JavaScriptを使って、クライアントのタイムゾーンに変更するときに、Unixタイムスタンプを使うので、Unixタイムスタンプで取得しています。第二引数にtrueを指定することで、GMT時間を取得できます。

取得した値をJavaScriptが使用するために、今回はtimeタグにgmttimestamp属性を追加して、そこにいれています。

1
<time id="pdate" gmttimestamp="<?php esc_attr( get_post_time( 'U', true )); ?>"><?php the_date(); ?></time>

HTMLでの出力は以下のようになります。

1
<time id="pdate" gmttimestamp="1482310000">2016年12月21日</time>

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

クライアントのタイムゾーンで投稿日時を表示するJavaScript

WordpressのGMT時間を取得できたので、次はクライアント側でJavaScriptを使ってタイムゾーンを変更します。

1
2
3
4
5
6
(function($) {
var gmtDate = $('#pdate').attr('gmttimestamp'); //sec
var clientDate = new Date(gmtDate*1000);
//replace
$('#pdate').text(clientDate);
})(jQuery);

Wordpressのタイムゾーンが[バンクーバー]で投稿した記事を日本時間に設定してあるパソコンで見た場合

1
<time id="pdate" gmttimestamp="1482310000">Wed Dec 21 2016 17:46:40 GMT+0900 (Japan Standard Time)</time>

WordpressのUnixタイムスタンプはで返すので、JavaScriptのDate関数が読めるミリ秒に変換しています。また、Date関数は、自動でクライアントのタイムゾーンに変換してくれるので、たったこれだけで大丈夫です!便利!今回は!
ただ、Date関数に関して調べつくせていないので、もしかするとブラウザによって挙動が変わるかも…未検証です。すみません。

今回は、Date関数で取得した値を置き換えているだけですが、それでは余分な情報もでてくるので、適宜表示を調整してください!

以上です。
AdventCalendar用のブログだと、日本時間のクライアントとバンクーバー時間のクライアントで日付が違うと紛らわしくなるし、ブログで1日の誤差は全く気にならないことがほどんどなので、使う場面はそうそうないかもしれません。
それでも、クライアントごとに時間を変えたいという方は、試してみてください。

J彡□д□)< クリスマスまであと4日