如何在 WordPress Classic 编辑器中添加按钮

添加按钮可以增强页面的视觉效果和用户体验。本文将介绍三种方法：手动插入 HTML 和 CSS，使用插件，以及结合 TinyMCE Advanced 插件快速实现按钮功能。

方法 1：手动插入 HTML 和 CSS

这种方法适合不依赖插件的用户，通过编辑 HTML 和 CSS 实现完全自定义的按钮效果。

步骤：

1. 切换到“文本”模式
   打开 WordPress 的 Classic 编辑器，点击“文本”选项卡进入文本视图。

2. 添加 HTML 按钮代码
   在需要添加按钮的位置插入以下代码：<a class="custom-button" href="https://example.com" target="_blank">点击这里</a>这里：
   • href：按钮的链接地址。
   • target="_blank"：设置为新窗口打开链接。

3. 添加自定义 CSS
   打开“外观 -> 自定义 -> 额外 CSS”，添加以下代码：
   • 这些 CSS 属性：
   • background-color: 按钮的背景色。
   • color: 按钮文字颜色。
   • padding: 内边距控制按钮大小。
   • border-radius: 圆角效果。
   • :hover: 鼠标悬停时的样式变化。

.custom-button { background-color: #3498db; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 5px; display: inline-block; } .custom-button:hover { background-color: #2980b9; }

4. 保存并预览
   点击“更新”或“发布”按钮，预览页面以查看按钮效果。

方法 2：使用插件添加按钮

如果你对代码不熟悉，可以选择插件快速实现按钮功能。

推荐插件：Shortcodes Ultimate

1. 安装插件
   • 转到 WordPress 仪表盘 -> 插件 -> 添加新插件。
   • 搜索 Shortcodes Ultimate，点击“安装”并激活插件。

2. 添加按钮
   • 对文章或页面进行编辑，在编辑器工具栏上，找到“插入短代码”按钮。
   • 从列表中选择“按钮 (Button)”选项。
   • 填写相关属性，例如按钮文本、链接地址、颜色、大小等。
   • 点击“插入”按钮，插件会自动生成如下短代码：

[su_button url="https://example.com" target="blank" style="flat" background="#3498db" color="#ffffff" size="5" radius="5"]点击这里[/su_button]

3. 保存并查看效果
   插件会自动应用样式，可以直接在前端查看自定义按钮的外观。

方法 3：结合 TinyMCE Advanced 插件

如果需要在 Classic 编辑器工具栏中直接添加按钮选项，可以使用 Advanced Editor Tools 插件。

1. 安装插件
   • 前往插件 -> 添加新插件，搜索 Advanced Editor Tools。
   • 点击“安装”并激活。

2. 自定义工具栏
   • 插件激活后，前往“设置 -> Advanced Editor Tools”。
   • 拖动“按钮”相关工具到工具栏中。

3. 添加按钮
   在编辑器中选择按钮选项，编辑按钮文本、链接和样式，即可完成。

注意事项与技巧

• 响应式设计：确保按钮在移动设备上的显示效果良好，可以通过媒体查询为不同屏幕尺寸设置特定样式。
• 优化加载速度：尽量减少不必要的 CSS 代码，避免影响网站性能。
• 安全性：为链接添加 rel="noopener noreferrer" 属性，以提高安全性并防止潜在的恶意操作。

总结

在 WordPress Classic 编辑器中添加按钮有多种方法可选。通过手动插入 HTML 和 CSS，可以获得完全自定义的外观；而使用插件则提供了便捷的操作方式，适合不熟悉代码的用户；结合 TinyMCE Advanced 插件，还可以直接在工具栏中使用按钮选项。