Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

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

この機能により、ユーザーはメニューを広げたり縮めたりすることができ、ブラウジング体験をコントロールすることができる。

私たちは、多くの大規模サイト、eコマースストア、より複雑なレイアウトのサイトが、ナビゲーションを容易にするために使用していることに気づきました。

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

How to Create a Collapsible Sidebar Menu in WordPress (The Easy Way)

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

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

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

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

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

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

An example of a collapsible menu.

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

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

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

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

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

サイドバーを含む、どのページ、投稿日、ウィジェットエリアにも折りたたみメニューを設置できる便利なショートコードを提供します。

A collapsible sidebar menu in WordPress.

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

🚨免責事項:プラグインはWordPressの過去3つのバージョンで更新されていないことに留意してください。しかし、私たちのサイトでテストしたところ、問題なく動作することがわかりました。詳しくは、古いWordPressプラグインの使用に関するガイドをご覧ください。

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

Creating a menu in the WordPress dashboard.

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

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

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

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

Adding pages to your WordPress menu.

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

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

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

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

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

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

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

Adding posts to the WordPress menu.

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

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

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

The collapsible menu shortcode in the WordPress dashboard.

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

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

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

Configuring the collapsible sidebar menu.

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

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

How to add a widget to the WordPress sidebar.

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

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

Example of a working collapsible menu

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

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

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

Configuring the look and feel of your WordPress collapsible sidebar menu.

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

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

Placing the collapsible menu on the WordPress website.

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

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

Configuring your collapsible menu in the WordPress Customizer.

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

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

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

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

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

WPBeginnerでは、お問い合わせフォームや年間アンケートの作成に使用しており、とても気に入っています。さらに詳しく知りたい方は、WPFormsのレビューをご覧ください。

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

Add WPForms widget block

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

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

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

動画チュートリアル

チュートリアルの動画をご覧ください。

Subscribe to WPBeginner

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

5件のコメントLeave a Reply

  1. Mrteesurez

    Thanks for this guide, if I understand you correctly, that means the plugin will generate a shortcode that can be placed at anywhere in the site even inside a post ?

    • WPBeginner Comments

      While you could try using the shortcode in other locations, even if it works it may or may not display in a useful way.

  2. Jiří Vaněk

    For websites that have many categories, this is the perfect option to make the sidebar clear. I now have about 15 categories on the site and am thinking about something similar to the accordion as well. Thanks for the inspiration.

  3. Tamie

    Thank you for this. How can you adjust the spacing between the subcategories? I have a lot of categories and having what looks like a double line space in between make the menus very long.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.