WordPressの標準メニュー機能でナビゲーションを効率管理しよう！

前回の記事では、header.phpとfooter.phpによる共通部の外部ファイル化を実現し、効率的なテンプレート管理を構築しました。これにより、ヘッダーとフッターの修正が一箇所で完了するようになりました。

しかし、現在のナビゲーションには新たな課題があります。メニューの追加や並び替えのたびに、header.phpのHTMLコードを直接修正する必要があり、技術的知識のない管理者では対応できません。

今回の目標

• WordPressの標準メニュー機能の活用
• 管理画面からの直感的なナビゲーション管理
• wp_nav_menu()関数による動的メニュー表示
• 技術的知識不要のメニュー編集環境の構築

この記事では、WordPressの標準機能を活用して、コードを触らずに管理画面からナビゲーションを管理する方法を学習します。

現在の問題点を確認

現在、header.phpのナビゲーションは以下のようにHTMLで直接記述されています。

<header>
    <h1><?php the_title(); ?></h1>
    <ul>
        <li><a href="<?php echo home_url(''); ?>">トップ</a></li>
        <li><a href="<?php echo home_url('about'); ?>">会社概要</a>
            <ul>
                <li><a href="<?php echo home_url('about/history'); ?>">沿革</a></li>
                <li><a href="<?php echo home_url('about/access'); ?>">アクセス</a></li>
            </ul>
        </li>
        <li><a href="<?php echo home_url('service'); ?>">サービス</a></li>
        <li><a href="<?php echo home_url('voice'); ?>">お客様の声</a></li>
        <li><a href="<?php echo home_url('contact'); ?>">問い合わせ</a></li>
    </ul>
</header>

<header>
    <h1><?php the_title(); ?></h1>
    <ul>
        <li><a href="<?php echo home_url(''); ?>">トップ</a></li>
        <li><a href="<?php echo home_url('about'); ?>">会社概要</a>
            <ul>
                <li><a href="<?php echo home_url('about/history'); ?>">沿革</a></li>
                <li><a href="<?php echo home_url('about/access'); ?>">アクセス</a></li>
            </ul>
        </li>
        <li><a href="<?php echo home_url('service'); ?>">サービス</a></li>
        <li><a href="<?php echo home_url('voice'); ?>">お客様の声</a></li>
        <li><a href="<?php echo home_url('contact'); ?>">問い合わせ</a></li>
    </ul>
</header>

問題点：コードでの直接管理

この方法では、以下のような問題があります。

• メニューの追加・削除：header.phpのコードを直接修正する必要がある
• 並び順の変更：HTMLの順序を手動で入れ替える必要がある
• 階層構造の変更：入れ子になったulタグを手動で修正する必要がある
• 技術的知識が必要：管理者がHTMLとPHPの知識を必要とする

例えば、前回の記事で「お客様の声」ページを追加する場合、header.phpを直接編集する必要がありました。

それでは、WordPressの管理画面からメニューを作成してみましょう！

「あれ？管理画面にメニューがない！」

WordPressの管理画面から「外観」→「メニュー」でナビゲーションメニューを作成できるはずです。

しかし、管理画面→外観を見ても「メニュー」項目がありません。

原因：メニュー機能はデフォルトでOFF

WordPressでは、メニュー機能はデフォルトで無効化されています。

テーマでメニュー機能を使用するには、明示的に有効化する必要があります。

functions.phpファイルでメニュー機能を有効にします。

functions.phpの作成

「functions.phpを征する者がWordPressを制する」

functions.phpは、WordPressテーマ開発において最も重要なファイルの一つです。

functions.phpを扱えてこそプロと言われるほど、WordPressテーマの機能拡張において中心的な役割を果たします。

functions.phpの概要

functions.phpは、テーマ専用の機能拡張ファイルです。

• WordPressの機能を有効化：メニュー、アイキャッチ画像、カスタム投稿タイプなど
• 独自関数の定義：テーマ固有の処理を関数として定義
• フック・フィルターの実装：WordPressの動作をカスタマイズ
• 管理画面のカスタマイズ：独自の設定画面や機能の追加

テーマフォルダにfunctions.phpを作成

sample-theme
├── front-page.php
├── header.php
├── footer.php
├── kaisha.php
├── page.php
├── page-contact.php
├── functions.php ← 新規作成
├── index.php
└── style.css

