WPBeginner - 初心者向けWordPressチュートリアル

最も必要とされている時に、信頼できるWordPressチュートリアルを。
WordPress入門ガイド
WPBカップ
2500万人以上
当社のプラグインを使用しているウェブサイト
16歳以上
WordPress経験年数
3000+
専門家によるWordPressチュートリアル

WordPress に jQuery FAQ アコーディオンを追加する方法 (3つの方法)

Editorial Staff 作成 | | 読者開示

Shares 39 ChatGPT Perplexity X LinkedIn WhatsApp

FAQアコーディオンでコンテンツを整理すると、WordPressサイトのユーザーエクスペリエンスが向上します。この機能により、質問と回答をコンパクトな形式で表示できるため、訪問者は情報をすばやく簡単に見つけることができます。

さらに、jQueryを使用してアコーディオンを作成すると、FAQがインタラクティブでナビゲートしやすくなります。

WPBeginnerでは、16年以上にわたってブログを運営しており、何百もの記事、ガイド、チュートリアルを執筆してきました。その中には、読者からのよくある質問に対応するためにjQuery FAQアコーディオンを使用したものもあります。

このアプローチにより、より多くの訪問者を引き付け、検索ランキングを向上させ、リードを生成することさえできました。要するに、動的なFAQアコーディオンがいかに価値があるかということです。

この記事では、jQuery FAQアコーディオンをWordPressに簡単に、ステップバイステップで追加する方法を紹介します。

WordPressにjQuery FAQアコーディオンを追加する

WordPress で jQuery FAQ アコーディオンを使用する理由

ウェブデザインにおけるアコーディオンとは、コンテンツをきれいに整理するためのツールです。クリックすると詳細が表示され、終了すると折りたたまれるリストのように見えます。ページを散らかさずに追加情報を非表示または表示する簡単な方法です。

一方、jQuery は、ウェブサイトにインタラクティブな機能を追加することを簡素化するJavaScriptライブラリです。たとえば、複雑なコードをゼロから書くことなく、アニメーション、ドロップダウンメニュー、クリック可能なボタンなどを追加できます。

これは、WordPress で jQuery FAQ アコーディオンを使用すると、サイトがより整理され、ユーザーフレンドリーになることを意味します。これにより、よくある質問を折りたたみ可能な形式で表示でき、スペースを節約し、乱雑さを軽減できます。

SeedProd FAQアコーディオンプレビュー

そうすれば、訪問者は長いテキストブロックをスクロールすることなく、必要な回答をすばやく見つけることができます。これにより、サイトはすっきりとした外観になり、検索エンジンが好むコンテンツ構造化によりSEOが向上します。

とはいえ、WordPressにjQuery FAQアコーディオンを簡単に追加する方法を見ていきましょう。このチュートリアルでは複数の方法を説明しますが、以下のリンクを使用して希望する方法にジャンプできます。

方法1：WPCodeでjQuery FAQアコーディオンを追加する（推奨）

jQuery FAQアコーディオンを簡単かつ確実に簡単に追加する方法を探しているなら、この方法はあなたにぴったりです。

このアプローチには、市場で最高のWordPressコードスニペットプラグインであるWPCodeが必要です。カスタムコードをウェブサイトに追加する最も簡単で安全な方法です。さらに、FAQアコーディオン用の既製のコードスニペットが付属しているため、理想的な選択肢となります。

まず、WPCodeプラグインをインストールして有効化する必要があります。詳細は、WordPressプラグインのインストール方法のチュートリアルをご覧ください。

注意: WPCodeには無料プランがありますが、コードスニペットのクラウドライブラリのロックを解除するにはプレミアムバージョンが必要です。

アクティベート後、WordPressダッシュボードからCode Snippets » + Add Snippetページにアクセスし、検索フォームを使用して「FAQ Accordion」スニペットを見つけてください。

それが完了したら、その下にある「スニペットを使用」ボタンをクリックするだけです。

FAQアコーディオンのスニペットの下にある「スニペットを使用」ボタンをクリックしてください

これにより、「スニペットの編集」ページに移動します。そこでは、FAQアコーディオン用のカスタムコードが「コードプレビュー」ボックスに既に追加されています。

ここでは、コード内にアコーディオンの質問と回答を入力するだけです。入力したら、上部のスイッチを「アクティブ」に切り替え、「更新」ボタンをクリックします。

スニペットに FAQ を追加する

ブロックエディターでFAQアコーディオンセクションを追加したいページまたは投稿を開きます。

