WordPress 自定义 CSS 入门指南：5 个必学代码片段

在 WordPress 网站上，当你想要美化页面但不想使用繁琐的插件？ 自定义 CSS 是一个强大且高效的方式，让你无需修改主题文件，就能精准调整字体、颜色、按钮、间距等样式。

本指南适合 零基础用户，将带你快速掌握 5 个必学的 CSS 代码片段，很简单的帮助你优化 WordPress 网站的外观。

1. 调整标题样式（字体、大小、颜色）

默认的 WordPress 主题可能无法满足你对标题的美观需求，但通过 CSS，你可以轻松自定义 H1-H6 标题的样式。

代码片段

/* 调整 H1-H6 标题的字体、大小、颜色 */
h1 {
    font-size: 36px;
    color: #ff6600; /* 亮橙色 */
    font-weight: bold;
    text-transform: uppercase; /* 转换为大写 */
}

h2 {
    font-size: 30px;
    color: #0073aa; /* WordPress 经典蓝 */
    font-weight: bold;
    border-bottom: 2px solid #0073aa; /* 添加底部边框 */
}

h3 {
    font-size: 26px;
    color: #333;
    font-weight: normal;
}

效果预览

• H1：大号橙色标题，全部大写
• H2：加粗蓝色标题，带有底部边框
• H3：普通大小深色标题，适合正文

适用场景：

适用于博客文章标题、美化内容层级结构

适用于产品页面，提高可读性

2. 美化按钮样式

WordPress 默认按钮（比如 表单提交按钮、购买按钮、CTA 按钮）可能样式单一，你可以使用 CSS 自定义按钮外观，让它们更具吸引力。

代码片段

/* 统一按钮样式 */
button, .button, input[type="submit"] {
    background-color: #C0007A; /* 品红色 */
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 5px; /* 圆角 */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

/* 按钮悬停效果 */
button:hover, .button:hover, input[type="submit"]:hover {
    background-color: #007ACC; /* 天空蓝 */
    transform: scale(1.05); /* 轻微放大 */
}

效果预览

默认状态：品红背景 + 白色文字
鼠标悬停：天空蓝 + 轻微放大

适用场景：适用于联系表单提交按钮
适用于电子商务网站的“购买”按钮
适用于CTA（行动号召）按钮，提高点击率

3. 自定义段落行高、字体大小和间距

好的排版可以提升网站的可读性，默认的 WordPress 主题通常行距较窄，我们可以使用 CSS 优化段落文本。

代码片段

/* 调整段落文字的间距和行高 */
p {
    font-size: 18px;  /* 文字大小 */
    line-height: 1.8; /* 行高 */
    color: #333; /* 深色，增强对比度 */
    margin-bottom: 20px; /* 增加段落间距 */
}

效果预览

• 文字更大，阅读体验更舒适
• 段落间距适中，减少视觉疲劳

适用场景：适用于博客文章，提高可读性
适用于新闻网站，提升排版美感

4. 调整页面元素的间距（边距 & 内边距）

在 WordPress 主题中，某些元素可能贴得太紧或间距不够，我们可以通过 CSS 轻松调整外边距（margin）和内边距（padding）。

代码片段

/* 统一调整各个部分的边距 */
.section {
    margin: 40px 0; /* 上下间距 40px */
    padding: 20px; /* 内边距 */
}

/* 调整导航菜单间距 */
.nav-menu li {
    margin-right: 15px; /* 菜单项之间的间距 */
}

/* 调整内容区域与侧边栏的间距 */
.content {
    margin-right: 30px;
}
.sidebar {
    padding-left: 20px;
}

效果预览

• 增强页面层次感，让各部分内容更清晰
• 增加导航菜单的间距，防止菜单项太过紧凑
• 优化侧边栏的排版，让内容更易阅读

适用场景：适用于所有 WordPress 站点的排版优化
适用于调整博客、产品页面、服务页面的间距

5. 设置图片圆角和阴影效果

如果你希望让图片更具现代感，可以使用 CSS 给图片添加圆角和阴影，增强视觉吸引力。

代码片段

/* 让所有图片默认带有圆角和阴影 */
img {
    border-radius: 10px; /* 圆角 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
    transition: transform 0.3s ease-in-out;
}

/* 鼠标悬停时图片放大 */
img:hover {
    transform: scale(1.05);
}

效果预览

默认状态：图片带有 10px 圆角 + 阴影
鼠标悬停：图片微微放大，增强交互感

适用场景：适用于博客文章中的配图，提升视觉体验
适用于产品图片，增加吸引力
适用于团队介绍、案例展示等图片内容

如何在 WordPress 中添加自定义 CSS

方法 1：使用 WordPress 自带的 “自定义 CSS”

1. 登录 WordPress 后台
2. 进入 外观 → 自定义 → 额外 CSS

3. 粘贴上面的 CSS 代码，点击 发布

方法 2：使用 “Simple Custom CSS” 插件 如果你的主题不支持直接添加 CSS，你可以安装 Simple Custom CSS 插件：

1. 安装插件 → WordPress 后台搜索 Simple Custom CSS

2. 启用插件
3. 在插件界面粘贴 CSS 代码，保存更改

总结：让 WordPress 更美观的 5 个 CSS 代码

通过本指南中的 5 个必学 CSS 代码片段，你可以轻松在 WordPress 网站上实现个性化设计，而无需依赖繁琐的插件或修改主题文件。无论是 调整标题样式、美化按钮、优化段落排版，还是 调整页面间距 和 设置图片效果，这些简单的代码都能帮助你快速提升网站的外观和用户体验。

点击了解更多关于 WordPress 美化方法。