sample-theme
├── front-page.php
├── header.php
├── footer.php
├── kaisha.php
├── page.php
├── page-contact.php
├── functions.php ← 新規作成
├── index.php
└── style.css

メニューの有効化

functions.phpに以下のコードを記述します。

<?php
// 外観→メニューの有効化
add_theme_support( 'menus' );
?>

<?php
// 外観→メニューの有効化
add_theme_support( 'menus' );
?>

ファイルを保存したら、再度管理画面→外観を確認してみましょう。

「メニュー」項目が表示されています！

メニューの作成

それでは今度こそ、管理画面→外観→メニューからナビゲーションメニューを作成します。

メニューの基本設定

1. メニュー名を入力
   • 「header-menu」と入力
   • この名前は後で使用するので覚えておきましょう
2. 固定ページの自動追加
   • 今回は「OFF」のままにします
   • ONにすると、新しい固定ページを作成するたびに自動的にメニューにも追加されます
   • しかし、自動追加されると意図しない順番でメニューに追加され、メニューの構造が崩れる可能性があります
   • メニューの管理は手動で行う方が確実なので、今回はOFFのままにします
3. メニューを作成ボタンをクリック

メニュー項目の追加

左側の「固定ページ」リストから、以下のページを選択します。

• ようこそページ（フロントページ）
• 会社概要
• 沿革
• アクセス
• サービス
• お客様の声
• お問い合わせ

「メニューに追加」ボタンをクリックすると、右側の「メニュー構造」に選択した固定ページの一覧が表示されます。

メニューの並び替えと階層化

並び順の変更

• 各メニュー項目をマウスで上下にドラッグすると、順番を入れ替えることができます

階層構造の作成

• メニュー項目を左右にドラッグすると、階層化できます
• 沿革とアクセスは会社概要の下層メニューにしたいので、それぞれ右にドラッグして1段下げます

最終的なメニュー構造

- ようこそページ
- 会社概要
  - 沿革
  - アクセス
- サービス
- お客様の声
- お問い合わせ

- ようこそページ
- 会社概要
  - 沿革
  - アクセス
- サービス
- お客様の声
- お問い合わせ

メニューの保存

設定が完了したら、「メニューを保存」ボタンをクリックして完成です。

メニューをheader.phpに適用

既存のナビゲーションを削除

header.phpファイルを開き、ulタグで作られた既存のナビゲーション部分を削除します。

<ul>
    <li><a href="<?php echo home_url(''); ?>">トップ</a></li>
    <li><a href="<?php echo home_url('about'); ?>">会社概要</a>
        <ul>
            <li><a href="<?php echo home_url('about/history'); ?>">沿革</a></li>
            <li><a href="<?php echo home_url('about/access'); ?>">アクセス</a></li>
        </ul>
    </li>
    <li><a href="<?php echo home_url('service'); ?>">サービス</a></li>
    <li><a href="<?php echo home_url('voice'); ?>">お客様の声</a></li>
    <li><a href="<?php echo home_url('contact'); ?>">問い合わせ</a></li>
</ul>

<ul>
    <li><a href="<?php echo home_url(''); ?>">トップ</a></li>
    <li><a href="<?php echo home_url('about'); ?>">会社概要</a>
        <ul>
            <li><a href="<?php echo home_url('about/history'); ?>">沿革</a></li>
            <li><a href="<?php echo home_url('about/access'); ?>">アクセス</a></li>
        </ul>
    </li>
    <li><a href="<?php echo home_url('service'); ?>">サービス</a></li>
    <li><a href="<?php echo home_url('voice'); ?>">お客様の声</a></li>
    <li><a href="<?php echo home_url('contact'); ?>">問い合わせ</a></li>
</ul>

wp_nav_menu()関数の追加

削除した部分に、以下のコードを追加します。

<?php wp_nav_menu('header-menu'); ?>

<?php wp_nav_menu('header-menu'); ?>

wp_nav_menu()関数について

• WordPressでメニューを表示するための専用関数
• 引数にメニュー名を指定することで、該当するメニューを出力
• 管理画面で設定したメニュー構造を自動的にHTMLのul・liタグで生成
• 階層構造も自動的に適切なネストで出力される

