ワードプレスのメニューのデザインは、ほとんどテーマに依存しますよね。

なので、カスタマイズする場面は、あまりないのかもしれません。

でも、業務のサイトを作り時には、テーマに依存しなかったり、ユーザーさんの要望があったりして、

結構メニューのカスタマイズの需要が出ることがあります。

メニューのカスタマイズ

テーマにくっついてるメニューは、基本的に触れません。いや、触れるけど、かなり苦労する。

ワードプレスのメニューは、設定されていないクラスがぶら下がっていますので、吐き出されたHTMLのソースコードを確認して、そのクラスに対して、新しい属性を設定してあげればいいわけです。

ワードプレスのメニューを貼り付ける

カスタマイズメニューのひな形は、これを使います。

<?php<br />$defaults = array(<br /> 'menu' => ",<br /> 'menu_class' => 'menu',<br /> 'menu_id' => '{メニューのスラッグ}-{連番}',<br /> 'container' => 'div',<br /> 'container_class' => 'menu-{メニューのスラッグ}-container',<br /> 'container_id' => ",<br /> 'fallback_cb' => 'wp_page_menu',<br /> 'before' => ",<br /> 'after' => ",<br /> 'link_before' => ",<br /> 'link_after' => ",<br /> 'echo' => true,<br /> 'depth' => 0,<br /> 'walker' => ",<br /> 'theme_location' => ",<br /> 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',<br />);<br />?><br /><span id="sidebarwidjet"><?php wp_nav_menu( $defaults ); ?></span><br />

menu:ターゲットのメニューのID か スラッグ もしくはメニュー名
menu_class:メニューを構成する ul 要素に適用するCSS クラス名
menu_id:メニューを構成する ul 要素に適用するID
container:ul をラップするタグ ( div , nav , もしくはなし(=false)
container_class:コンテナに適用されるクラス名
container_id:コンテナに適用されるID
fallback_cb:メニューが存在しない場合にコールバック関数を呼び出す
before:リンクテキストの前のテキスト
after:リンクテキストの後のテキスト
link_beforeリンクの前のテキスト
link_after:リンクの後のテキスト
echo:メニューをHTML出力する(true)か、PHPの値で返す(false)か
depth:何階層まで表示するか。0 は全階層。
walker:使用するカスタムウォーカーオブジェクト (高度すぎるのでパスwww)
theme_location:テーマの中で使われる位置。register_nav_menu()
items_wrap:
　 %1$s：’menu_id’
　 %2$s：’menu_class’
　 %3$s：リスト項目
　 初期値： &kt;ul id=”%1$s” class=”%2$s”>%3$s</ul>


ねらい目は、link_before , link_after。

リスト項目は、デフォルトでは、こんな感じで吐き出されます。
(container class=(container_class))<br /><ul class="menu" id=(container_id)><br /> <li class="・・・"><br /> <a href="・・・" class="・・・"> ・・・ </a><br /> </li><br /> <ul class="sub-menu"><br /> <li class="・・・"><br />(link_before )<br /> <a href="・・・" class="・・・">(before) ・・・ (after)</a><br />(link_after)<br /> </li><br /> </ul><br /></ul><br />

link_before , link_after を使って リンク部分を div でくくることでリンクテキスト部分のデザインをカスタマイズできます。

<?php<br />$defaults = array(<br /> 'menu' => 'Menu 2 side',<br /> 'menu_class' => 'menu',<br /> 'menu_id' => ",<br /> 'container' => ",<br /> 'container_class' => ",<br /> 'container_id' => ",<br /> 'fallback_cb' => 'wp_page_menu',<br /> 'before' => ",<br /> 'after' => ",<br /> 'link_before' => '<div class="papa">',<br /> 'link_after' => '</div>',<br /> 'echo' => true,<br /> 'depth' => 0,<br /> 'walker' => ",<br /> 'theme_location' => ",<br /> 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',<br />);<br />?><br /><span id="sidebarwidjet"><?php wp_nav_menu( $defaults ); ?></span><br /><br /><br /><style><br />#menu-menu-2-side.menu .papa:link{<br /> color:#2a8e84;<br />}<br />#menu-menu-2-side.menu .papa:visited{<br /> color:#2a8e84;<br />}<br />#menu-menu-2-side.menu .papa:hover{<br /> color:#fff;<br /> background-color:#2a8e84;<br /> text-decoration:none;<br />}<br />a:-webkit-any-link{<br /> text-decoration:none;<br />}<br />#menu-menu-2-side.menu .papa:active{<br /> color:#2a8e84;<br />}<br /><br />#menu-menu-2-side.menu .papa{<br /> font-size:14px;<br /> color:#2a8e84;<br /> margin:10px 0;<br /> padding:14px 10px;<br /> border:1px solid #2a8e84;<br />}<br />#menu-menu-2-side.menu .papa::before {<br /> font-family: dashicons;<br /> content: '\f345';<br />}<br /><br />#menu-menu-2-side ul.sub-menu .papa{<br /> margin:5px 0;<br /> padding:0px 10px;<br /> border:none;<br />}<br />ul#menu-menu-2-side.menu{<br /> list-style-type:none !important;<br /> -webkit-padding-start: 0px;<br />}<br />#menu-menu-2-side ul.sub-menu{<br /> list-style-type:none;<br /> -webkit-padding-start: 20px;<br />}<br /></style><br />

形ができてしまえば、あとは クラスを使ってデザインをいじれるってことになりますね。