Wordpress 将类添加到菜单链接

Posted 2023-02-24

【中文标题】Wordpress 将类添加到菜单链接

【英文标题】：Wordpress add a class to menu link

【发布时间】：2014-01-12 04:33:50

【问题描述】：

我需要你的帮助。我需要在 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 -->

【参考方案1】：

添加一个类 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->menu == '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】：

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

也许它可以帮助某人；

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

【参考方案3】：

您也可以通过管理面板进行操作

在外观 > 菜单中，单击屏幕选项选项卡

在显示高级菜单属性下，检查 CSS 类

现在展开任何菜单项以显示 CSS 类（可选）文本 输入。

输入您的班级名称并保存您的菜单以将该班级应用于 菜单项

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

【讨论】：

谢谢！！它似乎工作！但它在 元素上添加了类，因此我无法根据需要设置 元素的样式

没问题，如果解决了您的问题，请采纳。如果他们来查看问题，它将对其他人有所帮助

问题是它没有解决我的问题。我需要向 元素添加一个类，并根据您的提示将该类添加到 元素。

您可以在 li 中为 css 中定义的类设置 样式。这样做有什么问题吗？使用 li.myClass > a

【参考方案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'          => ''
    )
);

【讨论】：

@Giova.panasiti 我永远不会改变它。但请尝试在 'link_before' 中添加一些内容

它不起作用。如果我在 link_before 或之前添加一些内容，则在链接之前添加我输入的内容作为简单的纯文本。

@Giova.panasiti 所以也许上述解决方案简单有效。

是的，但是通过上述解决方案，它向 元素添加了一个类，因此我无法在导航菜单中设置 元素的样式

@Giova.panasiti 你不能使用 li.class a 吗？