Question

我在侧边栏上有一个带有内联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来使菜单易于被客户端操作。我当然可以将图标添加为背景图像，但是我无法在悬停时将它们作为目标......

由于

Answer 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 );

如何添加内联svg作为wordpress菜单图标

1 个答案: