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


17

我是Twitter Bootstrap,需要在菜单链接的标签中添加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标签。因此,我试图找出如何使用#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;
    }
}

但是,如果添加该if语句,则一个评论者建议我得到以下错误:

Fatal error: Cannot use object of type WP_Post as array

我假设需要更多代码,但很迷茫。提醒您,如果没有if语句,它可以工作,但是它的目标是所有链接,而不是我要定位的一个链接。


我想在$ atts变量中插入<?php the_id();?>。// //检查$ item if($ item-> ID == $ menu_target){$ atts ['data-toggle'] = '模态-<?php the_id();?>'; }返回$ atts; 您能帮我怎样将the_id插入$ atts变量中。谢谢
nadzhq 2014年

Answers:


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

我在《梦幻般的》中设置了提醒,所以我不会忘记明天授予赏金。
cchiera

如果您有多个菜单项作为目标怎么办?
Eric Mitjans 2015年

如果data-toggle值不同,则仅使用多个if语句。或者,您可以将id保存到数组键(考虑它们是唯一的)中,并将模式名称保存为数组值。然后与array_key_exists()
Sisir

8

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


谢谢你!我不太确定我是否了解如何获取特定菜单项的$ item ID。在您的示例中,2220也与您的网址“ dev.rarst.net/?p=2220 ”相同。我要向其添加数据属性的链接不会转到另一个wordpress网址,而是href =“#ContactForm”。根据上面的示例,我在Google上进行了更多的搜索,并尝试运行echo var_export($ GLOBALS ['post'],TRUE);。但是当我查看单个菜单项时,看不到任何唯一的ID。你能澄清一下吗?或在“ if(2220 == $ item ['ID'])”中,谢谢!
cchiera

2
您看到的错误是因为$item是对象,而不是数组;更改$item['ID']$item->ID
2013年

1

为什么不从另一个方向解决这个问题呢?而不是尝试以id == ??定位菜单项 可能会在某个时候发生变化(菜单项,而不是ID),请使用WP Admin区域将自定义类添加到要定位的菜单项。然后在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;
}

希望这对您有帮助。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.