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

 6年前     3.8K  

文章目录

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

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

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

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

不多扯,开始修改。

1、制作图标字体

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

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

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

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

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

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

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

2、制作css文件

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

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

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',

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

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

需要修改两个文件:

此处为隐藏的内容!

发表评论并刷新,才能查看

发表评论

完成了,这样你就可以在后台设置社交媒体的地址了,微信是图片地址,附件包含字体文件和css文件,php文件就按要求修改吧。修改效果可以看看示例页面,示例页还修改了分享模块,视频模块添加支持国内视频网站,有时间再整理分享吧。

下载信息 资源名称:Betheme社交媒体图标包 应用平台:WordPress 文件下载:70 次
下载密码:发表评论并刷新可见!
下载地址
版权声明:一为 发表于 6年前,共 7821 字。
转载请注明:Betheme主题社交媒体图标本地化,添加微信qq等图标 | 一为忆

您可能感兴趣的

43 条评论

  • avatar

    嘉乐爸爸 ( VIP 1 )

    浙江
    回复

    感谢分享

  • avatar

    123 ( VIP 1 )

    广东
    回复

    斯蒂芬斯蒂芬

  • avatar

    why ( VIP 1 )

    河南
    回复

    这个好??

  • avatar

    holic ( VIP 1 )

    福建
    回复

    6666真好

  • avatar

    holic ( VIP 1 )

    福建
    回复

    给力

  • avatar

    头盔君 ( VIP 1 )

    重庆
    回复

    这个不错

  • avatar

    锟斤拷锟斤拷-锟斤拷业锟斤拷 ( VIP 1 )

    上海
    回复

    博主很给力,找了好久! :smile:

  • avatar

    铬元素 ( VIP 1 )

    河北
    回复

    请教博主一下,这样设置好以后,前天怎么更改啊,因为后台虽然有了,但是首页还是facebook等,这就尴尬了

  • avatar

    铬元素 ( VIP 1 )

    河北
    回复

    希望有用,毕竟关于betheme主题确实少

  • avatar

    oio ( VIP 1 )

    广东
    回复

    找了好久,牛人呀

  • avatar

    锟酵凤拷一锟斤拷 ( VIP 1 )

    江苏
    回复

    感谢作者

  • avatar

    锟斤拷跃锟教达拷 ( VIP 1 )

    江苏
    回复

    非常感谢

  • avatar

    lung ( VIP 1 )

    广东
    回复

    找了好久了

  • avatar

    锟斤拷锟斤拷 ( VIP 1 )

    广东
    回复

    看看

  • avatar

    mall ( VIP 1 )

    江苏
    回复

    非常感谢谢。

  • avatar

    锟杰诧拷 ( VIP 1 )

    上海
    回复

    非常感谢,很实用的办法

  • avatar

    -Herman ( VIP 1 )

    江苏
    回复

    非常感谢,很实用的办法

  • avatar

    锟接凤拷锟斤拷 ( VIP 1 )

    河南
    回复

    感觉很不错