换了3个主题后我决定自己改：博客主题二次开发避坑指南

换主题这事真的有毒。

我前前后后换了5个主题，每次都觉得这个好看，装上去没两周就开始挑刺：导航栏太窄了、文章标题颜色不对、分页按钮丑得要命、底部版权信息删不掉……

最后我悟了——与其找一个完美主题，不如找一个顺眼的主题然后自己改。反正CSS这东西学一学就会，改着改着就成了半个前端。

今天分享下我这几年改主题的经验，都是踩坑踩出来的。

一、准备工作：改之前先备份

这个我必须放第一条，因为真的太重要了。

我第一次改主题的时候，信心满满改了一堆CSS，结果手滑删错了代码，整个首页白屏了。那一刻脑子是空白的，还好有备份赶紧恢复了。

必须做的备份：

1. 整站文件打包下载

2. 数据库导出

3. 当前主题文件夹单独备份一份

用宝塔面板的话，这三步5分钟就能搞定。别偷懒，备份三分钟，受益一辈子。

二、从哪个文件开始改？

WordPress、Z-Blog、Typecho……不管哪个系统，主题文件夹的结构都差不多。找到这几个关键文件：

文件作用改这个能干嘛
style.css样式文件颜色、字体、布局、间距
header.php头部模板logo、导航、广告位
footer.php底部模板版权、备案号、统计代码
single.php文章页模板文章布局、相关文章
functions.php功能文件小工具、钩子、自定义函数

新手建议先从 style.css 下手，这是最安全的，改错了最多样式乱了，不会让网站直接崩掉。

三、CSS修改的套路

大部分人改主题其实就是想：

  • 换个颜色
  • 调个字体大小
  • 改下模块间距

举个例子，我想把博客的强调色从蓝色换成绿色。在 style.css 里找到主色调的定义（通常搜索 color 或者 # 后面跟颜色值），改掉就行。

```css

/* 改之前 */

a { color: #2196F3; }

/* 改之后 */

a { color: #4CAF50; }

```

换了3个主题后我决定自己改：博客主题二次开发避坑指南-第1张图片-无双博客

进阶一点可以加自己的自定义样式。WordPress 和 Z-Blog 都支持在主题设置里加自定义 CSS，这样升级主题不会被覆盖。

四、让改完的主题能升级

这是重点。很多人改了主题之后就不敢升级了，因为一升级自己改的东西全没了。

正确做法是使用子主题。

WordPress 建一个子主题文件夹，只放 style.css 和 functions.php，让子主题继承父主题的样式和功能，然后只改你想改的部分。父主题升级不影响子主题。

Z-Blog 可以用主题配置里的自定义CSS，或者改文件名前备份一份。

Typecho 我目前没找到特别好的方案，核心思路就是：改动单独记录，改一处写一行注释标注好位置，方便下次升级后手动同步。

五、3个常用功能改造

1. 给文章加打赏按钮

很多主题没这个功能，其实加起来很简单。找到 single.php 里文章内容的结束标签，在那后面加一个 div 包裹的按钮就行。

2. 导航栏加微信公众号图标

header.php 里找到导航的位置，加一行带图标的链接。

3. 文章底部加「最后更新时间」

有些老文章放那儿很久了，读者不知道内容是不是过时的。在 functions.php 里加个钩子，自动在文章底部显示最后修改时间。

结尾

改主题这事会上瘾的。改了一个地方就觉得另一个地方也不顺眼，然后就停不下来了。

不过说真的，改着改着你就发现，CSS 没想象那么难，PHP 模板也慢慢看得懂了。比起花大价钱找人改，自己动手改出来的东西，用着就是有成就感。

现在我的主题改了大半年了，用起来特别顺手，还加了一堆自己需要的功能。有时候想想，换那么多主题，不如花点时间好好改一个。

标签：博客搭建,Z-Blog,WordPress,主题修改,CSS教程

推荐阅读：

1. Z-Blog主题选择与自定义修改实战，小白也能做出好看的博客

2. WordPress插件太多拖慢网站？教你精简到10个以内

3. 静态博客生成器横评：Hexo vs Hugo vs VuePress选哪个

有问题想请教？

微信：15207283116，备注"博客"，加入无双博客读者群一起交流主题开发和博客运营。