WordPress:AIにカスタムブロックを作らせる(無料アコーディオンの実例つき)

WordPressサイトにアコーディオンが欲しかったんです。試した「無料」プラグインは、どれも設定画面つきのアップセルでした。なのでAIに書かせました:25行、プラグインなし、JavaScriptなし。どうぞ持っていってください。

追記(2026年7月):この記事は「下記のコード」を約束したまま、コードなしで1年以上下書きに眠っていました。やっと載せます。すみませんでした。

できあがるもの

これはライブデモです。次のセクションのコードを、WordPressに貼るのと同じやり方でこのページに貼ってあります(中の文言だけ日本語にしました)。パネルをクリックしてみてください:

JavaScriptゼロで開閉するのは、ブラウザ標準の<details>要素が折りたたみをやってくれるからです。どのブラウザも何年も前から対応しています。

コード

<style>
.ll-acc { border: 1px solid rgba(128,128,128,.5); border-radius: 10px; overflow: hidden; }
.ll-acc details + details { border-top: 1px solid rgba(128,128,128,.5); }
.ll-acc summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; font-weight: 600; list-style: none; }
.ll-acc summary::-webkit-details-marker { display: none; }
.ll-acc summary::after { content: "+"; font-size: 1.3em; font-weight: 400; line-height: 1; }
.ll-acc details[open] > summary { background: rgba(128,128,128,.12); }
.ll-acc details[open] > summary::after { content: "–"; }
.ll-acc .ll-acc-body { padding: 12px 18px 16px; }
</style>

<div class="ll-acc">
  <details>
    <summary>Question one goes here</summary>
    <div class="ll-acc-body">Answer one goes here. Text, links, pictures, whatever you want.</div>
  </details>
  <details>
    <summary>Question two goes here</summary>
    <div class="ll-acc-body">Answer two. Add more panels by copying one whole details block.</div>
  </details>
  <details>
    <summary>Question three goes here</summary>
    <div class="ll-acc-body">Answer three. Delete panels the same way.</div>
  </details>
</div>

たぶん変えたくなるところ:

• 文言。プレースホルダーの質問と答えは、ブロックの中で直接書き換えます。答えの部分は普通のHTMLが使えるので、リンクも画像もOKです。
• パネル数。<details>...</details>のかたまりをまるごとコピーすれば追加、削除すれば削減。
• 最初から開いた状態。開始タグを<details open>にすると、そのパネルは展開された状態で読み込まれます。
• 色。グレー系なのはわざとで、ライトテーマでもダークテーマでもそれなりに見えるようにしてあります。ブランドカラーにしたければrgba(...)の値を差し替えてください。

ページに設置する

この設置手順は、AIに頼んだときにAI自身が書いたものです(プロンプトは後述)。素のWordPressで手順どおりにやったら正しく動きました。正直、一番疑っていたのはそこでした。

1. WordPressにログインして、アコーディオンを置きたい固定ページか投稿を開き、編集を押します。
2. 置きたい場所の+をクリックして、カスタムHTMLというブロックを検索します。
3. スニペット全体 — <style>の部分も<div>の部分も — を貼り付けます。
4. ブロックのプレビュー切り替え(またはページ全体のプレビュー)で、生のコードではなく描画結果が出ることを確認します。
5. 更新または公開。本番ページで新しいパネルをクリックして、払わずに済んだプラグイン代のことを思ってニヤニヤしてください。

これを書いたプロンプト

軽く背景を。無料で、かつしつこくないアコーディオンプラグインがどうしても見つからず、実質25行のHTMLにサブスク料金を払うのは絶対に嫌でした。この手の小さくて自己完結した仕事は、まさにAIが本当に得意な領域です。ワークフローはこう:

コードが書けるAIなら、どれでも構いません:

• ローカルで動かす(無料・プライベート):私は自前のローカルDeepSeek 70Bを使いました。マシンに体力があるなら、セットアップガイドはこちら:DeepSeekをローカルで動かす:4ステップガイド。
• または無料のオンラインAI:ChatGPTの無料枠で、このプロンプトは文句なくこなせます。

プロンプトはこれです。大事なのは要件リストの部分。ざっくり「アコーディオン作って」だと、壊れやすいJavaScriptの山が返ってきます。

Write me an accordion I can paste into a WordPress "Custom HTML" block.

Requirements:
- Plain HTML and CSS only. No JavaScript, no external files, no plugin.
- Use <details> and <summary> so the browser handles opening and closing.
- Scope every CSS rule under one class so it can't restyle the rest of my theme.
- Neutral colors that look fine on a light theme or a dark theme.
- Three panels with placeholder questions and answers.
- Keep it under 40 lines.

Then explain, step by step, exactly how I install it on a WordPress page.
Assume I have never edited HTML before.

(プロンプトは英語のままですが、この要件リストを日本語に直して投げても問題なく動きます。)

タイトルの「AIに作らせる」のキモは最後の段落です。コードを書いたのと同じAIが、指定したスキルレベルに合わせて設置マニュアルまで書いてくれます。手順で詰まったら、その手順を貼り返して「ステップ3をHTML未経験者向けに説明して」と言えばいい。何度でも、嫌な顔ひとつせず説明してくれます。それだけで大半のプラグインのドキュメントより上です。

盗む価値のある習慣をひとつ。コードを本番サイトに近づける前に、デスクトップにtest.htmlというファイルを作って貼り付け、ダブルクリックしてください。サーバーなしでブラウザが開きます。全パネルをクリック。何かおかしければ、AIに見せてどこが変か伝える。ちゃんと動くようになってから、初めてWordPressへ。テスト環境はこれで全部で、上のブロックもこの方法で検証しました。

ハマりどころ

• 段落ブロックではなく、カスタムHTMLブロックを使うこと。普通のテキストブロックに貼ると、WordPressが親切にエスケープしてくれて、訪問者にはアコーディオンではなく生のコードが見えます。
• 1ページにアコーディオン2個は問題なし。<style>のかたまりが重複しますが、格好悪いだけで実害はありません。気になるなら、CSSは「外観 → カスタマイズ → 追加CSS」に1回だけ置いて、ブロックには<div>部分だけ貼ってください。
• テーマによっては独自のsummary矢印を描く。スニペットはデフォルトのマーカーを2通りの方法で隠していますが、頑固なテーマだと私の+/–記号の横に独自アイコンを描いてくることがあります。二重に見えたらAIに頼みましょう:「テーマがsummary要素に独自の矢印を付けるので隠して」。
• 1つずつしか開かないようにしたい?すべての<details>タグの中にname="faq"を足してください。今どきのブラウザは他のパネルを自動で閉じます。古いブラウザは単に無視するだけで、何も壊れません。
• AIの出力を本番サイトに直貼りしない。上の作業ファイルでのテストは2分で済みます。JavaScript禁止を要件にしたのも、壊れうる範囲を狭くするためで、それが理由の半分です。