WordPress ナビゲーションメニューの追加

WordPressのテーマにナビゲーションメニュー（Navigation Menu）を追加する方法について、完全かつ包括的に解説します。ナビゲーションメニューは、サイトの訪問者にとって非常に重要な要素であり、サイト内での移動をスムーズにし、ユーザーエクスペリエンス（UX）を向上させるために不可欠です。

この記事では、WordPressでナビゲーションメニューを作成する方法、メニューをテーマに組み込む方法、カスタマイズする方法など、すべてのステップを詳しく解説します。

1. ナビゲーションメニューとは？

ナビゲーションメニューは、サイト内のページやカテゴリー、外部リンクなどに簡単にアクセスできるリンクの集まりです。通常、ヘッダー部分やサイドバー、フッターなどに表示されます。これにより、訪問者は目的のコンテンツに迅速にアクセスできるようになります。

2. ナビゲーションメニューの作成

ナビゲーションメニューは、WordPressの管理画面から簡単に作成できます。以下の手順でナビゲーションメニューを作成します。

2.1. メニューの作成

1. WordPressダッシュボードにログインします。

2. 左側のメニューから「外観」→「メニュー」をクリックします。

3. 「新しいメニューを作成」ボタンをクリックします。

4. メニューに名前を付け（例：「メインメニュー」）、「メニューを作成」ボタンをクリックします。

2.2. メニュー項目の追加

1. メニュー作成画面で、左側にある「ページ」、「投稿」、「カテゴリー」、「カスタムリンク」などの項目から、メニューに追加したいものを選択します。

2. 「メニューに追加」ボタンをクリックして、選択した項目をメニューに追加します。

3. メニュー項目をドラッグ＆ドロップで順番を変更することができます。

2.3. メニューの保存

作成したメニューに満足したら、「メニューを保存」ボタンをクリックして変更を保存します。

3. メニューをテーマに組み込む

ナビゲーションメニューを作成した後、それを実際にWordPressテーマに組み込む必要があります。多くのテーマでは、テーマ設定からナビゲーションメニューを簡単に表示させることができますが、場合によってはテーマのコードを編集する必要があります。

3.1. 自動的に表示されるテーマ

多くの現代的なWordPressテーマでは、メニューを自動的に表示するための場所が用意されています。メニュー作成後、以下の手順でメニューを表示する場所を選択できます。

1. 「外観」→「メニュー」に戻ります。

2. 作成したメニューの下に、「メニュー設定」というセクションがあります。

3. ここで、メニューを表示させる場所を選択します（例：「ヘッダーメニュー」、「フッターメニュー」など）。

4. 選択後、「変更を保存」ボタンをクリックします。

3.2. テーマファイルにコードを追加する

もし自動的に表示されない場合、テーマのコードを編集してメニューを表示することもできます。通常は、header.php ファイル内に以下のようなコードを追加することで、メニューを表示できます。

php
CopyEdit

    wp_nav_menu( array(
        'theme_location' => 'primary', // メニュー位置（functions.phpで定義）
        'container' => 'nav',
        'container_class' => 'main-navigation'
    ) );
?>

このコードは、メニューの位置や表示方法を指定するために使用されます。theme_locationには、functions.phpファイルで登録したメニュー位置名を指定します。

4. メニューのカスタマイズ

作成したメニューは、さらにカスタマイズして、サイトに合ったデザインや機能を追加することができます。

4.1. メニューにアイコンを追加

アイコンをメニュー項目に追加すると、視覚的に目立ち、訪問者の注意を引きやすくなります。Font Awesomeなどのアイコンライブラリを使って、メニュー項目にアイコンを追加できます。

例：

php
CopyEdit
"#">class="fa fa-home">i> ホームa>li>

css
CopyEdit
/* ドロップダウンメニュー */
.menu-item-has-children:hover .sub-menu {
    display: block;
}

css
CopyEdit
@media (max-width: 768px) {
    .main-navigation ul {
        display: none;
    }
    .main-navigation.active ul {
        display: block;
    }
}

php
CopyEdit
function register_my_menu() {
    register_nav_menu('primary', 'メインメニュー');
}
add_action('after_setup_theme', 'register_my_menu');