WordPressで折りたたみ可能なサイドバーメニューを作成する方法（簡単な方法）

折りたたみ可能なサイドバーメニューは、ウェブサイトのデザインをすっきりと整理しながら、重要なリンクやコンテンツに簡単にアクセスできる優れた方法です。

この機能により、ユーザーはメニューを展開したり折りたたんだりでき、ブラウジング体験を自分でコントロールできます。

多くの大規模なウェブサイト、eコマースストア、およびより複雑なレイアウトのサイトで、ナビゲーションを容易にするためにこれを使用しているのを目にします。

この記事では、WordPressで折りたたみ可能なサイドバーメニューを簡単に作成する方法をご紹介します。

折りたたみ可能なサイドバーメニューとは？（そしていつ使うべきか）

最もユーザーフレンドリーなメニューは、訪問者が必要とするすべてのリンクに簡単にアクセスできるようにします。しかし、これは多くのページがあるWordPressウェブサイトや、より複雑なレイアウトを持つサイトでは難しい場合があります。

Amazonのような、膨大な商品カテゴリとサブカテゴリを持つ大規模なeコマースストアを考えてみてください。

標準的なメニューにすべての商品カテゴリを表示するのは良い考えではありません。買い物客は、興味のあるカテゴリを見つけるためにメニューをスクロールする必要がある可能性が高いです。

ここで折りたたみ可能なメニューが登場します。これらのメニューは、コンテンツを「親-子」のアプローチで整理します。つまり、訪問者が折りたたみ可能なメニューの親項目をクリックすると、その親項目のすべての子コンテンツが表示されるように展開されます。

その一例が、モバイルサイトに折りたたみ可能なメニューを使用しているGuardianニュースアウトレットです。

折りたたみ可能なサイドバーメニューは、展開可能なメニューと呼ばれることもあります。これは、訪問者がクリックすると異なるセクションが展開されるためです。

デフォルトでは、折りたたみ可能なメニューは訪問者から多くのコンテンツと複雑さを隠します。これは、WordPressブログで長いカテゴリとサブカテゴリのリストをスクロールするよりもはるかにユーザーフレンドリーです。

それでは、WordPressサイトで折りたたみ可能なサイドバーメニューを簡単に作成する方法を見ていきましょう。

WordPressで折りたたみ可能なサイドバーメニューを作成する方法

Bellows Accordion Menuプラグインを使用して、WordPressで折りたたみ可能なサイドバーメニューを作成できます。

サイドバーを含む任意のページ、投稿、またはウィジェットエリアに折りたたみ可能なメニューを配置するための便利なショートコードが提供されています。

まず、Bellows Accordion Menuプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。

有効化したら、WordPressダッシュボードの外観 » メニューページにアクセスしてください。 

開始するには、「メニュー名」フィールドにメニューの名前を入力します。この名前はあなた自身の参照用であり、サイト訪問者には表示されないことに注意してください。

次に、「メニューを作成」ボタンをクリックします。

次に、折りたたみ可能なサイドバーメニューに追加したいページを選択します。デフォルトでは、WordPressは最新のページのみを表示します。

ウェブサイトのすべてのページのリストを表示したい場合は、「すべて表示」タブをクリックします。

または、「すべて選択」をクリックすることもできます。これにより、すべてのページが折りたたみ可能なメニューに追加されます。

選択内容に満足したら、「メニューに追加」ボタンをクリックします。投稿やブログカテゴリを選択したり、カスタムリンクを追加したりすることもできます。詳細については、WordPressでナビゲーションメニューを追加する方法に関するガイドを参照してください。

すべての異なるウェブページをメニューに追加した後、ドラッグアンドドロップで並べ替えることができます。これにより、折りたたみ可能なメニューにページが表示される順序が変更されます。 

折りたたみ可能なメニューは、親と子の関係がすべてです。

訪問者が折りたたみ可能なメニューの親項目をクリックすると、すべての子コンテンツが表示されるように展開されます。

この関係を作成するには、ドラッグアンドドロップを使用して、すべての子ページを親の下に配置するだけです。

次に、それぞれの子を掴み、少し右にドラッグします。その後、このページを解放できます。これにより、項目がインデントされ、子ページになります。 

完了したら、「メニューを保存」ボタンをクリックすることを忘れないでください。

次に、この折りたたみ可能なメニューをWordPressのサイドバーに追加します。これを行うには、Bellows Accordionが自動的に作成するショートコードを使用します。 

