网页设计中WordPress模板之带分页的文章列表

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

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

文章列表模板

 

创建一个page模板

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

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

1
2
3
4
5
<?php
/**
 * Template Name: Article List
 *
 */

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

配置文件

把一些可能更改的参数写在开头,作为配置文件,方便以后修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$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页面实现的,既然是页面,就有页面标题、页面内容等,我们不仅要输出文章列表,还要输出这个页面的内容,这样可以在列表之前添加一些自定义数据。

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

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

在调用WP Query之前还要知道当前是第几页,因为我们要制作带分页的文章列表模板。

1
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

获取文章列表

1
2
3
4
5
6
7
8
/** 用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查询到所需要的数据,要获取文章总数只需要调用下面的代码

1
$total_posts = $post_list->found_posts;

显示文章列表

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?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的结果了

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

重置循环的代码如下

1
wp_reset_postdata();

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

文章列表

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

添加自定义脚本和样式表

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

1
2
3
4
5
6
7
8
9
10
11
<?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的样式表,这两个文件创建好放在主题根目录下即可。

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

最终版

源代码下载

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

评论 (1)

  • reapsurb| 十一月 21, 2017

    I really like what you guys tend to be up too. This kind of clever work and exposure! Keep up the superb works guys I’ve you guys to our blogroll.
    amaetur bbw

  • 发表评论

    电子邮件地址不会被公开。 必填项已用*标注