※当サイトの一部記事には広告を含みます。
うさねこ気まぐれPG開発室

【WordPress対応】エオルゼア時間をリアルタイムで表示するショートコード（PHP＋CSS）を作成してみた

2026.01.22

自作ショートコード実装してみた

ねこちゃん
ねこちゃん

うさちゃんが、とっても便利なファイナルファンタジーXIVブログ内ツールを作ってくれました。

うさちゃん
うさちゃん

今回、うさねこ散歩ブログ内で、エオルゼア時間を表示できるようにしてみました🐰✨
記事表示内では

  • 「ポップアップ型」＝下書きページ内のどこか1か所に記載すればOK
  • 「記事内表示型」＝時間を表示したい場所に記載

このふたつ。

ねこちゃん
ねこちゃん

よくわかんないけど、とりあえず表示できるんですね？！

うさちゃん
うさちゃん

できるってば😅🌿
ショートコード使用例まとめも書いておいたので、ねこちゃんも少しずつ覚えていこうね～✨
最初は「theme="pink"」とか「animate="pop"」みたいに、気に入ったものだけ覚えればいいから。

🐰 ☀️ Eorzea --:-- / Japan --:--:-- 🐱

エオルゼア時間表示

ショートコード例：ページ内でポップアップ

表示例：画面左上に表示されてホームページスクロールしても追従する

画像はエオルゼア時間が昼の状態での表示例です（theme=”pink”）。
[eorzea_floating_clock
 popup="true"
 popup_position="left"
 format_et="24h"
 format_jt="24h"
 theme="pink"
 mascot="true"
 animate="pop"
 font_size="18px"
 show_on_mobile="true"
]
広告
エレコム モニターアーム シングルアーム 17~32インチ対応 耐荷重:9kg ガス式 VESA規格対応 ホワイト DPA-SS08WH
エレコム モニターアーム シングルアーム 17~32インチ対応 耐荷重:9kg ガス式 VESA規格対応 ホワイト DPA-SS08WH
17~32インチサイズのモニターに対応するガススプリング式のシングルモニターアームです。
モニター下のスペースを有効活用してデスクの上を広く使うことができます。
軽い力で動かせるガススプリング式です。
モニターの位置を自在に動かせて、お好みのポジションにセットできます。
モニターを1台設置できるシングルアームタイプです。
可動域の広い5軸可動のアームタイプです。
VESA規格(75mm×75mm、100mm×100mm)に準拠したモニターに対応しています。
デスクの天板に挟んで固定するクランプ式と、天板に穴を開けてボルトを通して固定するグロメット式の2通りの取り付け方法が選べます。
モニター背面にネジをつけ、アームに取り付けたVESAマウントに下からネジ部分を引っ掛けて位置固定してご使用ください。
モニターの使用角度が決まったら、接続部のネジをしっかりと締めて固定してください。
Amazonで見る
最新の価格・在庫状況はAmazonでご確認ください。

UsaNeko Eorzea Floating Clock

サーバー時刻同期・ET/JST対応フローティング時計（WordPress用）

本記事では、WordPressに
エオルゼア時間（ET）と日本時間（JST）を同時表示できるフローティング時計
を実装するための仕組みと、実装のポイントをメモとして残しておきます。

本コードは、
👉 実運用で使っている構成をベースに、ポイントだけ抜粋して紹介します。

この時計でできること

  • エオルゼア時間（ET）をリアルタイム表示
  • 日本時間（JST）を同時表示
  • サーバー時刻と同期（閲覧者の端末時計ズレを補正）
  • 昼／夜で配色とアイコンが自動切替
  • 固定表示／インライン表示に対応
  • ショートコードで簡単に設置可能
  • 外部ライブラリ・外部CSSファイルは使用せず、WordPress標準機能のみで実装しています。

実装方針（先に結論）

この時計は、次の考え方で作られています。

  • 1ページに1個置く前提
  • 動作が分かりやすく、トラブルが起きにくい構成
  • WordPress標準機能のみを使用
  • 「高度すぎない」ことを重視

そのため、
ブログ内ツールとして扱いやすく、仕組みも理解しやすい構成にしています。

全体構成

PHPコードは、大きく次の3パートで構成されています。

