Wordpress将一个类添加到菜单链接

时间:2013-12-23 22:47:36

标签: php html css wordpress

我需要你的帮助。我需要在wordpress在菜单中生成的链接上添加一个特定的类。 我该怎么编辑? 我的HTML输出是:

<nav class="nav" role="navigation">
<ul>
<li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8"><a href="example.com">Sample Page</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="http://example.com">Prova sample</a></li>
</ul></nav

生成菜单的头文件中的代码是:

    <!-- nav -->
    <nav class="nav" role="navigation">
    <?php html5blank_nav(); ?>
    </nav>
   <!-- /nav -->

4 个答案:

答案 0 :(得分:18)

您也可以通过管理面板

来完成
  • 外观&gt;菜单,单击屏幕选项选项卡

  • 在“显示高级菜单属性”下,选中“CSS类”

  • 现在展开任何菜单项以显示CSS类(可选)文本
    输入

  • 输入您的班级名称并保存您的菜单以将班级应用到中 菜单项

http://sevenspark.com/how-to/how-to-add-a-custom-class-to-a-wordpress-menu-item

答案 1 :(得分:18)

添加一个课程 https://codex.wordpress.org/Plugin_API/Filter_Reference/nav_menu_link_attributes

function add_specific_menu_location_atts( $atts, $item, $args ) {
    // check if the item is in the primary menu
    if( $args->theme_location == 'primary' ) {
      // add the desired attributes:
      $atts['class'] = 'menu-link-class';
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_specific_menu_location_atts', 10, 3 );

答案 2 :(得分:1)

在基于Bootstrap框架创建一些WordPress站点之后,我提出了一种通过初始化所需的类来轻松操作WordPress导航输出的解决方案。这将确保在客户端添加新菜单项时,不需要您的最终用户添加所有自定义类。

也许它可以帮助别人;

https://github.com/nickkuijpers/WordPress-Extended-Bootstrap-Nav-Walker

答案 3 :(得分:-4)

尝试在functions.php文件中编辑html5blank_nav()函数

// HTML5 Blank navigation
function html5blank_nav()
{
wp_nav_menu(
array(
    'theme_location'  => 'header-menu',
    'menu'            => '',
    'container'       => 'div',
    'container_class' => 'menu-{menu slug}-container',
    'container_id'    => '',
    'menu_class'      => 'menu',
    'menu_id'         => '',
    'echo'            => true,
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<ul>%3$s</ul>',
    'depth'           => 0,
    'walker'          => ''
    )
);
}