WordPressのサイトデザインで最もよく使う機能のひとつに、アコーディオンがあります。この便利なウェブデザイン要素は、折りたたみ可能なタブレイアウトでコンテンツを表示できるため、スペースを取らずによくある質問や商品の詳細を表示することができます。
個人的には、SeedProdのアコーディオンブロックを使うのが好きです。とはいえ、ユーザーにはそれぞれ好みがありますし、もしかしたらページビルダーのソリューションではなく、専用のアコーディオン・プラグインを探しているかもしれません。
もしそう思うのなら、あなたは正しい場所にいる。この投稿では、あなたのサイトで使える最高のWordPressアコーディオン・プラグインを紹介します。
WordPressアコーディオン・プラグインのベストセレクション
Name | Pro | Con | |
🥇 | Heroic FAQs | Easy-to-customize accordions for FAQ content | Must be purchased with Heroic KB |
🥈 | SeedProd | Comprehensive customization options for accordion design | Accordion block not available in free version |
🥉 | PickPlugins’ Accordions | Lazy loading feature to optimize accordions | Interface is not the most user-friendly |
4 | Thrive Architect | Advanced settings for accordion animation | No free version available |
5 | Ultimate Blocks | SEO-friendly with customizable heading tags | Limited accordion icon options |
6 | Easy Accordion | Built-in support for WooCommerce product pages | Best features locked in Pro version |
7 | Accordion FAQ | User-friendly drag-and-drop accordion editor | Free version displays multiple ads |
WordPressに最適なアコーディオン・プラグインのテスト方法
最高のWordPressアコーディオン・プラグインを見つけるために、私たちは単純にそれぞれのプラグインをデモサイトにインストーラし、それぞれのプラグインがどのような位置づけにあるかを評価しました。
しかし、それだけではありません。私たちは、プラグインがいかに簡単に使えるかにも重点を置いた。インストールしてすぐに簡単に設定できないアコーディオン・プラグインにはまりたくはないでしょう。
また、カスタマイザー機能にも注目した。すべてのアコーディオン・プラグインが同じように作られているわけではありません。しかし理想を言えば、FAQセクションを作るにせよ、何か違うものを作るにせよ、アコーディオンの見え方を簡単に変更できるものがいいでしょう。
それ以外には、プラグインのパフォーマンステストを試みた。プラグインはWordPressホスティングのスペースを占有する可能性があり、アコーディオン機能はそもそもそれほど重くないのが普通だ。それでも、使用するプラグインがサイトを遅くしないことを確認するのは良いことだ。
最後に、価格とコストパフォーマンスを見た。このリストに掲載されているプラグインの中には有料のものもあるので、価格によってどのような特典が得られるのか(あるいは得られないのか)について率直にお伝えしたい。
WordPressサイトで使用できる最高のWordPressアコーディオン・プラグインを見てみよう。
なぜWPBeginnerを信頼するのか?
私たちのチームはWordPressとウェブ開発において10年以上の経験があり、あなた自身のサイトを構築する際に何が重要であるかを直接知っています。私たちは、あらゆるツール、プラグイン、ソフトウェア、テーマをテストし、読者のために最高のものだけを見つけ、推薦します。
さらに詳しく知りたい方は、編集プロセスをご覧ください。
1.英雄的FAQ
よくある質問に特化したアコーディオンプラグインを使いたい場合は、Heroic FAQsをチェックしてください。折りたたみ可能なタブ付きコンテンツを簡単に生成し、WordPressブログやサイトの任意の場所に追加することができます。
プラグインをテストしたところ、ドラッグアンドドロップエディターが非常に使いやすいことがわかりました。質問と回答の作成、FAQのグループ化、項目の並び替えが簡単にできます。5つの定義済みアコーディオンスタイルがあり、あなたのサイトデザインに完全に一致させるための多くのカスタマイズオプションがあります。
例えば、画像、ブロッククォート、動画、リストなどのリッチコンテンツをアコーディオンに追加することができます。
Heroic FAQsは、FAQアイコンを15種類から選択でき、アコーディオンやトグルのスタイル設定、CSS3アニメーションなど、FAQをよりパーソナライズするためのオプションも提供しています。
英雄的FAQの長所:
- FAQコンテンツを簡単にカスタマイズできるアコーディオン。
- ユーザーフレンドリーなドラッグ&ドロップエディターでアコーディオンを構築。
- リッチコンテンツ要素をアコーディオン内に挿入することで、より魅力的なアコーディオンにすることができます。
- ビルトインFAQスキーマサポートにより、FAQコンテンツが検索エンジンに表示されます。
英雄的FAQの短所
- 無料のプラグインはありません。
- Heroic KBと一緒に購入する必要があり、価格は年間149.50ドルから。つまり、このプラグインはアドオンのようなものだ。
Heroic FAQsを選んだ理由 FAQコンテンツに特化した、使いやすいアコーディオンプラグインを探している場合に最適です。また、Heroic KBと一緒に購入する必要があるため、ナレッジベースを構築したい場合にもおすすめです。
2.SeedProd
市場で最高のドラッグアンドドロップWordPressページビルダーとして、SeedProdは、ユーザーフレンドリーなサイトを作成するための様々なブロックを提供しています。これらにはアコーディオンブロックが含まれ、ページ上で展開したり折りたたんだりするテキストセクションを追加することができます。
実際にWPBeginnerでは、いくつかのブランドサイトやカスタムページにSeedProdを使っています。プラグインの機能と利点については、SeedProdのレビューで詳しく説明しています。
SeedProdを使えば、すべてアコーディオンブロックをページにドラッグ&ドロップするだけで、カスタマイザーを始めることができます。テキストセクションは必要なだけ作成でき、Font Awesomeのユニークなドロップダウンアイコンを使って個性的なタッチにすることもできます。
ブロックのタイポグラフィ、色、アニメーション効果などを自由にカスタマイズして、アコーディオンをよりインタラクティブなものにしましょう。
SeedProdの素晴らしいところは、レスポンシブなアコーディオンを簡単に作れることです。デスクトップ端末とモバイル端末でブロックの間隔を調整したり、特定の端末でページが表示された場合にアコーディオンを非表示にすることもできます。
SeedProdの長所:
- すべてのレベルのユーザーに使いやすいドラッグ&ドロップエディター。
- カスタマイズ設定オプションにより、ヘッダーやドロップダウンアイコンからテキストセクションのシャドウまで、アコーディオンのデザインを完全にコントロールすることができます。
- モバイルでのアコーディオンの間隔と可視性を調整する設定をプロバイダーとして提供し、ユーザー体験を向上させるのに最適です。
- すぐに使える様々なFAQセクションのレイアウトを提供し、プロセスをスピードアップします。
- カスタムCSSでアコーディオンデザインをよりパーソナライズできます。
SeedProdの短所:
- アコーディオン・ブロックは無料版にはありません。
SeedProdを選んだ理由: アコーディオンブロックはPro版でしか利用できませんが、それでもSeedProdをお勧めする価値はあると思います。カスタマイズ可能なアコーディオンに加え、ユニークなサイトを簡単に作成できるユーザーフレンドリーなページビルダーも利用できます。
3.アコーディオン
私たちがテストしたすべてのプラグインの中で、Accordionsは少し高度なアコーディオンオプションだが、かなり強力なものでもある。
これまでのプラグインとは異なり、WYSIWYGエディターやドラッグ&ドロップエディターは付属していない。インターフェースはよりシンプルで、ライブプレビューはありませんが、無制限のアコーディオンを追加してカスタマイズするための多くの設定を見ることができます。
このプラグインの最も注目すべき特徴のひとつは、遅延ロード設定である。これは、ユーザーの画面がページ上のアコーディオンに到達するまで、アコーディオンの読み込みを遅らせる。こうすることで、高速なサイトパフォーマンスを維持することができる。
さらに、Proバージョンを入手すれば、ネストしたアコーディオンを作成できる。この機能は、説明したい情報がたくさんあり、より整理したい場合に便利です。
アコーディオンの長所:
- アコーディオンを最適化するための遅延ロード機能があります。
- 他のプラグインからアコーディオンをインポートするためのインポート機能を提供します。
- 伝統的なアコーディオンと垂直タブの2種類から選べるアコーディオン。
- Font Awesomeアイコンとの統合により、アコーディオンを展開または折りたたむ際のアイコンをカスタマイズできます。
- Proプランには、ネストされたアコーディオンやビルトイン検索機能などの高度な機能が含まれています。
アコーディオンの短所:
- インターフェースはユーザーフレンドリーとは言い難い。
- アコーディオンを表示できるのは、ショートコードを使用した場合のみです(アコーディオン用のビルトインブロックはありません)。
Accordionsを選んだ理由 Accordionsはユーザーフレンドリーさに若干欠けるものの、美しいアコーディオンを作成するためのパワフルなプラグインだ。Proプランには、ネストされたアコーディオンなど、他のプラグインにはない機能も含まれています。
4.Thriveアーキテクト
Thrive Architectはアコーディオン/トグルブロックを備えたもう一つの素晴らしいページビルダーです。ドラッグアンドドロップエディターがあるので、このプラグインでFAQや製品情報セクションをデザインするのは簡単です。さらに詳しく知りたい方は、Thrive Architectのレビューをご覧ください。
Thrive Architectで目を引くのは、トグル・ブロックのアニメーション・スタイルとスピードをカスタマイズできることです。これにより、アコーディオンの動作をよりコントロールすることができます。
その他にも、トグル・ブロックにカラムを作成することができるので、アコーディオン・コンテンツがたくさんある場合に便利です。さらに、トグル・ブロックの背景色、タイポグラフィ、シャドウなどをカスタマイズできる。
訪問者の注意を引くために、初期設定でトグルを展開させたい場合は、それも可能です。最初のアコーディオンのコンテンツだけが表示されるので、拡大によってスペースが制限される心配はありません。
Thrive Architectの長所:
- トグル・ブロックはThrive ArchitectとThrive Suiteのすべてのプランに付属しています。
- ユーザーフレンドリーなドラッグ&ドロップエディター。
- アコーディオン・ブロックの見た目をカスタマイズする方法はたくさんある。
- アコーディオン・ブロックのアニメーションを設定し、クリック時の動作をコントロールする高度な設定。
- デスクトップ、モバイル、タブレットでトグルを表示または非表示にする設定により、サイトのレスポンシブが向上します。
Thrive Architectの短所:
- 無料版はない。
- 自動保存機能がないので、手動で保存する必要がある。
Thrive Architectを選んだ理由: トグル機能のあるページビルダーを探しているなら、Thrive Architectを試してみよう。アコーディオンを作成するためのカスタマイザー設定は包括的で、このプラグインでユニークなウェブデザインと魅力的なランディングページを簡単に構築することができます。
5.アルティメット・ブロック
Ultimate Blocksは、私たちが試したGutenbergブロックプラグインの中で、アコーディオン機能を備えた最高のプラグインの一つです。このツールについては、Ultimate Blocksのレビューで詳しく説明している。
これを使えば、区切りインターフェースではなく、ブロックエディター上でコンテンツトグル・ブロックを追加することができます。この方法で、FAQセクションを作成し、ページや投稿日の好きな場所に簡単に配置することができます。
Ultimate Blocksの素晴らしいところは、アコーディオンタイトルの見出しタグを選択できることです。その結果、アコーディオンのコンテンツをSEOフレンドリーにして、ページや投稿の論理構造に合わせることができます。
Proバージョンにアップグレードすると、アコーディオンの上部に検索バーを追加することができ、ユーザーが素早く答えを検索できるようになります。
アルティメット・ブロックの長所:
- デスクトップ、タブレット、モバイル端末でアコーディオンを非表示にするレスポンシブ・デザイン・コントロールを提供。
- FAQスキーマのサポートとカスタマイズ可能な見出しタグで、SEOフレンドリー。
- ドラッグ&ドロップのGutenbergブロックエディターでコンテンツトグル・ブロックを追加できるので使いやすい。
- タブ付きや拡張可能なコンテンツブロックなど、スペースを最小限に抑えながら情報を表示するための他のブロックを提供します。
アルティメット・ブロックの短所:
- 他のプラグインに比べ、アコーディオンアイコンの設定が限られている。
Ultimate Blocksを選んだ理由: WordPressユーザーのほとんどは、すでにブロックエディターにかなり慣れているので、UltimateBlocksはエディターですぐにアコーディオンを追加するのに適している。コンテンツ・トグル・ブロックは無料プラグイン版でも利用できる。
6.イージー・アコーディオン
WooCommerce商品ページ用のアコーディオン・プラグインを探しているなら、Easy Accordionをチェックすることをお勧めします。私たちは、商品ページに詳細なFAQセクションを作成するためのサポートを含むProバージョンを特に気に入っています。
複数の商品カテゴリーに同じFAQを用意する場合、このプラグインで簡単に実装できます。その結果、ページごとに異なるFAQを作成する必要がなくなります。
Easy Accordionは翻訳にも対応しており、WPMLやPolyLangのような多言語プラグインと互換性があります。あなたが多言語ビジネスを運営しているなら、これは素晴らしいことです。
もう一つの素晴らしい機能はカスタムショートコードジェネレータです。これによって、後で埋め込む必要があるときのために、アコーディオン・ショートコードを簡単に差別化することができます。
イージー・アコーディオン・プロの長所:
- Gutenbergとほとんどの主要なWordPressページビルダープラグインをサポートしています。
- 既存のページ、投稿日、カスタム投稿タイプ、さらにはタクソノミーからアコーディオンを作成し、アコーディオンコンテンツを挿入する時間を節約することができます。
- 垂直タブやマルチカラムセクションから水平トグルまで、複数のアコーディオンレイアウト。
- スキーママークアップやnofollowリンクなどのSEO機能を含む。
イージー・アコーディオン・プロの短所:
- プラグインには無料版が付属しているが、素晴らしい機能のほとんどはプロ版にロックされている。
Easy Accordionを選んだ理由 : WooCommerce商品ページと翻訳プラグインのビルトインサポートにより、Easy Accordionはオンラインビジネスに最適です。
7.アコーディオンFAQ
ドラッグアンドドロップビルダーを備えた、飾り気のないアコーディオンプラグインをお探しなら、Accordion FAQをおいて他にありません。このプラグインを使えば、折りたたみ可能な複数のコンテンツセクションを簡単に作成し、バックエンドから好きなように移動させることができます。
無料のAccordion FAQプラグインにはテンプレートが1つしかありませんが、非常にユーザーフレンドリーで多機能であることがわかりました。より多くのデザインを選択するには、Proバージョンにアップグレードして18以上のテンプレートを入手できます。
プラグインはまた、アコーディオンをカスタマイズする多くの方法を提供します。30種類以上のアニメーションスタイル、数十種類のFont Awesomeアイコン、500種類以上のGoogleフォントを自由に使って、アコーディオンをよりユニークなものにしましょう。
アコーディオンの長所 FAQ:
- ユーザーフレンドリーなドラッグ&ドロップ式アコーディオンエディター。
- 無制限のカラーオプション、豊富なアニメーションスタイル、アイコン、Googleフォントなど、多くのカスタマイザー設定。
- プロプランの価格は6ヶ月で9ドルからと、かなりお手頃だ。
- Bootstrapフレームワークをベースにしており、アコーディオンのレスポンシブ・デザインを実現しています。
アコーディオンFAQの短所:
- 無料プラグイン版では複数の広告が表示されるため、ユーザー体験が悪くなる可能性がある。
Accordion FAQを選んだ理由 もしあなたがドラッグ&ドロップ機能付きのシンプルなアコーディオン・プラグインを探しているなら、プラグインページの広告を気にしない限り、Accordion FAQは素晴らしい設定だ。
ボーナス:究極のショートコード
Shortcodes Ultimateは、アコーディオンを含む様々なコンテンツ要素を追加するためのショートコードのセットが付属しているWordPressプラグインです。詳しくは、Shortcodes Ultimateのレビューをご覧ください。
ショートコードを使用しているので、ページや投稿からウィジェット対応エリアまで、WordPressサイトのどの部分にもアコーディオンショートコードを追加できます。また、ほとんどの最新テーマでスムーズに機能するため、テーマの互換性を心配する必要もない。
このプラグインで気に入らないのは、アコーディオン用のショートコードとHTMLがかなり長く、コンテンツをインサートするときに注意しなければならないことだ。それが、このオプションを上記と同じリストに入れなかった理由です。
最高のWordPressアコーディオン・プラグインとは?
最適なWordPressアコーディオン・プラグインは、あなたのニーズによって異なります。
FAQコンテンツ用のアコーディオンプラグインを探しているなら、Heroic FAQsをお勧めします。ドラッグアンドドロップエディターは使いやすく、アコーディオンを作成するための様々なカスタマイザー機能を備えています。
アコーディオンブロックを備えたページビルダーを探しているなら、SeedProdが最適な設定です。SeedProdは、アコーディオンの見た目や動作に関する様々なコントロールや設定を提供します。さらに、アコーディオンのデザインはページ上の他のエレメントとの相性も抜群です。
最後に、無料のWordPressアコーディオン・プラグインを探している人は、Accordionsを検討してみよう。このプラグインには、シンプルなアコーディオンや縦型タブコンテンツを作成するのに必要なものがすべて含まれています。また、遅延ローディングにより、アコーディオンがサイトを遅くすることもありません。
WordPressのアコーディオンに関するFAQ
WordPressでアコーディオンを追加する際によくある質問について説明します。
WordPressにアコーディオンを追加するには?
WordPressでアコーディオンを追加する最も簡単な方法は、Heroic FAQsや SeedProd、Accordionsなどのプラグインを使うことです。これらのツールを使えば、すぐに使えるアコーディオンをページや投稿に挿入し、自分好みにカスタマイズすることができます。
どのWordPressアコーディオン・プラグインが最高のカスタマイザー設定を提供するか?
Heroic FAQsは、アコーディオンを作成するための最高のカスタマイズオプションを提供します。ドラッグ&ドロップエディター、定義済みアコーディオンスタイル、15種類のFAQアイコン、CSS3アニメーション、トグルスタイルオプションなどが付属しています。
SeedProdは、アコーディオンの外観や動作を変更するための包括的なカスタマイズオプションも提供しています。色やタイポグラフィを変更するだけでなく、特にモバイル端末用にアコーディオンのサイズを調整することができます。
FAQセクションの作成に最適なWordPressアコーディオンプラグインは?
Heroic FAQsは、FAQセクションを作成するための優れたWordPressアコーディオンプラグインです。このプラグインを使用すると、さまざまなスタイルを使用してアコーディオンを作成し、情報を理解しやすくするためにさまざまなリッチコンテンツを挿入することができます。
WordPressサイト改善のための究極のガイド
- WordPressでビジュアライザーを使って棒グラフを作成する方法
- WordPress用ベストGoogleマッププラグイン(ほとんどが無料)
- WordPressサイトにWebプッシュ通知を追加する方法
- WordPressのベストクイズプラグイン
- WordPressでフィットネストラッカーを作成する方法(チャート付き)
- WordPressで音声音楽プレーヤーウィジェットを追加する方法
- WordPressのサイドバーにランダムな名言を表示する方法
この投稿が、最高のWordPressアコーディオンプラグインを見つける手助けになったなら幸いです。また、あなたが見逃している最も楽しいWordPressプラグインのピックアップや、WordPressで自動ワークフローを作成する方法についてのガイドもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Moinuddin Waheed
Accordion is a nice way to display information in an organised way.
I have seen people mainly using accordion for faqs.
But this can be used for other important piece of information as well.
I have used elementor in the past for this purpose but since I have completely left out elementor, now exploring newfound love with seedprod.
WPBeginner Support
We hope you find it useful
管理者
Jiří Vaněk
I also use accordion for FAQ. Thanks to having elementor, I can use their accordion widget and don’t need another plugin. So just a piece of advice for those who have elementor, so you don’t have to install another plugin. Elementor has an accordion widget by default.
Gary Richards
Hi,
Does this accordion have the ability to have sections and then within the sections the FAQs.
Currently I have categories with about 20 questions in each. Each category has its own accordion.
However, this is quite lengthly as it reveals all the questions in each category. So I kind of need a ‘double’ accordion if that makes sense.
Thanks.
WPBeginner Support
You may want to take a look at the second plugin from our list for what it sounds like you are wanting.
管理者
Craig
Can this be set up to continue contingent upon answer?
Ivan
How does accordion work with SEO?
Can google read/rank text from accordion if all content is collapsed by default?
WPBeginner Support
Yes, search engines would be able to read the accordion content.
管理者
Kiane
Is it possible to use it on woocommerce single product page on tabs in woocommerce?
WPBeginner Support
It would depend on the specific plugin you are asking about, we would recommend reaching out to the plugin’s support and they should be able to let you know if there is an integration for WooCommerce.
管理者
Michael Dubell
Are there any solutions for adding content other than text in an accordion element? I would like my drop down to also include images/videos.
As always, thanks for the great content!
Michael
WPBeginner Support
Depending on how you want the content displayed, these plugins can handle video and/or images in the accordions
管理者
John
Timely info, thanks.
WPBeginner Support
Glad we could share these plugins
管理者
Azhar Hussain
Nice info about Accordions. Keep up the good work.
Thanks for sharing