メシのタネ

Webプログラミング 備忘録

  • DOMをPHPで操作できたらいいよね

    そうだよね。そう思うよね。JavaScriptでやると、画面がガタついたりするもんね。そうならないようにする方法もあるかもしれないけど、僕はできませんので、サーバー側でなんとかできたらええなぁと思って挑戦したけど、できませんでしたよ。PHP標準でHTMLをDOMにできるらしい今、技[...]

    続きを読む
  • 設計書ってなんで書くの?

    設計書をなぜ書くのかから始めてかれこれ3年近くこの禅問答をやっているわけですが、いまだに答えは出ません。ただ、その禅問答をやる中で設計書に対する取り組み方は大きく変わったので、その一部でも書いていきたい。基本設計はとにもかくにも必要だと思う設計書はいらぬ!という話をよく聞くし、自分[...]

    続きを読む
  • 書ききってやる。

    久々に書いてみる。久々に文章を書くということをやってみようと思う。伝える作業を観察したいと思ったからそうしたいと考えた。情緒的な文章は基本的にゴミ箱にぽいしてきましたが、情緒的なのも自分だと思う。「文章をかくという作業は、とりもなおさず自分と自分をとりまく事物との距離を確認すること[...]

    続きを読む
  • 普通の会社で2年普通に働いて思う事

    えらい寒くなりました。文句言いながらも現職を続けて2017年12月1日にめでたく2年がたちました。分かりやすいが乱暴に言えばITドカタと呼ばれる業界に入って案件のヒエラルキーの無慈悲さを痛感しながらも、それでもしょうがないと頑張る人たちに心を打たれながら「じゃあ俺も」と頑張れない自分に挫折して、とあ[...]

    続きを読む
  • jQueryUiのDatepicker利用時にminDate設定するとバグる件

    題名の通りなんですが、DatepickerでminDate使うとバグります。また後でキャプチャ見て貰いますけど、灰色の部分が、minDateで設定した日付が反復して出るようになるんですね。こういうの気が付かない人がいるかも知れませんが、ChoromeでminDate設定してる人は気にしてみてくだ[...]

    続きを読む

カスタムメニューを自由にカスタマイズしたい人向け

wpppppppp
WordPressのカスタムメニューのHTML構造をある程度自由にしたい人向けの記事を今日は書こうと思います。wp_nav_menuって設定値が多いので、初心者には超便利な反面フレームワーク使うような人たちになると迷惑な場合があります。カスタムメニューに設定値で検索したデータくれればこっちでなんとかするってばって思うんですけど、どうやらそれっぽい関数を僕は見つける事ができませんでした。とりあえずwp_nav_menuの項をCODEXをなになに~と読んでみると、カスタムウォーカー機能なるものが存在すると書いてあります。とりあえずこれは何かとか、使い方についてできるだけ説明しようと思います。

自分好みのHTML構造でカスタムメニューが作れる

カスタムウォーカークラスが何か分かりませんが、とりあえずこのクラスを継承して、start_lvlメソッドとstart_elメソッドを編集すれば、好きな構造でカスタムメニューのHTMLを生成できます。

使い方

functions.phpなりなんなりに、どーんとコピペします。

</p>
<p>class クラス名は何でもいい extends Walker_Nav_Menu {</p>
<p>// add classes to ul sub-menus<br />
function start_lvl( &amp;$output, $depth ) {<br />
    // depth dependent classes<br />
    $indent = ( $depth &gt; 0  ? str_repeat( &quot;\t&quot;, $depth ) : '' ); // code indent<br />
    $display_depth = ( $depth + 1); // because it counts the first submenu as 0<br />
    $classes = array(<br />
        'sub-menu',<br />
        ( $display_depth % 2  ? 'menu-odd' : 'menu-even' ),<br />
        ( $display_depth &gt;=2 ? 'sub-sub-menu' : '' ),<br />
        'menu-depth-' . $display_depth<br />
        );<br />
    $class_names = implode( ' ', $classes );</p>
<p>    // build html<br />
    $output .= &quot;\n&quot; . $indent . '&lt;ul class=&quot;' . $class_names . '&quot;&gt;' . &quot;\n&quot;;<br />
}</p>
<p>// add main/sub classes to li's and links<br />
function start_el( &amp;$output, $item, $depth, $args ) {<br />
    global $wp_query;<br />
    $indent = ( $depth &gt; 0 ? str_repeat( &quot;\t&quot;, $depth ) : '' ); // code indent</p>
<p>    // depth dependent classes<br />
    $depth_classes = array(<br />
        ( $depth == 0 ? 'main-menu-item' : 'sub-menu-item' ),<br />
        ( $depth &gt;=2 ? 'sub-sub-menu-item' : '' ),<br />
        ( $depth % 2 ? 'menu-item-odd' : 'menu-item-even' ),<br />
        'menu-item-depth-' . $depth<br />
    );<br />
    $depth_class_names = esc_attr( implode( ' ', $depth_classes ) );</p>
<p>    // passed classes<br />
    $classes = empty( $item-&gt;classes ) ? array() : (array) $item-&gt;classes;<br />
    $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );</p>
<p>    // build html<br />
    $output .= $indent . '&lt;li id=&quot;nav-menu-item-'. $item-&gt;ID . '&quot; class=&quot;' . $depth_class_names . ' ' . $class_names . '&quot;&gt;';</p>
<p>    // link attributes<br />
    $attributes  = ! empty( $item-&gt;attr_title ) ? ' title=&quot;'  . esc_attr( $item-&gt;attr_title ) .'&quot;' : '';<br />
    $attributes .= ! empty( $item-&gt;target )    ? ' target=&quot;' . esc_attr( $item-&gt;target    ) .'&quot;' : '';<br />
    $attributes .= ! empty( $item-&gt;xfn )        ? ' rel=&quot;'    . esc_attr( $item-&gt;xfn        ) .'&quot;' : '';<br />
    $attributes .= ! empty( $item-&gt;url )        ? ' href=&quot;'  . esc_attr( $item-&gt;url        ) .'&quot;' : '';<br />
    $attributes .= ' class=&quot;menu-link ' . ( $depth &gt; 0 ? 'sub-menu-link' : 'main-menu-link' ) . '&quot;';</p>
<p>    $item_output = sprintf( '%1$s&lt;a%2$s&gt;%3$s%4$s%5$s&lt;/a&gt;%6$s',<br />
        $args-&gt;before,<br />
        $attributes,<br />
        $args-&gt;link_before,<br />
        apply_filters( 'the_title', $item-&gt;title, $item-&gt;ID ),<br />
        $args-&gt;link_after,<br />
        $args-&gt;after<br />
    );</p>
<p>    // build html<br />
    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );<br />
}<br />
}</p>
<p>

