文章列表分页php,WordPress模板之带分页的文章列表

博客首页通常会显示文章标题和内容(全部或部分)，所以一页不能显示太多文章，否则会造成页面加载速度很慢，电脑配置不高甚至会导致浏览器死掉。但一页显示较多文章更利于用户寻找感兴趣的内容，这就是文章列表的作用。

目标：制作下面这样的文章列表模板(基于twentyeleven主题)，分页使用WP-PageNavi插件实现，实际效果可以看本站文章列表

创建一个page模板

新建一个.php后缀的文件，放在twentyeleven主题目录下，命名为page-articlelist.php，然后开始编辑文件。

创建page模板的第一步是写模板声明<?php

/**

* Template Name: Article List

*

*/

这样在编辑页面的页面属性-模板下拉列表中就会有一个名叫Article List的模板可供选择。

配置文件

把一些可能更改的参数写在开头，作为配置文件，方便以后修改$order_by = 'comment_count';

/** 升序还是降序，DESC表示降序，ASC表示升序 */

$order = 'DESC';

/** 每页显示多少篇文章 */

$posts_per_page = 10;

/**

* 只显示或不显示某些目录下的文章,目录ID用逗号分隔，排除目录前面加-

* 例如排除目录29和30下的文章, $cat = '-29,-30';

* 只显示目录29和30下的文章, $cat = '29, 30';

*/

$cat = '-59';

查询文章列表的php代码

我们创建文章目录，是通过一个WordPress页面实现的，既然是页面，就有页面标题、页面内容等，我们不仅要输出文章列表，还要输出这个页面的内容，这样可以在列表之前添加一些自定义数据。/** 获取该页面的标题和内容 */

global $post;

$post_title = $post->post_title;

$post_content = apply_filters('the_content', $post->post_content);

直接使用全局变量$post获取页面的标题和内容，接下来调用WP Query，全局变量将发生改变。

在调用WP Query之前还要知道当前是第几页，因为我们要制作带分页的文章列表模板。$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

获取文章列表/** 用WP_Query获取posts */

$post_list = new WP_Query(

"posts_per_page=" . $posts_per_page .

"&orderby=" . $order_by .

"&order=" . $order .

"&cat=" . $cat .

"&paged=" . $paged

);

获取文章总数

在这里，获取文章总数很容易，我们已经用WP Query查询到所需要的数据，要获取文章总数只需要调用下面的代码$total_posts = $post_list->found_posts;

显示文章列表

文章列表数据(包括分页信息)已经通过上面的代码获取完成，接下来就要显示HTML代码了。

主体结构如下所示，这个结构是根据twentyeleven模板来的，你需要根据自己的模板修改这个结构。

页面标题

页面内容

显示文章列表

分页代码

将显示文章列表的位置加入输出循环的php代码<?php if ( $post_list->have_posts() ) : ?>

<?php while ( $post_list->have_posts() ) : $post_list->the_post(); ?>

<?php the_title(); ?>

<?php if ( function_exists('wp_pagenavi') ) wp_pagenavi( array('query' => $post_list) ); ?>

重设主循环

如果你还希望继续输出属于当前页面的内容，例如评论框，就需要恢复一下主循环，因为下面这句代码将主循环变量替换成WP Query的结果了<?php while ( $post_list->have_posts() ) : $post_list->the_post(); ?>

重置循环的代码如下wp_reset_postdata();

这样我们就有了下面这样的文章列表

样式是主题默认的，不太好看，可以稍微修饰一下

添加自定义脚本和样式表

该页面使用的脚本和样式表并不会用在其它页面，所以没必要将样式加到style.css中，定义一些只在该页面加载的脚本和样式即可。要加入自定义样式和脚本，在get_header()函数之前添加<?php

/**

* Template Name: Article List

*

*/

/** 如果你需要为该页面引入自定义的脚本的样式表，写在这里,不需要自定义样式就删除下面两行代码 */

wp_enqueue_script( 'articleList', get_template_directory_uri() . '/articlelist.js' );

wp_enqueue_style( 'articleList', get_template_directory_uri() . '/articlelist.css');

get_header();

这样我就加入了一个名为articlelist.js的脚本和articlelist.css的样式表，这两个文件创建好放在主题根目录下即可。

目前只需要样式表，脚本可以先去掉。在样式表中加入一些样式，就可以变成下面的样子。

源代码下载

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

[download id=36]