すべての WordPress ページにメニューを配置する方法

最終更新: 04/10/2024
すべての WordPress ページにメニューを配置する方法

持つ方法を知りたいですか すべての WordPress ページのメニュー?異なるページに異なるメニューが必要になる場合がよくあります。

  • 例えば、1 ページの Web サイトをお持ちでも、専用のストア ページまたはお問い合わせページが必要な場合があります。この場合、トップ メニューのナビゲーション リンクは、同じページ (ホームページなど) 上の異なるセクションを介してユーザーを案内するように設定されているため、これらの個別のページ (連絡先やストアなど) では使用できません。

別のケースとしては、ユーザーがストア ページにアクセスしている場合が考えられます。このページには Web サイトの他の部分とは異なる機能があるため、トップ メニューを使用して、購入を検討しているユーザー向けに製品カテゴリやその他の関連情報を表示するとよいでしょう。

ここでは以下について読むことができます: WordPress に購読フォームを追加する方法

望ましい結果を達成するには、これらのシナリオごとに各 WordPress ページにメニューを作成し、それらのページにのみメニューを表示する必要があります。幸いなことに、WordPress には非常に大規模なコミュニティがあるため、無料のプラグインを利用してこれを実現できます。

WordPressの各ページにメニューを設ける方法

ここで、WordPress の各ページにメニューを配置する方法を見てみましょう。

方法 1: すべての WordPress ページにメニューを配置する

各 WordPress ページにメニューを表示するには、次の手順に従う必要があります。

パート 1: 無料のプラグインをインストールして、すべての WordPress ページにメニューを表示する

特定のページに別のメニューを設定するには、Conditional Menus プラグインを使用する必要があります。インストールするには、次の手順に従います。

  1. ステップ1: WordPress ダッシュボードから、次の場所に移動します。 プラグイン→新規追加
  2. ステップ2: 検索バーで、「条件付きメニュー» そして最初の結果 (スクリーンショット) をインストールします
条件付きメニュー
条件付きメニュー
  1. ステップ3:インストール後、クリックします。 活性化します.

パート 2: 異なるページに異なるメニューを作成する

各ページのメニューを作成するには、次のことが必要です。

  1. ステップ1:に移動 WordPressダッシュボード→外観→カスタマイズ→メニューをクリック
  2. ステップ2: 新しいメニューを追加します。« と呼びます。お問い合わせページのメニュー» (または他の名前)
  3. ステップ3: 各ページまたはカスタム リンクにメニュー項目を追加し、 <font style="vertical-align: inherit;"><font style="vertical-align: inherit;" class="">アップロード
  4. ステップ4: 必要な他のすべてのメニューに対してこのプロセスを繰り返します。

パート 3: 各メニューの場所を管理する

に行く 外観 → メニュー → 管理 場所 次の手順に従って、WordPress の各ページでメニューのカスタマイズを開始します。

  1. ステップ1: クリック + 条件付きメニュー 同じ場所に新しいメニューを追加します (例: メインメニュー)
  2. ステップ2:追加したいメニューを選択します
  3. ステップ3: クリック + 条件 特定のメニューを表示する場所を選択します
  4. ステップ4: クリック 変更を保存します ページにアクセスして、正しく動作していることを確認します。

任意の数の個別のページに対して同じプロセスを繰り返します。

方法 2: 各 WordPress ページに異なるメニューを作成する方法

メニューはすべての Web サイトの基本コンテンツです。訪問者が必要なページを簡単に見つけられるようにします。ただし、複雑な構造を持つ Web サイトでは、ページの各グループに個別のメニューが必要な場合があります。そのようにカスタマイズするには、さまざまなメニューを作成し、それらをページ/ページ グループに割り当てるプラグインが必要です。

この方法では、最速の方法でそれを行う方法を詳しく説明します。その前に、ページごとに個別のメニューを作成することが特定の状況でどのように役立つかを見てみましょう。

パート 1: すべての WordPress ページでメニュー作成アプリを使用する

ページごとに個別のメニューを用意すると、次のような場合に役立ちます。

  1. ホームページメニューに商品ページを表示したい。各製品ページには、製品情報ページにリンクされたサブメニューを持つ特定のメニューがあります。たとえば、商品ページのメニューには、対応する商品の価格、原産国などの情報が含まれます。
  2. チェーン ストアの Web サイトがあり、各店舗が別のページに表示されています。ホームページのメニューからストアページに移動します。各店舗ページには、商品、住所、注文などの重要なページの独自のメニューがあります。
  ホストゲーター。プラン、価格、代替案、メリット

