WordPress菜单添加SVG图标

最后更新于 2021 年 12 月 30 日

svg图标清晰度高，代码可以直接放在网页上使用，不但能随意控制hover效果，还可以做动画，可谓好处多多。今天要介绍的是如何给WordPress的菜单项目添加svg图标，要直接插入svg代码，不是使用图片或背景，也不是使用类似fontawesome那样的字体图标。

方法一：纯代码实现

在这里找到了个不错的思路：在后台编辑menu时输入一些特殊的字符串，作为图标的占位符，等输出的时候用代码替换成实际的图标。代码如下：

/**
 * Add svg to menu
 */
function find_replace_my_fancy_svg( $items, $args ) {
    $items = str_replace(
        '%FANCY_SVG%', 
        '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/></svg>',
        $items
    );
    
    return $items;
}
add_filter( 'wp_nav_menu_items', 'find_replace_my_fancy_svg', 10, 2 );

在后台菜单编辑页面，将%FANCY_SVG%这个占位符写到需要输出图标的地方。

这样前台就能直接输出图标了。

如果你的站点只需要几个图标，为这个去下载fontawesome或者去icomoon生成字体图标，那也太累了，直接把svg代码拷贝下来用多省事。

方法二：使用ACF插件来实现

Advanced Custom Fields插件允许我们创建各种自定义字段，非常实用，做网站必备。用它给菜单项创建一个图标字段，类型为图片，返回图片地址。这样，我们就可以上传svg图标，读取svg的源代码，渲染到网页上，实现上面同样的效果，但可重用性更好。

首先，根据官方文档创建图标字段，并规定其显示在菜单项下面。

WordPress默认不能上传svg格式的图片，所以安装插件SVG Support让它支持。之后就能在菜单编辑界面直接上传图标了。

万事俱备，只差代码。在主题的functions.php里加入如下代码把svg的代码添加到网页上。

add_filter('wp_nav_menu_objects', 'sola_add_menu_icons', 10, 2);

function sola_add_menu_icons( $items, $args ) {
  
  foreach( $items as &$item ) {
    
    $icon = get_field('menu_icon', $item);
    
    // append icon
    if( $icon ) {
        
      $iconfile = new DOMDocument();
      $iconfile->load($icon );

      $svgHTML     = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
      $item->title = $svgHTML . $item->title;
      
    }  
  }
  return $items; 
}

最后实现的效果和第一种方法没有差别，只是多了后台管理的功能。