Monthly Archives: February 2012

WordPress直接获取数据库blogs列表

利用前一篇单行滚动的js效果,在Wordpress首页滚动最新的几篇Blog的标题链接。首先要解决如果获取最新的5条新闻标题以及permalink的问题:

<h3 class="widget-title">Blog Lists</h3>
<ul>
<?php $bloglists = $wpdb->get_results('select * from wp_posts where post_type = "post" and post_status="publish" order by ID DESC limit 0,5');
if ( $bloglists ){
foreach( $bloglists as $post ){
setup_postdata( $post );
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php
}
}
?>
</ul>

上面的代码能够获得标题以及permalink的列表。

参考:http://codex.wordpress.org/Function_Reference/wpdb_Class#SELECT_a_Column

利用JQuery制作单行滚动的代码

不用安装其他的JQery插件,简单的利用animate动画就能实现这个效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>单行滚动</title>
<script type="text/javascript" src="jquery.js"></script>
<link type="text/css" rel="stylesheet" href="common.css" />
<style>
#scrollDiv {
width:300px;
height:25px;
border:#ccc 1px solid;
overflow:hidden
}

#scrollDiv ul{
float: left;
border: 0 none;
margin: 0;
}
#scrollDiv li {
height:25px;
line-height: 25px;
padding-left:10px;
}
</style>
<script type="text/javascript">
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("#scrollDiv")',3000)
});
</script>
</head>
<body>
<div id="scrollDiv">
<ul>
<li>这是公告标题的第一行</li>
<li>这是公告标题的第二行</li>
<li>这是公告标题的第三行</li>
<li>这是公告标题的第四行</li>
<li>这是公告标题的第五行</li>
<li>这是公告标题的第六行</li>
<li>这是公告标题的第七行</li>
<li>这是公告标题的第八行</li>
</ul>
</div>
</body>
</html>

单行滚动