用图片列表方式展示BLOG

效果可以先看牛仔主义的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;

这样基本就完了  可以保存为模板  以页面形式发布。

我们再把思路引申一下,单独做一个这样的页面,然后WP后台将这个页面设为首页,立马焕然一新的感觉。

用图片列表方式展示BLOG》上有 6 条评论

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">