Old

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

总是有朋友问起我现在用的 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

声明: 除非注明,ZWWoOoOo文章均为原创,转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/25429

86 comments

  1. 阿修 阿修

    哑哑哑

    沙发
  2. 阿修 阿修

    首次沙发……好鸡冻

    板凳
  3. zwwooooo zwwooooo

    @阿修
    被自沙的人抢了......好鸭热。

  4. ......
  5. mice mice

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

    21楼
  6. Tiger Tiger

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

    22楼
  7. reizhi reizhi

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

    23楼
  8. wmtimes wmtimes

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

    24楼
  9. Paran Paran

    :grin: 膜拜一下 看看

    25楼
  10. propolis propolis

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

    26楼
  11. 帅哥 帅哥

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

    27楼
  12. smilebull smilebull

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

    28楼
  13. 郑永 郑永

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

    29楼
  14. A.shun A.shun

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

    30楼
  15. 闲云野鹤 闲云野鹤

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

    31楼
  16. Veezy Veezy

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

    32楼
  17. 西华秦 西华秦

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

    33楼
  18. 孤风独影 孤风独影

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

    34楼
  19. LAONB LAONB

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

    35楼
  20. lauyu lauyu

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

    36楼
  21. 球犯 球犯

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

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

    37楼
  22. 1河河 河河

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

    38楼
  23. 空空裤兜 空空裤兜

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

    39楼
  24. HelloMRS HelloMRS

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

    40楼
    • zwwooooo zwwooooo

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

    • HelloMRS HelloMRS

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

    • zwwooooo zwwooooo

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

    • HelloMRS HelloMRS

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

Leave a Reply