おみくじをショートコードで表示する方法

この記事では、おみくじ機能（日本時間対応版）を、ショートコードで簡単に実装する方法を解説します。
Ajaxや外部スクリプトを使わず、シンプルなPHPと少量のCSSだけで動作します。
お知らせ・カテゴリー・アーカイブページなどには一切影響しません。

1 実装のポイント

• ショートコード名：[simple_omikuji]
• 結果はページ読み込みごとにランダム表示
• 日本時間（JST）で「1日1回制限」を管理
• Ajax非対応でも軽量で高速

2 functions.php にコードを追加

注意： 必ず子テーマの functions.php に追加してください。親テーマに直接追加するとアップデートで消える可能性があります。

//------------------------------------------------------------
// おみくじを表示（日本時間対応版）
//------------------------------------------------------------
function simple_omikuji_shortcode() {
    ob_start(); /* バッファリング開始 */
    ?>
    <!-- HTML構造 -->
    <div id="omikuji-box">
        <h3>今日の運勢</h3>
        <button id="drawOmikujiBtn">おみくじを引く</button>
        <p id="omikuji-result"></p>
    </div>

    <!-- JS制御（日本時間で1日1回制限） -->
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const btn = document.getElementById('drawOmikujiBtn'); /* ボタン要素を取得 */
        const result = document.getElementById('omikuji-result'); /* 結果表示用要素を取得 */
        if (!btn) return; /* ボタンが存在しない場合は終了 */

        /* --- 日本時間（JST）の日付を取得する関数 --- */
        function getTodayJST() {
            const now = new Date();
            const jstOffset = 9 * 60 * 60 * 1000; /* UTC+9時間 */
            const jstDate = new Date(now.getTime() + jstOffset);
            return jstDate.toISOString().slice(0, 10); /* YYYY-MM-DD形式で返す */
        }

        const saved = localStorage.getItem('todayOmikuji'); /* 保存済み結果を取得 */
        const savedDate = localStorage.getItem('todayOmikujiDate'); /* 保存日を取得 */
        const today = getTodayJST(); /* 日本時間で今日の日付を取得 */

        if (saved && savedDate === today) { /* すでに今日の結果がある場合 */
            result.textContent = '結果：' + saved; /* 結果を表示 */
            btn.textContent = '本日の運勢'; /* ボタン表示を変更 */
            btn.disabled = true; /* ボタン無効化 */
            return; /* 処理終了 */
        }

        btn.addEventListener('click', function() {
            if (btn.disabled) return; /* 二度押し防止 */
            const results = [ /* おみくじ結果一覧 */
                '今日は何しても上手くいきそう！',
                '小さな嬉しい出来事が訪れます',
                '甘いものにツキあり',
                '焦らず一息つくといい方向に',
                '笑顔で過ごせば幸せ倍増',
                '心を温める時間を大切に',
                '急がなくても大丈夫。流れに任せよう',
                '今日は穏やかに、周りに感謝を',
                '人の優しさに包まれる日',
                'ガチャ運MAX。今日のあなたは無敵'
            ];
            const random = results[Math.floor(Math.random() * results.length)]; /* ランダム選択 */
            result.textContent = '結果：' + random; /* 結果表示 */
            btn.textContent = '本日の運勢を確認済み'; /* ボタンテキスト変更 */
            btn.disabled = true; /* ボタンを無効化 */

            localStorage.setItem('todayOmikuji', random); /* 結果を保存 */
            localStorage.setItem('todayOmikujiDate', today); /* 日本時間で日付を保存 */
        });
    });
    </script>
    <?php
    return ob_get_clean(); /* 出力を返す */
}
add_shortcode('simple_omikuji', 'simple_omikuji_shortcode'); /* ショートコード登録 */
  

ウィジェット、記事内で表示する場合：

[simple_omikuji]

3 汎用CSS

/* -------------------------------------
 * おみくじボックス共通デザイン
 * ------------------------------------- */

#omikuji-box {
    background: #fff0f6; /** 背景を淡いピンクに **/
    border: 2px solid #e573a0; /** ボーダーをピンク系に **/
    border-radius: 10px; /** 角丸 **/
    padding: 20px; /** 内側余白 **/
    text-align: center; /** 中央寄せ **/
    max-width: 350px; /** 幅制限 **/
    margin: 20px auto; /** 中央寄せ余白 **/
    box-shadow: 0 2px 8px rgba(229, 115, 160, 0.25); /** ピンク系の影 **/
}

#omikuji-box h3 {
    margin-top: 0; /** タイトルの上余白を消す **/
    color: #d81b60; /** 濃いピンク文字 **/
    font-weight: bold; /** 太字 **/
}

#drawOmikujiBtn {
    padding: 10px 20px; /** ボタン余白 **/
    font-size: 16px; /** ボタン文字サイズ **/
    border: none; /** 枠線なし **/
    border-radius: 6px; /** 角丸ボタン **/
    background: #ec407a; /** ピンク背景 **/
    color: #fff; /** 白文字 **/
    cursor: pointer; /** ポインター表示 **/
    transition: 0.3s; /** ホバーアニメーション **/
}

#drawOmikujiBtn:hover {
    background: #d81b60; /** ホバー時は濃いピンク **/
}

#drawOmikujiBtn:disabled {
    background: #f8bbd0; /** 無効時の淡いピンク **/
    color: #fff; /** 白文字のまま **/
    cursor: default; /** 通常カーソルに戻す **/
    opacity: 0.8; /** 半透明化 **/
}

#omikuji-result {
    display: block; /** 独立したブロックとして扱う **/
    text-align: left; /** テキストを左寄せ **/
    margin-top: 15px; /** 上余白 **/
    font-weight: bold; /** 太字 **/
    color: #ad1457; /** ピンク系文字 **/
    margin-left: 10px; /** 左から10px離す **/
}
  

4 代用プラグイン

もしコードを直接追加するのが不安な場合は、Insert PHP Code Snippetプラグインを使用してショートコードを登録する方法もあります。
その場合は、上記のPHPコードを新規スニペットとして登録し、[simple_omikuji]を投稿本文に貼るだけで動作します。

5 まとめ

• 日本時間（JST）で1日1回制限を正確に判定
• シンプルなPHP＋CSSで高速に動作
• テーマを問わず導入可能（Lightning・Cocoon対応済み）