You are here: Home » php » wordpressのカスタムメニューwp_nav_menuの使い方

wordpressのカスタムメニューwp_nav_menuの使い方

sunset

wp_nav_menuカスタムメニュー(ただのグローバルメニューと考えるとわかりやすかも)を表示する際に使用するwordressテンプレートタグです。

使用するにはまずfunctions.phpに

これを記述、することでダッシュボードの外観にメニューの項目が追加されます。

add_theme_support'();とはwordpressの機能の使用を許可する機能です。これをfunctions.phpに記述すると許可したことになります。パラメータの menus とはつまりカスタムメニューの使用を許可するということです。

 

ブラウザに反映させる場合は

これを任意のファイルに記述すると、記述した場所に応じてメニューが表示されます。

スポンサーリンク

wp_nav_menuのパラメータ

結構パラメータがあるのですが、よく使うのは以下の三つだと思います。

‘container’ => ”,

メニューですので、divかnavで囲うか指定します。初期値はdivです。何にも囲わない場合false指定します。
‘container_class’ => ”,

囲うメニューに適用されるクラス名です。クラス名ですので、’container_class’ => ‘hed clearfix’, など連続指定できます。

‘container_id’ => ”, でid指定できますが、あんまりメリットがないのか使う事はないかも?
‘theme_location’ => ”,

theme_locationsはほとんど場合、複数のカスタムメニューを使用するときに使います。

‘theme_location’ => ‘Project Nav’, の部分でメニューを指定することで、任意でメニューを切り替えたりできます。

そのかわり、register_nav_menus()でカスタムメニューを登録する必要があります。

カスタムメニューの作り方はほかにもあり、register_nav_menus、register_nav_menuを使った方法があります。

 

wp_nav_menuにclassとidがくっついてくる

これも、wordpressではあたりまえなのですが、wordpressのコアファイルでhtmlがあらかじめ用意されていてそれにclassとidも付加されてテンプレートタグに応じて呼び出される感じです。

大体こんな感じのclassとidが付いてきます。長いclass名とかはあんまり気持ちいいものではないので、これを消します。

 

functions.phpに以下を記述する。(気にならなけばこの記述はしなくてもよいとおもいます。)

すると

こんな感じですっきりします。

 

サブタイトル付きメニュを作る

簡単なことなのですが、メニューの属性タイトルをそのまま表示する感じです。

この記述でタイトル属性に書いた文言がそのままブラウザに反映されます。

スポンサーリンク

忘れがちな表示オプションで簡単に便利に

wordpressには便利な機能が最初から付加されています。それが、画面上部にある表示オプションです。メニュー項目の場合以下の設定があります。

menu-2

これに加え、メニューページの表示オプションでcssクラスのチェックを外すと

menu-4

固定ページ、投稿ページ、タイトル属性とcssクラスなどは基本的に必須だとおもいますが、他は任意でチェックをいれておきましょう。

注意点として、上記で書いたclassとidを消す記述をするとcssクラスにいくらクラス名を書いても反映されません。

codex wp nav menu

スポンサーリンク

コメントを残す