2025年07月10日[木曜日]

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

  • 2025/07/09
  • BASICS
  • WordPressの基礎
  • 0comments
  • 45views
  • 約8分で読めます
  • 17

前回の記事では、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.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の動作をカスタマイズ
  • 管理画面のカスタマイズ：独自の設定画面や機能の追加
warning

functions.phpの取り扱いに注意

functions.phpは重要なファイルなので、記述に間違いがあると、サイト全体がエラーになります。
編集する際は十分に注意してください。

💡 安心してください： 今回はローカル環境での学習なので、もしエラーが発生しても本番サイトに影響はありません。恐れずに進みましょう！

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

sample-themeフォルダ内にfunctions.phpファイルを作成します。

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' );
?>

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

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

メニューの作成

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

メニューの基本設定

  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('contact'); ?>">問い合わせ</a></li>
</ul>

wp_nav_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>

ファイルを保存します。

動作確認とテスト

基本動作の確認

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

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

正しく動作しています！

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

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

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

  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の標準メニュー機能でナビゲーションを効率管理しよう！

この記事の評価をお願いします

評価をすると「既読」となり、まだ読んでいない記事を区別できます。

この投稿をシェアする

コメントを残す

CAPTCHA


共通部の外部ファイル化で効率的なテンプレート管理を実現しよう！

共通部の外部ファイル化で効率的なテンプレート管理を実現しよう！  BASICS

WordPressテーマ開発における「部分テンプレート」の概念を実践的に学習。テンプレートファイルの共通部分を外部ファイル化することで、コードの重複を排除し、保守性の高いテーマ構造を構築する方法を解説します。効率的なテンプレート管理とメンテナンス性の向上を実現する、プロフェッショナルなテーマ開発に必須の技術を習得しましょう。

  • 2025/07/08
  • 0comments
  • 354views

WordPress標準ヘッダー・フッターでテーマ機能を最大化しよう！

WordPress標準ヘッダー・フッターでテーマ機能を最大化しよう！  BASICS

WordPress標準のヘッダー・フッター機能を実装し、WordPressの機能をフル活用できるテーマに改良する方法を解説します。wp_head()とwp_footer()関数の実装により、管理画面での設定がWebページで正しく反映される環境を構築し、プラグインの機能も有効化できるプロフェッショナルなテーマへと進化させます。

  • 2025/07/09
  • 0comments
  • 21views

STAY CONNECTED

wp-ch Admin

現役のフリーランスエンジニアがWordPressによるWebサイト構築を基礎から実践テクニックまで徹底解説します。

たくさんの方がフォローしてくれています。あなたもぜひ、情報を受け取ってください。

SERIES

CATEGORY

TAGS