WordPress如何添加懸浮窗口，簡(jiǎn)單步驟指南

來(lái)自：素雅營(yíng)銷研究院

方知筆記

2025年06月28日 08:59

在網(wǎng)站設(shè)計(jì)中，懸浮窗口（也稱為浮動(dòng)彈窗或懸浮按鈕）可以有效提升用戶互動(dòng)率，常用于展示促銷信息、訂閱表單或客服入口。如果你是WordPress用戶，想要為網(wǎng)站添加懸浮窗口，可以通過(guò)以下幾種方法實(shí)現(xiàn)。

方法一：使用插件添加懸浮窗口

WordPress插件是最簡(jiǎn)單的方式，無(wú)需代碼基礎(chǔ)即可完成。以下是推薦插件及操作步驟：

1. Elementor Popup Builder

安裝并激活Elementor插件（免費(fèi)版即可）。
在WordPress后臺(tái)進(jìn)入 模板 > Popup，點(diǎn)擊“創(chuàng)建新彈窗”。
使用Elementor編輯器設(shè)計(jì)彈窗內(nèi)容，設(shè)置觸發(fā)條件（如滾動(dòng)到頁(yè)面底部或延遲顯示）。
保存后發(fā)布，彈窗將自動(dòng)懸浮在頁(yè)面上。

2. Popup Maker

安裝并激活Popup Maker插件。
進(jìn)入 Popups > 添加新彈窗，設(shè)計(jì)彈窗樣式和內(nèi)容。
在“觸發(fā)規(guī)則”中選擇顯示條件（如點(diǎn)擊按鈕、頁(yè)面滾動(dòng)等）。
保存設(shè)置后，彈窗會(huì)根據(jù)規(guī)則自動(dòng)顯示。

方法二：通過(guò)代碼手動(dòng)添加懸浮窗口

如果你熟悉HTML/CSS，可以通過(guò)主題文件或自定義代碼實(shí)現(xiàn)懸浮窗口：

在主題文件中添加HTML結(jié)構(gòu) 編輯主題的 footer.php 或通過(guò) 外觀 > 主題文件編輯器 插入以下代碼：

<div id="floating-window" style="position: fixed; bottom: 20px; right: 20px; background: #fff; padding: 10px; border: 1px solid #ddd;">
<p>這里是懸浮窗口內(nèi)容</p>
<button onclick="closeFloatingWindow()">關(guān)閉</button>
</div>

添加CSS和JavaScript控制顯示/隱藏 在 style.css 或自定義CSS區(qū)域添加樣式：

#floating-window {
display: none; /* 默認(rèn)隱藏 */
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

在 functions.php 或通過(guò)插件（如“Header and Footer Scripts”）插入JS代碼：

window.onload = function() {
document.getElementById('floating-window').style.display = 'block';
};
function closeFloatingWindow() {
document.getElementById('floating-window').style.display = 'none';
}