WordPressでアコーディオンを作る方法｜プラグインなしでもできる？

WordPressでアコーディオンを作る方法は、標準ブロック、テーマ独自ブロック、プラグイン、HTML/CSSの4パターンがあります。

アコーディオンとは、見出しをクリックすると本文が開閉する表示方法です。FAQ、料金の補足、注意事項、長い説明文、サービス詳細などをコンパクトに見せたい時に使います。

WordPressのアコーディオンとは

アコーディオンは、クリックすると中身が開閉するコンテンツ表示です。

▽こういうやつです▽

たとえば、よくある質問の「料金はいくらですか？」という見出しだけを最初に表示し、クリックすると回答文が開くような見せ方で使います。ページをすっきり見せたい時や、補足情報を整理したい時に使われます。

ただし、読者が必ず見るべき重要情報まで閉じてしまうと、内容が伝わりにくくなります。アコーディオンは「補足を整理するため」に使い、結論や大事な案内は通常の本文にも出しておきましょう。

WordPressでアコーディオンを作る4つの方法

WordPressでアコーディオンを作る方法は、大きく4つあります。

一番簡単なのは、WordPress標準ブロックやテーマに用意されているブロックを使う方法です。次に、FAQ専用プラグインやアコーディオン用プラグインを使う方法があります。デザインや動きを細かく作りたい場合は、HTML/CSSやJavaScriptで作る方法もあります。

プラグインなしで作るなら標準ブロックを確認する

プラグインなしでアコーディオンを作りたい場合は、まず標準ブロックを検索します。

WordPressの編集画面で「＋」ボタンを押し、ブロック検索欄に「Accordion」「アコーディオン」「Details」「詳細」などを入力します。使えるブロックが表示されれば、プラグインを追加せずに開閉表示を作れます。

ただし、標準ブロックの有無や名前はWordPressのバージョン、テーマ、ブロックエディター設定によって変わります。画面に表示されない場合は、WordPress本体のバージョンとテーマ側の対応を確認しましょう。

プラグインなしでHTMLだけで作る方法

ブロックになければ、HTMLのdetailsタグとsummaryタグでも作れます。

▽コードで作ったアコーディオンです▽

▽実際のコードです▽

<style>
  .weluca-accordion {
    max-width: 760px;
    margin: 24px 0;
    font-family: inherit;
  }

  .weluca-accordion details {
    border: 1px solid #dfe7dc;
    border-radius: 14px;
    background: #ffffff;
    margin-bottom: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    overflow: hidden;
  }

  .weluca-accordion summary {
    position: relative;
    cursor: pointer;
    list-style: none;
    padding: 18px 52px 18px 20px;
    font-weight: 700;
    line-height: 1.6;
    color: #2f3a2f;
    background: linear-gradient(90deg, #f7fbf4 0%, #ffffff 100%);
  }

  .weluca-accordion summary::-webkit-details-marker {
    display: none;
  }

  .weluca-accordion summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #c7ddad;
    color: #2f3a2f;
    font-size: 20px;
    line-height: 26px;
    text-align: center;
    font-weight: 700;
  }

  .weluca-accordion details[open] summary::after {
    content: "−";
  }

  .weluca-accordion .accordion-body {
    padding: 0 20px 20px;
    color: #444;
    line-height: 1.9;
    font-size: 15.5px;
    background: #ffffff;
  }

  .weluca-accordion .accordion-body p {
    margin: 12px 0 0;
  }

  .weluca-accordion .accordion-body ul {
    margin: 12px 0 0 1.2em;
    padding: 0;
  }

  .weluca-accordion .accordion-body li {
    margin: 6px 0;
  }

  @media (max-width: 600px) {
    .weluca-accordion summary {
      padding: 16px 48px 16px 16px;
      font-size: 15px;
    }

    .weluca-accordion .accordion-body {
      padding: 0 16px 18px;
      font-size: 15px;
    }
  }
</style>

<div class="weluca-accordion">
  <details>
    <summary>WordPressでアコーディオンはプラグインなしで作れますか？</summary>
    <div class="accordion-body">
      <p>はい、作れます。HTMLのdetailsタグとsummaryタグを使えば、カスタムHTMLブロックだけでクリック開閉できるアコーディオンを作成できます。</p>
      <p>ただし、デザインを整えるにはCSSを追加する必要があります。頻繁に更新するサイトでは、テーマ独自ブロックや標準ブロックの方が管理しやすい場合もあります。</p>
    </div>
  </details>

  <details>
    <summary>アコーディオンに向いている内容は何ですか？</summary>
    <div class="accordion-body">
      <p>FAQ、料金の補足、注意事項、キャンセル規定、詳しい手順などに向いています。</p>
      <ul>
        <li>よくある質問</li>
        <li>サービスの補足説明</li>
        <li>長くなりやすい注意事項</li>
        <li>読者によって必要・不要が分かれる情報</li>
      </ul>
    </div>
  </details>

  <details>
    <summary>重要な情報もアコーディオン内に入れていいですか？</summary>
    <div class="accordion-body">
      <p>重要な情報は、アコーディオンの中だけに入れない方が安全です。料金目安、納期、対応エリア、相談方法などは、本文にも一度書いておきましょう。</p>
      <p>アコーディオンは情報を隠すためではなく、ページを読みやすく整理するために使うのがおすすめです。</p>
    </div>
  </details>
