7つの最高のWordPressアコーディオンブロックプラグイン2022(ほとんど無料)

公開: 2022-08-01

最高の WordPress アコーディオン ブロック プラグインをお探しですか ? はいの場合は、適切な場所に着陸しました。

WordPress アコーディオンは、Web サイト訪問者のユーザー エクスペリエンスを向上させるのに役立ちます。 アコーディオンは、折りたたみ可能なタブ レイアウトを使用して、投稿を簡単かつ迅速読むのに役立ちます。 したがって、Web サイトの訪問者は手間をかけずにコンテンツを簡単に見つけることができます。 これは直帰率の低下につながります。

ただし、素晴らしい機能を備えた WordPress アコーディオン ブロック プラグインはたくさんあり、どれを選ぶかは面倒です。 そのため、市場で入手可能な最高の WordPress アコーディオン ブロック プラグインを厳選しました。 何よりも、それらのほとんどは無料です。

それでは早速始めましょう!

この記事の内容:隠す
なぜアコーディオンブロックが必要なのですか?
7つの最高のWordPressアコーディオンブロックプラグイン2022
1. アコーディオン ブロック – WordPress プラグイン
2.積み重ね可能
3. 高度なアコーディオン グーテンベルク ブロック
4. Gutenberg の必須ブロック
5.究極のブロック
6. Kadence BlocksによるGutenberg Blocks
7. ゲットワイド
結論

なぜアコーディオンブロックが必要なのですか?

アコーディオン ブロック プラグインは、テキスト コンテンツをコンパクトまたは折りたたみ可能な形式で表示し、長いスクロールを減らします。 また、アコーディオン ブロックを使用して、製品の説明、FAQ などのコンテンツを表示することもできます。

さらに、Web サイトのデザインに合わせて、背景色、コンテナーの色、トグル アニメーション、条件トグルなどをカスタマイズできます。

WordPress Web サイトでのアコーディオン ブロックのその他の用途は次のとおりです。

  • テキスト コンテンツのインタラクティブな配信を通じて、ユーザー エクスペリエンスを向上させる。
  • テキストの多いコンテンツや長いブログを圧縮して、ブログを簡素化し、読みやすくします
  • アコーディオン ブロックは、小さな画面のデバイスでの読書体験を向上させます。
  • また、アコーディオン ブロックは、ページ内リンクの優れた代替手段です。
  • さらに、アイテムを入れ子にして分類する必要がある場合は、アコーディオン ブロックが役立ちます。

したがって、Web サイトのコンテンツの長さを最小限に抑えたい場合は、アコーディオン ブロックを使用することをお勧めします。 それでは、2022年に最適な7つのWordPressアコーディオンブロックプラグインのリストを確認しましょう.

それでは、先に進みましょう!


7つの最高のWordPressアコーディオンブロックプラグイン2022

ここでは、2022 年に最適な WordPress アコーディオン ブロック プラグインのいくつかを最終候補に挙げました。それぞれの完全な説明、機能、価格、および構築プロセスが含まれています。 したがって、それらを徹底的に調べて、あなたに適したものを選択してください。

1.アコーディオン ブロック – WordPress プラグイン

Accordion Blocks は、WordPress Web サイトに Gutenberg ブロックを追加できる直感的なプラグインです。 また、HTML 見出しとともにアコーディオン ブロックを作成して公開することもできます。 さらに、詳細なカスタマイズのためにカスタム HTML および CSS を使用してアコーディオンを編集できます。

アコーディオン ブロック WordPress プラグイン

主な特長:

  • 別のアイテムを開いたときに、現在のアコーディオン アイテムを自動的に閉じることができます。
  • また、必要に応じてアコーディオン アイテムをネストできます。
  • アコーディオン アイテムは、wp.blocks.registerBlockStyle を使用してカスタム ブロック スタイルをサポートします。
  • さらに、デフォルトで任意のアコーディオン項目を開くように選択できます。
  • さらに、デフォルトを新しい項目に設定したり、特定のアコーディオン機能を設定したりできます。

アコーディオンの作成:

このプラグインを使用するには、WordPress ダッシュボードで検索するだけです。 次に、プラグインをインストールして有効にします。 その後、投稿に移動し、右上隅の「+」ボタンをクリックして、[ Accordion items ] を選択します。 下の画像に示すように、アコーディオン ブロックが投稿に表示されます。

WordPress Web サイトのアコーディオン ブロックからアコーディオンを追加する
アコーディオン ブロックの使用

さらに、クリックして閉じる自動閉じるデフォルトで開くなどの多くのカスタマイズオプションが付属しています。スクロールピクセルオフセットを設定することもできます.

アコーディオン ブロックのカスタマイズ オプション
アコーディオン ブロック設定の使用

