WordPressナビゲーションメニューをマスターする15のベストチュートリアル

WordPressのナビゲーションメニューの操作に最適なチュートリアルをお探しですか？WordPressのナビゲーションメニューを使えば、サイト上のメニューを簡単にカスタマイズし、管理することができます。この投稿では、WordPressナビゲーションメニューをマスターするための最高のチュートリアルを紹介します。

長い投稿なので、ナビゲーションしやすいようにコンテンツリストを追加しました。

1. WordPressナビゲーション・メニューを始めよう
2. WordPressのメニューにソーシャルメディアのアイコンを追加する
3. WordPressでログイン中のユーザーに異なるメニューを表示する
4. ナビゲーションメニューに条件ロジックを追加する
5. WordPressナビゲーションメニューのスタイリング
6. WordPressのナビゲーションメニューにイメージアイコンを追加する
7. WordPressでカスタムナビゲーションメニューを追加する
8. WordPressテーマでスライドパネルメニューを追加する
9. WordPressでモバイル対応のレスポンシブメニューを作成する
10. WordPressでフルスクリーンレスポンシブメニューを追加する
11. WordPressでナビゲーションメニューに説明を追加する
12. WordPressのナビゲーションメニューにトピックを追加する方法
13. WordPressのサイドバーにナビゲーションメニューを追加する方法
14. 投稿とページにWordPressナビゲーションメニューを追加する
15. WordPressのナビゲーションメニューにNoFollowリンクを追加する

1.WordPressナビゲーションメニューを始める

ウェブデザインにおいてナビゲーションメニューとは、サイト訪問者がサイト内の様々なページやセクションを訪問できるようにするためのリンクのリストです。ユーザーがサイト内を移動するのに役立つことから、ナビゲーションメニューと呼ばれています。

WordPressには、サイト上でメニューを作成・使用できるビルトインツールが用意されています。このツールはWordPress管理エリアの外観 ” メニューページにあります。

ここでは、左側の列から右側に項目を追加してメニューを作成することができます。メニューにはWordPressの投稿、ページ、カテゴリー、カスタムリンクを追加することができます。

詳細な手順については、WordPressでナビゲーションメニューを追加する方法についての初心者ガイドを参照してください。

2.WordPressメニューにソーシャルメディアアイコンを追加する

WordPressのメニューは、ソーシャルメディアボタンをサイトに追加するために使用することもできます。これにより、アイコンの更新、並べ替え、新しいソーシャルメディアアイコンの追加をいつでも簡単に行うことができます。

これを行う最も簡単な方法は、Menu Social Iconsプラグインを使用することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、外観 ” メニューページに移動します。新規ソーシャルメニューを作成し、左カラムのカスタムリンクタブをクリックします。

リンクテキストとURLフィールドの下にソーシャルメディアアイコンが表示されます。すべてソーシャルメディアのアイコンをクリックし、あなたのソーシャルプロフィールのURLを入力するだけです。入力が終わったら、メニューに追加ボタンをクリックしてください。

追加したいすべてのソーシャルメディアのプロフィールについて、このプロセスを繰り返します。完了したら、メニューの場所を選択し、メニューを保存するボタンをクリックしてください。

より詳細な手順については、WordPressのメニューにソーシャルメディアのアイコンを追加する方法をご覧ください。

3.WordPressでログイン中のユーザーに異なるメニューを表示する

WordPressで会員制サイトを運営している場合、ログイン中のユーザーに異なるメニューを表示したいと思うかもしれません。これを簡単に実現する方法をご紹介します。

まず、2つの異なるメニューを作成する必要があります。一つはログイン中のユーザー用、もう一つはログインしていないユーザー用です。これらのメニューにはログイン中とログアウト中という名前をつけることができます。

次に、このコードをテーマのfunctions.phpファイルまたはサイト固有のプラグインに追加する必要があります。