わかりやすくするために、果物ビジネスの Web サイトを例に挙げます。この Web サイトのホーム ページには、Apple と Banana の 2 つのページにつながるデフォルトのメニューがあります。

すべての WordPress ページにメニューを配置する方法

Conditional Menus プラグインを使用して、これら 2 つのページにさらに 2 つの別個のメニューを作成します。その手順は次のとおりです。

パート 2: 条件付きメニュー プラグインをインストールしてアクティブ化する

条件付きメニューのプラグインは無料で、次の場所から入手できます。 wordpress.org 。他の無料プラグインと同様に、インストールしてアクティブ化するだけです。

  1. ステップ1: 次に、次へ進みます。 外観メニュー、 への変更 場所を管理する そしてあなたは見ることができます + 条件付きメニュー プラグインによって追加されました:
場所を管理する
場所を管理する

パート 3: 各 WordPress ページのメニューを作成する

  1. ステップ1: 次に、Apple ページと Banana ページに個別のメニューを作成します。これを行うには、次のようにしましょう 外観メニュー > メニューの編集 > 新しいメニューを作成する .
外観 > メニュー > メニューの編集 > 新しいメニューの作成 
外観 > メニュー > メニューの編集 > 新しいメニューの作成
  1. ステップ2: 次に、メニューに名前を付け、メニューの表示位置を選択します(画面上に表示したい) ヘッダ) をクリックし、 メニューの作成.
「メニューの作成」をクリックします。
「メニューの作成」をクリックします。
  1. ステップ3: セクション内 メニュー項目を追加する、ページをサブメニューとして追加する必要があります。次の 2 つのページを追加します。 アップルオリジンりんご価格 al アップルメニュー。クリック 保存メニューで.
メニュー項目を追加する
メニュー項目を追加してクリックします 保存メニューで
  1. ステップ4: 同じ手順を実行して、ページに別のメニューを作成します。 Banana:

「メニューを保存」をクリックします

パート 4: 各 WordPress ページにメニューを設定する (対応する)

  1. ステップ1: まだあります 外観メニュー、 への変更 場所を管理する 選んで + 条件付きメニュー:
場所を管理し、+ 条件付きメニューを選択します
場所を管理し、+ 条件付きメニューを選択します
  1. ステップ2: リストからメニューを選択します (ここでは アップルメニュー)。クリック + 条件 表示する場所を設定するには:
クリック+条件
クリック+条件

NOTE: 新しいポップアップ ウィンドウが表示され、選択できるさまざまなタブが表示されます。カテゴリ、投稿タイプ、分類、ユーザーロールまたはホームページ、404 ページなどごとにメニューを表示するように選択できます。

  1. ステップ3: タブを選択します Pages と Apple ページ このページでメニューを設定します。
「ページ」タブと「Apple」ページを選択します
「ページ」タブと「Apple」ページを選択します
  1. ステップ4: バナナメニューでも同じことを行います。

「ページ」タブと「Apple」ページを選択します

  1. ステップ5:最後にクリックを忘れずに 変更を保存します、そうでないと、これまでに行ったことはすべて消えてしまいます。

次に、WordPress インターフェースに移動して結果を確認する必要があります。

「変更を保存」をクリックします
「変更を保存」をクリックします

ご覧のとおり、ホーム ページ、Apple ページ、バナナ ページに 3 つの異なるメニューが追加されました。

WordPressの各ページのメニューの種類

サイト上での快適なナビゲーションは不可欠です。したがって、よく整理され、ユーザーが理解しやすいカスタム メニューをページごとに作成することが重要です。ただし、各ページには独自の目的があるため、Web サイトでは必ずしもすべてのページで統一したメニューが必要というわけではありません。 WordPress ページごとに異なるメニューを作成したいですか?使用できる最適なオプションを以下で見てみましょう。

すべてのWordPressページのさまざまなメニューに最適なプラグイン

1 ページの Web サイトがあると想像してください。そこでは、お問い合わせフォームとチャットボットを備えた別のページ、または関連するストアページが必要です。また、ランディング ページのさまざまなセクションをユーザーに案内するだけであるため、技術的に実装することは不可能です。

訪問者があなたのストアページに来たとします。持っている必要があります 製品カテゴリーを表示するためのヘッダー内の特定のメニュー、 配送情報、ボタン カートを追加する、など。ただし、前の場合と同じ問題に直面する可能性があります。または、ホームページのメニューがストアページに複製されていることがわかります。