ここで、「ブロックを追加」（+）ボタンをクリックしてブロックメニューを開き、「WPCode」ブロックをページに追加します。次に、ブロック内のドロップダウンメニューを開いて、先ほど作成した「FAQアコーディオン」コードスニペットを選択します。

これが完了したら、上部にある「更新」または「公開」ボタンをクリックして設定を保存します。

WPCodeブロックを追加

さて、WordPressサイトにアクセスして、FAQアコーディオンが機能しているのを確認してください。

他のページのアコーディオンを作成するには、このプロセスを繰り返す必要があることに注意してください。

jQuery FAQアコーディオンプレビュー

方法2：無料プラグインでjQuery FAQアコーディオンを追加する（簡単）

ウェブサイトでカスタムコードを使用したくない場合は、この方法が適しています。

まず、Advanced Accordion Gutenberg Block プラグインをインストールして有効化する必要があります。詳細については、初心者向けのガイド「WordPressプラグインのインストール方法」をご覧ください。

有効化したら、FAQを追加したいページまたは投稿を開き、上部にある「ブロックを追加」(+)ボタンをクリックします。ブロックメニューが表示されたら、「セパレートアコーディオン」ブロックを見つけてページに追加します。

個別のアコーディオンブロックを追加

次に、アコーディオンブロック内に最初の質問と回答を入力します。

次に、同じ名前のタブを展開し、「有効にする」スイッチを切り替えることで、ブロックパネルからFAQスキーマを追加できます。

FAQスキーマを有効にする

その後、右側の列にある「スタイル」セクションに切り替えます。ここから、アコーディオンのテキストの色、背景色、アイコンの色などをカスタマイズできます。

次に、このプロセスを繰り返して、好きなだけFAQを追加できます。

アコーディオンをカスタマイズする

最後に、ページ上部にある「更新」または「公開」ボタンをクリックして設定を保存します。

さて、FAQページにアクセスして、jQueryアコーディオンが機能していることを確認してください。

無料プラグインで作成されたFAQアコーディオン

方法3：SeedProdでjQuery FAQアコーディオンを追加する

カスタムページにインタラクティブなFAQセクションを追加したい場合は、この方法が最適です。

これを行うには、SeedProd を使用できます。これは、ページに展開および折りたたみ可能なテキストセクションを追加するための特別なアコーディオンブロックも備わった、最高のWordPressページビルダーです。

まず、SeedProd プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法に関するガイドをご覧ください。

注意: SeedProd には無料プランがあります。ただし、「Accordion」ブロックを利用するにはプロバージョンが必要です。

有効化したら、SeedProd » 設定 ページにアクセスしてライセンスキーを入力してください。この情報はSeedProdウェブサイトのアカウントで確認できます。

ライセンスキーをフィールドに貼り付けます

その後、WordPress管理サイドバーからSeedProd » ランディングページ画面にアクセスしてください。

ここから、「新しいランディングページを追加」ボタンをクリックします。

新規ランディングページを追加ボタンをクリック

これにより、選択できる既製のテンプレートのリストが表示される新しい画面に移動します。

選択すると、ページ名とURLを入力するプロンプトが表示されます。詳細を入力し、「保存してページの編集を開始」ボタンをクリックして続行してください。

FAQページの名称を追加してください

SeedProd のドラッグ＆ドロップビルダーが画面に表示されます。左側にブロック列、右側にページのプレビューが表示されます。

これで、画像、動画、CTAボタン、見出し、テキストブロックなど、あらゆる要素をページに追加できます。その後、「アコーディオン」ブロックをFAQを追加したい場所にドラッグアンドドロップします。

ページビルダーにアコーディオンブロックを追加する

次に、ブロックを再度クリックして、左側の列で設定を開きます。「アコーディオン1」タブを展開し、最初のFAQの入力を開始します。

これで、プロセスを繰り返して他のエントリを追加できます。

SeedProdで最初のFAQを追加する

デフォルトでは、ブロックは2つのアコーディオンのみを追加しますが、「新しい項目を追加」ボタンをクリックすることで、好きなだけFAQを追加できます。

提供されているスライダーを使用して、アコーディオン間のフォントサイズとスペースを設定することもできます。

新しいアコーディオンを追加

次に、上部にある「詳細設定」タブに切り替えます。

ここから、アコーディオンのテキストカラー、ヘッダーカラー、背景カラー、区切り線のカラーを変更できます。

FAQをカスタマイズしてページを公開する

完了したら、上部にある「保存」ボタン、次に「公開」ボタンをクリックするだけです。

