データ属性をWordPressメニュー項目に追加する方法


17

私はTwitter Bootstrapであり、メニューリンクのタグにdata-toggle = "modal"属性を追加する必要があります。ほとんどの結果を検索すると、Twitter Bootstrapドロップダウンメニューのウォーキングを参照しますが、このメニューにはドロップダウンがなく、特定の属性を追加するだけです。

:次の私は、この発見の追加カスタムプラグインなしでメニュー項目に属性、私たちがもはやこれを使用することができます代わりに、長い複雑な歩行を行う必要がなく、3.6以降のWordPressに表示される非常に有用である:http://codex.wordpress.org/Plugin_API / Filter_Reference / nav_menu_link_attributes

しかし、この時点では、そのAPIリファレンスは非常にむき出しであり、例も提供されていません。また、非常に新しいため、Googleでのリファレンスはほとんどありません。

私はこれを最初に試しました:

add_filter( 'nav_menu_link_attributes', 'mywp_contact_menu_atts', 10, 3 );

function pb_contact_menu_atts( $atts, $item, $args )
{
    // inspect $item, then …
    $atts['data-toggle'] = 'modal';
    return $atts;
}

それは機能しますが、期待どおりにメニュー内のすべてのaタグに属性を追加します。そこで、#menu-item-7857 aなどで1つのメニュー項目をターゲットにする方法を見つけようとしています。

誰もがメニュー項目をターゲットにする例を見つける場所を知っていますか、上記のリンクされたAPIリファレンスにある情報に基づいて方法を決定することができますか?

注意するために、私は次の例を見つけましたが、それは助けにはならないが正しい方向にある可能性がある子を持つアイテムのみを対象としています:

add_filter('nav_menu_link_attributes', function($atts, $item, $args) {
    if ( $args->has_children )
    {
        $atts['data-toggle'] = 'dropdown';
        $atts['class'] = 'dropdown-toggle';
    }

    return $atts;
}, 10, 3);

更新-以下の唯一の答えは何かにあるように聞こえますが、実際の番号を実際に見つけて特定のリンクをターゲットにする方法と、実際の例でその条件を追加する場所/方法を決定できませんでした。コメントを追加しましたが、返事はありませんでした。約18日間は、賞金が役立つかどうかを確認すると思っていました。

ターゲットにしたいリンクのコードを見ると:

<li id="menu-item-7858" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7858"><a href="#" data-toggle="modal">Chat</a></li>

7858という数字が表示されているので、おそらくそれが私がターゲットにしている数字だと考えています。

しかし、私が例えばしようとすると:

add_filter( 'nav_menu_link_attributes', 'my_chat_menu_atts', 10, 3 );


function my_chat_menu_atts( $atts, $item, $args ) {
    if ( 7857 == $item['ID'] ) {
        // inspect $item, then …
        $atts['onclick'] = 'SnapEngage.startLink();';
        return $atts;
    }
}

ただし、あるifコメンターがifステートメントを追加すると、次のエラーが表示されます。

Fatal error: Cannot use object of type WP_Post as array

もっと多くのコードが必要だと思っていますが、失われています。ifステートメントなしのリマインダーとして機能しますが、ターゲットにする1つのリンクではなく、すべてのリンクをターゲットにします。


<?php the_id();?>を$ atts変数に挿入します。そのような何か// // $ item-> ID == $ menu_targetを調べます{$ atts ['data-toggle'] = 'modal-<?php the_id();?>'; } $ attsを返します。the_idを$ atts変数に挿入する方法を教えてください。ありがとう
nadzhq 14

回答:


36

元の質問で指定したコードを特に編集します。

add_filter( 'nav_menu_link_attributes', 'wpse121123_contact_menu_atts', 10, 3 );
function wpse121123_contact_menu_atts( $atts, $item, $args )
{
  // The ID of the target menu item
  $menu_target = 123;

  // inspect $item
  if ($item->ID == $menu_target) {
    $atts['data-toggle'] = 'modal';
  }
  return $atts;
}

自分の価値のいくつかを交換した後、それをしました!ありがとうございました!正しいとマークしましたが、賞金を授与する前にさらに23時間待つ必要があると言います。
cchiera

お力になれて、嬉しいです!:D
ジェン

Fantasticalでリマインダーを設定したので、明日は賞金を授与することを忘れないでください。
cchiera

ターゲットとして複数のメニュー項目がある場合はどうなりますか?
エリックミトヤンス