① CSS（インラインCSSとして登録）
② サーバー時刻取得用 REST API
③ ショートコード（HTML + JavaScript）
広告
アキュビュー オアシス 【BC】8.8【PWR】-3.50 6枚入
アキュビュー オアシス 【BC】8.8【PWR】-3.50 6枚入
コンタクトレンズは高度管理医療機器です。必ず事前に眼科医にご相談の上、検査・処方を受けてお求めください。 ご使用前に必ず添付文書をよく読み、取り扱い方法を守り、正しく使用してください。
販売名：アキュビュー オアシス / 承認番号：21800BZY10252000 / 登録商標 原産国：アイルランド共和国 / アメリカ合衆国
DIA（直径）:14.0mm 、BC（ベースカーブ）:8.8 / 8.4mm、PWR:-0.50 ～ -6.00（0.25ステップ）、-6.50 ～ -12.00（0.50ステップ）、+0.50 ～ +5.00（0.25ステップ）
2週間頻回交換コンタクトレンズ / 1箱6枚入り / 両目6週間分/酸素透過率147DK/L / 含水率38％
コンタクトレンズの乾きから自由になることを目指したアキュビュー オアシス。それを可能にしたのは、次世代素材「シリコーンハイドロゲル」*と、独自の技術「ハイドラクリアプラス・テクノロジー」*の融合。変わらないみずみずしさと目の健康への思いが実を結んだ、コンタクトレンズの新しいカタチ。 ※ レンズ素材名：セノフィルコンA ※ Johnson&Johnson社独自のテクノロジー名。
Amazonで見る
最新の価格・在庫状況はAmazonでご確認ください。

① CSS：時計の見た目を定義

※以下は理解しやすいように要点のみ抜粋しています。

add_action( 'wp_enqueue_scripts', function () {
    wp_register_style( 'usaneko-eorzea-clock', false );
    wp_enqueue_style( 'usaneko-eorzea-clock' );
    wp_add_inline_style( 'usaneko-eorzea-clock', $css );
});

解説

  • 外部CSSファイルは使用しません
  • WordPressの wp_add_inline_style() を使い、CSSを安全に出力
  • テーマやキャッシュ設定の影響を受けにくい構成です

昼夜テーマ切替

  • .day / .night クラスをJavaScript側で制御
  • 配色・文字色・アイコンをET基準で切替

② サーバー時刻取得 REST API

register_rest_route(
  'usaneko/v1',
  '/time',
  array(
    'methods'  => 'GET',
    'callback' => function () {
      return array(
        'server_ms' => (int) round( microtime( true ) * 1000 ),
      );
    },
    'permission_callback' => '__return_true',
  )
);

なぜサーバー時刻を使うのか？

JavaScriptの Date.now() は
👉 閲覧者のPCやスマホの時計に依存します。

そこでこのコードでは、

  1. サーバーの現在時刻を取得
  2. 通信遅延を考慮して補正
  3. クライアント側の時計ズレを吸収

という仕組みを採用しています。

結果として、

どの端末で見ても、ほぼ同じ時刻を表示

できるようになります。

③ ショートコード（HTML + JavaScript）

ショートコード登録

add_shortcode( 'eorzea_floating_clock', 'usaneko_get_eorzea_clock_html' );

記事内では、次のように使えます。

[eorzea_floating_clock]

HTML構造

<div id="usaneko-eorzea-floating-clock">
  <span class="icon">☀️</span>
  <span class="label">Eorzea</span>
  <span id="usaneko-et">--:--</span>
  /
  <span class="label">Japan</span>
  <span id="usaneko-jt">--:--:--</span>
</div>
  • #usaneko-et：エオルゼア時間
  • #usaneko-jt：日本時間
  • ☀️ / 🌙：昼夜状態アイコン
広告
【純正品】DualSense ワイヤレスコントローラー(CFI-ZCT2J)
【純正品】DualSense ワイヤレスコントローラー(CFI-ZCT2J)
対応ハードウェア：PlayStation5、PC／Mac、モバイルデバイス ■DualSense　商品説明 ★よりリアルなゲーム体験がここに ・ハプティックフィードバック *1 従来の振動モーターに代わり、新たに採用されたデュアルアクチュエーターで、より体感的なフィードバックを実現。 ゲーム内の状況に応じて変化する振動により、プレイヤーを取り巻く環境の質感から多彩な武器の反動まで、さまざまな感覚をその手の中で体感できます。 ・アダプティブトリガー*1 ゲーム内のアイテムやその状況に応じて、さまざまな強さや張力を体感。 弓の弦をギリギリと引き絞ったり、ハイスピードで走る車にブレーキをかけたりと、画面上で展開されるアクションを実感できます。
★あなたの声と思いを伝えよう ・内蔵マイクとヘッドセット端子 内蔵マイクを使ってオンラインでチャットができます。 *2 また、3.5mmのヘッドセット端子につなぐことで、お手持ちのヘッドセットもご利用いただけます。音声入力のオンオフは専用のミュートボタンで瞬時に切替可能です。 ・クリエイトボタン クリエイトボタンを使って、自慢のゲームプレイを録画したり、ライブストリーミング2したりできます。先駆的で好評を博したSHAREボタンは、クリエイトボタンとしてさらに進化。プレイヤーは自身のゲームプレイをもとに動画・画像コンテンツを制作したり、世界に向けてライブ配信したりできます。
★ゲームアイコンが、あなたの手に ・快適な操作性 ツートンカラーのデザインに、直感的なボタンレイアウトを採用。より進化したスティックに加え、ライトバーも一新しました。 ・おなじみの機能 DualSense ワイヤレスコントローラーは、DUALSHOCK4の機能の多くを引き継ぎつつ、新世代のゲームプレイに向けて調整されています。 ・内蔵バッテリー USB Type-C *3を使用して、コントローラーを充電、接続できます。 ・内蔵スピーカー コントローラーから飛び出す高音質のサウンドエフェクトで、ゲームが新たな次元へ進化します。 ・モーションセンサー 内蔵する加速度センサーとジャイロスコープにより、対応するゲームでは、より直感的なモーションコントロールを楽しめます。
Amazonで見る
最新の価格・在庫状況はAmazonでご確認ください。

