如何向WordPress菜单项添加数据属性

时间:2013-11-04 作者:cchiera

我是Twitter引导程序,需要在菜单链接的a标记中添加data toggle=“modal”属性。在搜索大多数所有结果时,请参考在Twitter引导下拉菜单中行走,但是此菜单没有下拉菜单,我只需要添加特定属性。

接下来我发现了这个: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;
}
这确实有效,但正如预期的那样,它会将属性添加到菜单中的所有a标记中。所以我想知道如何用#menu-item-7857 a或类似的东西来定位一个菜单项。

是否有人知道在哪里可以找到针对菜单项的示例,或者能够确定如何基于上面链接的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;
    }
}
然而,一位评论者补充说,如果有一句话,我会出现以下错误:

Fatal error: Cannot use object of type WP_Post as array

我假设需要更多的代码,但可能会丢失。作为一个没有if语句的提醒,它可以工作,但是它针对的是所有链接,而不是我想要针对的一个链接。

4 个回复
最合适的回答,由SO网友:Jen 整理而成

具体编辑您在原始问题中提供的代码:

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

SO网友:Rarst

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

SO网友:Jen

你为什么不从不同的方向来处理这个问题?而不是试图以id==??它可能会在某个点(菜单项,而不是id)发生更改,请使用WP Admin区域添加custom class 指向要定位的菜单项。然后在Javascript中使用该类来触发所需的信息:

$(\'.my-class\').click(function(e){
  // do other stuff
  e.preventDefault;
});
我的javascript不能保证。如果不使用jQuery,可以尝试this.

SO网友:Anoop Anson

我想在WordPress中创建的自定义菜单中添加数据字母。

我选择的步骤是:

找到了我的菜单id号

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;
}
希望这对你有帮助。

结束

相关推荐

Shotcode error on functions

您好,我有一个生成错误的短代码。有人能帮忙吗?add_shortcode(\'do-action\', \'do_action_shortcode\'); function do_action_shortcode($atts, $content = \'\') {   ob_start();   do_action($content);   $out = ob_get_contents();   ob_end_clean();   return $