仿themebetter官网主题使用教程-蚂蚁资源

仿themebetter官网主题使用教程

很多站长跟我说themebetter官网的主题很好看,可惜没有卖的,而且每年都改,让我把它扒下来。其实很久之前我就扒了,只是与themebetter官网保持一致有点不好,今年等到对方更新新版了才发布,主要样式是2019年的,并且添加了某些官方没有的东西。下面一起来看看仿themebetter官网主题的使用教程,本次主题设置更加简单,尽量减少了用户手动修改的可能。

阅读本文前,你需要一个wordpress站点,以及一份themebetter主题。

主题安装

常规安装即可,下载主题后,上传至网站主题目录,wordpress后台启用。

主题设置

logo设置

themebetter主题采用字体图标logo,没有的朋友你需要将你的logo转换为字体图标,并使用阿里图标库服务(https://www.iconfont.cn),取得图标地址。如果不会做,可以联系我,logo图标根据复杂程度额外收费。

图标上传成功后,取得如下图所示代码。

蚂蚁资源仿themebetter官网主题使用教程插图

仿themebetter官网主题使用教程

 

然后构造如下样式代码:

/**图标样式**/
@font-face {
font-family: 'miconfont'; /* 这里的miconfont与下面的miconfont对应 */
src: url('//at.alicdn.com/t/font_563629_x5go2povplr.eot');
src: url('//at.alicdn.com/t/font_563629_x5go2povplr.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_563629_x5go2povplr.woff2') format('woff2'),
url('//at.alicdn.com/t/font_563629_x5go2povplr.woff') format('woff'),
url('//at.alicdn.com/t/font_563629_x5go2povplr.ttf') format('truetype'),
url('//at.alicdn.com/t/font_563629_x5go2povplr.svg#iconfont') format('svg');
}
/**字体使用图标**/
.mfa {
position: relative;
display: inline-block;
font: normal normal normal 14px/1 miconfont;/**这里的miconfont要与上面的miconfont对应**/
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}

注意:miconfont这个名称不得使用默认的iconfont,因为其已经被主题使用!

然后在themebetter主题设置中,选择自定义CSS样式,将上面的代码复制进去。

最后你可以在主题设置的基本中,填入你的字体图标代码到logo设置中。代码在阿里图标库服务中可以看到如:

搞不定的找我,免费。

注意:themebetter主题所有设置中如涉及字体图标,都可以使用这个方法!

用户中心

themebetter主题已经内置简单用户中心功能,需要涉及到的页面都已通过代码自动注册,无需用户手动建立,只需在themebetter主题设置,会员中心里选择对应页面即可。

导航设置

由于themebetter主题兼顾了移动端的效果,所以导航菜单使用比较广泛,下面看看导航菜单的使用。

网站导航

这个导航菜单是PC端网站头部导航,在wordpress后台外观下的菜单中设置后,其内容会显示到网站所有页面的顶部。注意:仅支持二级文字菜单。

底部菜单

底部菜单是PC端网站底部导航菜单,在wordpress后台外观下的菜单中设置后,其内容会显示到网站所有页面的底部。具体效果如下图所示

蚂蚁资源仿themebetter官网主题使用教程插图1

仿themebetter官网主题使用教程

设置时,请按照下图排列。

蚂蚁资源仿themebetter官网主题使用教程插图2

仿themebetter官网主题使用教程

移动端底部导航

themebetter提供了移动端类似APP的操作,导航设置如下图所示。

蚂蚁资源仿themebetter官网主题使用教程插图3

仿themebetter官网主题使用教程

导航标签请按照如下格式填写:

<i class="fa">&#xe60c;</i>首页

可能使用到的字体图标,我会在文末提供给大家。

会员中心导航

PC端会员中心导航和上面是一样设置的,这里就不多讲了。只是必须设置一个退出选项,使用自定义链接实现,链接地址使用如下地址,字体图标建议填写

你的网站地址/wp-login.php?action=logout&redirect_to=重定向地址

移动端会员中心导航

移动端的会员中心导航有两个必须填写的,回首页、退出。退出与上面的一样,回首页字体图标填写,同样使用自定义链接实现。

到此,themebetter主题的设置就完成了,自行浏览体验吧!

themebetter字体图标

蚂蚁资源仿themebetter官网主题使用教程插图4

仿themebetter官网主题使用教程

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"www.antziyuan.com",如遇到无法解压的请联系管理员!

蚂蚁资源 » 仿themebetter官网主题使用教程

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
该资源仅供学习和研究传播,大家请在下载后24小时内删除,一切关于该资源商业行为与我们无关。 请勿将该软件进行商业交易、转载等行为,该软件只为研究、学习所提供,该软件使用后发生的一切问题与本站无关。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
找不到素材资源介绍文章里的示例图片?
对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
蚂蚁资源
大家都喜欢的资源网站!
  • 49会员总数(位)
  • 801资源总数(个)
  • 8本周发布(个)
  • 8 今日发布(个)
  • 185稳定运行(天)

提供最优质的资源集合

立即查看 了解详情
升级SVIP尊享更多特权立即升级