总是有朋友问起我现在用的 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 怎么办?这问题本身是个问题。
完。
拥有多年WordPress博客/企业建站开发经验,独树一帜的设计,提供最专业的网站设计方案;原创的主题标签语义化,增强网站优化效果。
增强用户体验、提高品牌形象给人留下深刻的印象,那就选择我们,我们的每一款主题都是独一无二的,都有自己的灵魂,每款主题都有各自的配色方案。
遵循现代网页设计的趋势,所有主题都提供完整的响应式布局,优化大桌面显示器以及对平板和智能手机的支持,从而提供一致性的用户体验。
长期及时地在线售后服务和免费升级更新,确保您的网站始终运行在最佳状态,24小时QQ在线的沟通方式免去您的后顾之忧,替您节省网站维护成本。
目前还没有评。