【こんなんできるん！？】WordPressのナビメニューをがっつりカスタマイズしてみた

どうも、クワガタムシの季節やからと、勤務終了後に採集に行くかわゐです。

いつもの採集ではミヤマクワガタを中心に狙っていますが、今年は小学生の頃から夢だったオオクワガタの採集を行います。

いやぁ〜ミヤマもええんやけど、やっぱオオクワやで。え？何がええかって？それはやでな…

…こんな感じでクワガタムシの話をすると3時間くらいは余裕で語れるので、ここらでやめときます。笑

さて今回は、WordPress（PHP）のナビメニューについてまとめました。

WordPressのナビメニューは、function.phpで呼び出したときにデフォルトのクラスやらIDやらでごちゃごちゃしたものになっています。

もちろん標準装備でも問題なく見た目を調整することができるし、そのまま進めるケースもあります。

しかし、今回はこのナビメニューをカスタマイズする機会に出くわしました。

「こんなこともできるんか…」って感じで自分自身も驚いたので、忘備録としておきます。

ということで、いってみよ～

…天然のオオクワはマジでええで～…w

WordPressのナビメニューをカスタマイズしてみた

それでは具体的に、WordPressのナビメニューをカスタマイズした方法などをご紹介します。

カスタマイズしたコードのご紹介

まずは functions.php にこんな感じで記載します。

class custom_header extends Walker_Nav_Menu {
　function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
　　if($depth == 0){
　　　　$output .= '<li class="header_list"><a href="'.$item->url.'" class="header_list_link">'.$item->title.'</a>';
　　　} else {
　　　　$output .= '<li><a href="'.$item->url.'">'.$item->title.'</a>';
　　　}
　　}
}

難しそうですが、要するに「ナビの第一階層はこれで、他はこうしてね～」

みたいな処理を書いています。

elseifで他の階層の処理もできるかもですね（実際やって確認してないのでこういう書き方にしています。多分できると思いますが…笑）。

あとは、header.phpなりfooter.phpなりでカスタマイズしたコードが出力されるようにすればイチコロ。

この場合はheaderに関するメニューだったので、header.phpに記載しました。

<?php wp_nav_menu(
　array(
　　'container' => false,
　　'menu'  => 'header',
　　'menu_class' => 'header_item',
　　'walker'  => new custom_header
　　)
　);
?>

array 内の最後の行に、’walker’ なるものが存在します。これがナビメニューをカスタマイズするときに必要なコード。

これらナビをカスタマイズするときに使うのが、「カスタムウォーカー」です。

ちなみに、カスタムウォーカーは複数設定ができます。複数使う場合は、functions.phpのclassを置き換えましょう。

もっと細かいこともできるので、「カスタムウォーカー メニュー追加」みたいな検索をしてみてください。

WordPressのナビメニューも細かくカスタマイズできる！

短めですが、今回はWordPress（PHP）のナビメニューについてまとめました。

カスタムウォーカーはあまり聞きなれない実装だと思いますが、かゆいところに手が届く便利なものです。

標準装備ではうまくできないときや、クラスを自分が設定したものに変えたいときなど、汎用性は割とあるように思います。

覚えていて損はないので、機会があれば使ってみてください。

ということで、最後までご覧いただきましてありがとうございました！

この記事で、よりよいコーディングライフが送れたら嬉しく思います。

【参考記事】

クラスリファレンス/Walker｜WordPress Codex 日本語版

メニュータグ wp_nav_menu をカスタマイズして第一階層のメニューのリンクテキストをhタグで囲う｜100ウェブ

[WordPress]カスタムメニュー機能の設定と設置と書き出されるソースコードを分かりやすく紹介します｜Olein Design

グローバルナビゲーションをカスタマイズする[WP]｜ミフネWEB