作成されたカスタムページにアクセスして、jQuery FAQアコーディオンを表示できるようになりました。

SeedProd FAQアコーディオンプレビュー

ボーナス：WordPressにFAQスキーマを追加する

これらのjQuery FAQアコーディオンを追加したら、それらのFAQスキーマを追加することをお勧めします。これにより、よくある質問がGoogleの検索結果に直接表示されるようになり、SEOランキングとオーガニッククリック率を向上させることができます。

これには、All in One SEOをお勧めします。これは市場で最高のSEOプラグインです。数回のクリックでサイトを検索エンジン向けに最適化し、ランキングを向上させるのに役立つオールインワンソリューションです。

私たちは数年前からWPBeginnerでこのツールを使用しており、それ以来、検索ランキングに目に見える改善が見られました。詳細は、AIOSEOレビューをご覧ください。

WordPress用オールインワンSEO

このツールには、検索エンジンがコンテンツをよりよく理解するのに役立つ組み込みスキーママークアップ機能が付属しています。プラグインをアクティブ化したら、ブロックエディターでFAQページを開くだけです。

次に、「AIOSEO設定」セクションまでスクロールダウンし、「スキーマ」タブに切り替えます。ここで、「スキーマを生成」ボタンをクリックします。

オールインワン SEO スキーマ設定

「スキーマカタログ」が開きます。ここでFAQオプションを見つけ、その横にある「スキーマを追加」ボタンをクリックしてください。

その後、アコーディオンに表示されるFAQを追加できます。完了したら、「スキーマを追加」ボタンをクリックして設定を保存します。

FAQの名前と説明を追加

これで、検索エンジンはこれらの質問をインデックス化し、検索結果ページに表示するようになり、ランキングが向上します。

詳細については、WordPressにFAQスキーマを追加する方法に関するチュートリアルをご覧ください。

この記事が、WordPressにjQuery製FAQアコーディオンを追加する方法を学ぶのに役立ったことを願っています。また、WordPressサイトでコードを簡単に表示する方法に関するガイドや、おすすめのWordPress開発ツールもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。

WPBeginnerで今すぐ人気！

開示：当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです！

今すぐダウンロード

読者とのインタラクション

