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

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

この機能により、ユーザーはメニューの拡大・縮小をコントロールすることができます。大規模なサイトやeコマースストア、複雑なレイアウトのサイトに最適です。

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

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

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

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

標準的なメニューに個別商品カテゴリーを表示するのは良いアイデアとは言えません。買い物客は興味のあるカテゴリーを見つけるためにメニューをスクロールする必要があるだろう。

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

その一例として、英紙ガーディアンのモバイルサイトでは、折りたたみ式のメニューが採用されている。

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

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

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

動画チュートリアル

Subscribe to WPBeginner

もし、文章での説明がお望みなら、そのまま読み進めてほしい。

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

Bellows Accordion Menuプラグインを使用すると、WordPressで折りたたみ式のサイドバーメニューを作成できます。

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

まず、Bellows Accordion Menuプラグインをインストールして有効化します。WordPressプラグインのインストール方法については、初心者ガイドをご覧ください。

有効化したら、WordPressダッシュボードの外観 ” メニューページにアクセスします。

メニュー名」フィールドにメニュー名を入力してください。この名前はあなたのサイト訪問者には表示されません。

メニューの作成」ボタンをクリックします。

次に、折りたたみ式サイドバーメニューに追加したいページを選びます。初期設定では、WordPressは最新のページのみを表示します。

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

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

メニューの選択が完了したら、「メニューに追加」ボタンをクリックしてください。投稿やブログのカテゴリーを選択したり、カスタムリンクを追加することもできます。詳しくは、WordPressでナビゲーションメニューを追加する方法をご覧ください。

すべてのページをメニューに追加したら、ドラッグ＆ドロップで移動させることができます。そうすることで、折りたたみメニューに表示されるページの順番が変わります。

折りたたみ可能なメニューはすべて親子関係にある。

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

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

次に、各子供をつかんで少し右にドラッグする。そしてこのページを離します。これで項目がインデントされ、子ページになります。

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

さて、この折りたたみメニューをWordPressのサイドバーに追加したい。そのために、Bellows Accordionが自動的に作成するショートコードを使います。

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

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

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

これは、現在のテーマ内のすべてのウィジェットエリアを表示します。表示されるオプションは異なるかもしれませんが、最近のWordPressテーマのほとんどはサイドバーを備えています。

サイドバーエリアを見つけたら、クリックしてください。このセクションが拡張されます。

ブロックを追加するには、+アイコンをクリックし、’Shortcode’とタイプし始める。外観が表示されたら、’Shortcode’ ブロックを選択する。

折りたたみメニューのショートコードをこのブロックに貼り付けます。メニューを公開するには、画面上部の「更新」ボタンをクリックしてください。

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

Bellows Accordionプラグインを使えば、この初期設定メニューを超簡単にカスタマイズすることもできます。例えば、サイトのブランディングを反映させるために配色を変更することもできます。

初期設定のメニューを調整したい場合は、WordPressダッシュボードの外観 “ ベローズメニューページに アクセスするだけです。

このメニューには、折りたたみメニューをカスタマイズするのに必要な設定がすべて揃っています。たくさんの設定があります。しかし、まずはメイン設定 ” 基本設定から始めてください。

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

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

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

これを行うには、管理エリアから外観 ” カスタマイズページに移動し、左の列から「ベローズ」タブを選択します。

ここでは、サイドバーの様々な設定を見つけることができます。サイドバーの幅、配置、折りたたみ可能なサイドバーメニューの色を変更することができます。

ボーナス：WordPressのサイドバーで最大の効果を得るためのトリック

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

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

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

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

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

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

より多くのヒントについては、WordPressのサイドバーで最大の効果を得るためのトリックのリストをご覧ください。

WordPressで折りたたみ可能なサイドバーメニューを作成する方法について、この投稿がお役に立てれば幸いです。WordPress サイトのデザインを編集するためのヒントについては、WordPress ヘッダーのカスタマイズ方法やWordPress ウィジェットの便利な使い方もご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.