[免插件]为wordpress主题怎样添加滚动公告栏功能

如果你需要长时间运营一个wp网站，那你真的很需要一款主题带有公告功能，你需要把一些最新的消息传达给你的访客，这个时候我能解决公告栏功能的最简单最有效的方式就是使用wp插件，来实现我们的需求，但是插件有太多的操作局限，比如不能调整展示的位置，只能放在小工具里，或是某个角落位置上，而且设置起来成本高，自定义属性太弱，往往达不成我们想要的效果，我们只是是想要一个简单的滚动公告功能，为什么让我承受这么多？？？那这个时候我们就要尝试自己来写一个插件，但是对于小白来讲，公告功能很难实现，下面测速网就给大家分享出了一组简单实现wordpress主题公告功能的代码，而且操作起来也很十分容易，只需要有简单的html基础就可以上手操作，可以说是wordpress站长的福利之选。

<style>#announcement_box {background-color: rgba(240, 239, 215, 0.5);background-color: #E3DEC0 9;padding-left: 15px;width: 100%;height: 30px;border: 1px dashed #C1C0AB;border-radius: 2px;}/*图片地址需要替换*/#announcement {background:url(/*图片地址*/) left center no-repeat scroll; height:25px; line-height:25px; overflow: hidden;float:left;}#announcement a {color:#000;}#announcement a:hover {color:#94382B;}.announcement_remove {padding:1px 10px; float:right; font-size:14px;}.announcement_remove a {height:18px; width:18px; display:block; line-height:16px; margin:4px 0 3px 0; margin:10px 0 3px 0 9; text-align:center;}.announcement_remove a:hover {background-color:#cdc8a0; box-shadow:1px 1px 1px #66614c inset; -webkit-box-shadow:1px 1px 1px #666 inset; -moz-box-shadow:1px 1px 1px #666 inset; border-radius:3px;}#announcement_close {color:#666;}#announcement span {color:#666;}#announcement ul {list-style-type:none}</style><div id="announcement_box" > <div id="announcement"><ul ><!--以下的公告内容代码需要手动复制/修改内容--> <li><span > 2015-4-25</span>友情提示：可以使用键盘左右方向键来浏览上一篇和下一篇文章</li> <li><span > 2015-4-24</span>老师上生物课，说到精子的结构和成分，老师说精子的主要成分是蛋白质，一女 生提问老师为什么不是甜的呢？全班爆笑，女生脸红跑出教室。</li></ul> </div> <div ><a title="关闭" href="javascript:void(0)" rel="external nofollow" onClick="$('#announcement_box').slideUp('slow');"><span id="announcement_close">×</span></a></div></div><script>function AutoScroll(obj){ $(obj).find("ul:first").animate({ marginTop:"-25px" },500,function(){ $(this).css({marginTop:"0px"}).find("li:first").appendTo(this); }); } $(document).ready(function(){ setInterval('AutoScroll("#announcement")',4000) });</script>1617181920212223242526272829303132333435<style>#announcement_box {background-color: rgba(240, 239, 215, 0.5);background-color: #E3DEC0 9;padding-left: 15px;width: 100%;height: 30px;border: 1px dashed #C1C0AB;border-radius: 2px;}/*图片地址需要替换*/#announcement {background:url(/*图片地址*/) left center no-repeat scroll; height:25px; line-height:25px; overflow: hidden;float:left;}#announcement a {color:#000;}#announcement a:hover {color:#94382B;}.announcement_remove {padding:1px 10px; float:right; font-size:14px;}.announcement_remove a {height:18px; width:18px; display:block; line-height:16px; margin:4px 0 3px 0; margin:10px 0 3px 0 9; text-align:center;}.announcement_remove a:hover {background-color:#cdc8a0; box-shadow:1px 1px 1px #66614c inset; -webkit-box-shadow:1px 1px 1px #666 inset; -moz-box-shadow:1px 1px 1px #666 inset; border-radius:3px;}#announcement_close {color:#666;}#announcement span {color:#666;}#announcement ul {list-style-type:none}</style><div id="announcement_box"><div id="announcement"><ul ><!--以下的公告内容代码需要手动复制/修改内容--> <li><span > 2015-4-25</span>友情提示：可以使用键盘左右方向键来浏览上一篇和下一篇文章</li> <li><span > 2015-4-24</span>老师上生物课，说到精子的结构和成分，老师说精子的主要成分是蛋白质，一女 生提问老师为什么不是甜的呢？全班爆笑，女生脸红跑出教室。</li></ul></div><div ><a title="关闭" href="javascript:void(0)" rel="external nofollow"onClick="$('#announcement_box').slideUp('slow');"><span id="announcement_close">×</span></a></div></div><script>function AutoScroll(obj){ $(obj).find("ul:first").animate({ marginTop:"-25px" },500,function(){ $(this).css({marginTop:"0px"}).find("li:first").appendTo(this); }); } $(document).ready(function(){ setInterval('AutoScroll("#announcement")',4000) });</script>

worpdress滚动公告栏代码使用说明

将以上代码复制并新建一个PHP文件，如命名为 wanote.php，将文章上传到你的主题文件夹目录内，然后在需要显示公告的位置用下面代码调用即可。

<?php include (TEMPLATEPATH . '/wanote.php'); ?>1<?php include (TEMPLATEPATH . '/wanote.php'); ?>

上一篇：教你怎样为WordPress主题添加更新自动提示功能

下一篇：教你在填写wordpress摘要时去掉p标签的方法

---

wordpress主题