明確なアイデアが必要な場合は、WordPress プラグインのインストール方法に関する記事をご覧ください。

価格:

このプラグインは無料で使用できます。 このプラグインは、WordPress.org の公式プラグイン リポジトリからダウンロードできます。 または、プラグインを WordPress ダッシュボードに直接インストールします。

今すぐアコーディオン ブロックを入手してください。

2.積み重ね可能

Stackable は、別の人気のある WordPress ブロック エディター互換プラグインで、素晴らしい折りたたみ可能なアコーディオン ブロックを追加できます。 そのため、テキストの多い FAQ やその他のコンテンツを Web サイトに簡単に公開できます。 また、5 種類のアコーディオン アイテム スタイルから選択できます。

スタック可能な WordPress ブロックプラグイン

主な特長:

  • アコーディオンアイテムにモーションエフェクトを追加して、素晴らしい体験をすることができます。
  • アコーディオン アイテムは、すべての画面サイズに合わせて完全に応答します。
  • また、カスタマイズ目的でアイテムにカスタム CSS を追加することもできます。
  • SVG アイテムをアイコンとして追加できます。
  • さらに、事前に構築されたアイテムから選択して、Web サイトの開発をスピードアップできます。

アコーディオンの作成:

WordPress.org から入手したこのプラグインをダッシュ​​ボードにアップロードし、プラグインをインストールして有効化できます。 次に、投稿に移動し、右上隅の「+」をクリックして Stackable からアコーディオンを選択します。 アコーディオン ブロックが投稿に表示され、デフォルト、プレーンなどのレイアウトを選択して開始できます。 ここでは、デフォルトのレイアウトを選択します。

積み重ね可能なブロックを使用してアコーディオンを追加する
積み重ね可能なブロックの使用

その後、 「新しいブロック」などのタイトルの追加から開始し、タイトルに説明を追加できます。 スタッカブルには、 「ブロック」、「スタイル」「アドバンス」の 3 つのカスタマイズ オプションがあります。 タイポグラフィ背景見出しブロック位置など、すべてをカスタマイズできます。

積み重ね可能なカスタマイズオプション
スタック可能な設定の使用

価格:

Stackable はフリーミアムプラグインで、WordPress.org の公式プラグイン リポジトリから無料バージョンのプラグインをダウンロードできます。

ただし、利用可能な Stackable のプレミアム バージョンがあります。 4つの料金プランからお選びいただけます。

  • 個人: 1 つの Web サイトで年間 49 ドル。
  • ビジネス: 3 つのサイトで年間 99 ドル。
  • エージェンシー: $149 無制限のウェブサイトで年間。
  • エージェンシー ライフタイム: 1 回限りの費用は 499 ドルです。
今すぐスタッカブルに!

3.高度なアコーディオン グーテンベルク ブロック

Advanced Accordion Gutenberg Block は、WordPress Web サイト用の最小限で高速なアコーディオン プラグインです。 また、アコーディオンブロックはグループ、セパレート、シングルの3種類からお選びいただけます。 さらに、カスタム マージン、パディング、背景色などを使用してアコーディオン アイテムのスタイルを設定できます。

WordPress 用の高度なアコーディオン グーテンベルク ブロック プラグイン

主な特長:

  • このプラグインは十分に最適化されており、超高速で動作します。
  • また、テキスト、画像など、あらゆるタイプのコンテンツもサポートしています。
  • アコーディオン アイテムは SEO フレンドリーで、ウェブサイトのランクを上げるのに役立ちます。
  • さらに、Web サイトに無制限の FAQ を追加できます。
  • さらに、ネストされたアコーディオンを無制限に追加することもできます。

アコーディオンの作成:

WordPress ダッシュボードから簡単に利用できます。 プラグイン メニューに移動し、 Advanced Accordion Gutenbergを検索します。 次に、プラグインをインストールして有効にします。 その後、投稿に移動し、 「+」ボタンをクリックします。 続いて、「セパレートブロック」「グループブロック」の2つの選択肢が表示されるので、どちらかを選択します。 ここでは、個別のブロックオプションを選択しました。

Advanced Accordion Gutenberg ブロックでアコーディオンを追加する
Advanced Accordion Gutenberg ブロックの使用

このプラグインを使用すると、ヘッダーの色ヘッダーの背景アイコンの色など、多数のカスタマイズ オプションが利用できます。 ブロックをリンクされたアコーディオンに変えることもできるので、クリックするとリンクが開きます。

高度なアコーディオンのカスタマイズ オプション
高度なアコーディオン グーテンベルク ブロック設定の使用

価格:

これは無料の WordPress プラグインです。 このプラグインは、WordPress.org の公式プラグイン リポジトリからダウンロードできます。 WordPress ダッシュボードから簡単にインストールできます。

