WordPressで動的な数字（経過年数や年齢）を表示する方法

背景と目的

WordPressで「デビューから〇〇年」「創業〇〇年」といった数字を表示する場合、通常は functions.php 等にショートコードを作成するのが設計として正しい手法です。

しかし、以下のようなケースでは、テーマファイルを直接編集するのが難しい（あるいはリスクが高い）場合があります。

• 保守の都合上、テーマファイルを編集したくない（親テーマの更新頻度が高い等）
• FTP権限がなく、管理画面からしか編集できない
• 特定の固定ページ内だけで完結させたい（グローバルな機能にしたくない）

今回は、そんな時に役立つ「カスタムHTMLブロック」とJavaScriptを使った解決策を紹介します。

実装コード

記事や固定ページの編集画面で「カスタムHTML」ブロックを追加し、以下のコードを記述します。

HTML

<p>
    2000年、ロタ島の大会でデビューして以来、なんと<span id="year-display">--</span>年！
</p>

<script>
(function() {
    // 1. 開始日（誕生日や設立日）を設定
    const startDate = new Date("2000-01-01");
    const today = new Date();

    // 2. 年数の差分を計算
    let years = today.getFullYear() - startDate.getFullYear();

    // 3. 【重要】まだ今年の記念日が来ていない場合は1年引く
    //    (単純な引き算だと、1月1日になった瞬間に年数が増えてしまうため)
    const m = today.getMonth() - startDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < startDate.getDate())) {
        years--;
    }

    // 4. HTMLに反映
    const displayElement = document.getElementById("year-display");
    if(displayElement){
        displayElement.textContent = years;
    }
})();
</script>

実際に実装したページはこちら

この手法のメリット・デメリット

メリット

1. キャッシュに強い： PHP（サーバーサイド）での計算と異なり、JavaScriptは閲覧者のブラウザ上で実行されます。ロリポップの「ロリポップ！アクセラレータ」や各種キャッシュプラグインが効いている状態でも、ページロード時に必ず最新の年数が計算・表示されます。
2. 手軽さ： テーマファイルの編集やFTP操作が不要で、管理画面のエディタ上で完結します。

注意点

• 権限による制限： WordPressのセキュリティ設定（ unfiltered_html 権限がないユーザーなど）によっては、投稿内に <script> タグを保存できない場合があります。その場合は管理者権限を持つユーザーで編集する必要があります。
• IDの重複： 1ページ内に複数の年数表示箇所を作る場合は、HTML側の id="year-display" とJS側の getElementById のIDが重複しないように書き換えてください（例：year-display-1, year-display-2）。

---