用图片列表方式展示BLOG

16
一

用图片列表方式展示BLOG

Posted by 博优谷 | (6) Comment

效果可以先看牛仔主义的www.jeansism.com/pic。或者去月光博客的首页看看。

思路: 调用9个文章post 采用css将其分割成三栏展示图下附文章标题作为链接。

<?php
$list_posts = get_posts('showposts=9&orderby=rand');   //随机获得9个post
$i=1; 标记一
foreach( $list_posts as $post ) :  //建立了一个循环
?>
//在这个循环里插入下面的内容
endforeach; ?>
<?php $screen = get_post_meta($post->ID, 'screen', $single = true); ?>
//调用自定义字符来显示图片
//下面就是具体的显示文字和图片的方法，  为了清楚一点，这里把css写在style里了 实际中可以写入css文件的
<div style="float:left;width:220px; padding-right:30px;text-align:center" >
<div style="height:220px;overflow:hidden;float:left; width:220px" >
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="bookmark">
<img src="<?php echo ($screen); ?>"  width="220 "alt=""  />  </a>
</a>
</div>
<h4>
<a href="<?php the_permalink() ?>" rel="bookmark"       title="Permanent Link to <?php the_title(); ?>"><?php     the_title     (); ?></a>
</h4>
</div>
<?php
if(fmod($i,3)==0)   //做判断 3个div以后 结束  重新开始一个3个一组的div
{
echo("</div> <div style='height:220px;padding-bottom:55px'>");
}
$i=$i+1;