46 CommentsLeave a Reply

  1. WPCode を使った方法 1 は本当に役立ちました。簡単さとカスタマイズ性のバランスが素晴らしいです。
    WordPress 開発者として、以前にも似たようなことをしたことがありますが、あなたのステップバイステップガイドは初心者にも分かりやすいです。
    以前やったことに追加で一つ、アコーディオンの開閉アニメーションを滑らかにするために CSS トランジションを使用すると、さらに良くなるでしょう。これは私の将来のプロジェクトにとって素晴らしいリソースになるでしょう。

    Reply

  2. こんにちは、Quick and Easy FAQプラグインをインストールし、このビデオに従いました。アコーディオンFAQは表示されず、表示されるのは最初のFAQの質問と回答のみです。質問はハイパーリンクになっています。

    Reply

  3. 素晴らしいチュートリアルです！

    デバッガが未定義変数 $faq について苦情を言いました。
    関数 accordion_shortcode() の先頭で変数 $faq を "" で定義しました。

    また、私のFAQプラグインのバージョンでは、postesテーブルのpost_typeフィールドに「query」の代わりに「faq」という値が入力されます。

    23行目を調整しました：
    ‘post_type’ => ‘faq’,

    Reply

  4. FAQページのためにプラグインをインストールし、そのFAQページを作成する方法に関する以前のチュートリアルに従い、そしてこのチュートリアルのためにあなたが作成したプラグインをコピー（実質的にダウンロード）する必要があるというのは、ばかげています。つまり、実質的にすでに完成した2つのプラグインをダウンロードすることになります。

    ここに来る人はプラグインを2つダウンロードするためではなく、独自のカスタムアコーディオンメニューの作り方を学ぶためだと思います。自分で作る方法が分かっているのに、同じかそれ以上の機能を持つ他のWPプラグインをダウンロードできるのに、なぜこの「ハウツーガイド」に従う必要があるのか分かりません。

    このプラグインがFAQプラグインに依存しているという事実は、全く不要に思えます。なぜスタンドアロンのプラグインにして動的にしなかったのですか？そうすれば、あらゆるページで、あらゆるコンテンツに使用できます。

    Reply

    • ヨハンさん、こんにちは。

      ユーザーのほとんどは初心者であり、コードをコピー＆ペーストするのが難しいと感じるでしょう。そのため、プラグインとして作成し、ユーザーがダウンロードしてインストールできるようにしました。コード方法を使用したい場合は、コードはここにあり、テーマまたはサイト固有のプラグインで使用できます。お手伝いが必要な場合はお知らせください。

      Reply

      管理者

  5. タイトルをクリックしたときに折りたたまれるようにするにはどうすればよいですか？アコーディオンの別の部分をクリックすると折りたたまれることはわかっていますが、各タイトルがクリックされたときに折りたたまれる機能を探しています。

    Reply

  6. チュートリアルありがとうございます。コーディングとウェブページデザインは全くの初心者です。Macのメモ帳にコードを貼り付ける指示に従いました。メモ帳でPHPまたはJSファイルとしてフォルダに保存する以外に、ファイルを保存する別の方法はありますか？また、FTPクライアント（それは何ですか？）を開く方法と、my-accordianフォルダを/wp-contnt/plugins/ディレクトリにWPウェブサイトにアップロードする方法をステップバイステップで教えていただけますか？どうもありがとうございます。

    Reply

  7. これらのプラグインは正常に有効化しましたが、機能していません。FAQページに何も表示されません。

    Reply

  8. 共有されたコードのスクリーンショットは、上記で共有したコードとは異なります。しかし、スクリーンショットのコードには、あってはならないHTMLタグが含まれています。次のようになっているはずです。

    ‘posts_per_page’ => ’10’,

    Reply

    • これはかなり奇妙です。画面にはっきりとコードが見えていたので、あなたのコメントには困惑しました。その後、それらの通貨換算タグがすべて私の別のFirefoxプラグインから来ていることに気づきました。このプラグインは、ウェブページ上の数字に動的にコンテキストメニューを追加するもので、そのためソースが異なって見えたのです。
      助けてくれてありがとう！

      Reply

  9. WP 4.1でプラグインをアクティブ化しようとすると、このエラーメッセージが表示されます。

    プラグインが致命的なエラーを引き起こしたため、アクティブ化できませんでした。

    解析エラー: 構文エラー、予期しない ‘<' が /home2/laurepc3/public_html/shala/wp-content/plugins/my-accordion/my-accordion.php の20行目にあります

    これに役立つアイデアはありますか？

    Reply

    • ペーストしたコードに予期しない文字があります 10,

      posts_per_pageが単一引用符で囲まれていることを確認してください。等号がより大きい記号の前にあり、行の末尾にコンマがあることを確認してください。

      Reply

      • 20行目にそのようなものはありません。上記の投稿と私のファイルで20行目に見えるのは次のとおりです。

        ‘posts_per_page’ => 10,
        スクリーンショットも添付しました。
        上記の投稿は、間違ったファイルコンテンツを表示していますか？

        Reply

      • 私のファイル内のコードは、20行目にあなたが投稿したものとは異なりますが、それは上記と同じコードです：

        ‘posts_per_page’ => 10,
        ‘orderby’ => ‘menu_order’

        記事のコードは古いということですか？
        明確にしてくれてありがとう！

        スクリーンショットを添付しました：

        Reply

  10. このチュートリアルをありがとうございます！私の問題に本当に役立ちました！

    「イベント」のようなトピック：アコーディオンボックス、「過去のイベント」：トピック過去のイベントを持つ別のアコーディオンボックスを配置したいです。[faq_accordion + topic=”events”]というショートコードを試しましたが、何も起こりませんでした。どうすればよいですか？どうもありがとうございます!!!

    Reply

  11. こんにちは。このチュートリアルは役立ちます。ありがとうございます。しかし、特定のカテゴリのアコーディオンを作成するために簡単な変更を加えただけです。動作しますが、ビジュアルエディターではなく、投稿のクラシックエディターが表示されます。助けていただけますか？

    Reply

  13. こんにちは
    「FAQトピック」のようなカテゴリタイトルと、その下にリストされているトピックのみを表示する方法はありますか？
    コンテンツ全体は不要で、カテゴリタイトルのみを表示し、それをクリックするとトピックタイトルが表示されるようにしたいです。

    Raba

    Reply

  14. CSS を機能させるのに最適な方法は何ですか？カスタム CSS コードを含む子テーマがあります。Google CSS が表示されないため、そのファイルで何かを行う必要がありますか？

    Reply

    • Google CSSはキューに入れられ、FAQアコーディオンが表示されたときにのみフェッチされます。FAQアコーディオンが含まれるページを開き、右クリックして「ソースの表示」を選択します。ソース表示ページで、http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/humanity/jquery-ui.cssを探します。もしそこにあれば、CSSテーマが正常に読み込まれたことを意味します。

      Reply

      管理者

  15. FAQマネージャーと連携してプラグインを正常に動作させることができましたが、いくつか質問があります。FAQは10件しか表示されません（これはデフォルトの数だと思います）。FAQマネージャープラグインに付属の組み込みショートコードを使用すると、リスト全体を表示できます。

    すべて表示するには：投稿/ページに [faq limit="-1"] を配置します

    これを処理する方法について何か提案はありますか？

    また、FAQマネージャーはトピックごとに異なるリストを作成できます。この機能を利用するようにプラグインを簡単に変更する方法はありますか？

    単一のFAQトピックカテゴリからすべてを一覧表示：投稿/ページに [faq faq_topic=”topic-slug”] を配置

    それ以外は素晴らしい仕事です！

    Reply

    • トピック付きFAQを表示するために、FAQ Managerはショートコードでこれらのパラメータを使用します。

      [faq faq_topic="topic-slug"]

      [faq limit="-1"]は非常に分かりやすいです。すべてのFAQを表示します。

      ただし、アコーディオンにもっと多くのFAQを表示したい場合は、WPBeginnerのFAQアコーディオンプラグインのクエリパラメータを次のように変更する必要があります。

      // Getting FAQs from WordPress FAQ Manager plugin's custom post type questions
