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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1418閲覧

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

atsushi_m

総合スコア20

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

0クリップ

投稿2019/03/24 13:46

編集2019/03/26 06:02

前提・実現したいこと

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}
kei344👍を押しています

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

【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 14:11

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

atsushi_m

2019/03/24 14:50

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

2019/03/26 05:45

かなり時間がかかってしまいましたが、おかげさまでどうにか実現できました! アドバイスの通りwalker機能で解決できました。 1.メニュー内の任意の項目の絞り込みは「カスタムリンク」と「それ以外」に振り分けて解決。 2.data-filter属性を加えるのは前述のとおりwalkerで達成。 3.項目ごとにdata-filterの内容を変えるのは「title属性」を利用してそれぞれ異なる文字列に変換。 (詳しいコードは質問文に追記するかたちで後ほど掲載いたします。) プログラミング素人のため、ネットで見つけたコードを拝借し自分なりにカスタムしてどうにか希望通りの動作にできましたが、walker機能で解決できるという点に半信半疑のままでは途中で挫折していたかもしれません。 またこちらのサイトで質問させていただくことがあるかもしれませんが、よろしければその際もアドバイスいただけますと幸いです。この度は本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問