2025年10月25日[土曜日]

ナビゲーションメニューの実装 – WordPress実践制作【WPCafe編】

  • 2025/10/20
  • PRACTICE
  • カフェサイトを作ろう
  • 0comments
  • 39views
  • 約10分で読めます
  • 4

前回、サイトの構成を決め、必要なページとテンプレートを準備しました。

今回は、WordPressのメニュー機能を使って、ヘッダーにナビゲーションメニューを実装し、各ページへスムーズに移動できるようにします。

テーマの初期設定

WordPressでメニュー機能を有効化するには functions.php で設定が必要です。

今回は、メニュー機能を有効化するついでに以下の機能も有効化しておきます。

  • タイトルタグの自動出力を有効化
  • アイキャッチ画像（サムネイル）を有効化
  • 固定ページで抜粋機能を有効化

機能ごとにファイルを分ける

WordPressテーマを開発する際、すべてのコードを functions.php に書いていくと、サイトの規模が大きくなるにつれてfunctions.phpが肥大化し、管理が困難になります。数百行、時には千行を超えるコードが1つのファイルに集約されると、特定の機能を探すだけでも一苦労です。

そこで、機能ごとにファイルを分けて管理する方法を採用します。例えば、テーマの初期設定、カスタム投稿タイプの登録、ショートコードの定義など、目的別にファイルを分割することで、コードの可読性と保守性が大幅に向上します。

今回は、テーマの初期設定（メニュー機能やアイキャッチ画像の有効化など）を担当する functions-theme-init.php を作成します。このファイルには、テーマが動作するために最初に必要な設定をまとめて記述します。

functions-theme-init.php

functions-theme-init.php
<?php
add_action('init', function() {

    // 外観メニューを有効化
    add_theme_support('menus');

    // タイトルタグの自動出力を有効化
    add_theme_support('title-tag');

    // アイキャッチ画像（サムネイル）を有効化
    add_theme_support('post-thumbnails');

    // 固定ページで抜粋機能を有効化
    add_post_type_support('page','excerpt');

});
PHP

functions.php

functions-theme-init.php は独立したファイルですが、WordPressが自動的に認識して読み込んでくれるわけではありません。WordPressが自動的に認識して読み込んでくれるのは functions.php だけです。

そのため、functions.php で機能ごとに分けたファイルを読み込む必要があります。

functions.php
<?php
require_once 'functions-theme-init.php';
PHP

この require_once により、functions-theme-init.php に記述した内容が functions.php に組み込まれ、WordPressに認識されるようになります。今後、他の機能を追加する際も、同様に functions.php で読み込むことで、機能を拡張していくことができます。

これで、ナビゲーションメニューをダッシュボードから作成できる準備ができました。

ナビゲーションメニューの設定

WordPressの管理画面からナビゲーションメニューを作成します。

メニューの作成手順

  1. 外観 → メニュー にアクセス
  2. 新しいメニューを作成
  3. メニュー名を「header-navi」（任意）とします
  4. HOME、ABOUT、MENU、BLOG、CONTACTを選択してメニューに追加をクリック
  5. メニューを保存をクリック
参考

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

WordPressテーマ開発における効率的なナビゲーション管理の実装方法を解説します。現在のHTMLでのメニュー記述から脱却し、WordPressの標準メニュー機能を活用することで、技術的知識のない管理者でも管理画面から直感的にメニューを編集できる環境を構築します。

ヘッダーにナビゲーションメニューを表示する

基本的な表示方法

header.php に以下のコードを追加することで、ナビゲーションメニューが表示されます。

header.php
<?php
wp_nav_menu('header-navi');
?>
PHP

ナビゲーションメニューを確認

ナビゲーションメニューがリスト形式で表示され、各ページに遷移できることを確認します。

続いて、ページのソースコードを確認してみましょう。実際に表示されるHTMLは以下のようになります。

（id 属性の値（menu-item-22 など）は、メニュー項目を作成した順序や環境によって異なります。あなたの環境では異なる数値が表示されるかもしれませんが、問題ありません。）

ページソースの抜粋
<div class="menu-header-navi-container">
  <ul id="menu-header-navi" class="menu">
    <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22">
      <a href="http://wpcafe.local/home/">HOME</a>
    </li>
    <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21">
      <a href="http://wpcafe.local/about/">ABOUT</a>
    </li>
    <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20">
      <a href="http://wpcafe.local/menu/">MENU</a>
    </li>
    <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19">
      <a href="http://wpcafe.local/blog/">BLOG</a>
    </li>
    <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18">
      <a href="http://wpcafe.local/contact/">CONTACT</a>
    </li>
  </ul>
</div>
HTML

課題

ナビゲーションメニューとしては機能しますが、以下の課題があります。

  • classが煩雑で管理しにくい
  • アイコンを追加するなどのカスタマイズが困難
  • デザインの自由度が低い

そこで、独自のコードでナビゲーションメニューを表示する方法を採用します。

独自のコードでナビゲーションメニューを表示

独自のコードでナビゲーションメニューを表示することで、ダッシュボードからメニューを変更できる保守性を保ちながら、自由度の高いデザインを適用できるようになります。

実装コード

header.php
<ul class="header-nav-list">
<?php
$menu_object = wp_get_nav_menu_object( 'header-navi' );
$menu_list = wp_get_nav_menu_items($menu_object->term_id);
foreach($menu_list as $menu_item) :
?>
  <li class="header_nav-list_item">
    <a class="nav-item-link" href="<?php echo $menu_item->url; ?>">
      <span class="nav-item_text"><?php echo $menu_item->title; ?></span>
    </a>
  </li>
