您现在的位置是：首页 > WordPress教程WordPress教程

WordPress滚动公告咋整？3分钟教你从0到1搞掂，小白也能看懂！

WP集市 2025-08-21 【WordPress教程】 1896人已围观

嘿，老铁们！最近总有人问我：“我那WordPress网站，想加个滚动公告条，就是顶部或者侧边一直跑的文字，咋整啊？” 别急别急，这事儿简单得很，今天咱就掰开揉碎了说，保证你看完就能上手，比泡方便面还快！

先唠唠为啥要搞滚动公告？

你想啊，网站顶部飘个“新用户注册送优惠券”，或者侧边滚个“本周特价商品：XXX”，是不是比干巴巴的静态文字显眼多了？访客一进来就能瞅见重点，转化率噌噌涨，多香！

方法一：插件法（小白首选，简单粗暴）

咱先说最简单的，用插件！WordPress插件库跟菜市场似的，啥都有，找个滚动公告插件，点几下就完事。

推荐用 “Simple Marquee”（别问为啥，就因为它名字简单，功能也直接，不整那些花里胡哨的）。

步骤如下，瞪大眼睛看好了：

装插件：登录WordPress后台，左边菜单找“插件”→“安装插件”，搜“Simple Marquee”（记不住名字？复制粘贴啊老铁！），点“安装”再“启用”，跟手机装APP一样，一步到位。
调设置：启用后，后台会多一个“Marquee Settings”菜单，点进去开整：
- “公告内容”：填你想说的话，比如“双11大促！全场5折起，满200减50！”
- “滚动方向”：选“左右”还是“上下”，一般左右滚的多，看着顺溜。
- “速度”：调快慢，数值越大越快（建议先设5，太快了访客看不清，太慢了又磨叽）。
- “样式”：背景色、文字色、高度，自己看着调，别太扎眼就行，不然访客眼晕。
保存！保存！保存！（重要的事说三遍，别辛辛苦苦调半天，一刷新白干了，那可就亏大发了！）

搞定！去你网站首页瞅瞅，是不是已经滚起来了？要是没显示，清下缓存试试，有时候缓存跟咱作对，就得“揍”它一下。

方法二：纯代码法（折腾党专属，想咋改咋改）

插件虽好，但有时候咱就想少装点插件（给网站减减负），或者想自定义得更花里胡哨，那纯代码安排上！

步骤也不难，跟着我一步一步来：

准备HTML结构：先得有个“容器”装公告文字。
去“外观”→“主题文件编辑器”（注意啊老铁，改代码前先备份主题文件！别改错了回不去，那可就哭都来不及了），找到你想放公告的地方，比如顶部就找header.php，底部就找footer.php。
在合适的位置插一段代码，比如放顶部：
```
<div class="2d60-fd06-992d-6c9d marquee-bar">
 <div class="fd06-992d-6c9d-722a marquee-text">这里是你的公告内容，比如：新用户注册送10元代金券，速来！</div>
</div>
```
（别瞎插啊，找个<body>标签下面或者<header>标签里，别插在<head>里，那玩意儿不显示）

加CSS让它动起来：光有文字不动弹，那叫静态公告，咱要的是“滚动”！
去“外观”→“自定义”→“额外CSS”，粘贴这段样式：

.marquee-bar {
 width: 100%; /* 占满整个宽度 */
 background: #f8f8f8; /* 背景色，浅灰就行，别太亮 */
 padding: 8px 0; /* 上下留点空隙，看着不挤 */
 overflow: hidden; /* 藏住超出的部分 */
}
.marquee-text {
 white-space: nowrap; /* 文字不换行，不然滚一半断了 */
 animation: scroll-left 20s linear infinite; /* 动画：向左滚，20秒一圈，匀速，无限循环 */
}
@keyframes scroll-left {
 0% { transform: translateX(100%); } /* 开始时在最右边 */
 100% { transform: translateX(-100%); } /* 结束时滚到最左边 */
}

想改方向？把scroll-left改成scroll-up，再把translateX换成translateY，比如：

@keyframes scroll-up {
 0% { transform: translateY(100%); } /* 从下往上滚 */
 100% { transform: translateY(-100%); }
}

加点“小心机”：想让公告能点击跳转？简单！给文字包个<a>标签：
```
<div class="2853-a7f3-42ad-d020 marquee-text"><a href="https://你的活动链接">新用户注册送10元代金券，点我领！</a></div>
```
这样访客一点就能跳转到活动页，多实用！