WordPress 导航锚点标记：如何添加自定义类？

php

2024-04-09 12:59:49

在 WordPress 中向导航锚点标记添加自定义类

导言

WordPress 中的导航菜单提供了对网站结构和组织的控制。但有时，你需要超出默认选项，为锚点 <a> 标记添加自定义类以实现更精细的样式设置。这篇文章将分步指导你如何在 WordPress 中完成此操作。

挑战

WordPress 通常将自定义类应用于 <li> 标记，而不是 <a> 标记。然而，有些情况下，你可能希望将自定义类直接应用于锚点本身，例如添加悬停效果或使用不同的字体。

解决方案

方法 1：使用代码过滤

在你的主题的 functions.php 文件中添加以下代码：

function add_nav_class($output) {
    $class_names = wp_nav_menu(array(
        'menu_class'      => '',
    ));

    $output = preg_replace('/<a/', '<a class="' . $class_names . '"', $output, -1);
    return $output;
}
add_filter('wp_nav_menu', 'add_nav_class');

方法 2：使用 CSS 类可选选项

为了方便，你还可以启用“CSS 类可选”选项，允许用户从后端更改自定义类：

add_filter('nav_menu_css_class', function ($classes, $item) {
    $classes[] = $item->css_class;
    return $classes;
}, 10, 2);

步骤指南

在 functions.php 文件中添加代码片段。
访问“外观”>“菜单”并选择菜单。
在“菜单结构”选项卡中，选择链接。
在“CSS 类”字段中输入自定义类名。
点击“保存菜单”。

示例

添加以下代码并使用“CSS 类可选”选项：

function add_nav_class($output) {
    $class_names = wp_nav_menu(array(
        'menu_class'      => '',
    ));

    $output = preg_replace('/<a/', '<a class="' . $class_names . '"', $output, -1);
    return $output;
}
add_filter('wp_nav_menu', 'add_nav_class');

add_filter('nav_menu_css_class', function ($classes, $item) {
    $classes[] = $item->css_class;
    return $classes;
}, 10, 2);

访问“外观”>“菜单”，选择链接，然后在“CSS 类”字段中输入“custom-class”。保存菜单后，锚点 <a> 标记将包含：

<a href="#" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-20 current_page_item custom-class">