×

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

优畅主题 Wordpress技术 2013-06-19 16:49 3,760 0 条评论

总是有朋友问起我现在用的 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 怎么办?这问题本身是个问题。

 


如果本文对你有帮助,你可以扫描右边的二维码打赏,谢谢支持
联系优畅:uctheme#qq.com (#改为@)
微信订阅号:优畅主题(uctheme)
官网淘宝店:http://uctheme.taobao.com
版权声明:版权归 优畅主题 所有,转载请注明出处!
转载请保留链接: https://www.uctheme.com/wordpress/technical/307.html
谢谢支付宝打赏
谢谢微信打赏

品牌创立:2012-11-18优畅主题

优畅主题成立于2012年11月18日,专业Wordpress导购主题开发商,拥有多年Wordpress主题设计经验,专门为淘宝客和导购客站长量身打造高端赚钱模板,我们注重细节,有着严谨的开发态度,一切从客户角度出发,如果你也喜欢 WordPress导购主题,欢迎和我们一起交流!


3 + 10 = ?

目前还没有评。

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册


Warning: error_log(/www/wwwroot/www.uctheme.com/wp-content/plugins/spider-analyser/#log/log-3005.txt): failed to open stream: Permission denied in /www/wwwroot/www.uctheme.com/wp-content/plugins/spider-analyser/spider.class.php on line 2900