WordPressテーマでカスタムナビゲーションメニューを追加したいのですか？ ナビゲーションメニューは、ほとんどのWebサイトの上部に表示される水平方向のリンクのリストです。
デフォルトでは、WordPress テーマにはあらかじめ定義されたメニューの位置とレイアウトがありますが、独自のカスタム ナビゲーション メニューを追加したい場合はどうすればよいのでしょうか。
この記事では、WordPress でカスタム ナビゲーション メニューを簡単に作成および追加し、テーマ上の任意の場所に表示できるようにする方法を説明します。
Most WordPress themes come at least one spot where you can display your site’s navigation links in a menu.
WordPress テーマには、メニューでサイトのナビゲーション リンクを表示できる場所が 1 つ以上あります。
WordPress 管理エリア内の使いやすいインターフェイスから、メニュー項目を管理することができます。
Web サイトにナビゲーション メニューを追加するだけなら、WordPress にナビゲーション メニューを追加する方法についての初心者向けガイドに従うだけでよいのです。
このチュートリアルの目標は、DIY/中級ユーザーが WordPress テーマにカスタム ナビゲーション メニューを追加するのを支援することです。
- WordPressテーマでカスタムナビゲーションメニューを作成する
- WordPressテーマでカスタムナビゲーションメニューを表示する
- ページビルダーを使ってWordPressでカスタムナビゲーションメニューを追加する
- WordPressでモバイルフレンドリーな応答メニューを作成する
- WordPressナビゲーションメニューでできるその他のこと
そうは言っても、だ。 では、WordPressのカスタムナビゲーションメニューをテーマに追加する方法について見ていきましょう。
WordPressテーマでカスタムナビゲーションメニューを作成する
ナビゲーションメニューは、WordPressテーマの機能の1つです。 各テーマは、メニューの位置とメニューのサポートを独自に定義できます。
カスタム ナビゲーション メニューを追加するには、まず、テーマの 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( array( 'my-custom-menu' => __( 'My Custom Menu' ), 'extra-menu' => __( 'Extra Menu' ) ) );}add_action( 'init', 'wpb_custom_new_menu' );
メニューの場所を追加したら、WordPress 管理画面で、初心者向けのナビゲーションメニューの追加方法に関するチュートリアルに従ってメニュー項目をいくつか追加してください。
これで、次のステップである、テーマでのメニューの表示に進むことができます。
次に、WordPress テーマに新しいナビゲーションメニューを表示する必要があります。 通常、ナビゲーション メニューが配置される最も一般的な場所は、サイトのタイトルまたはロゴのすぐ後にあるウェブサイトのヘッダー部です。
しかし、ナビゲーション メニューは好きな場所に追加することができます。
メニューを表示したいテーマのテンプレート ファイルに、このコードを追加する必要があります。
<?phpwp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'custom-menu-class' ) ); ?>
テーマの場所は、前のステップで選択した名前です。
コンテナー クラスは、ナビゲーション メニューに追加される CSS クラスです。 あなたのメニューは、あなたのウェブサイト上でプレーンな箇条書きのリストとして表示されます。
メニューのスタイルを設定するには、CSS クラス .custom_menu_class を使用できます。 以下は、サンプル CSS です。
div.custom-menu-class ul { margin:20px 0px 20px 0px; list-style-type: none; list-style: none; list-style-image: none; text-align:right;}div.custom-menu-class li { padding: 0px 20px 0px 0px; display: inline;} div.custom-menu-class a { color:#FFFFFF;}
ナビゲーション メニューのスタイル設定の詳細については、WordPress のナビゲーション メニューのスタイル設定方法に関する詳しいチュートリアル
もしカスタム ランディング ページやホーム ページのレイアウトを作成しているなら、WordPress ページビルダー プラグインを使えばずっと簡単にできますよ。
私たちは、市場で最高の WordPress ページビルダーである Beaver Builder を使用することをお勧めします。 これは、簡単なドラッグ＆ドロップツール（コーディング不要）を使用して、あらゆるタイプのページレイアウトを作成することができます。
これには、ページレイアウトにカスタムナビゲーションメニューを追加することも含まれます。
まず、ビーバー ビルダー プラグインをインストールし、有効化する必要があります。
有効化したら、ナビゲーションメニューを追加したいページを新規に作成するか、既存のページを編集する必要があります。 投稿編集画面で、「ビーバービルダーを起動する」ボタンをクリックします。
新規ページであれば、Beaver Builderに付属している既成のテンプレートを利用することができます。 また、終了したページをすぐに編集することも可能です。
次に、Menusモジュールを追加し、ページ上のメニューを表示したい場所にドラッグ＆ドロップする必要があります。
これにより、Menuモジュールの設定がポップアップで表示されます。 まず、使用したいナビゲーションメニューを選択します。 新しいメニューの作成や既存のメニューの編集は、WordPress管理画面の「外観」「メニュー」ページでいつでも行うことができます。
他の設定も同様に確認できます。 Beaver Builder では、メニューの色、背景、およびその他のスタイル プロパティを選択することができます。
完了したら、保存ボタンをクリックし、メニューをプレビューできます。
Creating Mobile-Friendly Responsive Menus in WordPress
モバイル デバイスの使用が増加しているため、多くの人気のある効果のいずれかを追加して、メニューをモバイル フレンドリーにしたいと思うかもしれません。
モバイル メニューには、スライドアウト効果（上）、ドロップダウン効果、さらにトグル効果を追加できます。
モバイル対応レスポンシブ WordPress メニューの作成方法については、ステップごとの詳しいガイドを用意しています。 このメニューにより、ユーザーを Web サイトの最も重要なセクションに導くことができます。
WordPress では、メニューにリンクを表示するだけでなく、もっといろいろなことができます。 WordPress サイトのナビゲーション メニューの機能を拡張するために、これらの便利なチュートリアルを試してみてください。
- WordPressでナビゲーションメニューと一緒に画像アイコンを追加する方法
- WordPressでメニューに条件ロジックを追加する方法
- WordPressテーマでメニュー記述を追加する方法
- WordPressでフルスクリーン対応の応答性メニューを追加する方法
- WordPressサイトへのメガメニュー追加方法
以上となります。 この究極のガイドは、WordPressでナビゲーションメニューを追加する方法を学ぶのにお役に立てれば幸いです。 また、「WordPressの便利なウィジェット25選」や「WordPressの必須プラグイン一覧」も合わせてご覧ください。
この記事を気に入っていただけたなら、WordPress ビデオチュートリアルの YouTube チャンネルをご購読ください。 また、Twitter や Facebook でも私たちを見つけることができます。