WordPress社交⽹络菜单图标更改——SVG图标
前⾔
我使⽤的主题为TwnetySeventeen,在编辑页⾯底部社交⽹络菜单时发现只有⼀些国外⽹站才会显⽰图标,例如Facebook等,国内微博等⽹站⽆法显⽰logo。
但是我并没有到这些图标⽂件,通过浏览器检查元素我发现这些这些图标使⽤的是SVG图标,于是我决定动⼿⾃⼰添加图标。不清楚SVG格式的请点击
修改主题SVG⽂件
WordPress使⽤的是SVG Sprite技术,将图标图形整合在⼀起,实际呈现的时候准确显⽰特定图标。TwnetySeventeen使⽤的SVG⽂件的位置为
wp-content\themes\twentyseventeen\assets\images\svg-icons.svg
使⽤编辑器或记事本打开,⾥⾯包含了⽹站使⽤的所有SVG图标。
我们将⾃⼰制作或者⽹上下载的SVG⽂件修改⼀下格式然后添加进这个⽂件中。修改⽅法就按照⾥⾯已经有的格式修改就⾏。加上symbol 标签,id前⾯加上icon-,适当调整viewBox。viewBox值有4个数字:
viewBox="x, y, width, height"// x:左上⾓横坐标,y:左上⾓纵坐标,width:宽度,height:⾼度
这个宽度和⾼度代表对图标的截取,如果没有调整到合适的⽐例可能只截取了部分图标,例如我对微博图标的调整如下:<symbol id="icon-weibo"viewBox="0 0 180 150">
我提供这个微博SVG⽂件的下载,请点击 。没分的可以联系我邮箱。svg图形
修改icon-functions.php⽂件
可通过⽹站后台——外观——编辑到该⽂件,到函数
function twentyseventeen_social_links_icons()
在该函数中按照样式添加需要链接的⽹站
添加菜单
在⽹络社交菜单中选择添加⾃定义链接,链接⽂本为你上⼀步设置的⽂本,例如我设置的为weibo,点击保存即可。效果如下。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。