質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.13%

Wordpressのカスタムメニューにdata-filter属性を仕込みたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 716

atsushi_m

score 14

前提・実現したいこと

WordPressのカスタムメニュー機能を使ってナビゲージョンをつくっております。ナビゲーションからはサイト内にあるギャラリーページの各項目(A,B,Cとします)へリンクしています。
そのギャラリーページではjQueryの「mixitup」というプラグインを使って、フィルター機能によるアイテムの出し分けを行っておりますが、このフィルタリングに「data-filter属性」の設定が必要です。

WordPressのカスタムメニューにおいて、複数の項目へdata-filter属性を個別に付加する方法がどうにもわかりませんでした。

詳しい方のお力添えをいただけましたら幸いです。何卒よろしくお願いいたします。

該当のソースコード

<nav class="box">
    <?php 
    $args = array(
        'menu' => 'global-navigation',
        'menu_class' => 'globalnavi',
        'container' => false,
    );
    wp_nav_menu($args);
    ?>
</nav>

↓カスタムメニューの設定画面はこのような具合です。この中のA,B,Cにそれぞれ異なるdata-filterを設定したいと思っております。
イメージ説明

補足情報(FW/ツールのバージョンなど)

利用しているjQueryのバージョンは1.10.2です。
また、プラグインmixitupのサイトはこちらです。
https://www.kunkalabs.com/mixitup/


【最終追記】

どなたかのお役に立つことがあるかもしれないので、修正後のコードを記載しておきます。

<nav class="box">
    <?php 
    $args = array(
        'menu' => 'global-navigation',
        'menu_class' => 'globalnavi',
        'container' => false,
        'walker' => new edit_Walker_Nav_Menu()
    );
    wp_nav_menu($args);
    ?>
</nav>
class edit_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el( &$output, $item, $depth, $args ) {
        // メニュー内の各項目に対する処理
        if (in_array('menu-item-type-custom', $item->classes)) {
            // カスタムリンクが対象
            $output .= $this->create_b_tag($item, $depth, $args); 
        }
        else {
            // カスタムリンク以外
            $output .= $this->create_a_tag($item, $depth, $args); 
        }
    }
    private function create_a_tag($item, $depth, $args) {
        // link attributes
        $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
        $item_output = sprintf( '<li>%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',
                               $args->before,
                               $attributes,
                               $args->link_before,
                               apply_filters( 'the_title', $item->title, $item->ID ),
                               $args->link_after,
                               $args->after
                              );
        return apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }

    private function create_b_tag($item, $depth, $args) {
        // link attributes
        $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
        // data-filterにtitle属性を利用
        $title  = $item->attr_title ;
        $item_output = sprintf( '<li data-filter="%7$s">%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',
                               $args->before,
                               $attributes,
                               $args->link_before,
                               apply_filters( 'the_title', $item->title, $item->ID ),
                               $args->link_after,
                               $args->after,
                               $title
                              );
        return apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

管理画面で何らかの情報を入力するのであれば、「表示オプション」にある「説明」フィールドとかを利用して必要な情報を管理するとかでしょうか。

【WordPressのカスタムメニューで出力されるulやliに任意のクラスを追加する方法 | TechMemo】
https://techmemo.biz/wordpress/wp-nav-menu-add-class/ ※ 表示オプションの場所の参考リンク

独自項目(data-filter属性)の出力には Walker_Nav_Menu クラスを使って処理を自分で書く必要があると思います。

【wp_nav_menu カスタムメニューにメタデータを埋め込む – カラクリ.jp】
http://xn--lcki7of.jp/753/

【wp_nav_menu() | Function | WordPress Developer Resources】
https://developer.wordpress.org/reference/functions/wp_nav_menu/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/24 23:50

    kei344様、いつもご回答いただきありがとうございます。
    ご紹介いただいた「カスタムウォーカー」という機能、私の方でも「これかな」とあたりをつけて試してみたのですが、内容について理解が及ばずその時はうまく機能できませんでした。
    ですがおかげで確信をもてましたので、ご紹介いただいた記事をじっくり読んでもう一度取り組んでみます。
    その上でわからないことがありましたら改めて質問させていただくかもしれません。その際は恐れ入りますがどうぞよろしくお願いいたします。

    取り急ぎお礼と確認の報告をさせていただきます。

    キャンセル

  • 2019/03/26 14:45

    かなり時間がかかってしまいましたが、おかげさまでどうにか実現できました!

    アドバイスの通りwalker機能で解決できました。
    1.メニュー内の任意の項目の絞り込みは「カスタムリンク」と「それ以外」に振り分けて解決。
    2.data-filter属性を加えるのは前述のとおりwalkerで達成。
    3.項目ごとにdata-filterの内容を変えるのは「title属性」を利用してそれぞれ異なる文字列に変換。
    (詳しいコードは質問文に追記するかたちで後ほど掲載いたします。)

    プログラミング素人のため、ネットで見つけたコードを拝借し自分なりにカスタムしてどうにか希望通りの動作にできましたが、walker機能で解決できるという点に半信半疑のままでは途中で挫折していたかもしれません。

    またこちらのサイトで質問させていただくことがあるかもしれませんが、よろしければその際もアドバイスいただけますと幸いです。この度は本当にありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる