WordPressで動的メニューを作成する方法

公開: 2022-10-23

WordPress は、Web サイトやブログをゼロから作成したり、既存の Web サイトを改善したりできるコンテンツ管理システム (CMS) です。この記事では、WordPress で動的メニューを作成する方法を紹介します。ダイナミックメニューとは、閲覧中のページに合わせて変化するメニューです。たとえば、「WordPress テーマ」に関するページを表示している場合、メニューには WordPress テーマに関する他のページへのリンクが表示されます。「WordPress プラグイン」に関するページを表示している場合、メニューには WordPress プラグインに関する他のページへのリンクが表示されます。 WordPress で動的メニューを作成するのは簡単です。まず、メニューを作成する必要があります。次に、メニューにアイテムを追加する必要があります。 3 番目に、メニューを場所に割り当てる必要があります。 4 番目に、コードを WordPress テーマに追加する必要があります。最初のステップであるメニューの作成から始めましょう。

このシリーズのパート 2 では、さらに一歩進んで、ダイナミックナビゲーションメニューを作成します。 Pro アドオンを使用して、Block Visibility の位置に基づいて条件付きメニューを構築する方法を学習します。ブロックテーマは、ブロック原則に基づくテンプレートパーツを作成するために使用されます。このチュートリアルでは、「ハイキングエクスカーション」ページにセカンダリナビゲーションメニューを作成するために必要な手順を説明します。サイトエディターをクリックして Web サイトのヘッダーを編集するのと同じくらい簡単です。 Block Visibility プラグインの Location コントロールを使用して、セカンダリメニューの位置を制限することもできます。ナレッジベースで [場所] オプションを選択し、省略記号アイコンをクリックして有効にします。

位置制御を使用して、ハイキングエクスカーションページへのブロックの可視性を制限できるようになりました。これにより、可視性をより詳細に制御できます。投稿ルールは、ページ投稿タイプと「ハイキング」ページタイプを選択するように指示します。結果のルール設定では、次に従う必要があります。デモサイトのホームページでは、まったく新しい条件付きメニューにアクセスできます。この記事の残りの部分は完了する必要があります。これは、さまざまなルールとルールセットを使用して実現できます。このデモでは、単純な例を選択しました。

新しいメニューを作成するには、外観に移動します。二次メニューを作成する場合は「メニューの作成」、特定の場所のカスタムメニューを作成する場合は「マイカスタムメニュー」、別の場所の二次メニューを作成する場合は「二次メニュー」をクリックします。メニューにいくつかの項目を追加したら、それを保存します (たとえば、メニュー項目1、メニュー項目 2、およびメニュー項目 3)。

WordPress カスタムテーマで動的メニューを作成するにはどうすればよいですか?

WordPress で動的メニューを作成する 1 つの方法は、wp_nav_menu 関数を使用することです。この機能を使用すると、Web サイトの構造に基づいて自動的に生成されるメニューを作成できます。この関数を使用して、テーマに固有のカスタムメニューを作成することもできます。

これらの手順に従うことで、WordPress でシンプルで動的なナビゲーションメニューを作成できます。最初のステップは、register_nav_menus() 関数を使用してナビゲーションメニューを登録することです。これを実行するには、最初に子テーマの functions.php ファイルに登録してから、'init' フックを使用する必要があります。この例では、プライマリヘッダーメニューを利用します。ナビゲーションメニュープラグインは WordPress.org で入手でき、役割に基づいてさまざまなユーザーにさまざまなメニューを割り当てることができます。このプラグインを使用して、複数のメニューを同時に登録することもできます。前のステップで、WP_nav_menu 関数呼び出しでカスタム CSS クラスを参照することにより、サイトのデザインに基づいてナビゲーションメニューのスタイルを設定できます。

WordPressで動的ヘッダーメニューを作成する方法

WordPress で動的ヘッダーメニューを作成するには、まずカスタムメニューを作成する必要があります。これを行うには、WordPress 管理パネルの [メニュー] セクションに移動し、[新しいメニューの作成] リンクをクリックします。メニューの名前を入力し、[メニューの作成] ボタンをクリックします。次に、メニューにアイテムを追加する必要があります。これを行うには、アイテムの追加リンクをクリックして、メニューに追加するページまたは投稿を選択します。必要な項目をすべて追加したら、[保存] メニューボタンをクリックします。動的ヘッダーメニューを使用する準備が整いました。

