web-dev-qa-db-ja.com

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

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

次に、これを見つけました： プラグインなしでメニュー項目にカスタム属性を追加します WordPress 3.6以降で表示されるので非常に役立ちます。長い複雑なウォーカーは必要なくなり、代わりにこれを使用できます： 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タグに属性を追加します。だから私は1つのメニュー項目を＃menu-item-7857などでターゲットにする方法を見つけようとしています。

メニュー項目をターゲットにした例がどこにあるか、または上記のリンクされたAPIリファレンスにある情報に基づいてどのように判断できるかを知っている人はいますか。

注意するために、私は以下の1つの例を見つけました、しかし、それは助けにはならないが正しい方向にあるかもしれない子供を持っているアイテムだけを対象とします：

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文を付け加えると、1人のコメント投稿者が次のようなエラーになることを提案しました。

Fatal error: Cannot use object of type WP_Post as array

私はもっ​​と多くのコードが必要だと思いますが、迷っています。 if文なしのリマインダーとしては機能しますが、ターゲットにしたい1つのリンクではなくすべてのリンクをターゲットにします。

functionsmenus
12
cchiera

元の質問で提供したコードを具体的に編集します。

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;
}
31
guiniveretoo

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

[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'] )

7
Rarst

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;
}

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

1
Anoop Anson

なぜあなたはこの問題に別の方向から取り組まないのですか？ id == ??のメニュー項目をターゲットにしようとしているのではなくこれはある時点で変わる可能性があります（idではなくメニュー項目）、WP Admin領域を使用して カスタムクラス をターゲットのメニュー項目に追加します。次に、そのクラスをJavascriptで使用して、必要な情報を表示します。

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

私のJavaScriptは保証されていません。あなたがjQueryを使っていないのなら、 this を試すことができます。

0
guiniveretoo