WordPress怎么添加弹窗通知？

兄弟们，最近是不是总刷到别人网站一打开就弹个小框框？什么“新用户领券”“限时活动最后3小时”，看着挺唬人，其实在WordPress里搞这玩意儿真不难！今天手把手教你，甭管你是纯小白还是略懂点技术，看完保准会整。

第一步：先搞明白“弹窗”是个啥

说白了，弹窗就是网站加载完（或者用户点了某个按钮）突然蹦出来的小窗口，能塞文字、图片、按钮，引流、促单效果贼好。比如你想让用户关注公众号，弹个二维码；想推新品，弹个活动海报——都靠它。

WordPress搞弹窗就俩路子：插件法（无脑操作，适合小白）和代码法（自定义强，适合想折腾的）。咱一个个说。

第二步：插件法，3分钟搞定（小白首选）

插件法优点：不用写一行代码，点点鼠标就完事；缺点：插件装多了可能拖慢网站，看你需求选。

推荐用 Popup Maker（免费版够用，功能贼全），跟着走：

1. 装插件：后台左边栏找“插件→添加新插件”，搜“Popup Maker”，点“安装→激活”（跟装别的插件一样，别告诉我你不会）。

2. 新建弹窗：激活后左边栏会多一个“Popup Maker”，点“Add New Popup”。

   • 先填个标题（自己能认就行，比如“新用户领券弹窗”）；
   • 下面“Content”框里塞内容：写文字（“关注公众号领10元券！”）、插图片（拖个二维码进去）、加按钮（链接到公众号文章）——跟编辑文章一样简单。

3. 设触发条件：这步关键！点上面“Triggers”（触发方式），选“On Page Load”（页面加载时弹），再设个延迟（比如2秒，别一打开就弹，用户会烦）；或者选“On Scroll”（用户往下滑到一半弹），更自然。

4. 看效果，发布：点右上角“Preview”预览下，文字、按钮位置调顺眼了，直接“Publish”——搞定！

（PS：想让弹窗只在首页弹？点“Conditions”选“Pages→Home Page”；想让老用户不弹？插件里找“Cookie Settings”，设个“7天内只弹1次”，别把用户烦死）

第三步：代码法，自定义拉满（技术党看这里）

插件虽香，但想搞点花活（比如弹窗带动画、样式完全自己设计），还得靠代码。别怕，不难，跟着抄就行。

核心思路：用HTML搭骨架+CSS美化+JS控制显示隐藏，再塞到WordPress里。

1. 先写基础代码（复制粘贴就行）

HTML（弹窗骨架）：一个遮罩层（半透明黑底）+ 弹窗内容（标题、文字、关闭按钮）

<div id="my-popup" class="8473-e4d4-4a0f-a7d1 popup-overlay">
  <div class="e4d4-4a0f-a7d1-14c6 popup-box">
    <h3>嘿，新用户福利！</h3>
    <p>扫码关注公众号，免费领《WordPress运营手册》！</p>
    <img src="你的二维码图片链接" style="width:200px;">
    <button class="4a0f-a7d1-14c6-535d close-btn">关闭</button>
  </div>
</div>

CSS（让弹窗好看点）：固定在屏幕中间，遮罩层半透明，弹窗加点阴影、圆角

.popup-overlay {
  position: fixed; /* 固定在屏幕上 */
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7); /* 半透明黑底 */
  display: none; /* 默认隐藏 */
  z-index: 9999; /* 保证在最上层 */
}
.popup-box {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%); /* 居中 */
  background: white;
  padding: 20px;
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 0 20px rgba(0,0,0,0.3); /* 加个阴影 */
  width: 300px; /* 宽度自己调 */
}
.close-btn {
  margin-top: 15px;
  padding: 8px 20px;
  background: #ff4d4d;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer; /* 鼠标放上去变手型 */
}

JS（控制显示隐藏）：页面加载2秒后显示，点关闭按钮/遮罩层隐藏

<script>
// 等页面加载完再执行
document.addEventListener('DOMContentLoaded', function() {
  const popup = document.getElementById('my-popup');
  const closeBtn = document.querySelector('.close-btn');

  // 延迟2秒显示弹窗（别太急）
  setTimeout(() => {
    popup.style.display = 'block';
  }, 2000);

  // 关闭弹窗函数
  function closePopup() {
    popup.style.display = 'none';
  }

  // 点关闭按钮关闭
  closeBtn.addEventListener('click', closePopup);
  // 点遮罩层也能关闭
  popup.addEventListener('click', function(e) {
    if (e.target === popup) closePopup();
  });
});
</script>

2. 把代码塞到WordPress里

两种方法，选一个就行：

• 方法1：改主题文件（适合敢折腾的）
  后台“外观→主题文件编辑器”，找到当前主题的“footer.php”（页脚文件），在</body>标签上面粘贴上面的HTML+CSS+JS代码（CSS可以放<style>里，JS放<script>里）。
  注意：改主题文件前先备份！别瞎改把网站搞崩了，崩了别怪我没提醒！

• 方法2：用“自定义HTML”小工具（安全不折腾）
  后台“外观→小工具”，拖一个“自定义HTML”到“页脚小工具”区域，把上面的代码全粘贴进去，保存——搞定！不用动主题文件，安全。

最后说点掏心窝子的

• 别弹太勤：用户一进来弹，关了又弹，纯属找骂！用JS存个cookie（比如document.cookie = "popup_shown=1; max-age=604800"，7天内只弹1次），别当流氓。
• 手机上看看：搞完在手机上测测，弹窗别太大把手机屏幕占满，按钮别太小点不着——响应式很重要！
• 内容别啰嗦：弹窗就突出一个重点，比如“领券”“关注”，字少点，按钮大点，让人一眼就知道点哪。

总结下：插件法快，代码法强，根据自己情况选。搞完记得在手机、电脑上都看看效果，没问题就上线。有啥坑评论区问，我看到会回~ 散会！

Tags：

文章版权声明：除非注明，否则均为WP集市原创文章，转载或复制请以超链接形式并注明出处。