当前位置：首页 > CMS教程 > 正文

如何在WordPress中编写CSS？

admin
CMS教程
2025-06-20
2969

在WordPress中添加CSS，推荐两种方法：通过子主题的style.css文件修改，或进入后台“外观→自定义→额外CSS”直接添加代码，后者无需修改主题文件更安全。

在WordPress中编写CSS是自定义网站外观的核心方式,以下为详细方法及注意事项，确保操作安全且高效：

基础方法：主题自定义器（推荐新手）

操作路径
登录WordPress后台 → 外观 → 自定义 → 附加CSS
- 实时预览效果,修改即时生效
- 代码自动保存,避免丢失

示例代码

/* 修改标题颜色 */
h1, h2 {
  color: #2a5d84;
}
/* 调整按钮样式 */
.wp-block-button__link {
  background: #e74c3c;
  border-radius: 8px;
}

进阶方法：子主题style.css（专业首选）

为何需要子主题？
直接修改父主题会导致更新时丢失修改，子主题可永久保留自定义代码。

如何在WordPress中编写CSS？第1张

操作步骤：

创建子主题
- 通过FTP访问网站根目录：/wp-content/themes/
- 新建文件夹（命名示例：parent-theme-child）
- 创建style.css文件并写入：
```
/*
Theme Name: 父主题名称子主题
Template: parent-theme-folder-name  /* 父主题文件夹名 */
*/
@import url("../parent-theme-folder-name/style.css");
```
- 激活子主题：外观 → 主题

添加自定义CSS

在子主题的style.css末尾追加代码

或新建custom.css文件，在子主题functions.php添加：

function enqueue_child_styles() {
  wp_enqueue_style('custom-css', get_stylesheet_directory_uri() . '/custom.css');
}
add_action('wp_enqueue_scripts', 'enqueue_child_styles');

插件方案（免代码）

插件名称	特点	适用场景
Simple Custom CSS	轻量级，支持后台编辑	简单修改
SiteOrigin CSS	可视化编辑器 + 代码模式	非技术人员
CSS Hero	拖拽式实时编辑	深度样式重构

注意：插件过多可能影响网站速度，建议仅保留必要工具。

关键注意事项

CSS优先级规则
!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器
```
/* 避免滥用!important */
.content p { color: blue !important; } /* 谨慎使用 */
```

响应式适配
使用媒体查询确保移动端兼容：

@media (max-width: 768px) {
  .desktop-menu { display: none; }
  .mobile-menu { display: block; }
}

缓存问题处理
- 修改CSS后刷新时按Ctrl+F5（Windows）或Cmd+Shift+R（Mac）强制清除缓存
- 安装缓存插件（如WP Rocket）需清空缓存
安全备份
- 修改文件前通过「All-in-One WP Migration」等插件备份
- 数据库备份：工具 → 导出