このチュートリアルの後半で説明する WordPress Dynamic Menu Page Method を使用して動的メニューページを作成すると、それを変更できるようになります。メインナビゲーションでは、背景画像を使用して、ID に基づいてメニュー項目の位置を変更します。「span」タグを使用すると、テキストを非表示にして背景画像をそのまま表示できます。使用するコードは、WordPress によって current_page_ancestor という特別なクラスを使用して動的に生成されるため、次のようになります。サブページの数を増やしたい場合は、単純に depth=2 設定を増減して、表示されるページ数を無制限にします。下の画像に示すように、CSS を使用すると、現在のページリンクを非常に簡単に太字で表示できるようになりました。セクションが強調表示されている親ページに移動します。親の子ページを強調表示します。

WordPress は動的にメニュー項目を追加します

WordPress メニューにメニュー項目を追加するには、WordPress 管理ダッシュボードを使用するか、テーマにコードを追加します。メニュー項目を既存のメニューに追加する場合は、WordPress サイトにログインして、[外観] > [メニュー] ページに移動するだけです。そこから、左側からメニュー項目を選択し、[メニューに追加] ボタンをクリックして、新しいメニュー項目を追加できます。コードでメニュー項目を追加したい場合は、テーマの functions.php ファイルに数行のコードを追加する必要があります。最初に、メニュー項目を追加する新しい関数を作成する必要があります。この関数には任意の名前を付けることができますが、ここでは「my_custom_menu_items()」と呼びます。この関数内で、WordPress の「wp_nav_menu_items」フィルターフックを使用する必要があります。このフックを使用すると、新しい項目を既存のメニューに追加できます。関数内のコードは次のようになります。 } add_filter( 'wp_nav_menu_items', 'my_custom_menu_items', 10, 2 ); 上記のコードは、既存のメニューに項目を追加するために使用できる新しい関数を追加します。関数自体はまだ何も実行しませんが、独自のカスタムメニュー項目を追加するために使用できるフレームワークを提供します。実際にメニュー項目を追加するには、必要に応じて関数内のコードを変更する必要があります。たとえば、「About」ページにリンクを追加する場合は、次のコードを使用します。 function my_custom_menu_items( $items, $args ) { $items .= 'About'; $アイテムを返します。 } add_filter( 'wp_nav_menu_items', 'my_custom_menu_items', 10, 2 ); 上記のコードは、「About」というテキストを含む新しいリンクをメニューに追加します。関数内にコード行を追加することで、必要な数のメニュー項目を追加できます。

WordPress ダイナミックメニュープラグイン

WordPress の動的メニュープラグインは、Web サイトのナビゲーションにちょっとしたスパイスを加えるのに最適な方法です。訪問者が見ているものに基づいて変化するメニューを作成できるようにすることで、訪問者の関心を維持し、より多くのことを求めて戻ってくることができます.

WordPressでカスタムメニューを作成する方法

WordPress でカスタムメニューを作成するには、ダッシュボードの [外観] セクションに移動し、[メニュー] オプションを選択する必要があります。そこから、新しいメニューを作成し、必要なページ、カテゴリ、またはカスタムリンクを追加できます。変更を保存したら、[場所の管理] タブを使用して、新しく作成したメニューを Web サイトの場所に割り当てることができます。

Vegibit は、WordPress テーマの作成方法を理解するのに役立ちます。メニューはサイト名とキャッチフレーズの下にありますが、サイトコンテンツの上にあります。メニューを表示するには、まずテーマの functions.php ファイルに場所を登録する必要があります。 WordPress ダッシュボードでカスタムメニューを作成します。新しいメニューを WordPress コアに登録する必要があります。この機能により、ダッシュボードの場所を管理できるようになりました。 WordPress_nav_menu() 関数から直接来ているかのように見せたいのです。

次のステップでは、カテゴリリスト全体にリンクします。各リンクの上にマウスを移動すると、ホバー効果が得られる場合があります。これがどのように機能するかを理解するために、style.css ファイルを作成しました。リストの各要素からリンクの下線と箇条書きを削除し、各要素からパディングとマージンを削除します。 WordPress の概要では、カスタムメニューを作成するための段階的な手順を確認できます。これは、WordPress テーマでカスタムメニューを使用する方法の優れた説明です。いくつかの WordPress 機能のおかげで、私たちのタスクはより簡単になりました。新しいメニューが WordPress にリンクされると、そのメニューに必要な種類のコンテンツを簡単に追加または削除できました.

WordPress でカスタムメニューを作成する

メニューを作成したら、外観に移動します。メニューページに新しいメニューが表示されます。選択したらすぐに、必要に応じてカスタマイズできます。