$posts = get_posts(array( 

// Increase posts per page
'posts_per_page' => 50, 

// Get only FAQs under a specific topic
// faq-topic is a taxonomy 
//topic-name is the name of topic you want to display

'faq-topic' => 'topic-name',
'orderby' => 'menu_order',
'order' => 'ASC',
'post_type' => 'question',
));
      Hosted with ❤️ by WPCode

      1-click Use in WordPress

      Reply

      管理者

  16. これは意図したとおりに機能していません。プラグインは正常にアクティブ化され、ショートコードは処理されていますが、出力は次のようになります…

    プラグインが出力する醜いスタイルを修正するために、コードと一緒にFAQマネージャープラグインを使用することにしました。

    しかし、すべてが終わったとき、それはこのようになります。何かアドバイスはありますか？
    http://screencast.com/t/K2VfuBOptcn

    前もって、たくさんの感謝を!!
    〜ギャレット
    アトランタ、ジョージア州

    Reply

    • jquery-ui.css からスタイル情報が継承されていないようです。ただし、jquery-ui.css へのリンクファイルがページに存在することは確認しました。

      jquery-ui.cssがインクルードされている行です。
      CSSルールの確認:

      どうしてこうなるのでしょうか？

      ありがとうございます！
      ～ギャレット

      Reply

  17. これは最新のWordPressアップデート後に壊れました。アコーディオンが表示されなくなりました。ショートコードはFAQマネージャーのテキストのみを表示します。

    Reply

  18. my-accordion.php ファイルの 20 行目には、「numberposts」と書かれています。

    その機能は…非常に長い間非推奨になっています。

    初心者向けのチュートリアルを提供しているのですから、少なくとも関数を正しくしてください。

    明らかにこれは「posts_per_page」であるべきです

    Reply

  19. これについていくつか助けていただけると幸いです。ネットワークサイトの3.5.2にインストールしようとしています。ネットワーク管理者にプラグインが表示され、ネットワークアクティベートされています。

    ただし、サブサイトにはリストされていません。

    ネットワークサイトでのテストはまだ行われていますか？まさに必要としているもののように見えます。WPBEGINNERでのすべての努力に感謝します。

    ありがとう。

    Reply

  20. こんにちは。
    my-accordion.phpとaccordion.jsを作成し、アップロードしましたが、プラグインのリストにプラグインが表示されません。何が間違っていましたか？
    よろしくお願いします。
    birge

    Reply

  25. 記事をありがとうございます。ページ/投稿にjQueryタブを導入する方法を説明する同様の記事があると嬉しいです。

    Reply

返信する

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。

Copyright © 2009 - 2025 WPBeginner LLC. All Rights Reserved. WPBeginner® は登録商標です。

Awesome Motive が管理 | SiteGround による WordPressホスティング

WordPress® の商標は WordPress Foundation の知的財産です。このウェブサイトでの WordPress® およびその名称の使用は、識別目的のみであり、WordPress Foundation による承認を意味するものではありません。WPBeginner は WordPress Foundation によって承認、所有、または提携されていません。

私は…について助けが必要です

人気の検索:

ブログの始め方 WordPress SEO WordPressのパフォーマンス WordPressのエラー WordPressセキュリティ オンラインストアの構築