2025年9月16日

「JSONエラーを回避してWordPressにコードを掲載する方法（EnlighterとSimple Custom CSS and JSを使用）※‘and’の重複でエラー発生!?」

✅ JSONエラーが発生した原因

最初、記事に script タグを含むコードを直接貼っていました。
しかし、WordPress の保存処理で JSON エラーが発生しました。

主な原因は次の通りです。

• script タグを本文に直接記述していた
  → < > を含むタグはJSONエラーの原因になりやすい
• バッククォート（““アクサングラーブ←USキーボードのチルダが打てるところ）を使用した。
• →詳しくは バッククォートとテンプレートラテラルを使った文字列処理【WordPress向け完全版】へ

✅ JSONエラー対策プラグイン

記事内で使う場合は、次の2つのプラグインを使い分けると安全です。

🔹 Simple Custom CSS andJS（CSS/JS用プラグイン）

• サイト全体に JavaScript や CSS を反映させるためのプラグイン
• 実際に動作するコードを適用したいときに使用
• 例：ダークモード切替、共通CSSの追加
• 「コードを実行させたいとき」に使う

🔹 Enlighter（表示用プラグイン）

• 記事内にコードを「表示」するためのプラグイン
• JavaScript や PHP のコードを色付きで見やすく表示可能
• 実際にはコードは動作せず、表示専用
• 「コードを読ませたいとき」に使う

🚨 JSONエラーが起きる理由と対策

Gutenbergでは、次の要素が組み合わさると保存時にJSONエラーが発生しやすくなります。

• 絵文字（例：✅）
• 改行やハイフンの連続（例：—）
• 特定の文字列（例：Enlighter と Simple Custom CSS andJS）

✅ 対策

• 絵文字は Unicode に置き換える
  → 例：✅ → ✅
• 長文は複数の短いブロックに分割する
• 落ちやすい文言は少し変更する
  → 例：「Enlighter と CSS/JS 用プラグイン」と表記
• 区切り線は --- のようにエスケープする

✅ 解決方法

記事にコードを載せるときは Enlighter の Generic Highlighting ブロック を使用します。
これにより、JSONエラーを回避しつつ、きれいにコードを表示できます。

💡 Enlighterでのコード表示サンプル

例えば、ダークモード切替用の簡単な JavaScript コードを記事内に表示したい場合：

// ダークモード切替サンプル
function toggleDarkMode() {
  const body = document.body;
  body.classList.toggle("dark-mode");
}

// ボタンが押されたときに実行
document.getElementById("darkModeBtn").addEventListener("click", toggleDarkMode);

※ このコードは Enlighterで表示用 です。
実際にサイト全体で動作させる場合は、 Simple Custom CSS andJS に貼り付けます。

💡 まとめ

• Gutenbergでは、コードや文章はブロックごとに貼り付ける
• 絵文字や区切り線はUnicodeやエスケープ済みを使用
• 「and js」は「andjs」に変更し、二重「and」は避ける
• Simple Custom CSS andjs でサイト全体にCSS/JSを安全に追加可能
• Enlighter は記事内の表示専用に使用

✅ Enlighterでコードを載せてみた

↓

// =======================================
// 🌙 背景色＆季節判定プログラム（統合版）
// =======================================
// 🟢 このコードの目的
// - 現在時刻から「dark / light」を判定
// - 現在の月から「季節」を判定
// - 引数と戻り値の流れを理解する
// =======================================
//
// 💡 WordPress + Simple Custom CSS and JS での読み込みの流れ
// -------------------------------------------------------
// 1. WordPress 管理画面 → Simple Custom CSS and JS → 「JSコードを追加」
// 2. このコードを貼り付けて保存
// 3. 保存すると <script> タグとして自動的に投稿ページや固定ページに出力される
// 4. ページが読み込まれると、下の DOMContentLoaded イベントが発火して処理開始
// 5. 結果として、投稿ページの <div class="darkmode-box"> や <p id="season-display">
//    が書き換えられる
//
// 📝 注意
// - 「darkmode-box」があることで、WordPressのカスタムHTMLに背景色切替が表示される
// - 「season-display」があることで、判定した季節が文章として表示される
// -------------------------------------------------------


