WordPress如何快速添加横线？

在WordPress文章中添加横线（分隔线）是提升内容可读性的常用技巧，能有效划分章节、突出重点，以下是5种安全且易操作的方法，适用于不同技术水平的用户：

古腾堡编辑器（默认推荐）

1. 定位光标：在编辑器中点击需插入横线的位置。
2. 添加分隔线块：
   • 点击 添加新块 → 搜索栏输入“分隔线” → 选择 Separator 块。
   • 或直接输入 /separator 按回车快速插入。
3. 自定义样式（可选）：

   右侧区块设置中可调整颜色、宽度或替换为点状/波浪线样式（依赖主题支持）。

   

经典编辑器（HTML模式）

1. 切换到 文本（HTML）模式（非可视化模式）。
2. 在需插入位置输入代码：

   <hr>

   或更精确控制样式：

   <hr style="height:2px; border-width:0; background:#ddd; margin:30px 0;">

   • height：横线粗细
   • background：颜色代码
   • margin：上下间距（例：30px 0 表示上下30px间距，左右无）

快捷键盘操作（通用技巧）

• 连续输入3个短横线：在段落中单独一行输入 后按回车，自动转换为横线（古腾堡和经典编辑器均适用）。

CSS自定义样式（高级美化）

安全提示：通过主题自定义器添加CSS，避免直接修改主题文件。

1. 进入 外观 → 自定义 → 附加CSS。
2. 输入代码自定义横线：

   .custom-hr {
   height: 3px;
   background: linear-gradient(90deg, #ff7e5f, #feb47b); /* 渐变效果 */
   border: 0;
   margin: 40px auto;
   width: 80%;
   border-radius: 2px;
   }

3. 在文章HTML模式中使用：

   <div class="custom-hr"></div>

插件扩展（多功能需求）

若需图标横线或动画效果,推荐安装：

• Ultimate Blocks（免费）：
  添加“分隔线”块，提供双色、虚线、图标嵌入等20+样式。
• WP Editor Plus（免费）：
  在编辑栏添加一键插入按钮，支持自定义CSS类。

选择建议

• 新手用户：直接使用古腾堡分隔线块（方法一）或 快捷键（方法三）。
• 精准控制：通过HTML代码调整（方法二）。
• 设计个性化：CSS自定义（方法四）或插件（方法五）。

重要提示：

• 避免安装未知来源插件,防止安全风险。
• 修改代码前备份网站,或使用子主题保护更新。
• 横线不宜滥用,确保内容结构清晰优先。

引用说明：本文方法基于WordPress 6.0+官方文档及开发者社区最佳实践，CSS代码符合W3C标准，插件推荐来自WordPress.org安全仓库（2025年更新）。