PHPTypeScript

【WordPress】更新日などの日時をブラウザの言語設定（現地時間）で表示する

更新日：2023/01/31

海外のサイトを見ていると更新日時が現地時間のため、分かりにくいと感じることがあります。
そこで、更新日時を現地時間で表示する方法をお伝えします。

なお、この記事はWordPressを想定していますが、考え方は他のCMSでも使えます。

概要

WordPress側で、次のようなタグを出力します。

<span class="local_time" data-local_time="1674725424">2023年01月26日 09時30分24秒</span>

後はブラウザ側のJavaScriptで、日時を置き換えます。

WordPress側の処理

function.phpやプラグインでjsファイルを読み込みます。

add_action('wp_enqueue_scripts',function (){
    wp_enqueue_script( 'my_script',get_template_directory_uri().'/my_script.js');
});

テンプレートファイルなどで、タグを出力します。
WordPressのループ内で出力する場合は、次のようなイメージになります。

if ( have_posts() ):
	while ( have_posts() ): the_post();
?>
	<h1><div class="utitle"><?= get_the_title() ?></div></h1>
<?php
	$timestamp = get_post_modified_time( 'U', true );
	$display_date = wp_date( 'Y年m月d日 H時i分s秒' , $timestamp );
?>
	<p>更新日時：<span class="local_time" data-local_time="<?= $timestamp ?>"><?= $display_date ?></span>
<?php
	the_content();

ここではspanタグのクラスに local_time を、data-local_time属性にタイムスタンプをセットしています。
タイムスタンプの取得方法については、この記事のタイムスタンプの取得例を見てください。

wp_date()はWordPressのタイムゾーン設定を参照して、日付を生成してくれます。

js側の処理

jsファイルは、次のようになっています。

(()=>{
    if( navigator.language !== "ja" ) 
        document.addEventListener('DOMContentLoaded',
            ()=>{
                Array.from(document.getElementsByClassName('local_time'))
                    .forEach( e=>{
                        const dateTime = new Date(e.dataset.local_time*1000);
                        e.innerText = dateTime.toLocaleDateString() + " " + dateTime.toLocaleTimeString();
                    });
            });
})();

navigator.language は、ブラウザの言語設定がセットされています。
この値を見て、日本語のときはそのまま放置です。

古いブラウザは navigator.language が存在しない可能性がありますが、その場合は後に続くコードも動作しない可能性があります。
そこまで考えて実装する意味は、あまりないと思います。

Date()内で1000倍しているのは、PHPのタイムスタンプが秒数のところjsはミリ秒単位だからです。

dateTime.toLocaleDateString()とdateTime.toLocaleTimeString()は、ブラウザの言語設定を見て適切な形式で日付と時間を出力してくれます。

タイムスタンプの取得例

WordPressでタイムスタンプを取得する方法を、いくつか紹介します。

投稿の更新日を取得

投稿の更新日をタイムスタンプで取得するときは、get_post_modified_time()を呼び出します。

WordPressループ内は、次のように記述します。

$timestamp = get_post_modified_time( 'U', true );

ループ外では、グローバル変数の$postまたは、get_posts()等で取得した投稿データをget_post_modified_time()の３番目の引数に指定します。

global $post;
$timestamp = get_post_modified_time( 'U', true ,$post );

$posts = get_posts( array(/*条件*/) );
foreach ( $posts as $post ){
    $timestamp = get_post_modified_time( 'U', true ,$post );

get_post_modified_time()の３番目の引数は、投稿IDを指定することもできます。

$timestamp = get_post_modified_time( 'U', true ,17 );

投稿の投稿日を取得

投稿の投稿日をタイムスタンプで取得するときは、get_post_time()を呼び出します。
使い方は、get_post_modified_time()と同じです。

$timestamp = get_post_time( 'U', true );

global $post;
$timestamp = get_post_time( 'U', true ,$post );

$timestamp = get_post_time( 'U', true ,17 );

サイトの最終更新日を取得

サイトで最後に更新した記事の更新日を取得します。

$timestamp = strtotime(get_lastpostmodified('gmt').' UTC');

get_lastpostmodified()は、最後に更新した記事の更新日を、'Y-m-d H:i:s' で返します。
次にstrtotime()でタイムスタンプに変換しています。

現在の日時を取得

現在日時のタイムスタンプは、time()で取得します。

$timestamp = time( );

日時を指定して取得

現在日時のタイムスタンプは、DateTime()で取得するのがわかりやすいです。

$timestamp = (new DateTime('2020-5-3 8:4:3', new DateTimeZone('Asia/Tokyo')))->getTimestamp();

日時は日本時間で指定しています。

しかしサーバーのタイムゾーンに'Asia/Tokyo'がセットされていない可能性があります。
そこでDateTime()の２番目の引数に、タイムゾーンを指定しています。

関連記事

スポンサーリンク

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。