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' => 10,
'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' => 50,
'paged' => $paged,
'post_type' => array( 'post' ),
'post_status' => array( 'publish'),
'ignore_sticky_posts ' => false,
'orderby' => 'date',
'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的样式表,这两个文件创建好放在主题根目录下即可。
目前只需要样式表,脚本可以先去掉。在样式表中加入一些样式,就可以变成下面的样子。
请问一下怎么实现按年份把文章列表分开呢?
在某个页面显示某个年份的文章列表,直接使用date archive页面就可以。请问你说的文章列表分开具体是什么样的功能?可否详细描述一下页面结构。
就是归档页面文章列表前加一个年份的总数,比如2022年共多少篇,然后以下是2022年的文章,2021年共多少,以下就是2021年的文章列表,可以把文章列表稍微区分开来,感谢TvT
想法很有趣,按照你的设计,似乎需要在一个页面显示所有post,如果post很多会有性能问题,关于分页怎么处理,是否有好的想法可以分享一下?
我的一种想法是显示所有年份归档,但每个年份只显示几篇文章,后面带个到WordPress默认year archive的链接。也可以是load more 按钮,点击后就加载更多这个年份里的文章。
如果post数量不多,一次全部显示页没问题。不知道你是怎么想的。
您好,在页面某块区域如何调用 文章列表。请多多指教,非常感谢!
把上面的代码改成shortcode,再将shortcode插入文章即可。
shortcode的用法参考文档https://codex.wordpress.org/Shortcode_API
本文介绍的代码部分是跟模板相关的,需要去掉,具体来说从new WP_Query开始到wp_reset_query()之间的代码是你需要的。
跟妹子学wp
谢谢分享!
在每5篇文章中间加一条横线分割,列表页看起来更美观,该怎样实现?求指教
用css的nth-child选择符试试
http://www.w3school.com.cn/cssref/selector_nth-child.asp
我这样写代码,调用的是所有分类的文章,分页不生效,是什么原因,请高人指点,
你好!
确实蛮好用的,但是为什么只有第一页和第二页可以正常打开,后面的都的页面都是显示未找到页面。
我使用时没这个问题,你可以先把固定链接调到默认看看问题是否解决。
谢谢了,碰了个问题在网上转了好一会儿了,看完文章后有所启发。。。。。。
很高兴对你有帮助
HI, sola, 能不能实现单击标题后出现下拉的 文章摘要,如果真的想详细阅读,再点 read more.. 才进入文章呢?
用jquery实现很简单啊,模版一般都会输出摘要吧,你用jquery把摘要隐藏了,给标题绑定click事件,点击的时候显示摘要就行了啊
弄了好久…不知道怎么隐藏摘要,在外部能用toggle()实现对某个标签隐藏,显示,但是wordpress里就不行了;
Sola能不能留个邮箱不?求指教
WordPress里的jquery要用jQuery来代替$符号,你用对了吗
装firebug,用控制台看js报错
您好,所有教程里面的文件都下载不了:-)
需要登录后才能下载
好像现在那个分页代码不显示了。
不会吧,我网站页面www.solagirl.net/sitemap一直用着,显示分页啊
如果是页面列表呢?
如果要显示所有页面,改一下WP Query的查询参数post_type即可,默认是post,页面的话就是page
那可不可以排除某些页面呢?
当然可以了,你可以参考一下WP Query文档,指定post__not_in参数就可以排除页面或者文章
下载链接失效。如方便,请提供,谢谢。
多谢提醒,貌似不小心把下载插件给禁用了,现在好了
《WordPress模板自带分页的文章列表》。是不是标题错了!
错了吗?没觉得啊,意思就是WordPress模板——带分页的文章列表
仔细读了一下你改的标题,你不会以为我说话大舌头吧:)
若想统计文章总数,但排除某分类文章数量,又该如何呢?
有三种方法
1. 用WP Query
-59,-58,-4就是要排除的分类ID,前加负号,用逗号分隔
2. 用get_posts
ID使用方法同上
3. 用$wpdb执行自定义查询
对比
前两种方法虽然函数不同但其实都调用了WP Query,文章越多消耗的内存越大,如果文章非常多前两种方法会很耗资源。
第三种方法直接执行了自定义的SQL语句,基本不消耗什么内存,速度较快
拜服,采用第三种方法
对了,忘了告诉你,如果你是在文章列表中排除了某些分类,那获取文章总数有更简单的方法,直接这样就可以
WP Query在查询的时候会顺带查询总数,如果已经查询了带分页的文章列表,用这种方法比第三种更好
此文早些出炉就会免掉很多麻烦了,嗯,话说你的文章列表的文章热度效果不错,具体如何实现的呢?
文章热度读取的是wp postviews插件的数据