建站step6--主题、插件、自定义效果

记录一下最近折腾的过程。目标是将博客做的更像一个博客，同时倾向清爽的小清新风格。主要修改了以下内容。

1. 改换了主题
2. 启用了markdown编辑器
3. 添加了文章目录
4. 添加了随机特色图片功能
5. 设置了Gravatar头像
6. 添加了文章阅读计数
7. 添加了首页导航栏特效 下面我们就挨个说。

主题

图中的6个主题是我比较喜欢的。

Kratos

在用的是Kratos，符合我对一个清爽风格博客的理解。

• 上方有大图片
• 主体左右有两栏
• 支持特色图片
• 文章下方有一些小统计
• 右侧可以放一些个人信息
• 页脚部分简约而严肃

而且有很多人拿Kratos改成二次元风格。也说明这个主题足够的大众。这里给两个链接。

笨猫博客 萌狗博客

后者是kratos-2ch的作者。但是这个主题也有一段时间没更新了，试了一下好像不太好整。最终还是先用了比较新的kratos原版。

Iconic One

这是一个简约风格的主题。当时我看中它除了符合简约、两栏风格外，蓝白风也是我比较喜欢的一个点。

现在想想，不选它的原因大概是没有图片banner吧。其他都挺好的。

喜欢文字风格的朋友不可错过。

Kratos-pjax版

这个就是moedog大佬基于Kratos-2.5.8版修改的版本。 目前Kratos已经到了4.0.3，我感觉这版本有点旧。 有比较多的内设图片api，我这边打开比较慢。开头也不是很了解这些东西，就没有选用。

如果好好配置，会是一个不错的选择。

顺便一说，如果有需要Kratos-2.5.8的朋友可以找我要主题包。这个不是很好下载。

早晨时光 MorningTime Lite

这是一个在搜索引擎上搜“wordpress 个人博客主题"时，看到知乎广告推荐的。

阳光简约型的展示风格。

Vito

vito是我过去一年多在用的一个主题。 它的主要特点有二

• 自定义程度高
• 载入特效不错

我之前将图片设为背景，前景自己调透时度。挺好玩的。 很适合书写，也很适合清新风格。

插件

折腾wordpress, 许多自定义功能都是需要插件来实现的。以下是我截止至本文编写时，所使用的插件。

MarkDown文章编辑器 WP github MD

替代Wordpress的古登堡编辑器。古登堡编辑器说真的不好用，华丽，不中用。 这个插件采用类似github的风格，可以可视化看到编辑效果。总体来说是不错的。

但有两个小问题。 一是会变成如下图的样子

二是大纲功能不正常，我用的Kratos和Vito主题上，都不正常。现在没有启用大纲功能，使用的是大纲插件。

自动目录插件 简易目录

名字叫简易目录，只是使用简易，效果挺好的。配合Kratos主题，效果如本文右侧。

随机特色图片 WP Random Post Thumbnails

这个插件实现了根据你设置的图片池，为没有特色图片的文章随机添加一张图片。

这个插件和一些主题有冲突。有的主题会自动挑选文章中的第一张图片作为特色图，有的是你已经设置过特色图片的。这些会和该插件有点冲突。在启用这个插件后，建议检查一下历史文章的情况,如果显示不正常，就请手工设置。

启用这个插件后，在插件的设置里，会让你挑选一些图做为随机池。我上传了近50张。

媒体库虚拟文件夹FileBird

既然使用了随机特色图，就想管一下随机图库。于就是找到了这个插件。这个插件虚拟出了媒体库层级目录。但在其他插件调用媒体库时，还是所有的图还是在一起显示。

效果没有预想的好，至少能起到管理作用。还是留着用吧。

文章阅读计数器 Post Views Counter

这个插件可以统计真实的文章访问情况，换句话说同一IP短时间内多次访问只计作一次。

经典小工具

Wordpress官方出品，新版WP里小工具都是以区块的形式来弄，不太习惯。 通过这个插件用回旧版本的操作风格。

WP实现自定义特效

上述都弄好了后，基本上一个网站也就有点像样了。 可是看别人的博客，多少都有一些有意思的小特效。怎么给它搬到自己的博客上呢？

当然首先多少得懂一点javascript、CSS的知识，还要知识一些浏览器F12的查看技巧。

以樱次元为例

它在首页的banner上有个导航条，导航条在下滚页面时是固定的。 当Banner移出屏幕后，导航条也就随之消息。 但是这时如果上滚页面，导航条又出现了，同时有底色。 再上滚至页面出现时，导航条背景又变成了透明。

使用F12，查看，发现nav在页面上下滚动时，其class发生了变化。 发现关键是有个叫headroom--unpin之类的类。这会不会是一个什么插件呢。

查了一下，发现还真有这个东西，叫headroom.js 按它的说明文档来做，失败了。 发现有其他人的使用记录。 原来是说明文档根本就没说清。

按着使用记录，需要向页面添加js文件，并且添加自己定制的style和js语句。 说白了就是要找个地方写js和css。

这篇文章介绍了很多种在wordpress中添加自定义语句的方法。但我觉得最方便的方法还是直接在function.php中将语句添加到wp_header()或者wp_footer()中，至于具体怎么做，请参看链接文章。 大体是以下五种方法

• 通过插件添加js
• 通过修改wordpress主题的functions.php文件添加js
• wp_enqueue_script添加自定义js
• 用wp_enqueue_script引用第三方javascript库
• 利用wp_head和wp_footer添加javascript （推荐）

总结

一番折腾，总算是弄好了。 有种在网上盖好了一个小房子的感觉。

累了可以来坐一坐。 : )