手把手教你打造简书风格的精美个人博客

废话晚点说,先上图,以下是本人天地会珠海分舵仿简书风格的博客科技向前冲

[科技向前冲首页](http://www.techgogogo.com)

怎么样?是不是咋一看以为自己到了我们亲爱的简书了呢?v

如之前本人跟简书的“简叔”互动讨论上海的办公室是否应该叫“简书工作室”还是“简书斋”等时谈过,个人是被简书这种简洁清新的风格深深吸引的住。(这里算是给简书打个广告了,真的很不错了,喜欢写作的人去看看,包你满意!)

既然我们都喜欢舞文弄墨的,那么有一个自己的博客是最好不过的了。这里所说的自己的博客不是说在cnbeta等博客平台上注册个账号这种,因为这个还是寄人篱下而已-在人家家里,很多东西你不能乱动,比如你不能在人家墙上写写画画的(如贴小广告等)。所以这里说的自己的博客是指完全自己控制的自主博客。

该博客是基于Wordpress的,Wordpress今时今日已经非常成熟。所以这里不会描述Wordpress怎么搭建,网上一抓一大把。这里我之所以使用Wordpress的原因是它支持非常丰富的插件。

比如我们今天说的仿简书的主题就是一个插件。但是该主题安装之后不能直接应用,有不少地方需要进行修改。网上确找不到任何详细的信息来指引我们进行订制。

所以这里我就抛砖引玉,给大家说下我是怎么搭建一个高仿简书风格的自主博客的。往下之前先致谢主题作者Pete(我是从代码中看到Pete的名字,如果有误的话请联系我进行修改)

第一步 下载主题插件


看官可以到本人博客资源中进行下载http://download.csdn.net/download/zhubaitian/8541107

第二步 登录Wordpress后台管理


首先登录你的Wordpress网站管理后台,下面是本人Wordpress网站的后台登录界面:

后台登录界面

输入你的用户名密码后就会进入到后台管理页面:


Wordpress后台管理界面.png

第三步 安装主题


具体步骤按照以下图片走就好了,很简单:

找到插件选项.png
打开插件页面.png
添加插件页面.png
上传插件.png
安装插件.png

最后点击安装,等待安装完毕!

第四步 订制其他导航页面

这一步需要修改相应的php代码。大家如果不懂得程序的话也不用担心,因为我自己就根本对php只是知道个名字而已,我自己都能摸索出来,何况现在我已经告诉你应该怎么做了呢。

首先点击下图的主题按钮以进入到主题设置页面:


进入主题.png

然后在主题的下拉菜单中点击“编辑”:


点击编辑菜单.png

点击后会来到这个编辑页面:

进入编辑页面.png

大家可以看到右边显示了该主题的所有代码文件,我们往下会对相应的文件进行简单的修改以适应我们的要求。

这里要注意的是主页导航页面的php代码文件和首页的php代码文件是分开实现的,虽然在网站中我们的效果看起来是一样的。这里我们先看其他导航页面(指的是网站中我们看到的点击左边导航栏非”首页“菜单时所出现的其他页面)。

先点击右边的archive.php模版文件,然后进行以下的编辑:

其他导航页的信息设置.png

修改后的效果如下图所示:

其他导航页的信息设置结果.png

具体你要改成什么样,需要根据你自己的情况进行修改了。

第五步 订制首页


首页的订制其实跟上面其他导航栏的订制是差不多的,大家跟着下图做就可以了。


首页信息设置.png

第六步 订制底部

底部信息我们可以放上我们自己的联系方式等,要修改的文件是footer.php。


网站底部信息设置.png

效果如下所示:


网站底部对应信息效果显示.png

第七步 订制“阅读量”统计信息


该主题默认是没有在主页的文章列表中显示出阅读量的数据的,这里我们可以加上去。

不过说起来悲剧,增加后才知道自己网站的访问量原来少的可怜,还望大家多捧场了。

要修改的文件是post.php:


文章列表增加阅读量统计.png

修改后的效果:

增加阅读量信息后的效果.png

第八步 订制手机版悬浮菜单


PC版的信息我们算是定制完了,下面我们需要订制下手机版的悬浮菜单项。

需要修改的文件是header.php文件,具体要修改的代码如下图所示:

手机端悬浮按钮设置.png

最终你在手机上打开后悬浮菜单就会如下图所示:

手机版悬浮菜单.jpeg
手机版悬浮菜单项.jpeg

至于上面的about页面,这个跟主题就没有什么关系了,大家在Wordpress管理后台中添加这个页面就好了。如果确实不知道怎么去添加的话,那就在文章最后的联系方式中联系我好了。

<完>


作者:天地会珠海分舵
微信公众号:TechGoGoGo
官网: http://techgogogo.com
微博:http://weibo.com/techgogogo
CSDN:http://blog.csdn.net/zhubaitian

推荐阅读更多精彩内容