それは正常に動作しませんよね? 各ページには関連するメニューが必要です。 ただし、これらを別のページに実装するのは難しい場合があります。怖がらないでください。 ここでは多くのソリューションを提供します このニーズを満たすために。ただし、WordPress の各ページにメニューを作成する方法を説明する前に、ページごとにカスタム メニューを設定するのに役立つ主なツールに焦点を当てましょう。

  家電製品戦略:競争優位性を確立するための鍵

1. ジェットブロック

始めましょう JetBlocks。このプラグインを使用すると、Web サイトのニーズに完全に適合する特定のヘッダーとフッターを作成できます。 JetBlocks を使用すると、必要な要素をヘッダーに追加してカスタム メニューを作成するのが非常に簡単です。

  1. ログインフォーム
  2. 登録フォーム
  3. 検索フォーム
  4. そしてWooCommerceカート、
  5. ナビゲーションメニュー
  6. 拡張可能なパネル。

さらに、Web サイトのロゴを追加およびカスタマイズしたり、認証リンクやその他の要素を挿入して、ページごとに魅力的なカスタム メニューを作成することができます。

あなたはそれをからダウンロードすることができます ここで

2. ジェットメニュー

JetMenu メガメニューを自由にデザインできます。このプラグインを使用すると、各アイテムを作成してカスタマイズしたり、さまざまなアイテムやバッジを追加してカスタマイズしたりすることができます。

さらに、メニュー項目の背景の変更、メニューのタイポグラフィのデザイン、ホバー モードの適用などを行うことができます。 JetMenu プラグインの可能性は無限大であると確信しています。これは、WordPress の各ページにメニューを作成するための最良のツールの 1 つです。

あなたはそれをからダウンロードすることができます ここで

3.ジェットテーマコア

とともに ジェットテーマコアでは、カスタム テーマ テンプレートや 404 などのページのテンプレートを作成できます。そしてもちろん、無制限のヘッダーを作成して、それらをさまざまなページに割り当てることができます。このプロセスは直感的でよく考えられているため、コードなどを書くための特別な知識は必要ありません。 JetThemeCore プラグインのみをお持ちの場合は、ページごとにカスタム メニューを作成し、それに特定のコンテンツを追加するだけで十分です。少なくとも、事前に作成されたヘッダーを使用して、そこにいくつかの変更を加えることができます。

あなたはそれをからダウンロードすることができます ここで

WordPressの各ページでメニューを設定・作成する方法

まず、必要なプラグインがすべてインストールされていることを確認してください。ヘッダーの作成方法をすでに知っている場合は、別のページでメニューを設計し、メニューを構成するセクションに進んでください。さあ、仕事に取り掛かりましょう。

パート 1: メガ メニュー ウィジェットを備えたシンプルなヘッダー

  1. ステップ1: Web サイトにヘッダーを追加します。そこに表示されるのは、 テーマの一部、ここにヘッダーを追加します。
  2. ステップ2: ボタンをクリックします 新規追加、 を選択 テンプレートの種類ヘッダ そして名前を決めます。
  3. ステップ3: Elementor ページにリダイレクトされ、魔法が始まります。
  4. ステップ4: セクションを追加し、適切なレイアウト (コンテンツの幅など) を選択します。 箱の中に、 必要なパラメータを設定します。

WordPress の各ページのメニューのウィジェット

ページごとに素晴らしいカスタム メニューを作成したい場合は、メガ メニュー ウィジェットに注目してください。

  1. ステップ1: アイテムパネルで Mega Menu ウィジェットを探します。

NOTE: 利用可能なオプションは 2 つあります。 縦型メガメニューとメガメニュー シンプルな

  1. ステップ2: さて、最後のものに焦点を当てます。ウィジェットをドラッグすると、左側のサイドバーに設定タブが表示されます。
  2. ステップ3:シーク コンテンツ、展開します 全般 そこでメニューを選択します。
  3. ステップ4: メニュー画面を選択するか、WordPress ダッシュボードに戻るかを選択します — 外観 -  メニュー.
  4. ステップ5: 操作したいメニューを選択するか、新しいメニューを作成します。
  5. ステップ6: メニューを作成すると、Elementor で使用可能なメニューのリストにそのメニューが表示されます。

注記: レスポンシブデザインを採用するために、Web サイトのデスクトップ版とモバイル版のメニューを忘れずに配置してください。

タブで スタイルでは、配置の設定、背景、境界線の種類またはボックスの影の変更など、将来のメニューをカスタマイズできます。あなたに最適なものを見つけてください。

さらに、フォントのスタイルを設定したり、アクティブ状態やスクロール状態を変更したりできます。サブメニュー項目がある場合は、設定タブを使用して変更します。 デスクトップのメニュー項目。

