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

WordPressで折りたたみ可能なサイドバーナビゲーションを作成したいとお考えですか？ このチュートリアルでは、無料のプラグインを使用してWordPressで折りたたみ可能なメニューを作成する方法を説明します。

あなたのウェブサイトの訪問者は、折りたたみ可能なナビゲーションの容易さを高く評価するでしょう。 サイドバーのスペースを取りすぎません。 これは、eコマースサイト、大規模なWebサイト、および複雑なレイアウトを持つその他のサイトに最適です。

この記事では、折りたたむWordPressサイドバーメニューを作成する方法を説明します。

折りたたみ可能なサイドバーメニューとは何ですか？ いつ使うべきですか？

ほとんどのメニューは使いやすく、ユーザーは必要なすべてのリンクにすばやくアクセスできます。 多くのページや複雑なレイアウトを持つサイトでは、これを行うのが難しい場合があります。

多くの製品カテゴリとサブカテゴリがある大規模なeコマースサイトを想像してみてください。

各製品を1つのメニューに表示することはお勧めできません。 購入者は、探している製品を見つけるためにいくつかのメニューをスクロールしなければならない場合があります。

これらは折りたたみ可能な食事の利点です。 これらのメニューは、親子関係に従ってコンテンツを配置します。 折りたたまれたメニュー内の親アイテムをクリックすると、そのアイテムが開き、その親のすべての子コンテンツが表示されます。

また読む：オンライン教育プラットフォームを作成するための専門大学のWordPressテーマ

そのモバイルサイトでは、 Guardianニュースアウトレットは簡略化されたメニューを使用しています。 展開可能なメニューは、訪問者がクリックするとセクションが展開されるため、折りたたみ可能なメニューです。

折りたたみ可能なメニューは、デフォルトで訪問者から複雑なコンテンツや情報を隠します。 これは、サブカテゴリとカテゴリの長いリストをスクロールするよりも簡単です。

WordPressWebサイトで折りたたまれたサイドバーを作成する方法を見てみましょう。

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

ベローズアコーディオンメニュープラグインを使用すると、WordPressでサイドバーメニューを作成できます。 ベローズアコーディオンメニューは、折りたたまれたリストを任意のページ、投稿、またはウィジェット領域に配置するためのショートコードを提供します。 これにはサイドバーも含まれます。

1.WordPressの折りたたみ可能なサイドバーメニュー

まず、プラグインをインストールしてからアクティブ化します。 ヘルプについては、WordPressプラグインのインストールに関するガイドを参照してください。

アクティブ化した後、 WordPressダッシュボードから[外観]>>メニューページに移動します。

2.WordPressダッシュボードでメニューを作成する

「メニュー名WordPressメニューへのページの追加」フィールドに、メニューの名前を入力します。 名前は参照用であるため、サイトの訪問者には表示されません。 次に、[メニューの作成]ボタンをクリックします。

次に、折りたたみ可能なナビゲーションに追加するページを選択します。 WordPressは、デフォルトで最新のページのみを表示します。 [すべて表示]タブをクリックして、サイトのページの完全なリストを表示します。

3.WordPressメニューにページを追加する

[すべて選択]をクリックすることもできます。 これにより、すべてのページが折りたたみ可能なリストに変換されます。

選択に満足したら、 「メニューに追加」ボタンをクリックします。 投稿やブログのカテゴリを選択して、カスタムリンクを追加することもできます。 WordPressにナビゲーションメニューを追加するためのガイドで詳細を確認できます。

ドラッグアンドドロップは、すべてのWebページをメニューに追加した後、Webページを移動するための優れた方法です。 これにより、これらのページが折りたたみメニューに表示される順序が変更されます。

折りたたみメニューは、親子関係に焦点を当てています。 折りたたみ可能なメニュー内の親アイテムをクリックすると、すべての子コンテンツが表示されます。

また読む：ローカルビジネスをソーシャルインフルエンサーマーケティングから利益を得る方法は？

この接続を行うために必要なのはドラッグアンドドロップだけです。

次に、各子供を腕に抱き、そっと右に引っ張ります。 これにより、ページを解放できます。 これにより、アイテムが挿入され、子ページになります。

4.WordPressメニューへの投稿の追加

完了したら、[変更を保存]ボタンをクリックすることを忘れないでください。

次に、折りたたみ可能なサイドバーメニューを追加します。 これを実現するために、ベローズアコーディオンが自動的に作成するショートコードを使用します。

外観>>メニューに移動して、ショートコードを取得します。 [すべて表示]タブが選択されていない場合は、選択されていることを確認してください。

ショートコードボックスをクリックして、すべてのコードを強調表示します。 Command+cまたはCtrl+cキーボードショートカットを押してこのコードをコピーします。

次に、ショートコードをウィジェットに貼り付けます。 [外観]>>[ウィジェット]に移動します。 これにより、現在のテーマのすべてのウィジェット化された領域が表示されます。 オプションは異なる場合がありますが、ほとんどのWordPressテーマにはサイドバーが含まれています。

5.折りたたみ可能なサイドバーメニューの設定

サイドバーをクリックして展開します。 これにより、セクションが展開されます。

+アイコンをクリックして、ブロックを追加します。 ショートコードの入力を開始します。 表示されたらShortcodeBlockを選択します。

6.WordPressサイドバーにウィジェットを追加する方法

最小化可能なメニューのショートコードをこのブロックに貼り付けます。 画面上部の[更新]ボタンをクリックして、メニューを公開します。

Webサイトにアクセスすると、折りたたみ可能な新しいサイドバーナビゲーションメニューが表示されます。

このデフォルトメニューは、ベローズアコーディオンプラグインを使用してカスタマイズできます。 ブランドをより適切に反映するために、サイトの配色を変更できます。

また読む：大学生のためのトップ10のブログのヒント

デフォルトのメニューを変更するには、WordPressダッシュボードの[外観]>> [以下のメニュー]に移動します。

このメニューには、折りたたみ可能な食事をパーソナライズするために必要なすべての設定が含まれています。 探索できる設定はたくさんあります。 [メイン構成]>>[基本構成]にアクセスすることから始めると役立つ場合があります。

7.WordPressの折りたたみ可能なサイドバーメニューのルックアンドフィールを構成する

さまざまなメニューカラーからお選びいただけます。 アコーディオンの折りたたみ設定を使用して、複数のサブメニューを同時に展開できるかどうかを決定することもできます。

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

8.折りたたみ可能なメニューをWordPressWebサイトに配置する

WordPressカスタマイザーで折りたたみ可能なサイドバーナビゲーションを編集することで、変更を即座にプレビューできます。 これを行うには、 [外観]>>[カスタマイズ]に移動します。

左側のメニューで[ベローズ]を選択します。

結論

折りたたみ可能なサイドバーを設定するための多くのオプションがあります。 幅、配置、色を調整できます。 この記事がWordPressでシンプルなサイドバーメニューを作成するのに役立つことを願っています。

興味深い読み物：

必須で成功するブログスキルを知っておく必要があります

ピラーページとは何ですか？ テーマを使用することのSEO戦略の利点

トップ6のWordPress速度最適化サービス