実は簡単なナビメニューの編集方法! 参照ページが少ないだけでそれほど難しくない。

ナビメニューって大体ドロップダウン式で並んでいて、親アイテムをホバーしたりクリックしたりすると、子アイテムが表示されるようになっていますよね。

テーマ「ShapeShifter」でもそういった初歩的なドロップダウン式のメニューを使用しているんですが、凝ったデザインだとナビメニューに説明を加えられていたり、サムネイルも同時に出力したポップアップだったり、と結構通常の出力とは異なったものを出力しています。

で、最近テーマ「ShapeShifter」でもちょっと凝ったものを作れるように、というよりはカスタマイズ出来るようにしようと思い、ナビメニューに着手し始めています。

今までしていなかったのは、僕がCSSだけでドロップダウンメニューをデザインするのが苦手だったからですが、まぁワードプレスのコードを使ってHTMLを編集するくらいは案外簡単にできてしまうんです。

ただ、ナビメニューは参照ページが少ないのか、あまりカスタマイズの方法が載っているページが見つからない気がしますので、ちょっと簡単に設定項目の追加・保存、また出力するナビメニューの編集方法について紹介してみようと思います。

 

Walkerクラスについて

ナビメニューの編集にはワードプレスに用意されているクラス「Walker」が付き纏いますので、簡単な解説を先にしておきます。

既に知っていると簡単に理解できると思いますし、知らない人は「階層有りのアイテムのHTMLを出力するクラス」だったり、「アイテム毎、階層毎に出力するラッパーなどを編集できるクラス」などと覚えておくと良いかもしれません。

例えば、ナビメニュー用のウォーカークラスには、階層の初めに「<ul class=”sub-menu”> ~~~ 」後に「</ul>」、アイテムの初めに「<li class=~~~~”> ~~~ Menu Link Item HTML ~~~ 」後に「</li>」といった感じで出力されるような、メソッドが用意されています。

これらのクラスを引き継いで、メソッドを編集することで簡単に編集でき、実はこれは管理画面の「メニュー」ページでも、公開側で使用される関数「wp_nav_menu」の引数でも使われています。

このクラスの編集方法を知っていれば、階層を持つアイテムをカスタマイズすることが可能になりますので、覚えておいて損はないと思います。

 

関数「wp_nav_menu」で出力されるナビメニューを編集

恐らくどのテーマにも使われていると思いますが、ナビメニューのHTMLを出力・取得することができる関数「wp_nav_menu」は、カスタマイズを試みたことがある人なら一度は触ったことがあると思います。

大きく分けると2種類方法があります。Walkerクラスを作成して指定し直す方法フィルターフックを使う方法です。

フィルターフックの方が簡単そうに見えますが、フィルターフックもWalkerクラス内に用意されているものですから、先にWalkerクラスを編集する方法を紹介すると同時に、どの部分にフィルターがかけられているかを見ておくと編集しやすいので、Walkerクラスから紹介していきます。

 

継承クラスの作成

ただ、実際はナビメニューのIDを指定する以外に、ラッパーとなるHTML、クラス、出力の有無を指定したりできますが、引数となる連想配列のキー「walker」を指定することが出来ます。これは上記したWalkerクラスのことです。これを指定しない場合、デフォルトでワードプレスが用意している「Walker_Nav_Menu」というクラスが使われることになります。

ええ、ですので、これを継承したクラスを作成し、部分的に編集してやれば、思い通りのナビメニューを作成することが可能になりますので、部分改造だけでも試みてください。

まず「class/walker-nav-menu.php」など何でも構いませんので、PHPのファイルを作成してインクルードします。

後は以下のようにコーディングします。

長々と書いていますが、基本的には親クラス「Walker_Nav_Menu」をコピーしていますので殆ど編集はしていません。

階層の最初と最後に「DIV」タグを追加して、各フィルターフック名に「shapeshifter_」とプレフィックスを付けた程度です。

また、Walkerクラスごとメリットは、任意の箇所にフィルターを掛けることが出来ますし、階層やアイテム毎に細かい編集も可能ですから、HTMLを丸ごと一新できてしまうんですよ。ええ、各アイテムがページのIDも持っていますから、そこからメタデータやサムネイルを引っ張ってくることも可能なんです。