高度なアコーディオン グーテンベルク ブロックを手に入れよう!

4. Gutenberg の必須ブロック

Essential Blocks for Gutenberg は、人気のあるアコーディオン WordPress プラグインです。 また、このプラグインを使用すると、Web サイトのどこにでも美しいアコーディオンを追加できます。 さらに、これらのアコーディオン項目はインタラクティブで、トグル アイコンを有効にするオプションがあります。

Gutenberg の必須ブロック

主な特長:

  • アイコンのリストからアコーディオン項目のアイコンを選択します。
  • アコーディオンアイテムの背景色をカスタマイズできます。
  • アコーディオン コンテンツのフォント ファミリをカスタマイズできます。
  • さらに、アコーディオン アイテム アニメーションのトグル速度を変更できます。
  • さらに、アコーディオン アイテムはレスポンシブで、すべての画面サイズに適合します。

アコーディオンの作成:

開始するには、WordPress.org からプラグインをダウンロードし、WordPress ダッシュボードにアップロードします。 または、直接インストールしてアクティブ化します。 次に、新しい投稿を開くか作成し、 「+」ボタンをクリックして、必須ブロックからアコーディオンを選択します。 アコーディオン ブロックが投稿に表示され、好きなようにブロックを編集できるようになりました。

Gutenberg のエッセンシャル ブロックから WordPress アコーディオン ブロックを追加する
Gutenberg のエッセンシャル ブロックの使用

カスタマイズに関しては、 「一般」、 「スタイル」「高度」の3つのオプションが付属しています。 ここでは、トグル速度、アコーディオン ギャップ、アイコンなどを管理できます。また、背景の種類、色、および画像を変更することもできます。

グッテンベルグのカスタマイズ オプションに不可欠なブロック
Gutenberg 設定のエッセンシャル ブロックの使用

価格:

Essential Blocks for Gutenberg は無料で使用できるプラグインです。 プラグインは、WordPress.org の公式プラグイン リポジトリからダウンロードできます。

Gutenberg のエッセンシャル ブロックを今すぐ入手しましょう!

5.究極のブロック

Ultimate Blocks は、ユーザー フレンドリーな WordPress Gutenberg ブロック プラグインで、ブログ サイトにアコーディオン アイテムを追加するのに役立ちます。 訪問者が長いテキストなしで読むのに役立つコンテンツをアコーディオンで追加できます。

アコーディオン ブロックの究極のブロック

主な特長:

  • このプラグインは、ネストされたアコーディオン アイテムを簡単に作成するのに役立ちます。
  • また、アコーディオンアイテムのコンテナとタイトルの色をカスタマイズできます。
  • さらに、初期状態を折りたたんだ状態または折りたたんでいない状態に設定できます。
  • さらに、アイテムの FAQ スキーマを有効にするオプションがあります。
  • アコーディオンの左側または右側にトグル アイコンを設定できます。

アコーディオンの作成:

WordPress ダッシュボードからプラグインを簡単に検索してインストールできます。 プラグインを有効にした後、既存の投稿に移動するか、新しい投稿を作成します。 次に、投稿の右上隅にある「+」アイコンをクリックして、究極のブロックからのコンテンツ トグルを追加します。

究極のブロックからのコンテンツ切り替えの追加
アルティメット ブロックの使用

その後、タイトルを追加し、好きなだけコンテンツ トグルを作成して、ブロックの編集を開始できます。 カスタマイズに関しては、タブの色、場所、アイコンなどを変更できます。

コンテンツ切り替えパネルのカスタマイズ オプション
Ultimate Blocks 設定の使用

価格:

このプラグインは 100%無料で使用できます。 このプラグインは、WordPress.org の公式プラグイン リポジトリからダウンロードできます。

アルティメットブロックを今すぐゲット!

6. Kadence BlocksによるGutenberg Blocks

アコーディオンを含む見事な WordPress Web サイトを作成したい場合は、Kadence による Gutenberg Blocks が最適です。 このプラグインには、アコーディオン ブロックを含む多数のユニークなブロックが付属しています。 これを使用して、優れたユーザー エクスペリエンスを提供する美しいコンテンツを作成できます。

WordPress アコーディオン ブロック プラグインの Kadence ブロック

主な特長:

  • アコーディオンアイテムの4つの構築済みデザインから1つを選択できます。
  • また、背景と色のオプションを制御できます。
  • また、FAQ スキーマを有効にするオプションも付属しています。
  • さらに、カスタム HTML および CSS をアコーディオン項目に追加できます。
  • アコーディオン項目のトグル トリガーの 4 つのペアから選択できます。

アコーディオンの作成:

