WordPressに『日時』表示。PHPとJavaの使い分け

投稿日:2019年11月6日 更新日:

スポンサーリンク

 


Javascriptで表示

WordPressのサイドバーなどに『日時』表示したい時がありますよね。 その時に初心者が悩むのがPHPを使うかJavascriptを使うかではないでしょうか?

夫々の言語の特性に沿って使い分ける必要があります。

結論として、リアルタイムの日時表示はJavascriptで、ページをアクセスされた時の日時表示(time stamp)は、PHPを使います。 初心者(自分のことです)が戸惑ってしまうPHPとJavaScriptの使い分けを『日時』表示プログラムを例に考察して見たいと思います。

 

 

スポンサーリンク

 

phpによる『日時』表示プログラム

phpによる『日時』表示のソースコードを下に示します。 非常に簡単ですね。

このphpプログラムを実行するためにPost Snippetsプラグインを使ってショートコード化します。 ショートコードの名前を【date_stamp_php】にしました。 下がPost Snippetsの設定画面で、注意点は<?php と ?>を外すことが必要です。

Post Snippetsの設定画面

 

phpによる『日時』表示

以下がショートコード【date_stamp_php】(←半角括弧にすること)を投稿記事に埋め込んだ結果で正しく『日時』表示ができています。 この『日時』のデータはサーバーの時計から得ていることに注目してください。

2019年11月17日
20時26分07秒

  • この『日時』表示は、このページがサーバーへリクエストした時点の『日時』を示し、時間(秒)は動いていませんね。 この時刻を更新するには、ページの再読み込みが必要です。
  • どんな時に使用するかと言いますと、サーバーにアクセスした『日時』の表示などに使います。 (当サイトの投稿記事:「PHPの小技 ブログ記事内の「経過年」表記を自動更新させるには」もPHPを使用していますのでご参照ください) また、この時刻を利用して条件分岐で「おはよう」「こんばんわ」「四季の挨拶」などに利用することもできます。
  • ここで、なぜサーバーにアクセスした時点しか表示できないかと言いますと、ページにアクセスすることでこのプログラムが起動してその時点の時刻を読み取ることができますが、その後は、このプログラムを起動するためのイベントが発生しないので、その時点の『日時』のままです。
  • あえてこの『日時』表示をリアルタイムで動かすためには、ページのリロード(サーバーへのリクエスト)を行えば可能です。 このリロードを自動で、例えば1秒毎に行う方法として、HTMLページのhead部分に<meta http-equiv="Refresh" content="1">を設置します。 このmetaタグのcontent="1"で1秒毎に、自動でページがリロードするので『秒』が動き出しますが、1秒毎にリロード(リフレッシュ)するので画面がフリッカして実用には耐えられません。(独立した『日時』を表示するphpファイルを作成して、インラインフレームで『日時』表示を埋め込む方法もありますがサーバ負荷上、合理的ではありません。) 
  • 以上から、『日時』のリアルタイム表示には、PHPが不適当であることが分かります。 リアルタイム表示を行うなら以下のJavascript(ユーザー側の端末でイベントクロックが使え、HTML要素を書き換えるプログラム)を利用します。

 

Javascriptによるリアルタイム『日時』表示プログラム

今度は、Javascriptでリアルタイム『日時』表示を行うソースコードを下に示します。 なお、このソースコードは”webdlab.com”さんの「demo5-1」のソースコードを参考に利用させて頂きました。

プログラムのポイント

  • リアルタイムに表示できる肝は、setInterval(処理prog ,イベント間隔ms)関数です。 意味は、処理progに対してイベント間隔(ms)を与えます。 このイベントで処理プログラムが実行しますので、処理プログラムが日時表示プログラムであればリアルタイムで日時表示を繰り返すことになります。
  • ここで注目すべきは、日時データやイベント間隔はユーザー側の端末に依存していることです。(サーバー側のデータではありません)
  • htmlのclassで指定される要素に対して下記の日時データが書き換えられます。(ページ内で日時データの使い回しする場合があるのでid指定でなくclass指定にしています)