wp_nav_menuの引数にwalker => new 継承したクラス名を入れてやると、クラスが呼べます。

<br />
     wp_nav_menu(<br />
          array('walker' =&gt; new クラス名は何でもいい())<br />
     );<br />

さっき作ったクラスを編集して自分なりのHTMLを作れます。とりあえず、自分は、ulタグとliタグを削除して、aタグに特定のクラスを付けたかったので、

</p>
<p>class mainmenunav extends Walker_Nav_Menu {</p>
<p>     function start_lvl( &amp;$output, $depth ) {</p>
<p>         //ラッパーのDivとかulとかnavの設定用メソッド</p>
<p>          //入れ子関係を判断して付けるulにつけるクラスを変えてるのではないかと。<br />
         $indent = ( $depth &gt; 0  ? str_repeat( &quot;\t&quot;, $depth ) : '' ); // code indent<br />
         $display_depth = ( $depth + 1); // because it counts the first submenu as 0<br />
         $classes = array(<br />
             'sub-menu',<br />
             ( $display_depth % 2  ? 'menu-odd' : 'menu-even' ),<br />
             ( $display_depth &gt;=2 ? 'sub-sub-menu' : '' ),<br />
             'menu-depth-' . $display_depth<br />
             );<br />
         $class_names = implode( ' ', $classes );</p>
<p>         //ラッパーが必要な場合ここはコメントアウトしてはいけない。</p>
<p>          //$output .= &quot;\n&quot; . $indent . '&lt;ul class=&quot;' . $class_names . '&quot;&gt;' . &quot;\n&quot;;</p>
<p>     }</p>
<p>     function start_el( &amp;$output, $item, $depth, $args ) {</p>
<p>         global $wp_query;<br />
         $indent = ( $depth &gt; 0 ? str_repeat( &quot;\t&quot;, $depth ) : '' );</p>
<p>         // メニューの入れ子関係のフラグ付けプログラム<br />
         $depth_classes = array(<br />
             ( $depth == 0 ? 'main-menu-item' : 'sub-menu-item' ),<br />
             ( $depth &gt;=2 ? 'sub-sub-menu-item' : '' ),<br />
             ( $depth % 2 ? 'menu-item-odd' : 'menu-item-even' ),<br />
             'menu-item-depth-' . $depth<br />
         );<br />
         $depth_class_names = esc_attr( implode( ' ', $depth_classes ) );</p>
<p>         // liタグにつけるクラス生成用プログラムじゃないかな<br />
         $classes = empty( $item-&gt;classes ) ? array() : (array) $item-&gt;classes;<br />
         $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );</p>
<p>         // ここでリストがつく</p>
<p>         //     $output .= $indent . '&lt;li id=&quot;nav-menu-item-'. $item-&gt;ID . '&quot; class=&quot;' . $depth_class_names . ' ' . $class_names . '&quot;&gt;';</p>
<p>         // Aタグの属性設定<br />
         $attributes  = ! empty( $item-&gt;attr_title ) ? ' title=&quot;'  . esc_attr( $item-&gt;attr_title ) .'&quot;' : '';<br />
         $attributes .= ! empty( $item-&gt;target )     ? ' target=&quot;' . esc_attr( $item-&gt;target     ) .'&quot;' : '';<br />
         $attributes .= ! empty( $item-&gt;xfn )        ? ' rel=&quot;'    . esc_attr( $item-&gt;xfn        ) .'&quot;' : '';<br />
         $attributes .= ! empty( $item-&gt;url )        ? ' href=&quot;'   . esc_attr( $item-&gt;url        ) .'&quot;' : '';<br />
         $attributes .= ' class=&quot; btn btn-dark btn-small ' . ( $depth &gt; 0 ? 'sub-menu-link' : 'main-menu-link' ) . '&quot;';</p>
<p>         $item_output = sprintf( '%1$s&lt;a%2$s&gt;%3$s%4$s%5$s&lt;/a&gt;%6$s',<br />
             $args-&gt;before,<br />
             $attributes,<br />
             $args-&gt;link_before,<br />
             apply_filters( 'the_title', $item-&gt;title, $item-&gt;ID ),<br />
             $args-&gt;link_after,<br />
             $args-&gt;after<br />
         );</p>
<p>         //item_output = 表示されるAタグ<br />
         //item = 表示されるデータの原型<br />
         //depth = 入れ子になってるかどうかのフラグ<br />
         //args = クエリの元だと思う。正直分からん。</p>
<p>         $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );<br />
     }<br />
}</p>
<p>

こーんな感じで書きました。
とりあえず自分の推測ですが、コメントも書いておいたので、WordPressのカスタムメニューを何とかしたい人は参考にしてみてください。

関連記事

コメントをお待ちしております