Javascriptで表示
WordPressのサイドバーなどに『日時』表示したい時がありますよね。 その時に初心者が悩むのがPHPを使うかJavascriptを使うかではないでしょうか？
夫々の言語の特性に沿って使い分ける必要があります。
結論として、リアルタイムの日時表示はJavascriptで、ページをアクセスされた時の日時表示（time stamp）は、PHPを使います。 初心者（自分のことです）が戸惑ってしまうPHPとJavaScriptの使い分けを『日時』表示プログラムを例に考察して見たいと思います。
phpによる『日時』表示プログラム
phpによる『日時』表示のソースコードを下に示します。 非常に簡単ですね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php date_default_timezone_set('Asia/Tokyo');//タイムゾーンの指定 $b = date('Y');//現在西暦年 $c = date('n');//現在月 0埋め無し 有りはmにする $d = date('j');//現在日 0埋め無し 有りはdにする $e = date('H');//現在時 時刻 24時間表記 (0埋め) 有りはhにする $f = date('i');//現在分 $g = date('s');//現在秒 echo $b."年".$c."月".$d."日"."<br>". $e."時".$f."分".$g."秒"; ?> |
このphpプログラムを実行するためにPost Snippetsプラグインを使ってショートコード化します。 ショートコードの名前を【date_stamp_php】にしました。 下がPost Snippetsの設定画面で、 「 <?php 」 と 「 ?> 」 は不要要です。
Post Snippetsの設定画面
phpによる『日時』表示
以下に示すPostSnippetsのショートコード名「date_stamp_php」を投稿記事に記述すると正しく『日時』表示ができています。 この『日時』のデータはサーバーの時計から得ていることに注目してください。
ショートコード[date_stamp_php]
を記事内に記述すると下の様に日時が表示される
2024年12月13日
11時01分17秒
- この『日時』表示は、このページがサーバーへリクエストした時点の『日時』を示し、時間（秒）は動いていませんね。 この時刻を更新するには、ページの再読み込み（リロード）が必要です。 注記：ページをリロードしてもページ・キャッシュの影響で日時表示が変わらない場合があります。 例えば、「WP Fastest Cache」プラグインの場合は、後述の「WP Fastest Cache」特定ページでキャッシュを除外する方法を参照してください。 2021/8/8 追記
- どんな時に使用するかと言いますと、サーバーにアクセスした『日時』の表示などに使います。 （当サイトの投稿記事：「PHPの小技 ブログ記事内の「経過年」表記を自動更新させるには」もPHPを使用していますのでご参照ください） また、この時刻を利用して条件分岐で「おはよう」「こんばんわ」「四季の挨拶」などに利用することもできます。
- ここで、なぜサーバーにアクセスした時点しか表示できないかと言いますと、ページにアクセスすることでこのプログラムが起動してその時点の時刻を読み取ることができますが、その後は、このプログラムを起動するためのイベントが発生しないので、その時点の『日時』のままです。
- あえてこの『日時』表示をリアルタイムで動かすためには、ページのリロード（サーバーへのリクエスト）を行えば可能です。 このリロードを自動で、例えば1秒毎に行う方法として、HTMLページのhead部分に<meta http-equiv="Refresh" content="1">を設置します。 このmetaタグのcontent="1"で１秒毎に、自動でページがリロードするので『秒』が動き出しますが、１秒毎にリロード（リフレッシュ）するので画面がフリッカして実用には耐えられません。（独立した『日時』を表示するphpファイルを作成して、インラインフレームで『日時』表示を埋め込む方法もありますがサーバ負荷上、合理的ではありません。）
- 以上から、『日時』のリアルタイム表示には、PHPが不適当であることが分かります。 リアルタイム表示を行うなら以下のJavascript（ユーザー側の端末でイベントクロックが使え、HTML要素を書き換えるプログラム）を利用します。
「WP Fastest Cache」特定ページでキャッシュを除外する方法
- 「WP Fastest Cache」 の設定を選択
- 「除外する」タブを選択。 「除外するページ」の「 Add New Roule」 をクリックして、ウィザード画面で、キャッシュを除外するページを指定する。 OKならSaveボタンで保存すると、このページのキャッシュを行わない様になります。
ウィザード画面
Javascriptによるリアルタイム『日時』表示プログラム
（2020/7/6 追記）
定義関数との競合を避けるために 「date、time、time_m」夫々の前にnow_ を追加して「 now_date、now_time、now_time_m」に変更しました。）
今度は、Javascriptでリアルタイム『日時』表示を行うソースコードを下に示します。 なお、このソースコードは”webdlab.com”さんの「demo5-1」のソースコードを参考に利用させて頂きました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<script type="text/javascript"> jQuery(function($){ setInterval(function(){ var now = new Date(); var y = now.getFullYear(); var m = now.getMonth() + 1; var d = now.getDate(); var w = now.getDay(); var wd = ['日', '月', '火', '水', '木', '金', '土']; var h = now.getHours(); var mi = now.getMinutes(); var s = now.getSeconds(); var mm = ('0' + m).slice(-2); var dd = ('0' + d).slice(-2); var hh = ('0' + h).slice(-2); var mmi = ('0' + mi).slice(-2); var ss = ('0' + s).slice(-2); $('.now_date').text(y + '/' + mm + '/' + dd + ' ' + '(' + wd[w] + ')' ); $('.now_time').text(hh + ':' + mmi + ':' + ss ); $('.now_time_m').text(hh + ':' + mmi); }, 1000); }); </script> |
プログラムのポイント
- リアルタイムに表示できる肝は、setInterval(処理prog ,イベント間隔ms)関数です。 意味は、処理progに対してイベント間隔（ms）を与えます。 このイベントで処理プログラムが実行しますので、処理プログラムが日時表示プログラムであればリアルタイムで日時表示を繰り返すことになります。
- ここで注目すべきは、日時データやイベント間隔はユーザー側の端末に依存していることです。（サーバー側のデータではありません）
- htmlのclassで指定される要素に対して下記の日時データが書き換えられます。（ページ内で日時データの使い回しする場合があるのでid指定でなくclass指定にしています）
| Javascriptのコード | class指定 | |
| 日付の出力→ | $('.now_date').text(y + '/' + mm + '/' + dd + ' ' + '(' + wd[w] + ')' ) | class="now_date" |
| 時分秒の出力→ | $('.now_time').text(hh + ':' + mmi + ':' + ss ) | class="now_time" |
| 時分の出力→ | $('.now_time_m').text(hh + ':' + mmi) | class="now_time_m" |
このプログラムを実行させる方法
- 上記のソースコードをhead部分に貼り付け設置します。 これで例えばhtmlの要素に<p class="now_date"></p>とすればそのpタグに日付が表示される様になります。
- 今回は、『日時』表示の部品として簡単に使いまわしできる様に、Post Snippetsプラグインを使ってショートコード化し投稿記事に埋め込むことにしました。 ショートコードの名前を変数付きで【date_stamp x="now_date"】(←半角括弧にすること)にしています。 変数xを「now_date」「now_time」「now_time_m」に変えれば日時表示内容が変わります。 下のPost Snippetsの設定画面を参照してください。
Post Snippetsの設定画面
ショートコードの使い方・例
日付のみの表示
shortcode
[date_stamp x="now_date"]
↓
日付と時分秒表示
shortcode
[date_stamp x="now_date"]
[date_stamp x="now_time"]
↓
日付と時分表示
shortcode
[date_stamp x="now_date"]
[date_stamp x="now_time_m"]
↓
日時表示をWebフォントに変更
日時表示の見栄えを良くするために、GoogleのWebフォントに変更してみました。 Webフォントは、端末によってフォントが変わらないというメリットがあります。 また、日時の数字が等幅で表示させたかったのでWebフォントは、Monoタイプ（B612 Mono）を使用しました。 （このページの日時表示は、既にWebフォントに変更済です。）
使い方は、簡単な変更手順は以下の通りです。（次回投稿記事に詳しく紹介したいと思います）
日時フォントの変更手順
ページのheadの中に、以下のタグを埋め込みます。
|
1 2 |
<link href="https://fonts.googleapis.com/css?family=B612+Mono&display=swap" rel="stylesheet"> |
WordPressのテーマChild: Stylesheet (style.css)に以下コードを追記すると、日時表示部分のフォントが（B612 Mono）になります。
|
1 2 3 |
/* Webフォント 日時数字の等幅指定 monospace */ .now_date,.now_time,now_time_m{font-family: 'B612 Mono', monospace;} |
マトメ
PHPとJavascriptの違いは、ネットで色々な説明がありますが、イマイチ良く分かりませんでした。
今回、『日時』表示プログラムを通して、PHPは、サーバーで処理されるプログラム言語で、一方Javascriptはユーザー側の端末で実行されhtmlを直接イジるプログラム言語ということが分かりました。 この点を念頭に置いて目的に合ったプログラム言語の使い分けが必要ですね。
最後に、このサイトのサイドバー「サイト検索」の上に、ショートコードを埋め込んだ『日時』表示を設置しましたのでご覧ください。
