在WordPress文章中添加横线有两种常见方法：，1. **添加分隔线（水平线）：** 在古腾堡编辑器中，添加“分隔符”区块即可插入一条横贯页面的水平分隔线。，2. **文字下划线：** 选中需要添加下划线的文字，在编辑器工具栏点击“下划线”按钮（通常是U图标），或使用快捷键
Ctrl+U (Windows) / Cmd+U (Mac)。在WordPress文章中添加横线（分隔线）是提升内容可读性的常用技巧，能有效划分章节、突出重点，以下是5种安全且易操作的方法，适用于不同技术水平的用户：
古腾堡编辑器（默认推荐）
- 定位光标：在编辑器中点击需插入横线的位置。
- 添加分隔线块：
- 点击 添加新块 → 搜索栏输入“分隔线” → 选择
Separator块。 - 或直接输入
/separator按回车快速插入。
- 点击 添加新块 → 搜索栏输入“分隔线” → 选择
- 自定义样式（可选）：
右侧区块设置中可调整颜色、宽度或替换为点状/波浪线样式（依赖主题支持）。
经典编辑器（HTML模式）
- 切换到 文本（HTML）模式（非可视化模式）。
- 在需插入位置输入代码：
<hr>
或更精确控制样式：
<hr style="height:2px; border-width:0; background:#ddd; margin:30px 0;">
height：横线粗细background：颜色代码margin：上下间距（例：30px 0表示上下30px间距，左右无）
快捷键盘操作（通用技巧）
- 连续输入3个短横线：在段落中单独一行输入 后按回车，自动转换为横线（古腾堡和经典编辑器均适用）。
CSS自定义样式（高级美化）
安全提示：通过主题自定义器添加CSS，避免直接修改主题文件。
- 进入 外观 → 自定义 → 附加CSS。
- 输入代码自定义横线：
.custom-hr { height: 3px; background: linear-gradient(90deg, #ff7e5f, #feb47b); /* 渐变效果 */ border: 0; margin: 40px auto; width: 80%; border-radius: 2px; }- 在文章HTML模式中使用：
<div class="custom-hr"></div>
插件扩展（多功能需求）
若需图标横线或动画效果,推荐安装：
- Ultimate Blocks（免费）：
添加“分隔线”块，提供双色、虚线、图标嵌入等20+样式。 - WP Editor Plus（免费）：
在编辑栏添加一键插入按钮，支持自定义CSS类。
选择建议
- 新手用户：直接使用古腾堡分隔线块（方法一）或 快捷键（方法三）。
- 精准控制：通过HTML代码调整（方法二）。
- 设计个性化：CSS自定义（方法四）或插件（方法五）。
重要提示：
- 避免安装未知来源插件,防止安全风险。
- 修改代码前备份网站,或使用子主题保护更新。
- 横线不宜滥用,确保内容结构清晰优先。
引用说明：本文方法基于WordPress 6.0+官方文档及开发者社区最佳实践，CSS代码符合W3C标准，插件推荐来自WordPress.org安全仓库（2025年更新）。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/34906.html
