WordPressでアコーディオンを追加する方法（ステップバイステップガイド）

公開: 2019-12-13

WordPress Webサイトのランディングページ、製品ページ、またはFAQページをデザインしていますか？次に、ページデザインでアコーディオンを使用する必要があります。

アコーディオンは、Webサイトの探索を容易にし、ユーザーエクスペリエンスを向上させるのに役立ちます。また、煩雑さを軽減し、非常に長いWebページを短縮するのにも役立ちます。

このステップバイステップガイドでは、コードを1行も記述せずに、Webサイトにアコーディオンセクションを作成する方法を示します。

WordPressを使用することの素晴らしい点は、シンプルなプラグインを使用して、アコーディオンなどのすばらしい機能をWebサイトに追加できることです。このガイドでは、Heroic FAQを使用して、数回クリックするだけでアコーディオンセクションを作成します。

プロセスを段階的に説明します。始めましょう！

よくある質問のセクションを作成する-簡単な方法！

FAQを作成し、訪問者の一般的な質問に答えるのに役立ててください。

プラグインを入手する

アコーディオンとは何ですか？

アコーディオンは、コンテンツの複数のセクションを1つの場所に整理するために、Webデザインで使用される非常に便利なデザイン戦略です。簡単に言えば、アコーディオンを使用すると、ページデザインに折りたたみ可能なタブを含むセクションを作成して、多くのコンテンツを1つのセクションにまとめることができます。

たとえば、よくある質問（FAQ）セクションを作成している場合は、アコーディオンを使用して質問と回答を整理することができます。このようにして、質問のみを表示し、折りたたみ可能なアコーディオンで回答を非表示にすることができます。これにより、ページデザインのスペースを節約し、ユーザーが回答を簡単に探索できるようになります。

Tescoがアコーディオンを使用してFAQページを整理する方法をご覧ください。

当時、ウェブサイトは水平方向にタブ付きのアコーディオンも使用していました。しかし、今日のWebサイトのデザインで使用されることはめったにありません。

アコーディオンとトグルの違い

ほとんどの人は、アコーディオンとトグルを混同することがよくあります。見た目は似ていますが、動作が異なります。

たとえば、ユーザーがアコーディオンの見出しをクリックすると、そのタブにコンテンツが表示されます。ただし、別の見出しをクリックすると、前のタブが閉じて新しいタブが表示されます。

トグルを使用すると、この動作を変更して、タブを開いたままにすることができます。また、ユーザーが手動でタブを閉じることができるようにします。

つまり、アコーディオンは一度に1つのタブしか開いたままにしません。トグルを調整して、一度に開いた複数のタブを表示できます。

WordPressでアコーディオンをセットアップするために使用しているプラグインはこれらのオプションの両方をサポートしているため、これらの2つのオプションについて心配する必要はありません。

なぜアコーディオンを使うのですか？

アコーディオンを使用することには多くの利点があります。ここにあなたのウェブサイトでそれらを使用するいくつかの理由があります。

たくさんのスペースを節約

探しているコンテンツを見つけるために永遠に下にスクロールし続けることを余儀なくされる長いウェブページにアクセスしたことがありますか？ありがたいことに、アコーディオンはこの問題を解決します。

アコーディオンを使用する主な利点は、Webサイトのスペースを節約できることです。非常に長いページを作成する代わりに、タブの背後にあるすべての重要な情報を非表示にすることができます。また、見出しをスキミングして、ユーザーが質問と回答を見つけられるようにします。

より良いコンテンツ編成

アコーディオンを使用すると、ユーザーフレンドリーな構造でコンテンツを整理することもできます。アコーディオンを使用すると、タブをネストして、カテゴリやトピックの下にコンテンツを整理できます。これは、前に示したTescoFAQページで実際に確認できます。

どこにでも埋め込む

アコーディオンは、Webサイトのどこにでも埋め込むことができます。たとえば、価格設定ページまたは商品のランディングページにFAQアコーディオンセクションを追加できます。これにより、スペースを取りすぎずに、製品に関する一般的な質問に答えることができます。

ページサイズを小さくする

Webページのサイズは、Webサイトのページの読み込み速度に重要な役割を果たします。ご存知のように、ページの読み込み速度は、Googleが使用する主なランキング要素の1つです。

WordPress Webサイトでアコーディオンを使用する場合、ウィジェットとして埋め込むことができるため、Webサイトページの読み込み速度を大幅に向上させることができます。

英雄的なFAQでアコーディオンを追加する方法

このチュートリアルでは、Heroic FAQWordPressプラグインを使用しています。経験豊富な開発者の私たち自身のチームによって構築されているという理由だけではありません。主な理由は、多くの機能を備えたプラグインだからです。そして、他のプラグインよりも多くの価値を提供します。

Heroic FAQプラグインを使用すると、Webサイトに固有のFAQとナレッジセクションを作成することもできます。

それでは、ハンズオンチュートリアルに取り掛かりましょう。

ステップ1：英雄的なFAQをダウンロードしてインストールする

まず、WordPressWebサイトにHeroicFAQプラグインをダウンロードしてインストールする必要があります。プラグインを購入すると、Heroicアカウントダッシュボードからプラグインをダウンロードできるようになります。

次に、WordPress管理ダッシュボードにログインします。 [プラグイン] >> [新しいページの追加]に移動し、[アップロード]オプションを選択します。コンピューターを参照して、Heroic FAQプラグインを含むダウンロード済みのZIPファイルを見つけて、インストールします。

インストールが完了したら、必ずライセンスキーを使用してプラグインをアクティブ化してください。