让代码更简单

当前位置:代码狗 > WordPress > WP建站 > 正文

仿themebetter官网主题使用教程

重要:本文最后更新于2020-08-12 08:32:53,某些文章具有时效性,若有错误或已失效,请在下方留言或联系代码狗

很多站长跟我说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官网主题使用教程

仿themebetter官网主题使用教程

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

仿themebetter官网主题使用教程

仿themebetter官网主题使用教程

移动端底部导航

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

仿themebetter官网主题使用教程

仿themebetter官网主题使用教程

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

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

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

会员中心导航

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

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

移动端会员中心导航

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

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

themebetter字体图标

仿themebetter官网主题使用教程

仿themebetter官网主题使用教程

感觉很棒!可以赞赏支持我哟~

赞(1) 打赏

评论 抢沙发

×

请作者吃根烤肠!

支付宝