あとは出力する際に以下のようにして「wp_nav_menu」を使うだけです。

意外と簡単だと思います。

 

ちょっとした工夫

まぁ単純にウォーカークラスを指定するよりは、関数やメソッドでWalkerクラスのインスタンスを取得できるようにしておくと、テーマカスタマイザーなどの設定で、条件を付けて適用するWalkerクラスを切り替えることも可能です。

複数のナビメニューを使用する場合などもそうで、デザインを変えたい場合はそれ毎にWalkerクラスを作成して引数に使用することで、自由自在にナビメニューを編集することが出来るんですよ。

また、ちょっとしたアイテム内の部分編集でしたら、Walkerクラス内のフィルターフックを使って編集できますので、一度試してみてはどうでしょうか?

 

「メニュー」ページでアイテムの設定項目を追加

次はオプションで管理画面で設定項目の追加方法です。

実はこれはちょっと厄介で、何故かアイテムのフォーム内にアクションフックが用意されていませんから、自分でアイテムを出力するWalkerクラスを用意する必要があります。ええ、さっき上で紹介したようなことをします。

 

カスタムWalkerクラスを指定

まず、最初の問題はどのようにして編集するかです。

当たり前の話なんですが、ワードプレスにはウィジェットなりメタボックスなり、アクションフックやフィルターフックでフォームの後に出力することも結構簡単に出来るものが多いのですが、ナビメニューには現状(4.6.1)それがありません。

ただ、コアのコードを見てみると、ナビメニューに使用するWalkerクラス名がフィルター適応されていますので、これを使ってWalkerクラス名を切り替えることが可能なんです。

フィルターフック名は「wp_edit_nav_menu_walker」で、クラス名とメニューIDを受け取れますので、

こういう形でカスタムWalkerクラス名を指定することが出来ます。

 

Walkerクラスを作成

「メニュー」ページでアイテムの編集用設定フォームを編集するために使われる、ワードプレスが用意しているWalkerクラスが「Walker_Nav_Menu_Edit」というんですが、このクラスを継承して、オリジナルのカスタムWalkerクラスを作成したいのに、そのままやっても定義されていない事になっています。

何故?

実はこのクラスを定義しているファイルは、通常ワードプレスのページを読み込んだ際には読まれない様になっていて、AJAXで読まれる時にインクルードされるようになっているんですよ。

ただ、まぁ「Walker_Nav_Menu_Edit」は「Walker_Nav_Menu」の継承クラスですので、そちらを継承して「Walker_Nav_Menu_Edit」のメソッドをコピペしてしまうのが楽だと思います。

 

何を追加したかというと、通常の設定フォームをコピペして、設定項目の最後にアクションフックを1つ追加しています。「your_nav_menu_item_edit」というやつです。

あとはこれにフックさせてINPUTタグなどを出力させてやればOKです。

と言った感じで追加したい設定項目を追加すれば良いんじゃないでしょうか?

 

データの保存

データの保存にはアクションフック「wp_update_nav_menu_item」を使用します。

受け取れるデータは「メニューID」「メニューアイテムのデータベースID」「その他のデータ(連想配列)」です。

実は、というか知っているかもしれませんが、メニューは投稿タイプの1つですので、条件を付けて追加した設定項目のデータの保存を「update_post_meta」で行うだけです。

めちゃ簡単に書きましたが、ノンスなどのチェックもしておいた方が良いかもしれません。

 

最後に

コードはあくまで参考用に書いたものですのでコードエラーが出るかもしれませんが、編集方法の概要は掴めたんじゃないでしょうか?

ええ、メニューアイテムに追加したメタデータは出力する際も使えますので、これを使えばサムネイルではなく、メニューのアイテム用にイメージを個別に設定したり、アイコンを設定したり、様々なオプション機能を付け加えることが出来ます。

テーマ「ShapeShifter」ではプラグイン側を編集する予定ですが、デザイン案が皆無な上、僕がスタイル下手なので時間がかかると思います。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

メニュ
ホーム
トップへ