
タイトルをクリックすると、内容が展開されてもう一度クリックすると縮小される機能を、アコーディオン(あるいは切り替え)と呼びます。 これらの機能は、サイドバーのメニュー、FAQなど様々な応用が可能です。 参考までに Avadaで、「トグルは、一度に複数の項目を広げることができますがアコーディオンは一度にXNUMXつ広がること」を意味します。
WordPress テーマでアコーディオン機能を提供する場合、テーマ機能を使用する
WordPressは Avadaナ ディビのようなテーマでアコーディオンショートコードを提供して、比較的簡単にアコーディオン(トグル)機能を実装することができます。
個人的に 視覚的な作曲家をあまり好きではないが、 Visual Composerのようなページビルダーが使用されている場合、アコーディオン要素(エレメント)を使用することができます。 下の図は、 よりセブン(The7) テーマに含まれている Visual Composerで提供されるAccordion要素を示しています。

WordPress アコーディオンのプラグイン
テーマでアコーディオンやトグル機能を提供していない場合、プラグインを使用することも可能です。 Accordionで検索してみる様々なプラグインが検索されます。 その中から適切なものを選択することができます。

アコーディオンという名前のプラグインが現在の3万個以上のサイトに設置されて使用されており、評価も良い方です。
有料プラグインでは、 アコーディオンFAQ WordPress PluginというアコーディオンFAQプラグインは、ユーザーの評価が良く更新さもよくなるようです。 無料版で2%不足している場合に考慮してみることができます。
FAQページを作成したい場合は、FAQ専用のプラグインを使用することができます。 次の記事を参照してください。
JavaScript / jQueryを使用したアコーディオン機能
プラグインの使用が消えた場合は、JavaScript / jQueryを使用することも可能です。
純粋なHTML / CSSでアコーディオンメニューを実装する
jQueryやプラグインは、サイトの速度に影響を与えることができます。 速度が心配になるならば、純粋なHTML / CSSでアコーディオンメニューを実装することも可能です。 下の記事で、様々なアコーディオンメニューをHTML / CSSのみを使用して実装するコードを提供しています。
例:
- http://jsfiddle.net/m_raffaele/FkzLj/ (縦アコーディオンメニュー - 一つの項目のみピョルチョジム)
- http://jsfiddle.net/m_raffaele/E4acF/ (縦アコーディオンメニュー - 複数の項目を広げることができます)
- http://jsfiddle.net/m_raffaele/Fzuz7/ (横アコーディオンメニュー)
コメントを残す