Git Product home page Git Product logo

teahouse-wordpress-theme's Introduction

Teahouse Wordpress Theme

主题简介

1.主题的名字叫:Teahouse,中文意思是茶馆,当初命名的原因是为了给人一种怀旧情怀,主题适合做个人博客,重点是写作和阅读。

2.基本功能包括。Html5+Css3、相应式设计、Retina设计、内置FontAwesome字体图标、内置Icomoon自定义字体图标、加载进度条、Ajax文章喜欢按钮、Ajax评论回复...

3.基本结构包括。文章类型有三种:标准、状态、相册。页面类型有三种:默认、留言、存档。分栏方式有三种:两栏、三栏、四栏。小工具区域有三种:底部隐藏区、左边隐藏区,右边显示区。菜单区域有两个:LOGO下面的主菜单、LOGO右边的自定义菜单。

主题使用

1.由于主题使用了宽屏设计,所以文章特色图的尺寸最好大一点,建议宽度不要低于1000像素,否则就会显示模糊,有失档次。对于从哪里找到漂亮的配图,我推荐unsplash

2.怎么设计自定义菜单,其实很简单。首先你创建好自定义菜单,然后准备好菜单列表,接着在主题的目录里includes/fonts/Loops /有一张图片为fonts.jpg,上面有每个字母所代表的字体图标。在“导航标签”处填入对应的字母,在“标题属性”填入你想显示的Tip文字即可。假如上面没有你想要的字体图标,你也可以到Icomoon自定义下载。

3.怎么创建音乐播放器,我这里所用到的音乐播放器是Wordpress3.8版本后自带的,首先写文章时选择类型为“标准”,然后勾选“显示选项”里面的“自定义栏目”,在出现的“自定义栏目”里,点击“输入新栏目”,名称区域填入“music”,值区域输入音乐的mp3路径即可。建议创建播放器时最后添加特色图,否则界面很单调。对于哪里可以得到音乐外链,我推荐“七牛云”或者“百度开发者中心”。

4.怎么创建相册文章,首先写文章时选择类型为“相册”,然后勾选“显示选项”里面的“相册设置”,点击“添加图片”创建即可。

5.主题有三个小工具区域,每个区域都是假如为空时,区域是隐藏的。举个例子,假如右边的小工具区域里没有小工具区域时,区域就会消失,文章区域就会变得很宽。左边的小工具区域没有小工具时,你便无法打开侧边栏。

6.主题包含一个叫SimpTip.css的功能,鼠标经过自定义菜单时弹出的Tip就是它来实现的,你也可以用它来自定义各种弹出Tip,具体操作可参考插件官网。

7.主题包含一个萤火背景,它是通过html5的画布功能实现的,为了照顾手机的加载速度,默认在移动设备时是不加载的,若果你不想显示它,可以在includes/js/Plugins.js里删除circle_bg字段下的对应代码即可。

8.文章的Ajax喜欢按钮是需要另外安装插件的,插件来自zilla-likes,不过我插件经过修改才适合和主题显示,所以插件就在主题的zilla-likes目录里。

9.其它插件的兼容性,除了测试过“多说评论插件”没问题外,其它均为测试,目测都不会有什么大问题。

10.对于左边隐藏的小工具区域,假如已经放置了新浪微博挂件,就不要放置其它小工具,否则会造成界面混乱。

11.后台那里上传Logo时,下面有一个选项叫“logo retina”,假如logo是一般大小就选中“不启用”;假如logo做到两倍大小就选中“启用”。

12.因为考虑到文章的特色图较大,所以增加了利用自定义栏目的方式插入外链图片,节省空间之余还可以优化加载速度。这个和插入音乐外链同一做法,首先写文章时选择类型为“标准”,然后勾选“显示选项”里面的“自定义栏目”,在出现的“自定义栏目”里,点击“输入新栏目”,名称区域填入“picture”,值区域输入图片的路径即可。假如你同时使用了外链特色图和wordpress特色图的话,会优先显示外链特色图的。

13.后台增加手机显示菜单的选择功能。分别有“main menu”和“custom menu”的选择。

14.怎么才能有我左边的微博。去你的微博主页,右上角的“设置”--“我的小工具”--“微博秀”。

15.怎么才能让主页文章显示摘要。编辑文章时,插入“more标签”就可以了。

常见问题

1.为何上传不了logo?这是因为某些插件的兼容问题,也可能时编码格式的问题,可以尝试停用一些插件再上传试试。

2.为何播放器上面的播放停止什么的小图标不显示?这是个奇葩的问题,出现几率不大,估计是服务器的类型问题或权限问题,尤其一些免费主机或者杂牌主机,它们无法读取svg文件导致的,解决方法是在/wp-includes/js/mediaelement/mediaelementplayer.min.css里把controls.svg改为controls.png就好。

3.当文章内容或页面内容,比右边的小工具栏的高度矮时,右边的小工具就显示不全,怎么回事?因为我开始为了照顾文章内容的自适应布局,我把右边的小工具的定位写成依赖于文章框架的绝对定位,这个我还在找解决方法。临时解决方达是,写文章时多写些字或者在文章的结尾多敲几个空格行就好,把文章高度拉长。

4.为何在后台的自定义里,主题不实时显示?目前发现几个人有这情况的,都是插件的兼容问题,试着把一些插件停用了在打开。

更新提示

请注意,可能你在其它网站的网盘下载本主题的,但那些主题都不是最新版本的,最新版只存放在这里。最后请保留页脚的版权信息。

最后更新于:2014.8.21

teahouse-wordpress-theme's People

Watchers

James Cloos avatar  avatar  avatar

Forkers

doocii

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.