</div>

この方法は、装飾をほとんど入れずに簡単な開閉表示を作る場合に向いています。デザインを整えるにはCSS調整が必要になります。

CSSを使うパターンは別記事で解説しています。サンプルも10パターン用意しています。

参考WordPressカスタムHTMLで作るおしゃれなアコーディオン10選｜HTML＋CSSコード付き記事を読む →

AccordionブロックとDetailsブロックの違い

Accordionブロックは複数の開閉項目をまとめる用途、Detailsブロックは単体の開閉項目を作る用途で考えると分かりやすいです。

Accordionブロックは、複数の見出しと中身を並べるFAQのような形に向いています。質問が5個、10個と並ぶページでは、まとまりとして管理しやすいです。

どちらを使うか迷う場合は、FAQ一覧のように複数項目を並べたいならAccordion、本文中に補足を1つだけ入れたいならDetailsを選びます。

テーマ独自のアコーディオンブロックを使う方法

使っているテーマによっては、アコーディオンやFAQ用の独自ブロックが用意されています。

ブロックテーマ、有料テーマ、テーマ専用ブロックプラグインでは、FAQ、アコーディオン、開閉ボックス、トグル、Q&Aなどの名前で似た機能が用意されていることがあります。

長く使うサイトでは、テーマ変更の予定があるか、ブロックを使い続けられるかも確認しておきましょう。

プラグインを使った方がよいケース

FAQを大量に管理したい場合や、構造化データまで整えたい場合は、プラグインが候補になります。

標準ブロックやテーマ独自ブロックでも、簡単なアコーディオンは作れます。しかし、FAQをカテゴリー管理したい、複数ページに同じFAQを表示したい、検索機能を付けたい、FAQ用の構造化データを扱いたい場合は、専用プラグインの方が管理しやすいことがあります。

「必要だから入れる」のではなく、「標準ブロックでは管理しにくい理由があるか」を確認してから導入しましょう。

FAQでアコーディオンを使う時の注意点

FAQをアコーディオンにする時は、質問文だけで内容が分かるようにします。

たとえば「料金について」だけでは、読者は何が書かれているか分かりません。「ホームページ制作の料金はいくらですか？」のように、具体的な質問文にすると開くべき項目が分かりやすくなります。

アコーディオンはページをすっきり見せる道具ですが、情報を隠す道具ではありません。読者が迷わず必要な情報へたどり着けるように使いましょう。

アコーディオンが表示されない・開かない時の確認手順

アコーディオンが表示されない時は、ブロック、テーマ、プラグイン、JavaScriptの順に確認します。

編集画面では見えているのに公開ページで動かない場合、テーマやプラグインのJavaScriptが干渉していることがあります。逆に、編集画面にブロック自体が表示されない場合は、WordPressのバージョンやテーマ側の機能を確認します。

不具合の原因を切り分ける時は、一度に全部触らず、1つずつ確認することが大切です。

小規模事業者サイトでのおすすめの使い方

小規模事業者サイトでは、FAQと注意事項にアコーディオンを使うのがおすすめです。

ホームページを見た人は、料金、納期、対応エリア、相談方法、キャンセル、支払い方法、制作後のサポートなどで迷いやすいです。こうした疑問をFAQとして整理すると、問い合わせ前の不安を減らせます。

特に、サービスページの下部にFAQを置くと、読者が申し込む前の不安を解消しやすくなります。

よくある質問

まとめ：WordPressのアコーディオンは目的に合わせて作り方を選ぶ

WordPressでアコーディオンを作るなら、まず標準ブロックやテーマ独自ブロックで対応できるか確認しましょう。

プラグインなしで作りたい場合は、編集画面のブロック検索でAccordion、Details、詳細、FAQ、開閉、トグルなどの名前を探します。使えるブロックがあれば、余計なプラグインを増やさずに開閉表示を作れます。

アコーディオンは、ページをすっきり見せる便利な装飾です。ただし、大事な情報を隠しすぎず、読者が必要な情報へ迷わず進めるように使いましょう。