前提・実現したいこと
WordPressのカスタムメニュー機能を使ってナビゲージョンをつくっております。ナビゲーションからはサイト内にあるギャラリーページの各項目(A,B,Cとします)へリンクしています。
そのギャラリーページではjQueryの「mixitup」というプラグインを使って、フィルター機能によるアイテムの出し分けを行っておりますが、このフィルタリングに「data-filter属性」の設定が必要です。
WordPressのカスタムメニューにおいて、複数の項目へdata-filter属性を個別に付加する方法がどうにもわかりませんでした。
詳しい方のお力添えをいただけましたら幸いです。何卒よろしくお願いいたします。
該当のソースコード
PHP
1<nav class="box"> 2 <?php 3 $args = array( 4 'menu' => 'global-navigation', 5 'menu_class' => 'globalnavi', 6 'container' => false, 7 ); 8 wp_nav_menu($args); 9 ?> 10</nav>
↓カスタムメニューの設定画面はこのような具合です。この中のA,B,Cにそれぞれ異なるdata-filterを設定したいと思っております。
補足情報(FW/ツールのバージョンなど)
利用しているjQueryのバージョンは1.10.2です。
また、プラグインmixitupのサイトはこちらです。
https://www.kunkalabs.com/mixitup/
【最終追記】
どなたかのお役に立つことがあるかもしれないので、修正後のコードを記載しておきます。
PHP
1<nav class="box"> 2 <?php 3 $args = array( 4 'menu' => 'global-navigation', 5 'menu_class' => 'globalnavi', 6 'container' => false, 7 'walker' => new edit_Walker_Nav_Menu() 8 ); 9 wp_nav_menu($args); 10 ?> 11</nav>
PHP
1class edit_Walker_Nav_Menu extends Walker_Nav_Menu { 2 function start_el( &$output, $item, $depth, $args ) { 3 // メニュー内の各項目に対する処理 4 if (in_array('menu-item-type-custom', $item->classes)) { 5 // カスタムリンクが対象 6 $output .= $this->create_b_tag($item, $depth, $args); 7 } 8 else { 9 // カスタムリンク以外 10 $output .= $this->create_a_tag($item, $depth, $args); 11 } 12 } 13 private function create_a_tag($item, $depth, $args) { 14 // link attributes 15 $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; 16 $item_output = sprintf( '<li>%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s', 17 $args->before, 18 $attributes, 19 $args->link_before, 20 apply_filters( 'the_title', $item->title, $item->ID ), 21 $args->link_after, 22 $args->after 23 ); 24 return apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); 25 } 26 27 private function create_b_tag($item, $depth, $args) { 28 // link attributes 29 $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; 30 // data-filterにtitle属性を利用 31 $title = $item->attr_title ; 32 $item_output = sprintf( '<li data-filter="%7$s">%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s', 33 $args->before, 34 $attributes, 35 $args->link_before, 36 apply_filters( 'the_title', $item->title, $item->ID ), 37 $args->link_after, 38 $args->after, 39 $title 40 ); 41 return apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); 42 } 43}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/24 14:50
2019/03/26 05:45