如何将内联 svg 添加为 wordpress 菜单图标答案

【问题标题】：How to add inline svg as wordpress menu icons如何将内联 svg 添加为 wordpress 菜单图标
【发布时间】：2020-10-13 20:46:54
【问题描述】：

我在侧边栏上有一个带有内嵌 svg 图标的辅助导航。我可以在悬停时使用 CSS 更改它们的颜色。这是标记

<ul class="icons">
<li>
    <a href="index.php?page_id=39">
        <div class="icon-box tool-box"><!-- inline svg here... --></div>
        <h2>our tools</h2>
    </a>
</li>  <!-- and so on... -->

我想知道是否有可能通过 wordpress wp_nav_menu 函数以某种方式添加内联 svg，以使客户端易于操作菜单。我当然可以将图标添加为背景图像，但是我无法在悬停时将它们作为目标...

谢谢

【问题讨论】：

它不适用于所有浏览器。您可以使用 <img src="data:image/svg+xml,<?xml,..." /> 之类的 IMG-Tag
@AdrianPreuss 但是我如何才能使用 wp_nav_menu 来使用类似的东西呢？到目前为止，我已经用一行替换了上面 Iposted 的 html：<?php wp_nav_menu(array('menu' => 'Icons Navigation Menu'));?>，它产生了一个 ul。是否需要编写自定义 walker 类才能在菜单项中添加自定义 html？
是的。你需要一个单独的 walker 来修改输出。

标签： wordpress svg

【解决方案1】：

您可以使用 wp_nav_menu_items 过滤器来搜索和替换您手动插入到 Wordpress 菜单部分的菜单项标签中的某个字符串。

例如：

将 %FANCY_SVG% 字符串添加到 Wordpress 管理中的菜单项标签。
按如下方式定义过滤器：

function find_replace_my_fancy_svg( $items, $args ) {
    $items = str_replace(
        '%FANCY_SVG%', 
        '<svg width="27" height="27" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-15 -18)" fill="red"><path id="Rectangle" d="M15 18h27v27H15z"/></g></g></svg>',
        $items
    );
    
    return $items;
}
add_filter( 'wp_nav_menu_items', 'find_replace_my_fancy_svg', 10, 2 );

【讨论】：