总是有朋友问起我现在用的 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
赏
oooo
or
- 本文标题:首页文章列表中的2个样式的实现方法
- 本文链接:https://zww.me/archives/25429
- 发布时间:2011年03月15日 11:03
- 版权声明:除非注明,文章均为 zwwooooo 原创,转载请以链接形式标明本文地址!
哑哑哑
首次沙发……好鸡冻
@阿修
被自沙的人抢了......好鸭热。
@zwwooooo
我不自沙好多年~~鹅温一些……
@阿修
我以为是ashun抑制了你自沙本能,原来是鹅温了。
看来是要的人太多了,扛不住了吧
@HzlzH
我咋还是囧头像
@HzlzH
打字很累……
@HzlzH
现在行了,特意ssh登录然后删除你的囧像缓存文件(ftp怕卡死)
@zwwooooo
真有你的,ftp卡 ssh 也好不了哪去
看来只能地板了....
@alexgao
这是地下室
@zwwooooo
额...怎么大家的速度这么犀利...
@alexgao
呵呵,通常我说抢沙发,10秒内反应就沙发了
这个我也想用来着,不过想了想文章的特殊样式神马的……就放弃了
@阿修
其实不太需要,只是以前做了就让它这样下去,懒得改。
不错..学习了!!!!!!!
又见代码,不懂,呵呵
还好我会CSS。
我不会 css 怎么办?这问题本身是个问题。
不会就去学吧
哈哈。
@园子
就是这个意思,呵呵
好方法,如果是我的话,可能就用JS来实现了,不过还是用PHP操作比较好
@万戈
还是用php吧
好东西,准备应用于CMS theme上。吼吼
@宝宝健康成长
cms theme有些用到
这个代码,不是我能看懂的
@手机元素
看多了就会懂点
建议你收学生吧,可以赚学费。
@huangjun
为何呢?这些交给老师吧
呵呵,这个方法之前有用过,之后又还原了~~~
@IM路人
很简单的应用.
感谢楼主分享 联系我下 想要购买主题
@yadid
有兴趣请直接联系我,每个付费主题都有淘宝购买链接
对于俺这种小白适用,CSS可以自己瞎整。
@Firm
呵呵,可以玩玩
我好多东西不懂哦
@晨光博客
那就学呗
唉,css是个问题。我要努力~~~
@奚少
多折腾下就懂了
很早就想问你这个
@亿品元素
现在不用问了,哈
学习一下,原来也很简单啊!
@益酷网
对啊,呵呵。