WordPress模板配色修改入门到放弃边缘，再拉回来！

开头先唠唠踩过的WordPress配色巨坑

嘿呀各位搞个人号、搭小破站（可能是摸鱼社也可能是刚起步的手账铺子）的宝子们！先自曝家门：搞过6个主题站+N次帮闺蜜搭宠物救助临时页，WordPress模板配色修改 这个事，真的是我踩过的最长最黏的狗尾巴草——看起来软乎乎随便揪，揪不对就沾一裤子花粉痒半天，甚至差点把整个狗尾巴花田（站点）拔了重种！

最早犯的傻？就是用手机拍的樱花粉当背景，直接往WordPress后台“自定义颜色”里塞色号！结果呢？救助站的流浪狗在粉嫩嫩的页面上笑得像个傻der，闺蜜点进后台差点哭出来：“我是要给流浪猫流浪狗找家的，不是开樱花女团预备役基地！”后来又瞎试一键换色插件，换得背景从荧光绿到奶奶灰跳得比抖音bgm还快，加载速度直接从高铁变绿皮车，广告倒是加载得比首页banner还溜……

所以今天来！就是作为WordPress模板配色修改 的“踩坑钉子户”，把钉子都拔出来给你们铺路！放心，土味鸡汤管够，技术干货也不带掺水的！记住：配色不是玄学，是让狗尾巴花田长出自己味道的魔法棒！

魔法棒第一关：找好你的“底色画布”别瞎抓

底色画布是什么？就是你整个站点的主色调！别听那些“高级配色师说主色调不能超过三种”的瞎话——那是给奢侈品大牌看的，咱们小破站？主副点缀加起来不超五种顶天了，不然像穿了花棉袄配碎花裙再加绿袜子，土得掉渣！

踩坑的反面教材我先放一放，来给你们说靠谱的：

• 手账/烘焙/宠物用品这类软乎乎的站：主色调选低饱和度的“治愈色系狗尾巴草花穗尖”就行！比如奶杏色FFF5E6，樱花粉调柔的F8E1E9，暖调浅灰F0F0F0——这些色号在任何主题的WordPress模板配色修改 后台“全局颜色”里都是万能画布！
• 数码测评/职场分享这类硬邦邦的站：主色调选低饱和度的“科技灰狗尾巴草茎杆”！比如石墨灰2C3E50，浅蓝灰3498DB调暗一点的2980B9，暖白FAFAFA——奶白奶白的对比太弱，石墨灰衬得测评图和文字都倍儿精神！
• 找不到合适色号怎么办？打开你的手机相册！找一张你看了心情就好、完全符合你小破站调性的照片，然后用微信小程序“取色宝”（或者手机自带的取色功能），取照片里面积最大、看起来最顺眼的颜色当主色！这个方法我用了不下10次，WordPress模板配色修改 的新手闭眼冲！

举个土味正能量的小例子：我后来帮闺蜜改的救助站，底色换成了低饱和度的天空蓝E3F2FD——像极了流浪小动物向往的蓝天！救猫救狗的心情瞬间就提上来了！闺蜜现在每天都要刷后台配色看三遍，说像给自己的毛孩子们找到了新家一样开心！

魔法棒第二关：揪你的“文字画笔”和“点缀小贴纸”

底色画布铺好了，接下来就是画龙点睛（哦不，是画狗尾巴花点睛！）的文字和点缀啦！这里要敲黑板敲破脑袋记：文字画笔一定要跟底色画布对比明显！不然访客进来像在找隐形眼镜盒里的隐形眼镜！

文字画笔怎么选？

这个WordPress模板配色修改 里最容易被忽略，但也是最重要的！主色是治愈系奶杏色？文字就用深棕黑4A3728——像奶奶织毛衣的棒针，软乎乎但有力量！主色是科技灰？文字就用纯黑或者深灰1A1A1A——别用亮白亮白的晃眼睛！小标题可以用主色调的高饱和版本或者互补色，但别太跳！

点缀小贴纸怎么用？

