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>質問1がここに記載されます</summary>
    <div class="ll-acc-body">回答1です。テキストやリンク、画像など、何でも記載できます。</div>
  </details>
  <details>
    <summary>質問2がここに記載されます</summary>
    <div class="ll-acc-body">回答2です。<details>ブロック全体をコピーすれば、新しいパネルを追加できます。</div>
  </details>
  <details>
    <summary>質問3がここに記載されます</summary>
    <div class="ll-acc-body">回答3です。<details>ブロックを削除すれば、パネルも取り除けます。</div>
  </details>
</div>

おそらく変更したいと思われる点は以下の通りです：

• 文言の変更　プレースホルダーとなっている質問や回答を直接書き換えてください。回答欄には通常のHTMLが使用できるため、リンクや画像も問題なく表示されます。
• パネルの数　<details>...</details> ブロック全体をコピーすればパネルを追加でき、逆に削除したい場合はそのブロックを取り除けばよいだけです。
• 初期状態で開く設定　パネルの開始タグを <details open> と変更すれば、ページ読み込み時に自動的に開いた状態になります。
• 色の変更　使用されているグレー色は意図的に中立的な色合いにしてあり、明るいテーマでも暗いテーマでも違和感なく見えるようにしています。ご希望のブランドカラーに合わせて rgba(...) の値を変更していただいても構いません。

ページに設置する方法

以下のインストール手順は、私がAIに依頼した際に作成してもらったものです（下記のプロンプトをご覧ください）。標準状態のWordPressでこの手順に従ってみたところ、問題なく動作しました。正直なところ、この部分が最も不安だったのですが。

1. WordPressにログインし、アコーディオンを配置したいページまたは投稿を開きます。「編集」をクリックします。
2. アコーディオンを挿入したい場所で「+」をクリックし、「カスタムHTML」というブロックを検索します。
3. <style>部分と <div>部分を含め、コード全体をそのブロック内に貼り付けます。
4. ブロックの「プレビュー」ボタン（またはページ全体のプレビュー機能）をクリックすると、生のコードではなく実際の表示結果が確認できます。
5. 「更新」または「公開」をクリックします。公開されたページで新しく追加したパネルを試してみてください。プラグイン代を節約できたことを心から喜んでくださいね。

コードを生成したプロンプト

少し背景を説明します。無料で、かつ煩わしい広告も出ないアコーディオン用プラグインが見つからなかったのです。基本的にHTMLが25行程度しかない機能に対してサブスクリプション料金を払うことも拒否しました。自分でそのコードを書くというのは、AIが本当に得意とするような小規模かつ独立した作業です。以下がその作業フローです。

コード生成が可能なAIであればどれでも構いません：

• 自分のパソコン上でローカルに実行する（無料・プライベート利用可）：私は自身のPC上でDeepSeek 70Bを利用しました。もしお使いのコンピュータに十分な性能があれば、こちらの設定ガイドをご参照ください：DeepSeekをローカルで実行する：4ステップガイド。
• あるいは無料のオンラインAIを利用する：ChatGPTの無料版でもこのプロンプトに対応可能です。

以下がそのプロンプトです。中でも要件リストが最も重要です。「アコーディオンを作って」といった曖昧な指示では、不安定なJavaScriptコードしか得られません。

WordPressの「カスタムHTML」ブロックに貼り付けられるアコーディオンを作成してください。

要件：
- HTMLとCSSのみを使用すること。JavaScriptや外部ファイル、プラグインは不可。
- <details>および<summary>タグを使い、ブラウザ側で開閉処理を行うこと。
- すべてのCSSルールを1つのクラス名でスコープ化し、テーマ全体のスタイルが崩れないようにすること。
- 明るいテーマでも暗いテーマでも違和感のない中立的な色合いを使用すること。
- 質問と回答が入ったパネルを3つ用意すること。
- コードの行数は40行未満に抑えること。

その後、WordPressページにこのコードを設置する手順を、初心者向けに段階的に説明してください。
HTML編集の経験が全くない方だと仮定して説明すること。</text>

最後の段落が、この記事のタイトルにある「コツ」です。つまり、コードを生成したのと同じAIが、利用者のスキルレベルに応じて設置マニュアルも作成してくれるのです。もしどの手順が分かりにくい場合は、その部分をAIに再送信し「HTMLを全く知らない私にも理解できるように第3ステップを説明して」と伝えてください。そうすればAIは辛抱強く何度でも丁寧に教えてくれます。これだけでも多くのプラグインのドキュメントより優れています。実際、私も大規模な作業の際には「説明してもらい、確認する」という同じサイクルを利用しており、その方法はLLMにあらゆるプロジェクトを自分の環境向けに適応させる方法で詳しく紹介しています。

参考になる習慣として、コードを実際のサイトに導入する前に、test.htmlという名前のファイルに貼り付けてデスクトップ上でダブルクリックしてみることをお勧めします。サーバー不要でブラウザが起動し、各パネルをクリックして確認できます。何か不具合があればAIに示して問題点を伝えてください。正常に動作することが確認できてからWordPressへ導入するのです。これが私の「テスト用環境」であり、上記のコードもこの方法で検証したものです。

注意点

• カスタムHTMLブロックを使ってください。通常の段落ブロックではない方が良いです。 コードを通常のテキストブロックに貼り付けると、WordPressが自動的にエスケープ処理を行うため、訪問者には生のコードが表示されてしまい、アコーディオン機能が働きません。
• 1ページに2つのアコーディオンを配置しても問題ありません。 <style>の部分が重複してしまいますが、見た目が悪くなるだけで害はありません。気になる場合は、「外観」→「カスタマイズ」→「追加CSS」に一度だけCSSを記述し、ブロック内には<div>部分のみを貼り付けてください。
• 一部のテーマでは独自のサマリー用矢印が描画されます。 このスニペットではデフォルトのマーカーを2通りの方法で非表示にしていますが、頑固なテーマだと私の＋／–記号の隣に独自のアイコンが表示されることもあります。二重に表示される場合はAIに「私のテーマではサマリー要素に独自の矢印が追加されるので、それを非表示にしてほしい」と尋ねてみてください。
• パネルを一度に1つだけ開くようにしたいですか？ 各<details>タグ内にname="faq"を追加してください。現在のブラウザでは他のパネルが自動的に閉じられますが、古いブラウザではこの属性が無視されるだけで問題は生じません。
• AIの出力内容をそのまま実際のサイトに貼り付けないでください。 上記のテストは2分程度で完了します。JavaScriptを使わないように依頼することでも問題発生の可能性が減るため、私もそう指定したのです。

関連記事：Claude Codeを使ってWordPressサイトを静的サイトに作り替える：午後のうちに完成させた実例 · DeepSeekをローカル環境で動かす：初心者でも大丈夫な4ステップガイド · LLMを活用してどんなプロジェクトも自分のシステムに適応させる方法 · LLMアシスタントの設定方法：Claude Code、Cowork、Reasonix、DeepSeek