2026年7月20日

WordPressのテーマでカスタムウォーカーを使う方法

テーマ・デザイン

はじめに

カスタムウォーカーは、WordPressのナビゲーションメニューやカテゴリーなどのリストを高度にカスタマイズするための重要なツールです。この記事では、カスタムウォーカーを使用して既存のテンプレートタグを拡張し、独自のHTML構造を作成する方法を紹介します。

症状・背景

このテーマが必要になる主な場面:

ナビゲーションメニューにCSSクラスやIDを追加したい場合
特定の階層を持つカテゴリーをリスト表示したい場合
カスタム投稿タイプのアーカイブページでカスタムHTML構造を作成する必要がある場合

手順・設定方法

ステップ1: ファイルを編集する

カスタムウォーカーを使用するには、まずテーマディレクトリに新しいPHPファイルを作成します。ここではnav-menu-walker.phpと名付けます。

# テーマのディレクトリに移動
cd wp-content/themes/your-theme/

# 新しいPHPファイルを追加
touch nav-menu-walker.php

# カスタムウォーカークラスを作成
echo "<?php class Custom_Nav_Menu_Walker extends Walker_Nav_Menu {}" > nav-menu-walker.php

ステップ2: カスタムウォーカークラスを拡張する

次に、カスタムウォーカークラスの機能を拡張します。ここでは、start_el()メソッドをオーバーライドして、各メニュー項目に対するカスタムHTMLを生成します。

# クラスファイルを開き、start_el() メソッドを追加・編集する
nano nav-menu-walker.php

# start_el() メソッドを次のコードで上書き
echo 'public function start_el( \$output, \$item, \$depth = 0, \$args = array(), \$id = 0 ) {
    // カスタムCSSクラスを追加
    if ( isset(\$args->walker->tree_type) && \$args->walker->tree_type == "custom-post-type" )
        \$class_names = "menu-item custom-post-type-class";
    
    // メニュー項目のHTML生成
    \$output .= "\n<li class=\"".$class_names."\">";
    \$attributes  = ! empty( \$item->attr_title ) ? ' title="'  . esc_attr( \$item->attr_title ) .'"' : '';
    \$attributes .= ! empty( \$item->target )     ? ' target="' . esc_attr( \$item->target     ) .'"' : '';
    \$attributes .= ! empty( \$item->xfn )        ? ' rel="'    . esc_attr( \$item->xfn        ) .'"' : '';
    \$attributes .= ! empty( \$item->url )        ? ' href="'   . esc_url( \$item->url        ) .'"' : '';

    // カスタムデータを挿入
    if ( ! empty( \$item->description ) )
        \$output .= '<div class="menu-item-description">'.esc_html( \$item->description ).'</div>';
    
    \$output .= apply_filters( 'walker_nav_menu_start_el', \$output, \$item, \$depth, \$args );
}

'

ステップ3: カスタムウォーカークラスを呼び出す

最後に、テーマ内のナビゲーションメニューのテンプレートファイル（通常はheader.phpやnav-menu-template.php）でカスタムウォーカークラスを使用します。

# ナビゲーションメニューテンプレートを開く
nano wp-content/themes/your-theme/header.php

# wp_nav_menu() 関数内でカスタムウォーカーを指定
echo 'wp_nav_menu( array(
    "theme_location" => "primary",
    "container_class" => "",
    "menu_class"      => "",
    "depth"           => 0,
    "walker"          => new Custom_Nav_Menu_Walker()
) );'

ステップ4: カスタムウォーカーの動作確認

カスタムウォーカーを使用したナビゲーションメニューが適切に表示されていることを確認します。必要に応じて、ブラウザを開き、サイトをチェックしてください。

# ローカル開発環境またはライブサーバーで更新を反映させる
cd wp-content/themes/your-theme/
git add .
git commit -m "Add custom walker class for navigation menu"
git push origin main

# ブラウザでサイトを開き、ナビゲーションメニューのカスタム表示を確認する
open http://localhost:8888/your-site/

注意事項

カスタムウォーカークラスは、既存のWordPress機能に依存しているため、必ず最新版を使用すること。
任意のHTMLやCSSの変更を行う際には、バグが発生しないよう十分なテストを実施してください。
セキュリティ上の注意: ウォーカークラス内でユーザー生成データを使用する場合は、必ず適切にエスケープ処理を行ってください。
パフォーマンス/運用上の注意: カスタムウォーカーは通常のテンプレートタグよりもCPU負荷が高くなるため、過度な使用を避けてください。

まとめ

1. カスタムCSSクラス: カスタムウォーカーを使用して各メニュー項目に独自のCSSクラスを追加できます。

2. データ属性の設定: メニュー項目ごとに個別のデータ属性を定義し、JavaScriptとの連携が可能になります。

3. 階層構造のカスタマイズ: ウォーカーを使用してナビゲーションメニューの階層構造を自由に制御できます。

4. 特定ページへのリンク追加: 特定のページや投稿タイプを対象としたカスタムHTML要素を作成できます。

5. セキュリティとパフォーマンス: 必ず適切なエスケープ処理を行い、必要に応じてカスタムウォーカーの使用頻度を調整します。

Post Views: 1