将data-id属性添加到子页面链接

时间:2015-11-24 作者:DaveyJake

答案应该很简单,但我就是想不出来,也找不到答案。我需要添加一个data-id 属性到<li> 相应子页的父容器<a> 链接。

HTML如下所示:

  <aside id="sidebar-b">
    <ul class="sub-menu side-nav page-sidebar child-pages">
      <li id="menu-item-9044" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-9044">
        <a href="http://localhost/about/" class="menu-image-title-after">
          <span class="menu-image-title">About</span>
        </a>
      </li>
      <li id="menu-item-9045" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-9045">
        <a href="http://localhost/contact/" class="menu-image-title-after">
          <span class="menu-image-title">Contact</span>
        </a>
      </li>
      <li id="menu-item-9046" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-9046">
        <a href="http://localhost/history/" class="menu-image-title-after">
          <span class="menu-image-title">History</span>
        </a>
      </li>
    </ul>
  </aside>
应该注意的是,作为一种临时解决方案,我使用jQuery 手动将子页面列表从其父页面移出到#sidebar-b.

任何建议都将不胜感激!

1 个回复
SO网友:Hans Spieß

假设html是由侧边栏中的wordpress菜单输出的,则必须扩展Walker_Nav_Menu Class 菜单模板函数使用wp_nav_menu. 像stated in the reference of wp_nav_menu, 您可以修改其输出,如下所示:

class My_DataId_Walker_Nav_Menu extends Walker_Nav_Menu {

    //  other code found in original Walker_Nav_Menu class

    //  changing output of li elemens
    $output .= $indent  
            .  \'<li id="nav-menu-item-\' . $item->ID . \'" \'
            .  \'data-id="\' . $item->ID . \'" \' 
            .  \'class="\' . $depth_class_names . \' \' . $class_names . \'">\';

    //  other code found in original Walker_Nav_Menu class

}

//  in the template file, output menu with custom walker class
wp_nav_menu( 
    array(
        \'theme_location\'    =>\'primary\', // your menu position
        \'walker\'            => new My_DataId_Walker(),
        \'depth\'             => 0
    ) 
);

相关推荐

自定义模板earch.php中的搜索结果

现在我在搜索结果页面(search.php)中遇到了一个问题,结果是由索引页面模板显示的,而不是它的模板,它显示所有帖子,不管搜索者是否输入了内容我的索引。php页面<?php get_header(); ?> <?php $search = $_get[\'search\']; $args = array( \'post_title_like\' => $search ); $res = new wp_query($args