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

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

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

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

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

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

折りたたみ可能なサイドバーメニュー（または展開可能なメニュー）は、訪問者がクリックして表示するまでサブアイテムを非表示にするナビゲーションリストです。リンクを「親-子」構造で整理し、サイトのデザインをすっきりと保ちます。

大規模なウェブサイトやeコマースストアには、折りたたみ可能なメニューの使用を推奨することがよくあります。その効果は以下の通りです。

• 複雑なレイアウトを整理する：ユーザーを圧倒することなく、何百ものカテゴリやページをソートするのに役立ちます。
• 画面スペースを節約する：子アイテムを非表示にすることで、サイドバーを短く整頓できます。
• モバイルエクスペリエンスを向上させる：モバイルユーザーが延々と続くリンクリストをスクロールする必要がなくなります。

例えば、ガーディアン紙は、多くのニュースカテゴリを管理するために、モバイルサイトで折りたたみ可能なメニューを使用しています。

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

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

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

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

ステップ1：Bellows Accordionプラグインのインストールと有効化

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

ステップ2：新しいメニューの作成

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

「メニュー名」フィールドにメニューの名前を入力します。次に、「メニューを作成」ボタンをクリックします。

ステップ3：メニュー項目の追加と配置

次に、左側の列から追加したいページを選択し、「メニューに追加」をクリックします。

ウェブサイトのすべてのページのリストを表示したい場合は、「すべて表示」タブをクリックしてください。詳細については、WordPressでナビゲーションメニューを追加する方法（初心者ガイド）に関するガイドをご覧ください。

折りたたみ効果を作成するには、項目を親子関係で配置する必要があります。単に、親項目の下にページ項目を少し右にドラッグします。

点線の輪郭が内側に移動するのが見えるまで、右にドラッグします。これにより、項目がサブ項目になり、親をクリックするまで非表示になることが確認されます。

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

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

ステップ4：メニューのショートコードを取得

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

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

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

ステップ5：メニューをサイドバーに追加

次に、メニューをサイトのレイアウトに追加する必要があります。WordPress管理エリアから外観 » ウィジェットページに移動します。

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

サイドバーウィジェットエリアを見つけて、「+」アイコンをクリックして新しいブロックを追加します。

「ショートコード」を検索してブロックを選択します。

コピーしたショートコードをブロックに貼り付け、「更新」をクリックします。サイトにアクセスすると、新しい折りたたみ可能なメニューが表示されるはずです。

モバイルデバイスでは、このサイドバーは通常、ページの下部に表示され、折りたたみ機能により貴重な縦スクロールスペースを節約できます。

ステップ 6: 折りたたみ可能なメニューをカスタマイズする

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

動画チュートリアル

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

WPBeginnerを購読する

WordPress の折りたたみ可能なサイドバーメニューに関するよくある質問

ウェブサイトに折りたたみ可能なサイドバーメニューを追加する前に、読者からよく寄せられる質問を以下に示します。

WordPress でメニューを折りたたむ方法は？

Bellows Accordion Menu のようなプラグインを使用してメニューを折りたたむことができます。デフォルトでは、WordPress のメニューにはデスクトップ画面でこの機能はありません。プラグインは、クリック時に項目を展開および非表示にするために必要なコードを追加します。

WordPress で折りたたみ可能なセクションを追加するにはどうすればよいですか？

最も簡単な方法は、WordPress のデフォルトの「詳細」ブロックを使用することです。このブロックを使用すると、クリック可能な概要行の中にコンテンツをラップできます。投稿内のより高度なスタイリングについては、専用のアコーディオンプラグインを使用できます。

WordPress でドロップダウンメニューを作成する方法は？

ダッシュボードの 外観 » メニュー にアクセスして、ドロップダウンメニューを作成できます。メニュー項目を親リンクのすぐ下に少し右にドラッグするだけです。このインデントにより、WordPress はその項目をドロップダウンリストに表示するようになります。

詳細については、WordPress でドロップダウンメニューを作成する方法 に関するチュートリアルをご覧ください。

WordPress で要素を横並びにする方法は？

列ブロックを使用して要素を横並びにできます。ブロックエディターで「列」を選択し、好みのレイアウトを選択します。次に、各列にテキストまたは画像を追加するだけです。

WordPress のアコーディオンブロックプラグインとは何ですか？

アコーディオンブロックプラグインを使用すると、投稿に折りたたみ可能なコンテンツセクションを追加できます。見出しの下にテキストを非表示にすることで、長いコンテンツを整理するのに役立ちます。ユーザーは、必要な情報を読むために見出しをクリックするだけです。

サイトにアコーディオンを追加したい場合は、WordPressのアコーディオンプラグインのベストをご覧ください。

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

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