首页文章列表中的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. 阿修 says:

    哑哑哑

  2. 阿修 says:

    首次沙发……好鸡冻

    1. zwwooooo says:

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

    2. 阿修 says:

      @zwwooooo
      我不自沙好多年~~鹅温一些……

    3. zwwooooo says:

      @阿修
      我以为是ashun抑制了你自沙本能,原来是鹅温了。

  3. HzlzH says:

    看来是要的人太多了,扛不住了吧 :wink:

    1. HzlzH says:

      @HzlzH
      我咋还是囧头像

    2. zwwooooo says:

      @HzlzH
      打字很累……

    3. zwwooooo says:

      @HzlzH
      现在行了,特意ssh登录然后删除你的囧像缓存文件(ftp怕卡死) :mrgreen:

    4. hzlzh says:

      @zwwooooo
      真有你的,ftp卡 ssh 也好不了哪去

  4. alexgao says:

    :razz: 看来只能地板了....

    1. zwwooooo says:

      @alexgao
      这是地下室

    2. alexgao says:

      @zwwooooo
      额...怎么大家的速度这么犀利...

    3. zwwooooo says:

      @alexgao
      呵呵,通常我说抢沙发,10秒内反应就沙发了

  5. 阿修 says:

    这个我也想用来着,不过想了想文章的特殊样式神马的……就放弃了

    1. zwwooooo says:

      @阿修
      其实不太需要,只是以前做了就让它这样下去,懒得改。

  6. 不错..学习了!!!!!!!

  7. 又见代码,不懂,呵呵

  8. 我不在乎 says:

    还好我会CSS。

  9. 园子 says:

    我不会 css 怎么办?这问题本身是个问题。
    不会就去学吧
    哈哈。

    1. zwwooooo says:

      @园子
      就是这个意思,呵呵

  10. 万戈 says:

    好方法,如果是我的话,可能就用JS来实现了,不过还是用PHP操作比较好

    1. zwwooooo says:

      @万戈
      还是用php吧

  11. 好东西,准备应用于CMS theme上。吼吼

    1. zwwooooo says:

      @宝宝健康成长
      cms theme有些用到

  12. 这个代码,不是我能看懂的

    1. zwwooooo says:

      @手机元素
      看多了就会懂点

  13. huangjun says:

    建议你收学生吧,可以赚学费。

    1. zwwooooo says:

      @huangjun
      为何呢?这些交给老师吧

  14. IM路人 says:

    呵呵,这个方法之前有用过,之后又还原了~~~

    1. zwwooooo says:

      @IM路人
      很简单的应用.

  15. yadid says:

    感谢楼主分享 联系我下 想要购买主题

    1. zwwooooo says:

      @yadid
      有兴趣请直接联系我,每个付费主题都有淘宝购买链接

  16. Firm says:

    对于俺这种小白适用,CSS可以自己瞎整。

    1. zwwooooo says:

      @Firm
      呵呵,可以玩玩

  17. 我好多东西不懂哦

  18. 奚少 says:

    唉,css是个问题。我要努力~~~

    1. zwwooooo says:

      @奚少
      多折腾下就懂了

  19. 很早就想问你这个

    1. zwwooooo says:

      @亿品元素
      现在不用问了,哈

  20. 益酷网 says:

    学习一下,原来也很简单啊!

    1. zwwooooo says:

      @益酷网
      对啊,呵呵。

回复给 zwwooooo ¬
取消回复

昵称 *

网址

B em del U Link Code Quote