function my_wp_nav_menu_args( $args = '' ) {

if( is_user_logged_in() ) { 
	$args['menu'] = 'logged-in';
} else { 
	$args['menu'] = 'logged-out';
} 
	return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

これですべてです。これでナビゲーションメニューをテストすることができます。

より詳細な手順については、WordPressでログイン中のユーザーにさまざまなメニューを表示する方法のチュートリアルを参照してください。

4.ナビゲーションメニューに条件ロジックを追加する

特定の条件に基づいてメニューを変更したいですか？例えば、トップページで別のメニューを表示したり、個別投稿で項目を非表示にしたり。WordPressでこれを実現する方法をご紹介します。

まず、If Menuプラグインをインストールして有効化する必要があります。

有効化したら、外観 ” メニュー画面にアクセスし、編集したいメニュー項目をクリックします。すると、「条件付きロジックを有効化する」というオプションが新たに設定されていることに気づくでしょう。

このオプションを設定すると、2つのドロップダウン・オプションが表示されます。特定の条件に一致した場合、メニューの表示・非表示を選択することができます。例えば、ユーザーが管理者である場合、メニュー項目を非表示にしたり、ユーザーが個別投稿をしている場合のみメニュー項目を表示したりすることができます。

より詳しい説明は、WordPressのメニューに条件ロジックを追加する方法の投稿を参照してください。

5.WordPressナビゲーションメニューのスタイリング

WordPressテーマは、サイトのナビゲーションメニューの外観をコントロールします。CSSを使用すると、ナビゲーションメニューの外観をカスタマイズできます。

これを行う最も簡単な方法は、CSS Heroプラグインを使用することです。CSS Heroは、コードを一行も書くことなく（HTMLもCSSも必要なし）WordPressテーマをカスタマイズできるプレミアムプラグインです。さらに詳しく知りたい方は、CSS Heroのレビューをご覧ください。

手動でCSSを記述することで、ナビゲーションメニューをスタイリングすることもできます。詳しくは、WordPressナビゲーションメニューのスタイリング方法をご覧ください。

6.WordPressのナビゲーションメニューにイメージアイコンを追加する

多くの人気サイトでは、ナビゲーションメニューの横にイメージアイコンを使って目立たせています。ここでは、WordPressでナビゲーションメニューにイメージアイコンを追加する方法を紹介します。

まず、Menu Imageプラグインをインストールして有効化します。有効化したら、外観 ” メニューを開きます。既存のメニューの各項目に画像を追加するオプションが表示されます。

CSSを使って画像アイコンを追加することもできます。詳しくは、WordPressのナビゲーションメニューに画像アイコンを追加する方法をご覧ください。

7.WordPressでカスタムナビゲーションメニューを追加する

ほとんどの無料およびプレミアムWordPressテーマには、ナビゲーションメニューを表示する場所があらかじめ定義されています。しかし、テーマにカスタムナビゲーションメニューを追加することもできます。

まず、テーマのfunctions.phpファイルに次のコードを追加して、新しいナビゲーション・メニューを登録する必要があります。

[cbk2］

このコードにより、あなたのテーマに「マイカスタムメニュー」が作成されます。これは外観 ” メニューページでメニューを編集することで確認できます。

カスタムメニューを表示するには、このコードをテーマのメニューを表示したい場所に追加する必要があります。

[cbk3］

より詳細な手順については、WordPressテーマでカスタムナビゲーションメニューを追加する方法の投稿をご覧ください。

8.WordPressテーマでスライドパネルメニューを追加する

サイトのナビゲーションメニューをスライドインパネルで表示したいですか？スライドインパネルを使用することで、メニューがよりインタラクティブになり、邪魔にならず、モバイル端末でも楽しめます。

しかし、スライドインパネルを追加するには、JavaScript、WordPressテーマ、CSSの中レベルの知識が必要です。

ステップバイステップの手順については、WordPressテーマでスライドパネルメニューを追加する方法のガイドを参照してください。

9.モバイル対応のレスポンシブWordPressメニューを作成する

ほとんどのWordPressテーマはレスポンシブで、モバイル対応のナビゲーションメニューが付属しています。しかし、もしあなたのテーマがモバイル端末でナビゲーションメニューをうまく扱えない場合、モバイル端末でのユーザーエクスペリエンスに影響を及ぼします。

幸いなことに、コードを書かずにモバイル対応のレスポンシブ・メニューを追加する簡単な方法がいくつかあります。

まず、Responsive Menuプラグインをインストールして有効化する必要があります。

有効化したら、WordPress管理バーで「Responsive Menu」をクリックして、プラグインの設定を行う必要があります。

モバイルレスポンシブメニューを表示する幅を選択します。その後、既存のナビゲーションメニューを選択する必要があります。

オプションの更新」ボタンをクリックし、設定を保存することを忘れないでください。これですべてです。ブラウザー画面のサイズを変更して、モバイル・レスポンシブ・メニューをご覧ください。

モバイル・レスポンシブ・メニューを追加する方法は他にもたくさんあります。トグル効果で外観を変えるメニュー、スライドインメニュー、レスポンシブセレクトメニューなどです。これらすべてについては、モバイル対応のレスポンシブWordPressメニューを作成する方法のガイドでさらに詳しく説明しています。

10.WordPressでフルスクリーンレスポンシブメニューを追加する

人気のあるサイトがフルスクリーンのナビゲーションメニューを使っていることにお気づきだろうか。通常は、JavaScriptとCSSを工夫して使う必要があります。幸運なことに、WordPressではコードを書くことなくこれを行うことができます。

まず、DC – フルスクリーンレスポンシブメニューをインストールして有効化する必要があります。有効化したら、外観 ” DC Fullscreen Menuページにアクセスしてプラグイン設定を行う必要があります。

ここではフルスクリーンメニューのメニュー、背景色、文字色、Googleフォントを選択できます。

送信ボタンをクリックして設定を保存します。これであなたのサイトにアクセスし、フルスクリーンレスポンシブメニューの動作を確認することができます。

このトピックの詳細については、WordPressでフルスクリーンレスポンシブメニューを追加する方法のガイドを参照してください。

11.WordPressのナビゲーションメニューで説明を追加する

WordPressのナビゲーションメニューは通常、リンクラベルやアンカーテキストを表示するテキストリンクだけです。ナビゲーションメニューの各項目にちょっとした説明やタグラインを追加したいとしたらどうでしょうか？

幸いなことに、WordPressにはナビゲーションメニューの各項目に説明を追加する機能がビルトインされています。

まず、説明項目を有効化する必要があります。画面の右上にある表示オプションボタンをクリックしてください。

有効化できるボックスやオプションのリストが表示されます。説明の隣にあるボックスにチェックを入れる必要があります。

下にスクロールし、メニュー項目をクリックして編集すると、説明を追加するオプションが表示されます。

説明を追加し、メニューの保存ボタンをクリックします。

もしあなたのテーマがメニューの説明に対応していれば、すぐに見ることができます。そうでない場合は、説明文を表示するためにテーマファイルを編集する必要があります。

詳しい説明は、WordPressテーマにメニューの説明を追加する方法をご覧ください。

12.WordPressナビゲーションメニューにトピックを追加する方法

WordPressのナビゲーションメニューにブログのトピックを追加する方法についてよく質問を受けます。多くの初心者は、トピックをメニューに追加するには、トピックごとにページを作成する必要があると思い込んでいます。

実際に必要なのはカテゴリーです。カテゴリーとタグはWordPressのタクソノミーに組み込まれており、コンテンツを関連するトピックに分類することができます。

投稿を関連するカテゴリーに追加し、外観 ” メニューページに移動します。カテゴリータブをクリックして展開し、ナビゲーションメニューに表示したいカテゴリーを選択します。

詳しくは、WordPressのナビゲーションメニューにトピックを追加する方法の投稿をご覧ください。

13.WordPressのサイドバーにナビゲーション・メニューを追加する方法

WordPressテーマには通常、上部または下部にナビゲーション・メニューがあります。しかし、WordPressのサイドバーにもメニューを作成して追加することができます。

外観 ” ウィジェットページにアクセスし、サイドバーに「カスタムメニュー」ウィジェットを追加するだけです。詳しい使い方は、WordPressのウィジェットの追加と使い方ガイドをご覧ください。

サイドバーにウィジェットを追加した後、ドロップダウンオプションからメニューを選択することができます。設定を保存するために保存ボタンをクリックすることを忘れないでください。

14.投稿とページにWordPressナビゲーションメニューを追加する

通常、ナビゲーションメニューはサイトのヘッダーやサイドバーに表示されます。しかし、WordPressの投稿やページの中にメニューを追加したい場合もあります。ここではその方法を説明します。

まず、Menu Shortcodeプラグインをインストールして有効化する必要がある。有効化したら、メニューを表示したい投稿やページを編集し、このショートコードを追加する：

[SKX1］

Your Menu Name]を自分のナビゲーションメニューの名前に置き換えるのを忘れないでください。投稿を保存または公開し、プレビューボタンをクリックしてください。

詳しくは、投稿日やページにWordPressナビゲーションメニューを追加する方法をご覧ください。

15.WordPressナビゲーションメニューにNoFollowリンクを追加する

通常、サイトのナビゲーションメニューには自分の投稿やページへのリンクが含まれています。しかし、時には外部サイトへのリンクを追加する必要があるかもしれません。

多くのSEO専門家は、外部リンクにrel=”nofollow “属性を追加することを推奨しています。ここでは、WordPressナビゲーションメニューのリンクにnofollow属性を追加する方法を説明します。

まず、外観 ” メニューのページにアクセスし、画面右上の表示オプションボタンをクリックします。

メニューが表示されますので、「リンク関係（XFN）」と「リンク先」の設定にチェックを入れてください。

編集したいメニュー項目をクリックしてください。リンクの関係」と「リンクを新しいウィンドウ/タブで開く」という2つのオプションが追加されていることに気づくでしょう。

リンク関係のオプションにnofollowを入力する必要があります。また、リンクを新しいウィンドウ/タブで開くオプションをチェックすることもできます。

メニューの保存ボタンをクリックして変更を保存します。これで、WordPressナビゲーションメニューのこの特定のリンクにrel=”nofollow “属性が追加されます。

より詳細な手順については、WordPressナビゲーションメニューにnofollowリンクを追加する方法のチュートリアルをご覧ください。

この投稿が、WordPressナビゲーションメニューを使いこなすためのチュートリアル探しに役立てば幸いです。ビジネスサイトに必須のWordPressプラグイン24個のリストもご覧ください。

この投稿が気に入った場合は、WordPress動画チュートリアルのYouTubeチャンネルをご購読ください。Twitterや Facebookでもご覧いただけます。