龙坤云服务器

wordpress主题教程 Betheme主题社交媒体图标本地化,添加微信qq等图标

释放双眼,带上耳机,听听看~!

wordpress主题 Betheme主题中文汉化 最新版 免密钥版 含视频教程[出售]

  模板特色:300多个前端整站demo数据 编码格式:前端Html5+css3响应式,后台PHP,

Betheme主题社交媒体图标本地化,添加微信qq等图标

大部分国外主题基本都没有国内的社交媒体图标,以BeTheme主题为例,如页脚的社交图标块。

Betheme主题社交媒体图标本地化,添加微信qq等图标

要添加自己需要的图标那就只能修改主题源码了,当然,如果你有更好的方法,可以分享给我,或者关闭本页。

不多扯,开始修改。

首先你待有包含图标的ttf字体文件,你可以用FontCreator软件制作自己的字体文件,

Betheme主题社交媒体图标本地化,添加微信qq等图标

然后保存出.ttf字体文件,上传到fontsquirrel网站,制作woff eot svg这三种格式的字体,按照下图的参数设置(原网页是英文的,这是翻译的页面)

Betheme主题社交媒体图标本地化,添加微信qq等图标
Betheme主题社交媒体图标本地化,添加微信qq等图标

下载制作的字体包,包含一下文件,原主题需要哪些格式的字体文件就用哪几个就行了。BeTheme主题需要4个文件。

Betheme主题社交媒体图标本地化,添加微信qq等图标

如果我的这些图标够用,你可以下载文末的附件。放在/fonts目录

有了字体包了,接下来制作css文件。如下图两个文件。(附件包含)

Betheme主题社交媒体图标本地化,添加微信qq等图标

mfn-icons-add.css放在/fonts目录,后台设置面板用

icons-add.css放在/css目录,前台用,当然,你也可以只用一个文件,因为内容是一样的。

这两个css内容你可以添加到主题本来的css文件内。

引入css文件

后台设置引入,修改/muffin-options/options.php文件,大概在160行(具体看主题版本,以21.1.2为例)

 

后台图标框显示增加的图标,修改/muffin-options/fields/icon/field_icon.php文件,在423行后面添加自己增加的图标

 

在后台社交页添加链接,如下效果

Betheme主题社交媒体图标本地化,添加微信qq等图标

需要修改两个文件:

以下为隐藏内容:1、修改/muffin-options/theme-options.php文件,在3624行

隐藏内容,您需要满足以下条件方可查看

2、修改/includes/include-social.php文件,在12行,这个文件是对应图标的执行方法,你可以按自己的要求修改,比如我将微信的图标修改为鼠标悬停显示二维码,其他玩法就自己修改吧。

隐藏内容,您需要满足以下条件方可查看

完成了,这样你就可以在后台设置社交媒体的地址了,微信是图片地址,附件包含字体文件和css文件,php文件就按要求修改吧。

隐藏内容,您需要满足以下条件方可查看

人已赞赏
网站运营安全相关

人人商城安装后网站后台访问正常, 通过手机访问商城首页提示404问题

2020-6-22 22:24:37

美化制作网站运营

CSS样式中设置超出隐藏样式

2020-6-27 9:42:16

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索