WordPressテーマにカスタムナビゲーションメニューを追加する方法

WordPressテーマにカスタムナビゲーションメニューを追加しますか?ナビゲーションメニューは、ほとんどのWebサイトの上に表示されるリンクの水平方向のリストです.


デフォルトでは、WordPressテーマには事前定義されたメニューの場所とレイアウトが付属していますが、独自のカスタムナビゲーションメニューを追加したい場合?

この記事では、WordPressでカスタムナビゲーションメニューを簡単に作成して追加し、テーマのどこにでも表示できるようにする方法を紹介します.

WordPressテーマにカスタムナビゲーションメニューを追加する

このWordPressナビゲーションメニューのチュートリアルが必要なとき?

ほとんどのWordPressテーマには、サイトのナビゲーションリンクをメニューに表示できる場所が少なくとも1つあります.

WordPress管理エリア内の使いやすいインターフェースからメニュー項目を管理できます.

Webサイトにナビゲーションメニューを追加するだけの場合は、WordPressにナビゲーションメニューを追加する方法に関する初心者向けガイドに従ってください。.

このチュートリアルの目的は、DIY /中間ユーザーがWordPressテーマにカスタムナビゲーションメニューを追加できるようにすることです.

この記事では、次のトピックについて説明します。

    それでは、テーマにカスタムのWordPressナビゲーションメニューを追加する方法を見てみましょう.

    WordPressテーマでカスタムナビゲーションメニューを作成する

    ナビゲーションメニューは、WordPressテーマの機能です。各テーマは、独自のメニューの場所とメニューのサポートを定義できます.

    カスタムナビゲーションメニューを追加するには、最初に、このコードをテーマのfunctions.phpファイルに追加して、新しいナビゲーションメニューを登録する必要があります。.

    function wpb_custom_new_menu(){
    register_nav_menu( ‘my-custom-menu’、__( ‘My Custom Menu’));
    }
    add_action( ‘init’、 ‘wpb_custom_new_menu’);

    あなたは今行くことができます 外観»メニュー WordPress管理者のページで、新しいメニューを作成または編集してみてください。テーマの場所のオプションとして「マイカスタムメニュー」が表示されます.

    テーマに追加されたカスタムナビゲーションメニュー

    複数の新しいナビゲーションメニューの場所を追加する場合は、次のようなコードを使用する必要があります。

    function wpb_custom_new_menu(){
    register_nav_menus(
    アレイ(
    ‘my-custom-menu’ => __( ‘マイカスタムメニュー’),
    ‘追加メニュー’ => __( ‘追加メニュー’)

    );
    }
    add_action( ‘init’、 ‘wpb_custom_new_menu’);

    メニューの場所を追加したら、初心者向けのナビゲーションメニューを追加する方法に関するチュートリアルに従って、WordPress管理画面にいくつかのメニュー項目を追加します。.

    これにより、テーマのメニューを表示する次のステップに進むことができます.

    WordPressテーマでのカスタムナビゲーションメニューの表示

    次に、WordPressテーマに新しいナビゲーションメニューを表示する必要があります。ナビゲーションメニューが通常配置される最も一般的な場所は、サイトのタイトルまたはロゴの直後のWebサイトのヘッダーセクションです。.

    ただし、ナビゲーションメニューは好きな場所に追加できます.

    このコードを、メニューを表示するテーマのテンプレートファイルに追加する必要があります.

    <?php
    wp_nav_menu(array(
    ‘theme_location’ => 「マイカスタムメニュー」,
    ‘container_class’ => ‘カスタムメニュークラス’));
    ?>

    テーマの場所は、前のステップで選択した名前です.

    コンテナクラスは、ナビゲーションメニューに追加されるCSSクラスです。あなたのメニューはあなたのウェブサイトにプレーンな箇条書きリストとして表示されます.

    プレーンリストとして表示されるカスタム

    CSSクラス.custom_menu_classを使用して、メニューのスタイルを設定できます。以下は、開始に役立つサンプルCSSです。

    div.custom-menu-class ul {
    マージン:20px 0px 20px 0px;
    リストスタイルタイプ:なし。
    リストスタイル:なし。
    list-style-image:なし。
    text-align:right;
    }
    div.custom-menu-class li {
    パディング:0px 20px 0px 0px;
    表示:インライン;
    }
    div.custom-menu-class a {
    色:#FFFFFF;
    }

    カスタムメニュースタイル

    ナビゲーションメニューのスタイル設定について詳しくは、WordPressナビゲーションメニューのスタイルを設定する方法に関する詳細なチュートリアルをご覧ください

    Page Builderを使用してWordPressにカスタムナビゲーションメニューを追加する

    カスタムランディングページまたはホームページレイアウトを作成している場合、WordPressページビルダープラグインを使用すると、全体がはるかに簡単になります.

    市場で最高のWordPressページビルダーであるBeaver Builderの使用をお勧めします。シンプルなドラッグアンドドロップツールを使用して、あらゆるタイプのページレイアウトを作成できます(コーディングは必要ありません)。.

    これには、ページレイアウトへのカスタムナビゲーションメニューの追加も含まれます.

    まず、Beaver Builderプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。.

    アクティベーション時に、新しいページを作成するか、ナビゲーションメニューを追加する既存のページを編集する必要があります。投稿エディタ画面で、「Launch Beaver Builder」ボタンをクリックします.

    Beaver Builderを起動します

    新しいページの場合は、Beaver Builderに付属の既製のテンプレートのいずれかを使用できます。既存のページをすぐに編集することもできます.

    テンプレートを選択

    次に、メニューモジュールを追加して、ページをメニューを表示する場所にドラッグアンドドロップする必要があります。.

    ページにメニューモジュールを追加する

    これにより、メニューモジュールの設定がポップアップで表示されます。まず、使用するナビゲーションメニューを選択する必要があります。いつでも新しいメニューを作成したり、既存のメニューを編集したりできます。 外観»メニュー WordPress管理エリアのページ.

    メニューモジュール設定

    他の設定も確認できます。 Beaver Builderを使用すると、メニューのカスタム色、背景、およびその他のスタイルプロパティを選択できます.

    完了したら、[保存]ボタンをクリックしてメニューをプレビューできます.

    Beaver Builderで追加されたカスタムナビゲーションメニューのプレビュー

    WordPressでモバイルフレンドリーなレスポンシブメニューを作成する

    モバイルデバイスの使用の増加に伴い、多くの人気のある効果の1つを追加して、メニューをモバイルフレンドリーにすることができます。.

    レスポンシブメニューの例

    スライドアウト効果(上)、ドロップダウン効果、さらにモバイルメニューのトグル効果を追加できます.

    モバイル対応のWordPressメニューを作成する方法の詳細なステップバイステップガイドがあります。.

    WordPressナビゲーションメニューをさらに活用する

    ナビゲーションメニューは、強力なWebデザインツールです。ウェブサイトの最も重要なセクションをユーザーに示すことができます.

    WordPressを使用すると、メニューにリンクを表示するだけでなく、さまざまなことができます。これらの便利なチュートリアルを試して、WordPressサイトのナビゲーションメニューの機能を拡張してください。.

    • WordPressのナビゲーションメニューで画像アイコンを追加する方法
    • WordPressのメニューに条件付きロジックを追加する方法
    • WordPressテーマにメニューの説明を追加する方法
    • WordPressでフルスクリーンのレスポンシブメニューを追加する方法
    • WordPressサイトにメガメニューを追加する方法

    以上で、この究極のガイドがWordPressにナビゲーションメニューを追加する方法を学べたと思います。また、最も役立つ25のWordPressウィジェットのリストと、WordPressプラグインが必要なリストを確認することもできます。.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me