WordPressの各ページのメニュー設定
  1. ステップ1: このヘッダーを特定の場所に設定するには、次の場所に移動します。 ヘッダー設定 エレメンターで。
  2. ステップ2: このメニューは、ヘッダーの状態を変更し、ドロップダウン メニューからヘッダーが表示される条件を設定するのに役立ちます。 Web サイト全体、単一ページ、またはアーカイブ ページ。 たとえば、サイト全体を選択します。

パート 2: Mega Menu と JetMenu プラグイン

すでにご存知のとおり、JetMenu は条件付きメニューに任意のコンテンツを追加できるという点で特別です。その無限の可能性を一緒に活かしていきましょう。

  1. ステップ1:で WordPress ダッシュボード — 外観 — メニュー。
  2. ステップ2: カスタマイズしたいメニューを検索するか、新しいメニューを作成します。
  ホストパパ。概要、プラン、価格、サポート、代替手段

NOTE: いくつかの詳細なサブメニューを含むメニューを作成したい場合は、同じタブからさらにメニューを追加する必要があります。 WordPress メニュー。したがって、メイン メニューにあるカテゴリごとに、いくつかの異なるサブメニューを作成する必要があります。

JetMenuを使用してWordPressの各ページにメニューを設定する
  1. ステップ1: 各メニュー項目で、設定を操作できる JetMenu 項目を探します。
  2. ステップ2: を有効にします。 メガサブメニュー を押す メガメニュー項目の内容を編集する 他のアイテムでメニューを充実させたり、アイテムをカスタマイズしたりできます。
  3. ステップ3: [Elementor] ページで、必要な数の列を含むセクションを選択します。
  4. ステップ4: をドラッグします。 垂直メガメニューウィジェット 左側のサイドバーのコンテンツタブの最初の列に
  5. ステップ5:挿入したいメニューを選択します。
  6. ステップ6: 最後に、作成したサブメニューを WordPress 管理パネルに追加します。ウィジェットを簡単にコピーして、2 番目のセクションに貼り付けることができます。

この後、タブを使用できるようになります スタイル 要素をカスタマイズし、幅、高さ、タイポグラフィ、必要なスペースなどを設定します。

JetMenu のメイン設定では、メガ メニューの位置の確認、メニューへのアイコンの追加 (既製のものから選択するか、SVG ファイルをアップロード)、メニュー項目へのテキスト バッジの適用、メニュー サイズのカスタマイズなどができます。

専門家のアドバイス

Elementor を使用して、メニューの上にヘッダー (前のページのコピーなど) を追加し、JetBlocks ウィジェットで特定の要素を挿入して更新します。

ただし、このメニューを別のページに設定するには問題があります。これに対処するには、次の手順を実行します。

  1. ステップ1:に行く テーマビルダー 再度、新しいヘッダー テンプレートを作成し、ヘッダーをコピーするか、新しいヘッダー テンプレートを作成します
  2. ステップ2: タブで作成したメガメニューを選択します 一般的な構成 をクリックして表示し、ブレッドクラム ウィジェットを追加します。
  3. ステップ3: [ヘッダー設定: 条件] タブで、次を選択します。 単数とカバー 作成したヘッダーをホームページに配置し、以前に作成したヘッダーを Web サイトの他のページに残します。

パート 3: すべての WordPress ページにメニューを作成する (ドロップダウン メニュー)

お問い合わせフォームを含む別のページがあり、それに別のヘッダーを付けたいとします。次の手順に従ってください。

  1. ステップ1– テーマビルダーで新しいテンプレートを作成し、メインヘッダーの上部をコピーし、この段階でドロップダウンメニューを追加します。

NOTE: 本質は同じです。必要に応じて、既存のメニューを追加したり、ページごとに新しいカスタム メニューを作成したりできます。シンプル メニューまたは可変要素を含むメガ メニューです。コンテナの位置を変更したり、設定をいじったり、スタイルを設定したりしてみましょう。

  1. ステップ2: 最後に、オプションを使用して、特定のページにこの特定のヘッダーを設定します。 単数 タブ 条件 そして連絡先ページの名前を示します。

以下についても読むことに興味があるかもしれません: WordPressでドロップダウンメニューを作成する方法

結論

WordPressの各ページにメニューを作成し、設定する方法は以上です。そのうちの 3 つだけを紹介しましたが、ページごとにカスタム メニューを作成する方法は他にもあると確信しています。

ご覧のとおり、条件付きメニューを使用してページごとに異なるメニューを作成するのは非常に簡単で便利です。さらに、このプラグインでは、投稿タイプ、カテゴリ、分類、ユーザーロールなど、または 404 ページごとに個別のメニューを作成するための柔軟なオプションも提供します。