<?php
endforeach;
?>
</ul><!-- header_nav-list -->
PHP

コードの解説

wp_get_nav_menu_object()

$menu_object = wp_get_nav_menu_object( 'header-navi' );

指定したメニュー名（ここでは 'header-navi'）のメニューオブジェクトを取得します。このオブジェクトには、メニューのID（term_id）やメニュー名などの情報が含まれています。

wp_get_nav_menu_items()

$menu_list = wp_get_nav_menu_items($menu_object->term_id);

取得したメニューオブジェクトの term_id を使って、メニューに登録されているすべてのメニュー項目を配列として取得します。

foreach でループ処理

foreach($menu_list as $menu_item) :

取得したメニュー項目を1つずつ処理します。各メニュー項目（$menu_item）には以下の情報が含まれています。

  • $menu_item->url：リンク先のURL
  • $menu_item->title：メニューに表示するテキスト

メリット

この方法のメリットは以下の通りです。

  1. HTML構造を自由に設計できる：ul/liだけでなく、navやdivなど任意のタグで構成でき、imgタグやアイコンフォントなども自由に追加できる
  2. CSSでのスタイリングが容易：自分で定義したclass名でスタイルを記述できる
  3. 保守性の維持：ダッシュボードからメニューの追加・削除・順序変更が可能

表示を確認する

それでは、実際にブラウザで表示を確認してみましょう。

各ページ（HOME、ABOUT、MENU、BLOG、CONTACT）にアクセスして、ナビゲーションメニューが正しく表示されているか確認してください。

現時点で見た目は、wp_nav_menuで表示したナビゲーションメニューと同じです。

ページのソースコードを確認

ブラウザで「ページのソースを表示」（右クリック → 「ページのソースを表示」または Ctrl+U）を開いて、HTMLを確認してみましょう。

以下のようなシンプルな構造になっているはずです。

ページソースの抜粋
<ul class="header-nav-list">
    <li class="header-nav-item">
        <a class="nav-item-link" href="http://wpcafe.local/home/">
            <span class="nav-item-text">HOME</span>
        </a>
    </li>
    <li class="header-nav-item">
        <a class="nav-item-link" href="http://wpcafe.local/about/">
            <span class="nav-item-text">ABOUT</span>
        </a>
    </li>
    <li class="header-nav-item">
        <a class="nav-item-link" href="http://wpcafe.local/menu/">
            <span class="nav-item-text">MENU</span>
        </a>
    </li>
    <li class="header-nav-item">
        <a class="nav-item-link" href="http://wpcafe.local/blog/">
            <span class="nav-item-text">BLOG</span>
        </a>
    </li>
    <li class="header-nav-item">
        <a class="nav-item-link" href="http://wpcafe.local/contact/">
            <span class="nav-item-text">CONTACT</span>
        </a>
    </li>
</ul><!--- header-navi-list -->
HTML

先ほどの wp_nav_menu() で出力されたHTMLと比べると、余計なclassやIDが付いていない、スッキリとした構造になっていることがわかります。そして自分で定義したclassだけが使われているため、CSSでのスタイリングやカスタマイズがしやすくなります。

今回のまとめ

今回は、WordPressのメニュー機能を使って、ナビゲーションメニューを実装しました。

実施したこと

  • functions.php でメニュー機能を有効化
  • 機能ごとにファイルを分けて管理
  • ダッシュボードからナビゲーションメニューを作成
  • 独自のコードでメニューを表示し、カスタマイズの自由度を向上

これで、各ページへのナビゲーションが整いました。

次回予告

次回は、ヘッダーにソーシャルメディアのリンクを実装します。ダッシュボードでSNSアカウント情報を管理し、それをテーマ側で取得してヘッダーに表示する方法を学びます。今回のナビゲーションメニューと同様に、管理画面から編集できる保守性の高い実装を目指します。

引き続き、実際に手を動かしながら進めていきましょう。サイトがどんどん形になっていく過程を楽しんでください。

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

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

この投稿をシェアする

コメントを残す

CAPTCHA


サイト構成とテンプレートの準備 – WordPress実践制作【WPCafe編】

サイト構成とテンプレートの準備 – WordPress実践制作【WPCafe編】  PRACTICE

サイトの骨組みとなるページ構成を整えます。固定ページを作成し、それぞれに対応するテンプレートファイルを準備。WordPressのテンプレート階層を活用して、各ページに専用テンプレートを割り当てる方法を学びます。

  • 2025/10/22
  • 0comments
  • 64views

SNS情報の管理と表示 – WordPress実践制作【WPCafe編】

SNS情報の管理と表示 – WordPress実践制作【WPCafe編】  PRACTICE

WordPressテーマ開発において、サイト全体で使用する共通情報（SNS、住所、連絡先など）を効率的に管理する方法を解説します。固定ページとカスタムフィールドを活用することで、無料で保守性の高いオプションページを実装し、簡単に情報を更新できる環境を構築します。

  • 2025/10/20
  • 0comments
  • 55views

STAY CONNECTED

wp-ch Admin

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

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

STORY｜ストーリー

WordPressを効率よく確実に学ぶためには、学習の順序が大切です。知識が自然に積み上がるよう、学習ステップに沿って記事を順番に並べています。

学習ストーリー第40話まで掲載中

全ストーリーを見る

PRACTICE｜カフェ編

カフェを題材にした本格的なサイト構築を公開中。実践を通してサイトの構築方法を学べます。

サンプルサイト：WPCafe

実践ストーリー第10話まで掲載中

全ストーリーを見る

SERIES｜シリーズ

CATEGORY｜分類

TAGS｜タグ

全てのタグを見る