首页文章列表中的2个样式的实现方法

» 2011-03-15 86条评论

总是有朋友问起我现在用的 zSnos-private 首页文章列表的2种样式(头5篇显示摘录,后面的只有标题)是怎样实现的,老是用 QQ / Gtalk 回复多了很累,所以还是说说吧。

其实很简单,就是加个计数器和页数判断,下面举例简单说明。

为了排版,这一行是废话……

下面正式开始(这一行也是废话……)

假如主题文件 index.php loop 语句如下(有些主题有 home.php 就改 home.php)

<?php if (have_posts()) : while (have_posts()) : the_post();?>
<div class="post" id="post-<?php the_ID(); ?>">
	<h2 class="title"><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
	<div class="entry">
		<?php the_content(); ?>
	</div>
</div>
<?php endwhile; else: ?>
<?php endif; ?>

然后加个计数器,再加些首页当前页判断,代码如下

<?php $post_cont = 0; //文章计数器
if (have_posts()) : while (have_posts()) : the_post(); $post_cont++;
   if (is_home() && $paged <2 && $post_cont < 6) { //如果是首页第一页,前5篇文章显示一个样式 ?>
      <div class="post_top" id="post-<?php the_ID(); /* 这里加了个名为post_top的class来定义样式 */ ?>">
      	<h2 class="title"><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
      	<div class="entry">
      		<?php the_content(); ?>
      	</div>
      </div>
   <?php } else { //后面的文章和翻页后一个样式 ?>
      <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
      	<h2 class="title"><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
      	<div class="entry">
      		<?php the_content(); ?>
      	</div>
      </div>
   <?php } ?>
<?php endwhile; else: ?>
<?php endif; ?>

再然后就是css来定义样式了,前 5 篇用 .post_top 后面的用 .post

其实根据思路可以扩展,如用 is_sticky() 函数判断是否有“置顶”文章,然后加一个 class 定义一个样式,也可以根据 $paged 变量定义翻页后的样式等等……

:总是有一些小朋友会说:我不会 css 怎么办?这问题本身是个问题。

zww
or
oooo

“首页文章列表中的2个样式的实现方法”有86条评论

  1. mice says:

    :oops: 当初想实现个啥玩意来着..用着类似的方法...年纪大了记不住东西了...

    1. zwwooooo says:

      @mice
      你多大啊 - -

  2. Tiger says:

    偶滴神那!
    ZWW 有个主题里面一行代码能改么!!?

    1. zwwooooo says:

      @Tiger
      你说啥?

  3. reizhi says:

    这样一段段的代码,到了换主题时该头疼了

    1. zwwooooo says:

      @reizhi
      你担忧这个就不要折腾了。

  4. wmtimes says:

    嗯。好像说的这个样式哪儿见过。我是指做出来的效果。

    1. zwwooooo says:

      @wmtimes
      我博客!

  5. Paran says:

    :grin: 膜拜一下 看看

    1. zwwooooo says:

      @Paran
      膜拜春哥吧,我还活着。

  6. propolis says:

    过来顶一起。再打点酱油。

    1. zwwooooo says:

      @propolis
      最近抢盐,下次就酱油了,扽点酱油吧

  7. 帅哥 says:

    以前刚接触WP时看到异次元那效果还在想事怎样实现的,看完代码很简单。。

    1. zwwooooo says:

      @帅哥
      本来就不复杂,所以一直没去写。

  8. smilebull says:

    正想折腾,zww大就公布了,哈哈

    1. zwwooooo says:

      @smilebull
      那就慢慢折腾

    2. smilebull says:

      @zwwooooo
      还是折腾不出想要的样子 :roll:

    3. zwwooooo says:

      @smilebull
      呵呵,其实主要还是css

  9. 郑永 says:

    很不错,呵呵,刚才试了一下,还是感觉自己那种适合,谢谢分享。

    1. zwwooooo says:

      @郑永
      方式有很多种

  10. A.shun says:

    收藏
    这个可以考虑折腾下,我的首页文章列表是不怎么满意
    不过文章又太少,这么显示会一堆旧文。。。囧

    1. zwwooooo says:

      @A.shun
      给旧文多点机会吧。

  11. zww这里的好东西就是多啊,哈哈。

    1. zwwooooo says:

      @闲云野鹤
      随便拿去吧,哈

  12. Veezy says:

    嘿嘿嘿,嘿嘿嘿...代码偷走...css也想偷走...

    1. zwwooooo says:

      @Veezy
      哈哈哈,不用偷,拿就行了

  13. 西华秦 says:

    一直比较懒,主题换上就不想动的人 :twisted: 所以也一直没有动手自己写过,虽然的确得自己写了

    1. zwwooooo says:

      @西华秦
      喜欢就好,不需要常换

  14. 学习了,博主真好,所有评论都亲自回复! :razz:

    1. zwwooooo says:

      @孤风独影
      基本都会回复,除非太多就挑着回复了。

  15. LAONB says:

    我已经很久,很久,很久没看过wp代码变成什么样了,也不懂增加了什么新功能了,( ̄_ ̄|||)

    1. zwwooooo says:

      @LAONB
      没啥重大的新功能

  16. lauyu says:

    那啥 ZNONE的 CSS要实现这个 该如何修改?

    1. zwwooooo says:

      @lauyu
      具体就不敲了,你根据文章的内容举一反三吧。

  17. 球犯 says:

    另:总是有一些小朋友会说:我不会 css 怎么办?这问题本身是个问题。

    关键是这句话 我可以飘过了。。。其实这功能我挺喜欢的。。。

  18. 河河 says:

    又是css,头都大了,博主能把代码帖出来吗 :mrgreen: :mrgreen:

    1. zwwooooo says:

      @河河
      css?贴出来有何用?需要自己针对自己主题写css

  19. 这个只需要自己写CSS就行了么,不需要JS效果么

  20. HelloMRS says:

    有来问一下,如果自定义了首页的第一页而且不显示文章,而最新的文章从第二页开始显示应该怎么写呢,谢谢Zwww大哥 :?:

    1. zwwooooo says:

      @HelloMRS
      你这需求很另类,木有遇到这类需求,所以无法给你答案。你这个不如定义首页为单页面,然后另外给个页面做最新文章列表(可以翻页)

    2. HelloMRS says:

      @zwwooooo
      嗯,是啊,和帕兰印象那种模式一样的呢!

    3. zwwooooo says:

      @HelloMRS
      那是cms类,就是首页展示各种分类下的文章,跟你说神马又不同。

    4. HelloMRS says:

      @zwwooooo
      哦了解,就是自定义了第一页...第二页按照常规显示,做个页数判断吧!

回复给 Paran ¬
取消回复

昵称 *

网址

B em del U Link Code Quote