如何在WordPress中添加自定义CSS

1. 打开WordPress后台，别慌，找到「外观」->「自定义」，点进去就像进自家客厅一样自然。右侧预览窗口亮着，左边菜单栏底下藏了个「额外CSS」的入口——对，就那个看起来像代码编辑器的小方块。点它，世界安静了，这里就是你的CSS游乐场。

2. 比如你想把网站标题字体改成骚紫色，直接敲：

   .site-title {
   color: #8b00ff !important;
   }

   保存后立马生效，预览窗口里标题紫得发亮。用!important是因为主题自带CSS可能比你霸道，这叫合理抢占优先级。

3. 更野的路子是用插件。装个「Simple Custom CSS」这类工具，激活后会在外观菜单里多出一个选项。好处是即使换主题，自定义代码也不会消失，像纹身一样持久。代码框长这样：

   /* 给文章段落加呼吸感 */
   .entry-content p {
   line-height: 1.8;
   margin-bottom: 2em;
   }

4. 高级玩家直接怼主题文件。通过FTP连服务器，找到/wp-content/themes/你的主题/style.css，在末尾追加代码。但警告：更新主题时这些修改会蒸发，所以最好用子主题操作——不过那是另一个故事了。

5. 实时调试技巧：浏览器里按F12，用审查元素工具点选页面部件，右侧调试器显示当前CSS。复制生效的规则贴回WordPress的CSS框，改数值测试，比盲写快十倍。比如发现导航栏选择器其实是.main-navigation li而不是猜的.menu-item。

6. 最后记得：CSS加载顺序很重要，WordPress默认把你的自定义代码放在最末尾，所以通常不需要!important也能覆盖。但某些主题用内联样式耍流氓时，还是得上大招。保持代码整洁，多写注释，毕竟三个月后你自己也可能看不懂为什么要把按钮变成会闪的彩虹色。

Tags：

文章版权声明：除非注明，否则均为WP集市原创文章，转载或复制请以超链接形式并注明出处。