站长基地

 找回密码
 注册

QQ登录

只需一步,快速开始

站长专栏隆重上线,欢迎广大站长开通! 站长基地官方QQ群:40772293,欢迎加入 申请版主 - 给官方提建议 - 如何赚取积分?

丰富的资源下载 - 详尽全面的教程剖析 为站长提供持续动力  海量建站素材下载 源码 - 实用工具 - 书籍 - 图标 -

站长分类目录,收录优秀网站 - 火爆的友链交换平台 超级SEO,外链刷刷刷 - DEDECMS模板站 -(视频)10天轻松学会SEO-名站导航

搜索
返回列表
查看: 671|回复: 0

WordPress模板之带分页的文章列表制作教程

[复制链接]
发表于 2015-5-17 22:27:05 | 显示全部楼层 |阅读模式
监控宝
wordpress教程
类型: 功能优化 
适用版本: 通用版本 
博客首页通常会显示文章标题和内容(全部或部分),所以一页不能显示太多文章,否则会造成页面加载速度很慢,电脑配置不高甚至会导致浏览器死掉。但一页显示较多文章更利于用户寻找感兴趣的内容,这就是文章列表的作用。
目标:制作下面这样的文章列表模板(基于twentyeleven主题),分页使用WP-PageNavi插件实现,实际效果可以看本站文章列表。



创建一个page模板新建一个.php后缀的文件,放在twentyeleven主题目录下,命名为page-articlelist.php,然后开始编辑文件。
创建page模板的第一步是写模板声明:
  1. <?php
复制代码
这样在编辑页面的页面属性-模板下拉列表中就会有一个名叫Article List的模板可供选择。
配置文件把一些可能更改的参数写在开头,作为配置文件,方便以后修改
  1. $order_by = 'comment_count';
复制代码
查询文章列表的php代码我们创建文章目录,是通过一个WordPress页面实现的,既然是页面,就有页面标题、页面内容等,我们不仅要输出文章列表,还要输出这个页面的内容,这样可以在列表之前添加一些自定义数据。
  1. /** 获取该页面的标题和内容 */
复制代码
直接使用全局变量$post获取页面的标题和内容,接下来调用WP Query,全局变量将发生改变。
在调用WP Query之前还要知道当前是第几页,因为我们要制作带分页的文章列表模板。
  1. $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
复制代码
获取文章列表
  1. /** 用WP_Query获取posts */
复制代码
获取文章总数
在这里,获取文章总数很容易,我们已经用WP Query查询到所需要的数据,要获取文章总数只需要调用下面的代码
  1. $total_posts = $post_list->found_posts;
复制代码
显示文章列表文章列表数据(包括分页信息)已经通过上面的代码获取完成,接下来就要显示HTML代码了。
主体结构如下所示,这个结构是根据twentyeleven模板来的,你需要根据自己的模板修改这个结构。
  1. <div id="primary">
  2. <div id="content" role="main">
  3. <h1 class="entry-title">页面标题</h1>
  4. <div class="entry-content">页面内容</div>
  5. <div class="entry-content"> 显示文章列表 </div>
  6. 分页代码
  7. </div>
  8. </div>

  9. 将显示文章列表的位置加入输出循环的php代码
  10. <?php if ( $post_list->have_posts() ) : ?>
  11.     <div class="entry-content">
  12.         <ul class="article-list">
  13.         <?php while ( $post_list->have_posts() ) : $post_list->the_post(); ?>
  14.             <li>
  15.                 <!-- 带连接的文章标题 -->
  16.                 <span class="post-title">
  17.                     <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank"><?php the_title(); ?></a>
  18.                 </span>
  19.                 <!-- 显示评论数 -->
  20.                 <span class="post-comment"><?php comments_number( '', '1条评论', '%条评论' ); ?></span>
  21.                 <!-- 显示发布日期 -->
  22.                 <span class="post-date"><?php echo esc_html( get_the_date() ); ?></span>
  23.             </li>
  24.         <?php endwhile; ?>
  25.         </ul>
  26.         <!-- 用wp_pagenavi插件分页 -->
  27.         <?php if ( function_exists('wp_pagenavi') ) wp_pagenavi( array('query' => $post_list) );  ?>
  28.     </div><!-- .entry-content -->
  29.     <!-- 文章列表显示结束 -->
  30. <?php endif; ?>
复制代码
重设主循环
如果你还希望继续输出属于当前页面的内容,例如评论框,就需要恢复一下主循环,因为下面这句代码将主循环变量替换成WP Query的结果了。
  1. <?php while ( $post_list->have_posts() ) : $post_list->the_post(); ?>
复制代码
重置循环的代码如下:
  1. wp_reset_postdata();
复制代码



样式是主题默认的,不太好看,可以稍微修饰一下
添加自定义脚本和样式表
该页面使用的脚本和样式表并不会用在其它页面,所以没必要将样式加到style.css中,定义一些只在该页面加载的脚本和样式即可。要加入自定义样式和脚本,在get_header()函数之前添加:
  1. <?php
  2. /**
  3. * Template Name: Article List
  4. *
  5. */
  6. /** 如果你需要为该页面引入自定义的脚本的样式表,写在这里,不需要自定义样式就删除下面两行代码 */
  7. wp_enqueue_script( 'articleList', get_template_directory_uri() . '/articlelist.js' );
  8. wp_enqueue_style( 'articleList', get_template_directory_uri() . '/articlelist.css');
  9. get_header();
复制代码
这样我就加入了一个名为articlelist.js的脚本和articlelist.css的样式表,这两个文件创建好放在主题根目录下即可。
目前只需要样式表,脚本可以先去掉。在样式表中加入一些样式,就可以变成下面的样子。


源代码下载
如果你有兴趣可以下载模板源代码:


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x
您需要登录后才可以回帖 登录 | 注册

本版积分规则

二维码

小黑屋|手机版|Archiver|站长基地    

GMT+8, 2018-8-16 04:52 , Processed in 0.109354 second(s), 31 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表