menu

今までデフォルトの状態で使用していたメニューなのですが、検索エンジンに"ここはナビゲーションですよ"とお伝えすべくサイトナビゲーション用のitemtype「SiteNavigationElement」を埋め込んでみました。

マークアップの最終形

デフォルトの状態だと、コンテナやIDやクラスなどたくさんの情報(パラメータ)がナビゲーションにマークアップされています。
今回は、それも全部無くして、最終的にはこのような形に出力されます。

「SiteNavigationElement」というサイトナビゲーション用のitemtypeを実装する

では、実際にどうやってこれを実装するかというとカスタムウォーカークラスというのを利用します。

カスタムウォーカークラス(Walker_Nav_Menu)??

カスタムメニューにはたくさんのパラメータが用意されていますが、それでも思うようにカスタマイズできない場合にこのカスタムウォーカー機能を利用します。

より深い条件つきのクラスについてはカスタムウォーカー機能を使用する必要があります。
wp_nav_menu - Codex 日本語版

よりカスタマイズできる機能ということですね。

以下は公式からですが、サブメニューや、メニューの奇数/偶数などにいくつかの条件付きのクラスを追加する用例です。

これらを踏まえて実装していきます。

実装する

まずは、functions.phpに以下のように記載します。

次に、メニューを設置するところへ、以下のように記載します。

以上で設置完了です。

最初はパラメータでなんとかやってみようと思ったのですが、なかなかおもうようにならず諦めかけたところに以下のサイトに出会いました。とても参考になりました。
ありがとうございます。


ものすごく柔軟にカスタムできるカスタムウォーカー機能。HTML構造をがらりと変更したい場合はパラメータを変更していくより断然使いやすいとおもいました。

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る