如何将数据属性添加到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 菜单项