如何在WordPress中添加横幅（四种方法）

横幅也就是常说的banner，在你的网站页面中能够显著提升用户体验和网站的视觉吸引力。你可以用来展示限时优惠、发布更新，还是强化品牌形象，横幅都有助于引起访客的注意、提高转化率并改善网站美观。

如何在WordPress中添加横幅？

1. 使用WordPress站点编辑器

如果你的WordPress网站支持完整站点编辑（FSE），默认的如Twenty Twenty-Four。你可以轻松通过WordPress内置编辑器添加横幅。

步骤：

1. 登录到WordPress仪表盘。
2. 转到外观 > 编辑器。

3. 打开你想放置横幅的模板（如主页或页眉）。
4. 点击+（添加块）按钮，选择封面块。

5. 上传或选择横幅图片。

6. 自定义文本、颜色和对齐方式。
7. 点击保存。

2. 使用插件

通过使用插件，你可以轻松添加横幅，还可以对横幅进行更多的控制，如定时、轮播或带有按钮的横幅。

推荐插件：

• Simple Banner：适合公告横幅。
• WPFront Notification Bar：适合固定促销横幅。
• Smart Slider 3：适合动画横幅。

我们以Smart Slider 3为例

步骤：

1. 转到插件 > 安装插件。
2. 搜索并安装Smart Slider 3。

3. 启用插件并进入插件仪表板创建新项目。

4. 上传横幅图片并保存更改。

Smart Slider 3很方便，可以直接使用自带的模板。

3. 使用页面构建器（如Elementor）

页面构建器提供了更多的自定义选项，可以通过可视化界面添加横幅。

步骤：

1. 安装并启用Elementor。
2. 编辑你想添加横幅的页面。
3. 添加一个新部分并插入横幅小部件（搜索“图像”）。

4. 上传或设计横幅并进行自定义。

5. 点击更新/发布。

4. 通过代码手动添加

如果你精通代码，可以直接通过HTML和CSS手动添加横幅。

步骤：

1. 转到外观 > 主题文件编辑器。
2. 打开header.php或其他模板文件。

3. 插入以下HTML代码：

<div class="custom-banner"> <img src="your-banner-image-url.jpg" alt="Banner"> </div>

这段代码的作用是：

创建一个 div 区块，类名叫 custom-banner。

在这个区块中插入了一张图片（你的横幅图）。

your-banner-image-url.jpg 是图片链接，实际使用时要替换为你自己的横幅图片地址。

4. 在外观 > 自定义 > 额外CSS中添加样式：

.custom-banner img { width: 100%; height: auto; }

5. 点击发布。

通常不建议直接在主题文件编辑器中修改代码，可以使用Code Snippets插件找到Functions进行添加

在WordPress中添加横幅的最佳实践

• 使用高质量图片：确保横幅视觉吸引且优化。
• 确保移动友好：测试横幅在不同设备上的显示效果。
• 添加行动号召按钮（CTA）：鼓励访客采取行动。
• 优化SEO：使用适当的alt文本，压缩图片以提高加载速度。

通过遵循这些最佳实践，你可以确保横幅不仅外观精美，还能提升网站性能和用户体验。

总结

在WordPress中添加横幅（Banner）是提升网站视觉吸引力和用户体验的有效方式。无论是通过内置的站点编辑器、插件、页面构建器，还是手动编写代码，每种方法都有其适用场景和优势。

• 站点编辑器：适合简单横幅，操作直观，无需插件。
• 插件（如Smart Slider 3）：功能丰富，适合轮播、动画或定时显示的横幅。
• 页面构建器（如Elementor）：提供高度自定义，适合复杂设计需求。
• 手动代码：适合开发者，喜欢折腾，灵活但需技术基础。

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息