一、修改主题的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图标的网站:
二、修改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