wordpress添加滚动（单条或多条）公告
其实想给自己的博客加个公告栏好久了，但是一直都没找到比较合适的方法。对于CMS，我总有种纠结的心情。一来，CMS系统确实给开发人员带来了快捷的网站系统雏形，这点大大节省了各种资源和时间的消耗；但是，我觉得CMS又降低了开发人员自主创新的能力（一家之言^^），总是想依赖点什么。对于wordpress我也总期望官方能够发布所有我想要的功能，然后我只要copy就行了。。。结果然后就木有结果了。不罗嗦了，最终效果如下
1、实现思路：借用wordpress中的一个页面，把其中的评论作为博客的公告内容。然后用jQuery实现单条或多条滚动。接下来是具体过程。
2、新建一篇文章或者一个单独页面（例如，博主是用自己制作的一个模板发布了“同步微博”页面），最好设置公开度为私密（这样访客就不能评论，从而公告只显示博主的评论）。后台发布后，鼠标移到页面的标题上，可以看浏览器左下角页面id。例如post.php?post=178&action=edit。178就是这个页面的ID，记下来。
3、在合适的位置添加公告栏，例如我把它添加在博客的侧栏，也就是在sidebar.php中添加代码
<!--notice by vfhky-->
<div class="notice">
<?php include('includes/notice.php'); ?><!--引入notice.php文件-->
</div>
4、新建notice.php文件（调用评论内容），保存到自己主题文件夹下的include文件夹中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | |
5、这样，评论内容就变成了公告内容。接下来我们需要用jQUery让公告内容变成单条或多条滚动的形式。由于在前面几篇文章中，我已经上传了jquery.min.js（例如文章如何在wordpress回复内容前面添加@方式），所以这个步骤我就不用做了。
6、根据自己想要实现单条滚动还是多条滚动样式，选择以下jQuery代码中的一个，并命名为notice.js，然后保存到主题所在的js目录下。
/* @notice单条 js by vfhky */
jQuery(document).ready(function($){ //Begin jQuery
$("#notice li:not(:first)").css("display","none");
var B=$("#notice li:last");
var C=$("#notice li:first");
setInterval(function(){
if(B.is(":visible")){
C.fadeIn(500).addClass("in");B.hide()
}else{
$("#notice li:visible").addClass("in");
$("#notice li.in").next().fadeIn(500);
$("li.in").hide().removeClass("in")}
},6000) //每6秒钟切换一条，你可以根据需要更改
}) //End jQuery
/* @notice多条 js by vfhky */
jQuery(document).ready(function($){ //Begin jQuery
$(function(){
var _wrap=$('ul.notice');//定义滚动区域
var _interval=6000;//定义滚动间隙时间
var _moving;//需要清除的动画
_wrap.hover(function(){
clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
},function(){
_moving=setInterval(function(){
var _field=_wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的
var _h=_field.height();//取得每次滚动高度(多行滚动情况下,此变量不可置于开始处,否则会有间隔时长延时)
_field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行
_field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
})
},_interval)//滚动间隔时间取决于_interval
}).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
});
})
7、加载jQuery库：依然在主题目录中找到header.php，再找到找到 <?php wp_head()；?> ，然后在它前面添加如下代码
<!--Google CDN提供的jQuery库的地址采用了协议相对路径，它可以很好的解决https引起的一些问题-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--当谷歌提供的jquery都无法载入时，我们需要载入本地备份的jquery.min.js文件-->
<script type="text/javascript">window.jQuery || document.write('</script><script type="text/javascript" src="<? php bloginfo('template_directory'); ?>/js/jquery.min.js">\x3C/script>')</script>
<script type="text/javascript" src="<? php bloginfo('template_directory'); ?>/js/notice.js"></script>
8、到这里，我们添加的公告内容就能滚动了。但是，公告内容会溢出公告栏目框。所以，我们还需要用CSS来隐藏溢出的公告内容，这样就perfect了！！！找到主题下面的style.css，然后添加
.notice{overflow:hidden;height:100px;line-height:18px;font-size:12px;}
9、ok，慢慢欣赏下自己的成果吧^^（PS：由于要涉及数据库的查询，网页的载入速度会变慢。所以，对于使用国外空间的童鞋们，你们自己看着办咯）
————Update 2013.02.21————
近段时间琢磨着如何提高博客网页的载入速度，所以把右侧栏的公告完善了一下。由于php中include的方法比较耗资源，所以我把公告代码修改到主题functions.php中，然后在sidebar.php中调用即可。具体做法如下：
（一）在sidebar.php中添加如下代码
<div class="notice">
<ul class="notice"><?php get_notice(); ?></ul>
</div>
（二）在主题functions.php中添加如下代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | |
（三）OVER
Comments »