如何將資料屬性新增到 WordPress 選單項

問題描述

我是 Twitter Bootstrap，需要將 data-toggle = “modal” 屬性新增到選單連結的標籤。在搜尋大多數所有結果時，請參考為 Twitter Bootstrap 下拉選單進行步驟，但是該選單沒有下拉式清單，我只需要新增特定的屬性。

接下來我發現這個：Add custom attributes to menu items without plugin 這是非常有用的，因為它出現在 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;
}

並且它的工作，但它如預期新增的屬性到選單中的所有標籤。所以我試圖找出如何使用＃menu-item-7857 等目標一個選單項。

有沒有人知道在哪裡找到一個定位選單項的例子，或者可以確定如何基於上述連結的 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 語句一個評論者建議我得到以下錯誤：

Fatal error: Cannot use object of type WP_Post as array

我假設更多的程式碼是必需的，但是在丟失。作為一個提醒，沒有 if 語句它的工作原理，但它瞄準所有的連結，而不是我想要的一個連結。

最佳解決方案

具體編輯您在原始問題中提供的程式碼：

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

次佳解決方案

第二個 $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'] )

參考文獻

How to add a data attribute to a WordPress menu item

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

如何將資料屬性新增到 WordPress 選單項