このプラグインは、WordPress ダッシュボードの [プラグイン] メニューから簡単にインストールして有効化できます。 投稿にアコーディオン タブを追加するには、まず、投稿に移動し、[ + ] アイコンをクリックして、 Kadence ブロックからアコーディオンを選択します。 その後、アコーディオン スタイルを選択するか、単にスキップするかを選択できます。 ここでは、2 番目のオプションを選択します。

Gutenberg ブロックによるアコーディオン タブ
Kadence ブロックの使用

その後、ブロックのタイトルからカスタマイズを開始できます。 投稿の必要に応じてアコーディオンを追加することもできます。 または実線のアイコンからタイトル アイコンを選択するオプションがあります。 また、ブロックなどのタイトル アイコンを配置する場所を決定します。

アコーディオンタブのカスタマイズ
Kadence ブロック設定の使用

価格:

これはフリーミアムプラグインで、WordPress.org の公式プラグイン リポジトリから無料バージョンのプラグインをダウンロードできます。

ただし、プラグインのプレミアム バージョンは公式 Web サイトから購入できます。 3 つの年間料金オプションのいずれかから選択できます。

  • Kadence Blocks Pro:年間 89 ドルで、無制限のサイトですべてのブロックを使用でき、1 年間のサポートとアップデートが含まれます。
  • エッセンシャル バンドル:年間 149 ドルで、Kadence Blocks Pro、Kadence Theme Pro、および Pro Starter Templates のバンドルを無制限のサイトで使用でき、1 年間のサポートとアップデートが含まれます。
  • フル バンドル:年間 219 ドルで、Kadence Cloud、Kadence AMP などを含む Essential Bundle の機能を無制限のサイトで入手でき、1 年間のサポートとアップデートが含まれます。
Kadence Blocks の Gutenberg Blocks を今すぐ入手しましょう!

7.ゲットワイド

Gutenberg ブロックのコレクションを探している場合は、Getwid が最適です。 アコーディオン ブロックを含む 40 以上の Gutenberg ブロックが付属しています。 このブロックを使用すると、アコーディオン タブを使用して FAQ セクションを作成できます。 また、よくある質問の情報を Gutenberg ブロックで分類することもできます。

Getwid - 最高のアコーディオン ブロック WordPress プラグイン

主な特長:

  • 見出しは完全にカスタマイズ可能です。
  • Gutenberg ブロックを使用して、アコーディオン内にコンテンツを追加できます。
  • さらに、アコーディオン タブのカスタム アイコン配置を提供します。
  • トグル ブロックも利用可能で、FAQ セクションに手動で展開および折りたたみ可能なトグルを追加します。

アコーディオンの作成:

WordPress.org からプラグインをダウンロードした後、WordPress ダッシュボードからこのプラグインをアップロード、インストール、有効化できます。 次に、 投稿エディターの「+」アイコンをクリックし、 Getwid Blocksから「Accordion」をクリックします。

Getwid ブロックからのアコーディオンの追加
Getwid の使用

続いて、アコーディオン項目の数を指定し、 「作成」ボタンをクリックする必要があります。 または、アコーディオン項目のデフォルト数である「3」を使用することもできます。

これで、アコーディオン タブにタイルを追加することから始めることができます。 また、このプラグインを使用すると、アイコンのスタイルとその位置をカスタマイズできます。

Getwid カスタマイズ オプション
Getwid 設定の使用

価格:

Getwid は、WordPress.org の公式リポジトリで入手できる無料の WordPress ブロック プラグインです。 このプラグインは、公式 Web サイトから無料でダウンロードすることもできます。

今すぐゲットウィド!

結論

以上です、皆さん! この記事の最後にたどり着きました。

ここでは、 7つの最高のWordPressアコーディオンブロックプラグイン、それらの機能、価格、および構築プロセスについて説明しました.

上記のプラグインの中で、Stackable プラグインをお勧めします。 それは、数多くのスタイリングオプションを備えた見事なアコーディオンを作成できるためです. また、このプラグインは素晴らしいウェブサイトを構築するために必要な機能を提供します.

これが、あなたのウェブサイトに最適な WordPress アコーディオン ブロック プラグインを選択するのに役立つことを願っています. これらのプラグインのいずれかを使用している場合は、下のコメント セクションで経験を共有してください。

また、ご不明な点がございましたら、お気軽にコメントでお知らせください。 できるだけ早くご連絡いたします。 最後に、この記事が気に入ったら、友人や同僚と共有してください。

また、最高の Gutenberg ブロック プラグインと WordPress ブロック パターンに関する記事 (ページのデザインにそれらを使用する方法) もお勧めです。

Facebook や Twitter でフォローすることを忘れないでください。

この記事/ページのリンクの一部はアフィリエイト リンクです。 このようなアフィリエイト リンクをクリックして製品を購入すると、販売者から一定の割合の手数料が支払われます。 しかし、それはあなたが支払う価格にはまったく影響しません.