ショートコードを取得するには、WordPressダッシュボードから外観 » Bellowsメニューページに移動します。まだ選択されていない場合は、「すべて表示」タブが選択されていることを確認してください。

これで、ショートコードボックスをクリックすると、コード全体がハイライト表示されるはずです。次に、Command + cまたはCtrl + cのキーボードショートカットを使用して、このコードをコピーします。 

次のステップは、このショートコードをウィジェットに貼り付けることなので、管理エリアから外観 » ウィジェットページに移動します。

これにより、現在のテーマ内のすべてのウィジェット領域が表示されます。表示されるオプションは異なる場合がありますが、ほとんどの最新のWordPressテーマにはサイドバーがあります。

サイドバー領域を見つけたら、クリックします。このセクションが展開されます。

ブロックを追加するには、+アイコンをクリックして「ショートコード」と入力し始めます。表示されたら、「ショートコード」ブロックを選択します。 

今すぐ、折りたたみ可能なメニューのショートコードをこのブロックに貼り付けます。メニューを公開するには、画面上部にある「更新」ボタンをクリックする必要があります。 

これで、サイトにアクセスすると、新しい折りたたみ可能なサイドバーメニューが表示されるはずです。 

Bellows Accordion プラグインを使用すると、このデフォルトのメニューを非常に簡単にカスタマイズできます。たとえば、サイトのブランディングをよりよく反映するように、配色を変更することができます。 

デフォルトのメニューを調整したい場合は、WordPress ダッシュボードの 外観 » Bellows メニュー ページにアクセスしてください。 

このメニューには、折りたたみ可能なメニューをカスタマイズするために必要なすべての設定が含まれています。探索すべき設定はたくさんあります。ただし、まずは メイン設定 » 基本設定 に進むことをお勧めします。

ここでは、いくつかの異なるメニューカラーを切り替えることができます。「アコーディオン折りたたみ」設定を使用して、訪問者が複数のサブメニューを一度に展開できるかどうかを選択することもできます。 

メニューの配置と幅を変更するには、「レイアウトと位置」タブをクリックします。

変更をリアルタイムでプレビューしたい場合は、WordPress カスタマイザーで折りたたみ可能なサイドバーメニューを編集できます。

これを行うには、管理画面から 外観 » カスタマイズ ページに移動し、左側の列から「Bellows」タブを選択します。

ここには、サイドバー用のさまざまな設定がたくさんあります。これには、幅、配置、折りたたみ可能なサイドバーメニューの色の変更が含まれます。 

ボーナス: 最大限の結果を得るための WordPress サイドバートリック

折りたたみ可能なサイドバーメニューを作成したら、サイドバーの助けを借りてさらに多くのリードを獲得するために、他のヒントを使用できます。

例えば、ユーザーが下にスクロールしても表示されるように、サイドバーウィジェットを固定することができます。

それ以外にも、サイドバーに問い合わせフォームやメールサインアップフォームを追加して、メールリストを構築することができます。これを行うには、市場で最高の問い合わせフォームプラグインであるWPFormsを使用できます。

WPBeginnerでは、問い合わせフォームや年次アンケートの作成に使用しており、気に入っています。詳細については、WPFormsの完全なレビューをご覧ください。

フォームを作成し、ブロックメニューのWPFormsブロックを使用してサイドバーに追加するだけです。

WordPressでのお問い合わせフォームの作成方法については、チュートリアルをご覧ください。WordPressでのお問い合わせフォームの作成方法。

さらに、サイドバーに最も人気のある投稿を表示したり、画像を追加したり、ソーシャルメディアアイコンを表示したり、ソーシャルプルーフを表示したりできます。これにより、ユーザーはサイトをさらに探索するようになり、コンバージョン率が向上します。

その他のヒントについては、最大限の結果を得るためのWordPressサイドバートリック12選をご覧ください。

動画チュートリアル

書き込みによる説明がお好みでない場合は、ビデオチュートリアルをご覧ください。

WPBeginnerを購読する

この記事で、WordPressで折りたたみ可能なサイドバーメニューを作成する方法を学べたことを願っています。WordPressサイトのデザイン編集に関するその他のヒントについては、WordPressヘッダーのカスタマイズ方法やサイトに最も役立つWordPressウィジェット25選に関するガイドも参照してください。 

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