JavaScriptの仕組み（核心）

エオルゼア時間の計算

ET_RATE = 86400 / 4200;
  • 現実時間 70分 = ET 24時間
  • この比率を使ってET時刻を算出

サーバー時刻との同期

offsetMs = server_ms + (通信時間 / 2) - Date.now();
  • サーバーとクライアントの時刻差を補正
  • 表示は常に Date.now() + offsetMs

更新処理

setInterval(update, 1000);
  • 毎秒 ET / JST を更新
  • 60秒ごとにサーバー時刻を再同期

昼夜の自動切替

(et.hh >= 7 && et.hh < 18) ? "day" : "night";
  • ET基準で昼夜を判定
  • CSSクラスとアイコンを切替

ショートコード属性一覧

属性説明
themegreen / pink / night
positionfixed / inline
top / right / bottom / left固定表示時の位置
format_et24h / 12h
format_jt24h / 12h
mascottrue / false
popuptrue / false
popup_positioncenter / left / right
show_on_mobiletrue / false

※ 仕様はすべて 掲載コードどおり です。

注意点（重要）

  • 1ページに1個のみ設置前提
  • 複数設置するとIDが競合します
  • 高度な最適化（JS遅延・結合）環境では挙動が変わる可能性があります
    （DOM生成タイミングやJavaScript実行順の影響を受けるため）

これは仕様上の割り切りで、プログラミングを学び始めた頃の自分でも管理できるシンプルさを優先しています。
※コードは自由に改変OKですが、複数設置（同一ページに2つ以上）はID競合で動作しないため非推奨です。

免責事項

本記事に掲載しているプログラムは、「うさねこ散歩」による個人のプログラム学習および検証を目的として作成された非公式ファンメイドプログラムです。 『ファイナルファンタジーXIV』は、株式会社スクウェア・エニックスの著作物です。 本ツールの利用により発生したいかなるトラブル・損害についても、作者は一切の責任を負いません。
広告
マリオカート ワールド -Switch2
マリオカート ワールド -Switch2
大陸横断。世界をまたぐレースが開幕！
『マリオカート ワールド』の舞台は、どこまでも続くひとつながりの世界。コースを飛び出してレースを繰り広げたり、世界の端から端まで大陸横断ラリーに挑んだり、24人対戦によるハチャメチャレースが幕を開ける！
また、広い世界を自由気ままにドライブできる「フリーラン」では、お気に入りのスポットを見つけて記念撮影をしたり、オンラインで世界中のプレイヤーやフレンドと一緒にドライブを楽しむことも。
Amazonで見る
最新の価格・在庫状況はAmazonでご確認ください。

書籍

1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］
SBクリエイティブ
Amazon
楽天
Yahoo!ショッピング
気づけばプロ並みPHP 改訂版--ゼロから作れる人になる!
リックテレコム
Amazon
楽天
Yahoo!ショッピング
ゼロから学ぶ はじめてのWordPress 第2版 ［バージョン6.x対応］ 簡単にできるWebサイト制作入門
SBクリエイティブ
Amazon
楽天
Yahoo!ショッピング

※本文中に記載の会社名・製品名・サービス名・ゲームタイトル名等は、各社の商標または登録商標であり、権利は各社に帰属します。

※サンプルはテストを行っていますが、すべての環境での動作を保証するものではありません。ご利用は自己責任でお願いいたします。

※本記事の仕様・価格・対応状況等は執筆時点で確認できた情報をもとに掲載しています。最新の情報はメーカー公式サイトをご確認ください。

※当サイトでは一部の記事において、アイキャッチ画像にAI生成を使用しています。

※Amazonのアソシエイトとして、うさねこ散歩は適格販売により収入を得ています。