修正後のheader.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php the_title(); ?></title>
</head>
<body>
<header>
    <h1><?php the_title(); ?></h1>
    <?php wp_nav_menu('header-menu'); ?>
</header>
<main>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php the_title(); ?></title>
</head>
<body>
<header>
    <h1><?php the_title(); ?></h1>
    <?php wp_nav_menu('header-menu'); ?>
</header>
<main>

ファイルを保存します。

動作確認とテスト

基本動作の確認

早速、フロントページにアクセスして確認してみましょう。

会社概要をクリックしてページ遷移ができるようとを確認します。

正しく動作しています！

管理画面で設定したメニューが表示され、表示順も階層構造も正しく反映されています。

管理画面からの編集テスト

実際に管理画面からメニューを編集してみましょう。

1. 管理画面→外観→メニューにアクセス
2. 「サービス」と「お客様の声」の順番を入れ替え
3. 「メニューを保存」ボタンをクリック
4. フロントページを表示して確認

順番が正しく入れ替わっていることを確認できます。

WordPressメニュー機能の利点

WordPressの標準メニュー機能を使用することで、以下のような利点があります：

• 直感的な操作：ドラッグ&ドロップで簡単に編集可能
• コード修正不要：HTMLやPHPの知識が不要
• 階層構造の簡単管理：ドラッグで階層化が可能
• 即座に反映：変更が即座にサイトに反映される

まとめ

今回習得したスキル

• functions.phpの作成と基本的な使い方
• メニューの有効化：add_theme_support( 'menus' )
• 外観→メニューからナビゲーションを作成
• wp_nav_menu()関数でメニューを表示

WordPressメニュー機能の価値

WordPressの標準メニュー機能を活用することで：

1. 技術的知識不要：管理者がHTMLやPHPを知らなくても編集可能
2. 効率的な管理：ドラッグ&ドロップの直感的な操作
3. 即座の反映：変更が即座にサイトに反映される
4. 保守性の向上：コードを触らずにメニューを管理

プロフェッショナルな開発への第一歩

functions.phpを扱えるようになることは、WordPressテーマ開発において重要な節目です。

今回学習したメニュー機能の有効化は、functions.phpの基本的な使い方の入門編にすぎません。

より高度な機能（カスタム投稿タイプ、アイキャッチ画像、独自フック）も、すべてfunctions.phpで実装します。

次回予告

現在のナビゲーションは縦に並んだリスト表示になっています。

一般的なWebサイトでは、ナビゲーションは横並びで表示されることが多いです。

そのためには、まずスタイルシート（CSS）を適用する必要があります。

現在のナビゲーションは縦に並んだリスト表示になっています。横並びにするにはCSSの適用が必要です。

でも、スタイルシートを読み込む前にやるべきことがあります。

次回の内容：WordPressの機能をフル活用するための準備

現在のテーマは正常に動作していますが、WordPressの機能をフル活用するためには、WordPress標準のヘッダー・フッターの読み込み機能が不可欠です。

現在のheader.phpとfooter.phpには、以下の関数が実装されていません。

• wp_head()：WordPressがヘッダー部分で必要な処理を実行
• wp_footer()：WordPressがフッター部分で必要な処理を実行

これらの関数がないと、WordPressの多くの機能が制限されてしまいます。

特に、今後実装予定のスタイルシートの適切な読み込みには、これらの関数が不可欠です。

次回は、これらの関数を実装し、WordPressの機能をフル活用できるテーマに改良します。

重要なポイント

今回学習したWordPressメニュー機能は、プロフェッショナルなテーマ開発では必須の機能です。

また、functions.phpの基本的な使い方を理解することで、より高度なWordPressテーマ開発への道筋が見えてきます。

管理画面からコードを触らずにサイトを管理できる仕組みを作ることが、WordPressテーマ開発の重要な目標の一つです。

成果物

この記事で作成した成果物は、以下のページでまとめて確認することができます。

成果物をまとめて確認する

［成果物］WordPressの標準メニュー機能でナビゲーションを効率管理しよう！

【WordPressの標準メニュー機能でナビゲーションを効率管理しよう！】の成果物です。投稿の学びを終えた時点の構成を一覧でご確認いただけます。

この投稿をシェアする