WordPress文章列表模板带分页

2021年10月更新：sola博客大改版，之前的内容已经过时。一下是最新更新，以storefront主题为例，写一个WordPress文章列表模板，且带有分页，希望对大家有帮助。

WordPress文章列表模板的代码

以下代码就是全部，包含分页和样式，不用安装其它插件。存成一个php文件放到主题根目录下，编辑页面时模板选择Article List即可。

<?php
/**
 * Template Name: Article List
 *
 */

// 分页函数
if ( ! function_exists( 'sola_pagination' ) ) :
    function sola_pagination( $paged = '', $max_page = '' ){
        $big = 999999999; // need an unlikely integer
        if( ! $paged )
            $paged = get_query_var('paged');
        if( ! $max_page )
            $max_page = $wp_query->max_num_pages;

        echo paginate_links( array(
            'base'       => str_replace($big, '%#%', esc_url(get_pagenum_link( $big ))),
            'format'     => '?paged=%#%',
            'current'    => max( 1, $paged ),
            'total'      => $max_page,
            'mid_size'   => 1,
            'prev_text'  => __('«'),
            'next_text'  => __('»'),
            'type'       => 'list'
        ) );
    }
endif;

/** 获取该页面的标题和内容 */
global $post;
$post_title = $post->post_title;
$post_content = apply_filters('the_content', $post->post_content);
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

/** 用WP_Query获取posts */
$args = array(
	'posts_per_page'       => 10,
	'paged'                => $paged,
	'post_type'            => array( 'post' ), 
	'post_status'          => array( 'publish'),
	'ignore_sticky_posts ' => false,
	'orderby'              => 'menu_order title',
	'order'                => 'DESC',
);

$post_list = new WP_Query( $args );
 
get_header(); ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			<?php if ( $post_list->have_posts() ) : ?>

				<div class="entry-content">
					<!-- 输出当前页面的标题和写在编辑器里的内容 -->
					<h1><?php echo esc_html($post_title); ?></h1>
					<?php echo $post_content;?>

					<!-- 输出文章列表 -->
					<ul class="article-list">
						<?php while ( $post_list->have_posts() ) : $post_list->the_post(); ?>
							<li>
								<!-- 带连接的文章标题 -->
								<span class="post-title">
									<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank"><?php the_title(); ?></a>
								</span>
								<!-- 显示评论数 -->							
								<span class="post-comment"><?php comments_number( '', '1条评论', '%条评论' ); ?></span>
								<!-- 显示发布日期 -->
								<span class="post-date"><?php echo esc_html( get_the_date() ); ?></span>
					
							</li>
						<?php endwhile; ?>
					</ul>
					
					<!-- 分页 -->
					<?php sola_pagination($paged, $post_list->max_num_pages); ?>
					
				</div><!-- .entry-content -->
				<!-- 文章列表显示结束 -->
									
			<?php endif; 
			wp_reset_postdata();
			?>

		</main><!-- #main -->
	</div><!-- #primary -->

	<!-- Custom style for this template -->
	<style>
		.article-list li{
		    list-style:none;
		    font-size:1.2rem;
		    display:flex;
		    padding:1rem 0;
		}
		.article-list li + li{
		    border-top:1px solid #c7c7c7;
		}

		.article-list .post-date,
		.article-list .post-comment{
		    margin-left:auto;
		    font-size:.9rem;
		}
		.page-numbers{
		    display:flex;
		    justify-content:center;
		}
		.page-numbers li{
		    list-style:none;
		    padding:1rem;
		    margin:.5rem;

		}
	</style>

<?php

get_footer();

在后台这样编辑

前台效果

分割线———–下面是旧的内容。

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

目标：制作下面这样的文章列表模板（基于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模板来的，你需要根据自己的模板修改这个结构。

<div id="primary">

	<div id="content" role="main">
	
		<h1 class="entry-title">页面标题</h1>
		
		<div class="entry-content">页面内容</div>
		
		<div class="entry-content">
			显示文章列表
		</div>
		
		分页代码
	</div>
	
</div>

将显示文章列表的位置加入输出循环的php代码

<?php if ( $post_list->have_posts() ) : ?>
	<div class="entry-content">
		<ul class="article-list">
		<?php while ( $post_list->have_posts() ) : $post_list->the_post(); ?>
			<li>
				<!-- 带连接的文章标题 -->
				<span class="post-title">
					<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank"><?php the_title(); ?></a>
				</span>
				<!-- 显示评论数 -->							
				<span class="post-comment"><?php comments_number( '', '1条评论', '%条评论' ); ?></span>
				<!-- 显示发布日期 -->
				<span class="post-date"><?php echo esc_html( get_the_date() ); ?></span>
	
			</li>
		<?php endwhile; ?>
		</ul>
		
		<!-- 用wp_pagenavi插件分页 -->
		<?php if ( function_exists('wp_pagenavi') ) wp_pagenavi( array('query' => $post_list) );  ?>
		
	</div><!-- .entry-content -->
	<!-- 文章列表显示结束 -->
						
<?php endif; ?>

重设主循环

如果你还希望继续输出属于当前页面的内容，例如评论框，就需要恢复一下主循环，因为下面这句代码将主循环变量替换成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的样式表，这两个文件创建好放在主题根目录下即可。

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