アコーディオンは、クリックするとコンテンツが隠れたり現れたりするトグルベースのレイアウト要素です。見出しをクリックすると、残りのコンテンツが下にスライドします。もう一度クリックすると、非表示になります。ドロップダウンメニューのようなものです。
では、アコーディオンを正しく実装するとどうなるでしょうか？コンテンツの探索が容易になり、ユーザーの集中力が持続し、モバイルナビゲーションが改善され、検索エンジンはより良い可視性であなたに報いるかもしれません。アコーディオンは、ユーザーが質問する前に答えてくれる目次のようなものです。
このガイドでは、コーディングを必要とせず、シンプルでクリーンなプロセスを維持するエディタフレンドリーなツールを使用して、WordPressにアコーディオンを実装する方法を紹介します。
WordPressにアコーディオンを追加する
WordPressでアコーディオンを追加する方法は1つだけではありませんが、そのすべてがブロックエディタ内で簡単に使えるわけではありません。次のセクションでは、ビルトインブロックを使った基本的な方法から始め、プラグインを使ったより柔軟なオプションに進みます。
方法1：ネイティブの詳細ブロックを使用する
WordPressでアコーディオンを作成する最も簡単な方法は、組み込みの 詳細ブロック.どう動くか見てみよう。
ステップ1：詳細ブロックの追加
ブロックエディターで投稿またはページを開きます。プラス（+）アイコンをクリックし、Detailsを検索してブロックを挿入します。
ステップ2：タイトルと内容を追加する
要約を書く」プレースホルダーにアコーディオンのタイトルを入力する。次に、その横の矢印アイコンをクリックしてセクションを展開します。展開されると、下にテキスト、画像、リスト、その他のブロックを追加できるコンテンツエリアが表示されます。
ステップ3：追加トグル
アコーディオン項目を増やすには、新しいDetailsブロックを挿入して同じプロセスを繰り返します。ネストされたレイアウトの場合は、既存のDetailsブロックのコンテンツエリアを展開し、その中にあるプラス（+）アイコンをクリックして、別のDetailsブロックを追加します。
この方法は、素早くFAQを作成したり、最小限のセットアップを行うのに最適です。ただ、基本的なスタイリングのみを提供し、高度なデザインオプションは含まれていないことを覚えておいてください。
方法2：Ultimate Blocksプラグインを使う
より多くのスタイリングオプションとアコーディオンのコントロールが必要な場合は アルティメット・ブロック プラグインは素晴らしい選択です。ブロックエディターで完璧に動作するContent Toggleブロックを提供します。
ステップ1：サイトにプラグインを追加する
WordPressのダッシュボードから、プラグインメニューに向かい、新規追加をクリックします。検索バーに「Ultimate Blocks」と入力し、プラグインカードの「今すぐインストール」をクリックします。インストールが完了したら、有効化してエディターで新しいブロックを利用できるようにします。
ステップ2：コンテンツ・トグル・ブロックを挿入する
アコーディオンを設置したいページまたは投稿を開きます。プラス（+）アイコンをクリックし、Content Toggleを検索して追加します。このブロックは、タイトルとコンテンツエリアを持つ拡張可能なセクションを作成します。
ステップ3：タイトルとコンテンツの追加
ラベルフィールドにアコーディオンのタイトルを入力し、下にコンテンツを追加します。テキスト、イメージ、ボタン、リストなど、どのタイプのブロックでもトグル内に含めることができます。また、ネストされたアコーディオンを作成するために、コンテンツエリア内に別のコンテンツトグルブロックを含めることもできます。
トグル・セクションを追加するには、既存のパネルにカーソルを合わせて(+)アイコンをクリックするだけです。パネルを削除するには、(+)アイコンをクリックする代わりに、右上にある(x)アイコンを選択する以外は同じです。
ステップ4：アコーディオンのカスタマイズ
右側のブロック設定パネルから、パネルタイトルのコントロール、トグル状態の調整、FAQスキーマの有効化、アコーディオンへの組み込み検索オプションの追加、ステータスアイコンの選択、テキストや背景色の変更などができます。
FAQに使用している場合は、設定からFAQ Schemaマークアップを有効にすることで、Google検索のリッチスニペットの対象となるコンテンツを作成することもできます。
結論
長いコンテンツをスキャンしやすくすることが目的なら、アコーディオンはすっきりとしたソリューションを提供します。2つのアプローチを学びました：ネイティブのDetailsブロックは、余分なプラグインがなく、読み込みが速い軽量なセットアップを提供します。Ultimate Blocks の Content Toggle ブロックは、高度なスタイリングコントロール、ネストされたパネル、組み込みの FAQ スキーマを追加します。どちらの方法も、モバイルユーザビリティとSEOの可能性を高めます。あなたのワークフローとコンテンツのニーズに最も適したアプローチを選択してください。
