在WordPress的社交网络菜单里面添加微博图标

一、修改主题的SVG文件
WordPress使用的是SVG Sprite技术,将图标图形整合在同一个SVG文件里,使用的时候准确显示特定图标。TwnetySeventeen使用的SVG文件的位置为: 

  wp/content/themes/twentyseventeen/

assets/images/svg-icons.svg

 该文件里面包含了网站使用的所有SVG图标。使用编辑器或记事本打开该文件,会看到如下格式的代码:

我们将自己制作或者网上下载的SVG文件使用编辑器或记事本打开后,代码格式如下:

我们要将自己的代码添加进SVG文件中。修改方法就按照文件已经有的格式复制一遍,然后修改id, viewBox和d值为我们自己的代码。

viewBox值有4个数字:这个宽度和高度代表对图标的截取,如果没有调整到合适的值可能只截取了部分图标,因此建议大家直接填写自己SVG文件里面的viewBox值。

viewBox=”x, y, width, height”  // x:左上角横坐标,y:左上角纵坐标,width:宽度,height:高度

viewBox值不合适的效果图

这里推荐两个可以免费下载SVG图标的网站:

https://icons8.cn/icons/

https://www.iconfont.cn/

二、修改icon-functions.php文件
TwnetySeventeen使用的icon-functions.php文件的位置为:

wp-content/themes/twentyseventeen/inc/icon-functions.php

在该文件里找到函数:

function twentyseventeen_social_links_icons()

在该函数中按照格式添加需要链接的网站。

function twentyseventeen_social_links_icons() {

       // Supported social links icons.

       $social_links_icons = array(

              ‘behance.net’  => ‘behance’,

              ‘codepen.io’    => ‘codepen’,

              ‘bilibili.com’     => ‘bilibili’,

              ‘weibo.com’    => ‘weibo’,

三、在社交菜单里添加自定义链接
在网络社交菜单中选择添加自定义链接 http://weibo.com



发表评论