博客从一开始使用iNove主题,一用就是12年,今天花了几个小时换了一款新的主题SacchaOne,这款主题文章块状显示,支持页面自适应和嵌套评论。
为什么要换主题,就是LiteSpeed Catch这个插件闹的。
自从安装了LiteSpeed Catch插件,博客的加载速度明显快了好多。但是有一个问题,博客首页总是随机显示桌面版和手机版的主题,怎么搞都搞不定。
为什么会出现这个问题?因为博客用了两套主题,分别是桌面版和移动版。这个功能是WPtouch插件自动实现的。WPtouch插件会自动判断访问者的客户端是PC端还是移动端,如果是PC端就加载PC端的主题,如果是移动端就加载移动端的主题。
为什么要用这个插件啊?因为iNove主题不是自动响应/自适应的主题,只能显示PC端主题,因为是固定宽度,在移动端显示要缩放很不方便。所以为了方便在移动端浏览网站,只好安装了WPtouch插件。
那么为什么不换一个支持自响应的主题?因为iNove主题用了这么久,前前后后修改了不少的东西,如果换一个新的主题又要花时间来进行修改和适配。因为懒,还是因为现在对主题样式无所谓,所以一直都没有更换主题。
这次为了LiteSpeed Catch插件,我动起了更换主题的念头。 去WordPress官方themes列表里浏览自己觉得好看的主题,我的需求不高,想要简约的,最好是无图片的主题。没想到却找到一款满意的主题出来。找到以后更换主题,也就用了几分钟,但是之后花了一下午的时间来修改。修改的主要地方有如下:
一、字体和样式
SacchaOne有的字体小,有的字体大。利用浏览器的「调试工具F12」很容易调试,可以实时查看修改的效果。现在WordPress支持自定义CSS功能,也能实时查看效果,CSS改起来很方便。
又调整了几处div块的位置,修改了顶部菜单显示分类而不是页面。
这一处的修改基本上没费什么时间。
二、侧边栏隐藏
SacchaOne主题支持自动响应浏览器屏幕的大小,遇到小屏幕的客户端,侧边栏会自动掉到下面去。但是我想要的效果是侧边栏隐藏,而不是掉下去。修改起来也很简单,改一下CSS,如下:
@media (max-width: 760px){
.hideonmobile{
display: none;
}
}
这段代码的意思就是当屏幕小于760像素时,侧边栏自动隐藏。这里的760可以根据需要修改。
三、侧边栏增加内容
侧边栏使用WordPress自带的「最新评论」,修改了显示的样式,但是显示的效果还是不满意,每条评论显示两行,一行是文章的标题,一行是评论内容。我只想要一条带内容的,暂时还没有时间去摸索。
增加了AdSense广告,修改了样式。
四、首页摘要显示
首页摘要显示搞了半天也没搞好,还是用之前的WP-UTF8-Excerpt插件来搞定。
五、浏览量显示
在首页和文章页加了WP-PostViews插件的显示函数就可以了。
六、相关文章显示
Yet Another Related Posts Plugin (相关文章)插件调CSS样式调了半天。
七、其他自定义页面
修改了「常用链接」的页面,这个CSS调了好久才调好。
这次更换主题比我想的简单一些,因为不懂CSS,花了好长时间来摸索。启用了LiteSpeed Catch插件后停用了WP-PageNavi和WPtouch两个插件,目前的使用的插件有:Akismet、Database Backup for WordPress、WP-PostViews、WP-Syntax、WP-UTF8-Excerpt、Yet Another Related Posts Plugin、LiteSpeed Catch.
2023/4/5更新
现在博客启动了Google Adsense自动广告,不用自己考虑广告的位置和样式了。
首页文章摘要显示一百字左右,也没必要使用WP-UTF8-Excerpt插件了。
因为WordPress后台支持代码格式,于是停用了WP-Syntax插件,不过之前的有代码的文章需要我一篇篇修改,工作量有点大。
增加了文章存档页,用列表的方式显示全部文章。
用代码实现侧边栏「最新评论」,觉得WordPress自带的还是太繁琐,我不想显示作者和文章标题,只想用列表显示评论的内容即可。