大部分国外主题基本都没有国内的社交媒体图标,以BeTheme主题为例,如页脚的社交图标块。
要添加自己需要的图标那就只能修改主题源码了,当然,如果你有更好的方法,可以分享给我,或者关闭本页。
不多扯,开始修改。
1、制作图标字体
首先你待有包含图标的ttf字体文件,你可以用FontCreator软件制作自己的字体文件,
然后保存出.ttf字体文件,上传到fontsquirrel网站,制作woff eot svg这三种格式的字体,按照下图的参数设置(原网页是英文的,这是翻译的页面)
下载制作的字体包,包含一下文件,原主题需要哪些格式的字体文件就用哪几个就行了。BeTheme主题需要4个文件。
如果我的这些图标够用,你可以下载文末的附件。放在/fonts目录
2、制作css文件
有了字体包了,接下来制作css文件。如下图两个文件。(附件包含)
mfn-icons-add.css放在/fonts目录,后台设置面板用
icons-add.css放在/css目录,前台用,当然,你也可以只用一个文件,因为内容是一样的。
这两个css内容你可以添加到主题本来的css文件内。
3、修改php文件
引入css文件
后台设置引入,修改/muffin-options/options.php文件,大概在160行(具体看主题版本,以21.1.2为例)
public function _enqueue() { // styles wp_enqueue_style('mfn-opts-font', 'https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600', false, MFN_THEME_VERSION, 'all'); wp_enqueue_style('mfn-opts-icons', get_theme_file_uri('/fonts/mfn-icons.css'), false, MFN_THEME_VERSION, 'all'); //------添加下行内容------- wp_enqueue_style('mfn-opts-icons-add', get_theme_file_uri('/fonts/mfn-icons-add.css'), false, MFN_THEME_VERSION, 'all'); //省略n行------- }
前台页面引入,修改/functions/theme-head.php文件,在160行
if (! function_exists('mfn_styles')) { function mfn_styles() { $theme_disable = mfn_opts_get('theme-disable'); // wp_enqueue_style wp_enqueue_style('style', get_stylesheet_uri(), false, MFN_THEME_VERSION); wp_enqueue_style('mfn-base', get_theme_file_uri('/css/base.css'), false, MFN_THEME_VERSION); //------添加下行内容------- wp_enqueue_style('mfn-icons-add', get_theme_file_uri('/css/icons-add.css'), false, MFN_THEME_VERSION); //省略n行------- } }
后台图标框显示增加的图标,修改/muffin-options/fields/icon/field_icon.php文件,在423行后面添加自己增加的图标
/* --- 我的字体包增加的内容 ---*/ 'icon-qzone', 'icon-tqq', 'icon-wechat', 'icon-bilibili', 'icon-douyin', 'icon-owelltube', 'icon-xuangu', 'icon-ar', 'icon-acfun', 'icon-lofter', 'icon-vr1', 'icon-vr2', 'icon-weishi', 'icon-iqiybg', 'icon-partner', 'icon-huaban', 'icon-knowledge', 'icon-kaixin', 'icon-kuaishou', 'icon-taobaobg', 'icon-vqq', 'icon-tqqbg', 'icon-team', 'icon-wangyi', 'icon-huoshan', 'icon-zcool', 'icon-commerce', 'icon-learning', 'icon-jdbg', 'icon-mibg', 'icon-alipay', 'icon-iqiy', 'icon-jd', 'icon-taobao', 'icon-mi', 'icon-owell', 'icon-youku',
在后台社交页添加链接,如下效果
需要修改两个文件:
完成了,这样你就可以在后台设置社交媒体的地址了,微信是图片地址,附件包含字体文件和css文件,php文件就按要求修改吧。修改效果可以看看示例页面,示例页还修改了分享模块,视频模块添加支持国内视频网站,有时间再整理分享吧。
嘉乐爸爸 ( VIP 1 )
浙江感谢分享
123 ( VIP 1 )
广东斯蒂芬斯蒂芬
why ( VIP 1 )
河南这个好??
holic ( VIP 1 )
福建6666真好
holic ( VIP 1 )
福建给力
头盔君 ( VIP 1 )
重庆这个不错
锟斤拷锟斤拷-锟斤拷业锟斤拷 ( VIP 1 )
上海博主很给力,找了好久!
铬元素 ( VIP 1 )
河北请教博主一下,这样设置好以后,前天怎么更改啊,因为后台虽然有了,但是首页还是facebook等,这就尴尬了
铬元素 ( VIP 1 )
河北希望有用,毕竟关于betheme主题确实少
oio ( VIP 1 )
广东找了好久,牛人呀
锟酵凤拷一锟斤拷 ( VIP 1 )
江苏感谢作者
锟斤拷跃锟教达拷 ( VIP 1 )
江苏非常感谢
lung ( VIP 1 )
广东找了好久了
锟斤拷锟斤拷 ( VIP 1 )
广东看看
mall ( VIP 1 )
江苏非常感谢谢。
锟杰诧拷 ( VIP 1 )
上海非常感谢,很实用的办法
-Herman ( VIP 1 )
江苏非常感谢,很实用的办法
锟接凤拷锟斤拷 ( VIP 1 )
河南感觉很不错
一为 ( VIP 6 )
湖南@锟接凤拷锟斤拷 嗯嗯