Blog

ブログ

【こんなんできるん!?】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

かわゐ
ライター:

かわゐ

Webサイトのコーディングとフロントエンドをメインで行っています。クワガタムシのサイトを作りたいという理由だけでコーディングを始めましたがハマってしまい、今に至ります。デザイン通り+αの「遊び」を入れたコーディングができるよう、日々精進中。ちなみに好きなクワガタムシはその時々によって変わりますが、今は「マンディブラリスフタマタクワガタ」です。