wordpress博客底部添加网站公告栏

今天要介绍的是在博客底部添加网站公告栏的方法，个人也比较喜欢这种模式，这里只提供下方法，具体效果请见用知更鸟主题的博客，已在ProwerV4主题测试成功。
方法依然不难，你要做的仅仅是按我说的放对位置即可。

第一步：将如下代码添加到主题文件functions.php里面，（如果报错，就把“<?php”“ ?>”去掉，然后把中间部分添加到functions.php最后一行的“?>”前面即可）。

内容比较长，我把代码放到一个文件里面，需要的自己下载吧：functions.php下载包

第二步：将如下代码添加到你的主题文件footer.php的最下面：

<div id="gg">
    <div class="close"><a href="javascript:void(0)" onclick="$('#gg').slideUp('slow');" title="关闭">×</a>
        </div>
    <div class="bulletin">
        <ul>
            <?php
               $loop = new WP_Query( array( 'post_type' => 'bulletin', 'posts_per_page' => 4 ) );
                while ( $loop->have_posts() ) : $loop->the_post();
            ?>
            <li><a href="<?php the_permalink(); ?>" title="细看 <?php the_title(); ?>"><?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 160,"..."); ?></a></li>
            <?php endwhile; ?>
        </ul>
    </div>
</div>

第三步：在style.css里面添加对应css代码

/** 公告 **/

#gg {
	position: fixed;
	bottombottom: 0;
	background:#000;
	width: 100%;
	height:23px;
	line-height:23px;
	z-index: 9999;
	opacity: .60;
	filter: alpha(opacity=60);
	_bottom:auto;
	_width: 100%;
	_position: absolute;
 _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||0)-(parseInt(this.currentStyle.marginBottom, 10)||0)));
	-webkit-box-shadow:10px 0 5px #000;
	-moz-box-shadow:10px 0 5px #000;
	box-shadow:10px 0 5px #000;
}
#gg a {
	color: #fff;
	font-size: 13px;
	letter-spacing:2px;
	text-shadow: 0px 1px 0px #000;
}
.close a {
	float:rightright;
	margin:0 10px 0 0;
}
.bulletin {
	float:left;
	height:23px;
	color: #fff;
	margin:0 0 0 20px;
	background:url(../images/bulletin.gif) no-repeat;
	min-height:23px;
	overflow:hidden;
}
.bulletin li {
	height:23px;
	padding-left:25px;
}

第四步：加载 jQuery 库了，在主题文件 header.php 里面找到
在它前面加入以下代码

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/gundong.js"></ script>

把用来实现公告栏动态效果的 jQuery 代码保存为 gundong. js 文件，并保存到主题所在目录（也可以加在主题本身已有的 js 文件里面），代码如下：

[php] // 文字滚动
(function($){
$.fn.extend({
Scroll:function(opt,callback){
if(!opt) var opt={};
var _this=this.eq(0).find("ul:first");
var lineH=_this.find("li:first").height(),
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),
speed=opt.speed?parseInt(opt.speed,10):7000, //卷动速度，数越大，速度越慢（毫秒）
timer=opt.timer?parseInt(opt.timer,10):7000; //滚动的时间间隔（毫秒）
if(line==0) line=1;
var upHeight=0-line*lineH;
scrollUp=function(){
_this.animate({
marginTop:upHeight
},speed,function(){
for(i=1;i<=line;i++){
_this.find("li:first").appendTo(_this);
}
_this.css({marginTop:0});
});
}[/php]

好了代码就写到这，喜欢的朋友可以拿去了。