• 点缀色只用在重点地方！比如按钮、链接、标题下划线、logo！全站都是点缀色的话，像狗尾巴草田插满了小红旗，根本找不到田埂在哪！
• 什么是重点地方？比如救助站的“立即领养”按钮、手账店的“立即下单”按钮、职场分享的“领取资料包”按钮！按钮上的文字也要跟按钮色对比明显！比如按钮是暖调浅蓝，文字就用纯白！按钮是治愈系珊瑚粉，文字就用深棕黑！

这里再插播一条踩坑经历：之前帮朋友搭手账站，点缀色用了珊瑚粉、柠檬黄、薄荷绿三种！结果“立即下单”按钮被柠檬黄淹没了，三天没人下单！后来只留了治愈系珊瑚粉当点缀色，按钮放大加粗文字纯白，当天就出了5单！朋友说要请我喝珍珠奶茶！你看！WordPress模板配色修改 真的能带来流量带来钱带来珍珠奶茶！这就是土味满满的能量啊！

魔法棒第三关：如果一键换色没用，就用最基础的代码“微调狗尾巴草”

有些宝子可能会遇到：WordPress模板配色修改 后台的“自定义颜色”功能不全！比如某个主题的页脚颜色改不了，某个按钮的悬停颜色改不了！这时候别慌！别拔狗尾巴草田！过来人告诉你们：用最基础的CSS代码就行！别觉得CSS代码是天书！它就是调整狗尾巴草位置和高度的小锄头！

手把手教你用小锄头（CSS代码）：

打开你的WordPress后台，点击“外观”→“自定义”→“额外CSS”！这个地方就是专门给新手留的狗尾巴草田边角料，随便种随便调不会破坏主田！

用Chrome浏览器（别的浏览器也行，Chrome最顺手）打开你的小破站，右键点击你要改的地方，选择“检查”！这时候浏览器右边会弹出一个框，鼠标移到弹出框的HTML代码上，左边页面上对应的地方会高亮！找到你要改的地方的类名（class）或者ID名（id）！类名前面有个点，ID名前面有个！

比如你要改“立即领养”按钮的悬停颜色，原来的颜色是珊瑚粉FF8A80，你想改成温柔的浅紫色E1BEE7！找到类名比如是.btn-adopt，然后在额外CSS里输入：

```css .btn-adopt:hover { background-color: E1BEE7 !important; } ```

敲黑板敲破脑袋！!important这个小感叹号很重要！它是狗尾巴草田的“村长命令”，不管后台原来的颜色是什么，村长命令必须服从！

比如你要改页脚的背景颜色，原来的颜色是黑色000000，你想改成浅蓝灰E3F2FD！找到类名比如是.footer-container，然后在额外CSS里输入：

```css .footer-container { background-color: E3F2FD !important; } ```

是不是超级简单！WordPress模板配色修改 再也不用找程序员花大几百了！自己就能当村长！自己就能调整狗尾巴草！这就是普通人的小确幸啊！这就是土味满满的成就感啊！

结尾再唠唠：配色不是终点，是新的起点

宝子们！今天的WordPress模板配色修改 小课堂就到这里啦！是不是觉得原来配色这么简单！原来技术干货和土味鸡汤可以这么搭！

记住：配色不是为了好看而好看，是为了让你的访客进来一眼就知道你是干什么的，一眼就找到你想让他找的地方！就像狗尾巴草田，狗尾巴花穗尖朝着太阳，狗尾巴草茎杆直直的，田埂清晰可见——这样路过的人（访客）才会愿意停下来看看，甚至愿意留下来当狗尾巴草田的守护者（粉丝）！

过来人再给你们一个小建议：改完配色别着急上线！先用手机、平板、电脑都看一遍！看看有没有对比不明显的地方，有没有加载慢的地方！可以叫你的闺蜜、朋友、家人都看一遍，听听他们的意见！毕竟群众的眼睛是雪亮的！群众的珍珠奶茶是最好喝的！

如果你们还有什么WordPress模板配色修改 的问题，欢迎在评论区留言！我会一一回复！我帮你们踩过坑了，肯定能帮你们解决！加油宝子们！你们的小破站一定会越来越好！加油加油加油！（重要的事情说三遍！土味满满的正能量！）