じゃんけんゲームをショートコードで表示する方法

この記事では、WordPressに「じゃんけんゲーム」を設置し、投稿ページのみで表示されるようにする方法を紹介します。
固定ページ・カテゴリー・お知らせなどには一切影響せず、投稿記事だけで動作します。
ショートコード [janken_game] を使えば、どの記事でも簡単に設置できます。

1 実装のポイント

• ショートコード [janken_game] で呼び出せる
• 投稿ページ (is_single()) でのみ実行
• JavaScriptで勝敗判定を行う
• CSSでデザイン調整

2 functions.php にコードを追加

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

//-------------------------------------------
// じゃんけんゲーム（投稿ページ限定・1回だけ遊べる版・日本時間対応）
//-------------------------------------------
function my_janken_game_shortcode() {
    ob_start();
    ?>
    <div id="janken-game">
        <h3>じゃんけんゲーム</h3>
        <p>あなたの手を選んで!!</p>
        <div class="janken-buttons">
            <button onclick="playJanken('グー')"> グー</button>
            <button onclick="playJanken('チョキ')"> チョキ</button>
            <button onclick="playJanken('パー')"> パー</button>
        </div>
        <p id="janken-result"></p>
    </div>

	<script>
	(function () {
	  const resultEl = document.getElementById("janken-result");

	  // -----------------------------
	  // 戦績データの管理（localStorage利用）
	  // -----------------------------
	  function getStats() {
	    const data = localStorage.getItem("janken_stats");
	    return data ? JSON.parse(data) : { win: 0, lose: 0, draw: 0, lastPlay: "" };
	  }

	  function saveStats(stats) {
	    localStorage.setItem("janken_stats", JSON.stringify(stats));
	  }

	  // -----------------------------
	  // 日本時間で日付を取得
	  // -----------------------------
	  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形式を返す
	  }

	  // -----------------------------
	  // 1日1回制限チェック（日本時間基準）
	  // -----------------------------
	  function canPlayToday(stats) {
	    const today = getTodayJST();
	    return stats.lastPlay !== today;
	  }

	  // -----------------------------
	  // メイン関数
	  // -----------------------------
	  window.playJanken = function (playerHand) {
	    const stats = getStats();
	    const today = getTodayJST(); // 日本時間の日付を使用

	    if (!canPlayToday(stats)) {
	      resultEl.innerHTML =
	        "今日はすでにプレイ済みです！<br>明日また挑戦してください。<br><br>" +
	        "現在の戦績：<br>勝ち：" + stats.win + "　負け：" + stats.lose + "<br>引き分け：" + stats.draw;
	      return;
	    }

	    const hands = ["グー", "チョキ", "パー"];
	    const computerHand = hands[Math.floor(Math.random() * 3)];
	    let result = "";

	    if (playerHand === computerHand) {
	      result = "あいこです！";
	      stats.draw++;
	    } else if (
	      (playerHand === "グー" && computerHand === "チョキ") ||
	      (playerHand === "チョキ" && computerHand === "パー") ||
	      (playerHand === "パー" && computerHand === "グー")
	    ) {
	      result = "あなたの勝ち！";
	      stats.win++;
	    } else {
	      result = "あなたの負け…";
	      stats.lose++;
	    }

	    stats.lastPlay = today;
	    saveStats(stats);

	    resultEl.innerHTML =
	      "あなた：" + playerHand +
	      "<br>コンピュータ：" + computerHand +
	      "<br><strong>" + result + "</strong><br><br>" +
	      "現在の戦績：<br>勝ち：" + stats.win + "　負け：" + stats.lose + "<br>引き分け：" + stats.draw;
	  };
	})();
	</script>

    <?php

    return ob_get_clean();
}
add_shortcode('janken_game', 'my_janken_game_shortcode');
  

3 javascript にコードを追加

ファイル名：janken.js
保存先：wp-content/themes/child-theme/js/janken.js

//-------------------------------------------
// じゃんけんゲームの勝敗ロジック
//-------------------------------------------
function playJanken(playerHand) {
  const hands = ["グー", "チョキ", "パー"];
  const computerHand = hands[Math.floor(Math.random() * 3)];
  let result = "";

  if (playerHand === computerHand) {
    result = "あいこです！";
  } else if (
    (playerHand === "グー" && computerHand === "チョキ") ||
    (playerHand === "チョキ" && computerHand === "パー") ||
    (playerHand === "パー" && computerHand === "グー")
  ) {
    result = "あなたの勝ち！";
  } else {
    result = "あなたの負け…";
  }

  document.getElementById("janken-result").innerHTML =
    "あなた：" + playerHand + "<br>コンピュータ：" + computerHand + "<br><strong>" + result + "</strong>";
}

3.1 ディレクトリ構造

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

[janken_game]
  

4 汎用CSS

/* -----------------------------
 * じゃんけんゲーム共通スタイル
 *----------------------------- */

#janken-game { /** じゃんけんゲーム全体のコンテナ **/
	background: #f7f7f7; /** 背景色を明るいグレーに設定 **/
	border: 2px solid #0073aa; /** 外枠を青色の2px線に設定 **/
	border-radius: 10px; /** 角を10px丸くする **/
	padding: 20px; /** 内側に20pxの余白を設定 **/
	text-align: center; /** コンテンツを中央揃えにする **/
	max-width: 350px; /** 幅の最大値を350pxに制限 **/
	margin: 20px auto; /** 上下20px、左右自動で中央寄せ **/
	box-shadow: 0 2px 8px rgba(0,0,0,0.1); /** 薄い影を付けて浮き上がらせる **/
}

#janken-game h3 { /** じゃんけんゲーム内の見出し（タイトル） **/
	margin-top: 0; /** 上の余白を0にする **/
	color: #0073aa;	/** タイトル文字を青色にする **/
	font-weight: bold; /** 太字に設定 **/
}

.janken-buttons button { /** 各じゃんけんボタンのスタイル **/
	margin: 4px; /** ボタン間に4pxの間隔を設定 **/
	padding: 10px 10px; /** 内側余白を上下左右10pxずつ設定 **/
	font-size: 16px; /** ボタン文字のサイズを16pxに設定 **/
	border: none; /** 枠線を消す **/
	border-radius: 5px; /** 角を5px丸くする **/
	cursor: pointer; /** マウスカーソルをポインターに変更 **/
	transition: .2s; /** ホバー時のアニメーションを0.2秒で実行 **/
	font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif; /** 絵文字フォントを優先して使用 **/
}

.janken-buttons button:hover { /** ボタンにマウスを乗せたときのスタイル **/
	background: #0073aa; /** 背景色を青に変更 **/
	color: #fff; /** 文字色を白に変更 **/
}

#janken-result { /** 結果表示エリアのスタイル **/
	margin-top: 15px; /** 上に15pxの余白を付ける **/
	font-weight: bold; /** 太字にする **/
	font-size: 18px; /** 文字サイズを18pxに設定 **/
}

5 完成イメージ

右上にあります。

6 代用プラグイン

同様のゲームを実装したい場合、「Shortcoder」や「Insert PHP Code Snippet」でもショートコード登録が可能です。
ただし、PHP直接編集（functions.php）よりも管理は簡単ですが、パフォーマンスはやや劣ります。

7 まとめ

• ショートコード [janken_game] で簡単に設置できる
• CSSとJSで自由にカスタマイズ可能

これで、WordPress投稿ページにだけ反映される「じゃんけんゲーム」が完成します。
シンプルながら動作も軽く、読者とのインタラクティブな交流にも活用できます。