WordPress

WordPress菜单添加SVG图标

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; 
}

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

2条评论

  1. 不错,学习了。俩种方法的标题前面要是加上序号就好了。
    差点没看懂,以为是一个方法。

留言

您的电子邮箱地址不会被公开。 必填项已用*标注