Javascriptのコードclass指定
日付の出力→ $('.date').text(y + '/' + mm + '/' + dd + ' ' + '(' + wd[w] + ')' )class="date"
時分秒の出力→$('.time').text(hh + ':' + mmi + ':' + ss )class="time"
時分の出力→$('.time_m').text(hh + ':' + mmi)class="time_m"

このプログラムを実行させる方法

  • 上記のソースコードをhead部分に貼り付け設置します。 これで例えばhtmlの要素に<p class="date"></p>とすればそのpタグに日付が表示される様になります。
  • 今回は、『日時』表示の部品として簡単に使いまわしできる様に、Post Snippetsプラグインを使ってショートコード化し投稿記事に埋め込むことにしました。 ショートコードの名前を変数付きで【date_stamp x="date"】(←半角括弧にすること)にしています。 変数xを「date」「time」「time_m」に変えれば日時表示内容が変わります。 下のPost Snippetsの設定画面を参照してください。

Post Snippetsの設定画面

ショートコードの使い方・例

日付のみの表示

【date_stamp x="date" 】

日付と時分秒表示

【date_stamp x="date"】
【date_stamp x="time"】

 
 

日付と時分表示

【date_stamp x="date"】
【date_stamp x="time_m"】


 

日時表示をWebフォントに変更

日時表示の見栄えを良くするために、GoogleのWebフォントに変更してみました。 Webフォントは、端末によってフォントが変わらないというメリットがあります。 また、日時の数字が等幅で表示させたかったのでWebフォントは、Monoタイプ(B612 Mono)を使用しました。 (このページの日時表示は、既にWebフォントに変更済です。)

使い方は、簡単な変更手順は以下の通りです。(次回投稿記事に詳しく紹介したいと思います)

日時フォントの変更手順

ページのheadの中に、以下のタグを埋め込みます。

WordPressのテーマChild: Stylesheet (style.css)に以下コードを追記すると、日時表示部分のフォントが(B612 Mono)になります。

 

マトメ

PHPとJavascriptの違いは、ネットで色々な説明がありますが、イマイチ良く分かりませんでした。

今回、『日時』表示プログラムを通して、PHPは、サーバーで処理されるプログラム言語で、一方Javascriptはユーザー側の端末で実行されhtmlを直接イジるプログラム言語ということが分かりました。 この点を念頭に置いて目的に合ったプログラム言語の使い分けが必要ですね。 

最後に、このサイトのサイドバー「サイト検索」の上に、ショートコードを埋め込んだ『日時』表示を設置しましたのでご覧ください。

 

 


スポンサーリンク

〜〜〜〜〜〜〜〜〜〜〜

 

おすすめ記事

1

  レコードのハイレゾ録音へのヒント(Tips)   ハイレゾ録音のヒントになればと、 今までのレコードのハイレゾ録音を通して、思いつくまま必要と思われることを書き留めましたのでご ...

2

  これまでの当ブログ記事(テストレコードなどのブログ)の知見を通して、アナログ・レコードが音質的に不利な点が多々見つかりました。 アナログレコードの音質を好ましく思っている一人で、本当はあ ...

3

年代モノのレコードプレーヤTRIO(KP-51F)を使ってレコードのハイレゾ録音を行っていますが、このプレーヤの実力を知るためにテストレコード(AD-1)使って定性的な特性を調べ、断片的な記事を投稿し ...

4

eonkyoからDL購入したハイレゾファイルを基準音源にして、基準音源と同一録音のレコードをMCカートリッジとMMカートリッジでハイレコした音源の音質比較を試みました。 MCカートリッジは、オルトフォ ...

5

「HAP-Z1ESのDSEEとDSDリマスタリングエンジンの効果検証」(以前のブログ記事)は、 実際のLPレコードからハイレゾ化したリアルサウンドでDSEEを評価したものでした。 今回は、正弦波の組 ...

Copyright© ハイレコのブログ , 2019 All Rights Reserved Powered by AFFINGER5.