README

允许在WordPress li、a元素和不同深度的子菜单中添加自定义类。非常适合TailwindCSS和AlpineJS的使用。

此包添加了WordPress过滤器，允许向wp_nav_menu传递自定义参数，从而允许为菜单的每个元素添加自定义类。您还可以仅将类应用到菜单的特定深度。

这可能是您能够做到的最大程度，而不必创建自定义导航遍历器，我一直很讨厌这样做。

要求

• Composer

安装

通过Composer安装

$ composer require davidwebca/wordpress-menu-classes

如果您的主题已经使用Composer，则由于自动加载和自动实例化类，过滤器将自动添加。否则，如果您正在寻找要添加到主题中的独立文件，请在此存储库中查找src/WordPressMenuClasses.php。

说明

过滤器使用WordPress提供的深度参数，该参数是一个索引，因此从0级开始。

以下是您可以传递给wp_nav_menu并得到此包支持的自定义参数列表

• a_atts 或 a_atts_$depth 或 a_atts_order_$order

• a_class 或 a_class_$depth 或 a_class_order_$order

  • 将任何属性或类添加到<a>元素

• li_atts 或 li_atts_$depth 或 li_atts_order_$order

• li_class 或 li_class_$depth 或 li_class_order_$order

  • 将任何属性或类添加到<li>元素

• submenu_atts 或 submenu_atts_$depth

• submenu_class 或 submenu_class_$depth

  • 将任何属性或类添加到子菜单的<ul>元素。请注意，子菜单不支持顺序。

例如：将 "text-black" 类添加到所有链接，并将 "text-blue" 类仅添加到第3级链接

wp_nav_menu([
    'theme_location' => 'primary_navigation',
    'a_class' => 'text-black',
    'a_class_2'
    // ...
]);

例如：支持作为数组传递的类（这并非WordPress的原生功能，但此包提供作为便利功能）

wp_nav_menu([
    'theme_location' => 'primary_navigation',
    'a_class' => ['text-white', 'bg-blue-500'],
    'li_atts' => [
        'class' => ['focus:ring-2', 'ring-orange-500']
    ]
    // ...
]);

例如：一个包含一些TailwindCSS类和AlpineJS糖的更完整的示例。这是一个无需额外JavaScript的全功能手风琴导航（需要Alpine的x-collapse插件）。

wp_nav_menu([
    'theme_location' => 'primary_navigation',
    'container' => 'nav',
    'menu_class' => 'list-none p-0 m-0',
    'a_class_0' => "font-bold inline-flex items-center text-xl",
    'li_atts_0' => [
        'class' => "w-full px-6 before:mr-4 before:cursor-pointer before:shrink-0 before:grow-0 before:inline-flex before:justify-center before:items-center before:w-6 before:h-6 before:rounded before:bg-black before:text-white before:p-1 before:hover:opacity-50 before:transition",
        ':class' => "{'before:content-[\'+\']': !opened, 'before:content-[\'-\']': opened}",
        'x-data' => "{opened: false}",
        'x-on:click' => 'opened = !opened'
    ],
    'submenu_class_0' => 'wowza',
    'submenu_atts_0' => [
        'x-show' => 'opened',
        'x-collapse' => "_",
        'class' => 'list-none pl-10'
    ]
]);

小部件菜单

此包允许您向主题中发现的wp_nav_menu调用传递自定义参数，但您想在小部件中使用菜单怎么办？嗯，WordPress有一个过滤器可以做到这一点！

由于此包中声明的过滤器与任何wp_nav_menu调用一起工作，而小部件内部也使用这些调用，因此我们可以为每个侧边栏添加一个过滤器，并在此处声明我们想要如何样式化它们。

add_filter('widget_nav_menu_args', function($nav_menu_args, $nav_menu, $args, $instance) {
    if($args['id'] == 'sidebar-footer') {
        $nav_menu_args['menu_class'] = 'mt-5 font-alt text-sm font-normal leading-7 opacity-60';
        $nav_menu_args['a_class'] = 'text-gray-300 opacity-60 hover:opacity-100';
    }
    return $nav_menu_args;
}, 10, 4);

已知问题

如果您像我一样使用TailwindCSS，您可能会遇到奇怪的限制，该限制仍在被WordPress内部团队跟踪，不允许您指定某些CSS规范允许的字符，例如冒号，Tailwind广泛使用，但仅限于WordPress管理界面。换句话说，它们解析出不应在多个“类”字段中删除的特殊字符，例如在导航菜单中输入类时。

因此，我添加了默认的替换方案“___”到“:”。如果您遇到与不同字符的其他限制，我已提供自定义过滤器，以添加您自己的替换方案，形式为preg_replace参数。

add_filter('nav_menu_css_class_unescape_patterns', function($patterns) {
    $patterns = '/___/';
    // $patterns = array('/___/', '/\*\*\*/');
    return $patterns;
}, 10, 1);

add_filter('nav_menu_css_class_unescape_replacements', function($replacements) {
    $replacements = ':';
    // $replacements = array(':', '!');
    return $replacements;
}, 10, 1);

这些内容直接传递给 preg_replace 函数，该函数接受数组或字符串作为值。您现在可以在管理界面中添加到导航菜单中的类使用 Tailwind css 类，如下所示： sm___bg-white sm___hover___opacity-100。

错误报告和贡献

所有问题都可以在这里的 GitHub 上报告，我会查看它们。请确保提供尽可能多的细节，因为我全职工作，只能偶尔查看。您也可以通过拉取请求自行添加代码。

许可证

此代码在 MIT 许可证 下提供。