データ切り替え値が異なる場合は、複数のifステートメントを使用します。または、idを配列キーに保存し(一意であると見なす)、配列値としてモーダル名を保存できます。次に、ifステートメントを確認しますarray_key_exists()
-Sisir

8

$itemフィルタ関数で使用できるようにされている2番目の引数には、メニュー項目オブジェクトが含まれています。ダンプされた場合、次のようになります。

[1] => WP_Post Object
    (
        [ID] => 2220
        [post_author] => 1
        [post_date] => 2012-12-26 19:29:44
        [post_date_gmt] => 2012-12-26 17:29:44
        [post_content] => 
        [post_title] => Home
        [post_excerpt] => 
        [post_status] => publish
        [comment_status] => open
        [ping_status] => open
        [post_password] => 
        [post_name] => home-3
        [to_ping] => 
        [pinged] => 
        [post_modified] => 2013-06-05 01:55:20
        [post_modified_gmt] => 2013-06-04 22:55:20
        [post_content_filtered] => 
        [post_parent] => 0
        [guid] => http://dev.rarst.net/?p=2220
        [menu_order] => 1
        [post_type] => nav_menu_item
        [post_mime_type] => 
        [comment_count] => 0
        [filter] => raw
        [db_id] => 2220
        [menu_item_parent] => 0
        [object_id] => 2220
        [object] => custom
        [type] => custom
        [type_label] => Custom
        [title] => Home
        [url] => http://dev.rarst.net/
        [target] => 
        [attr_title] => 
        [description] => 
        [classes] => Array
            (
                [0] => 
                [1] => menu-item
                [2] => menu-item-type-custom
                [3] => menu-item-object-custom
                [4] => current-menu-item
                [5] => current_page_item
                [6] => menu-item-home
            )

        [xfn] => 
        [current] => 1
        [current_item_ancestor] => 
        [current_item_parent] => 
    )

特定のメニュー項目をターゲットにするには、条件を定式化し、オブジェクトで使用可能なデータと照合する必要があります。たとえば、 if ( 2220 == $item['ID'] )


これをありがとう!ただし、特定のメニュー項目の$ item IDを取得する方法を理解しているかどうかはよくわかりません。この例では、2220はURL「dev.rarst.net/?p=2220」と同じです。データ属性を追加したい私のリンクは、別のワードプレスのURLに移動するのではなく、href = "#ContactForm"です。上記の例に基づいて、私はもっとグーグルで調べてecho var_export($ GLOBALS ['post']、TRUE)を実行しようとしました。しかし、個々のメニュー項目の近くを見ると、一意のIDは表示されません。明確にできますか?または「if(2220 == $ item ['ID'])」で事前に感謝します!
cchiera

2
表示されているエラー$itemは、配列ではなくオブジェクトであるためです。をに変更$item['ID']$item->IDます。
ジェン

1

この問題に別の方向からアプローチしてみませんか?id == ??のメニュー項目をターゲットとするのではなく、ある時点(idではなくメニュー項目)で変更される可能性があるため、WP管理領域を使用して、ターゲットにするメニュー項目にカスタムクラスを追加します。次に、Javascriptでそのクラスを使用して、必要な情報をトリガーします。

$('.my-class').click(function(e){
  // do other stuff
  e.preventDefault;
});

私のjavascriptは保証されていません。あなたはjQueryのを使用していない場合、あなたは試みることができる、これを


1

WordPressで作成したカスタムメニューにデータ文字を追加したかった。

私が選んだステップは:

  1. メニューのID番号を見つけました。
  2. @guiniveretooからこれらのコード行を追加しました
  3. 各メニュー項目のifステートメントを記述しました(異なる属性値を挿入したかったため)。
  4. 働いた!

これが私のコードです。

add_filter( 'nav_menu_link_attributes', 'wpse121123_contact_menu_atts', 10, 3 );
function wpse121123_contact_menu_atts( $atts, $item, $args )
{  
  $menu_target = 6;

  if ($item->ID == $menu_target) {
    $atts['data-letters'] = 'PROJECTS';
  }

  elseif ($item->ID == 7) {
    $atts['data-letters'] = 'RESUME';
  }
  elseif ($item->ID == 8) {
    $atts['data-letters'] = 'ARTWORKS';
  }
  elseif ($item->ID == 9) {
    $atts['data-letters'] = 'HELLO!';
  }
  return $atts;
}

これがお役に立てば幸いです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.