// ======= セクション開始：学習目的と流れ =======
console.log("🚩【学習目的】引数と戻り値を理解する(背景色＆季節判定プログラム)");
console.log("📝 処理の流れ: 1️⃣変数呼び出し → 2️⃣値の取得 → 3️⃣関数呼び出し → 4️⃣if判定 → 5️⃣戻り値 → 6️⃣結果出力\n");


// =======================================
// 🚩 DOMContentLoaded
// =======================================
// - HTMLの構造が読み込まれたら実行されるイベント
// - 投稿ページにある <div> や <p> が確実に取得できる
// =======================================
document.addEventListener("DOMContentLoaded", function() {

  // =======================================
  // 🚩STEP1: ダークモード判定
  // =======================================
  // 4️⃣ 関数を定義（timeを引数に取り、条件で"dark"/"light"を返す）
  function getDarkModeStatus(time) {
      // 5️⃣ if判定（time が 20 より大きいかどうか）
      if (time > 20) {
          return "dark"; // ← 戻り値（関数の外に出す値）
      } else {
          return "light"; // ← 戻り値（関数の外に出す値）
      }
  }

  // 1️⃣ 変数を呼び出す（mode を準備）
  // 2️⃣ new Date() で現在の時刻を取得し、.getHours() で「時」を取り出す
  const mode = getDarkModeStatus(new Date().getHours()); 
  // 6️⃣ 戻り値 "dark" または "light" が mode に代入される

  // 7️⃣ WordPress投稿ページにある .darkmode-box を取得
  const darkmodeBox = document.querySelector(".darkmode-box");
  if(darkmodeBox){
      // 投稿内のボックスの背景色と文字色を切り替え
      darkmodeBox.style.backgroundColor = mode === "dark" ? "#000" : "#fff";
      darkmodeBox.style.color = mode === "dark" ? "#fff" : "#000";
  }

  // 8️⃣ 結果を出力（確認用）
  console.log(`現在のモード: ${mode}`);
  // 例: 21時なら "dark"、10時なら "light"


  // =======================================
  // 🚩STEP2: 季節判定
  // =======================================
  // 4️⃣ 関数を定義（monthを引数に取り、条件で季節を返す）
  function getSeason(month) {
      // 5️⃣ if判定（月の範囲ごとに季節を返す）
      if (month >= 3 && month <= 5) {
          return "春";
      } else if (month >= 6 && month <= 8) {
          return "夏";
      } else if (month >= 9 && month <= 11) {
          return "秋";
      } else {
          return "冬";
      }
  }

  // 1️⃣ 変数を呼び出す（currentMonth, season を準備）
  const currentMonth = new Date().getMonth() + 1;
  // 2️⃣ getSeason(currentMonth) を呼び出し
  const season = getSeason(currentMonth);

  // WordPress投稿ページにある #season-display を取得
  const seasonDisplay = document.getElementById("season-display");
  if(seasonDisplay){
      seasonDisplay.textContent = `現在の月は ${currentMonth} 月なので、季節は ${season} です！`;
  }

  // 7️⃣ season を利用して結果を出力（確認用）
  console.log(`現在の月は ${currentMonth} 月です`);
  console.log(`🌟 なので、季節は ${season} です！`);
});


// =======================================
// まとめ（記述順と実行順）
// =======================================
// 記述順: function → 変数 → if文
// 実行順: 
// 1️⃣ 変数呼び出し → 2️⃣ 値の取得 → 3️⃣ 関数呼び出し → 
// 4️⃣ 関数定義の処理開始 → 5️⃣ if判定 → 
// 6️⃣ 戻り値を変数に代入 → 7️⃣ 変数を利用して処理 → 8️⃣ 結果を出力