WP主题开发10：修改trans主题首页模板的分页

WordPress主题trans的首页模板的左侧文章列表，在上一节中，我们已经做了修改，实现了从wordpress的数据库中调用。但是，wordpress网站的文章肯定有很多很多，这时，如果把所有的文章都显示在同一个页面，这好像不太好，也不利于用户的浏览。所以，wordpress网站的后台可以设置每个页面显示多少篇文章，默认情况下，是每个页面显示10篇，剩下的文章列表，会以分页的形式显示。

在trans主题的静态模板中，我们没有做分页效果，所以，在本节中，我们不仅要添加分页的功能，还要添加分页的展示效果的CSS样式。

那么，怎样给trans主题首页左侧的文章列表添加分页效果呢？

第一步：添加分页按钮的父标签。

为了整个页面的布局合理，我们给分页按钮添加一个父标签，代码如下：

< div class="left_page">

第二步：添加分页代码。

从wordpress4.1版本开始，wordpress就为我们提供了一个非常好用的分页函数——the_posts_pagination()，而不再需要WordPress主题开发者们自己创建自定义的分页函数了，这也就是那么多人都在使用wordpress做网站的原因吧。

好了，不多说，我们直接在上面添加的父标签里添加如下PHP代码：

<?php
the_posts_pagination( array(
'mid_size' => 3, //当前页码数的 两边 显示3个页码。
'prev_text' =>'<', //上一页
'next_text' =>'>', //下一南
) );
?>

从上面的代码中，我们可以看出，the_posts_pagination()函数只有一个参数，这个参数是一个array数组。这个数组里可以包含有多个元素，这些元素的值我们都是可以修改的，如：我们可以把'prev_text' =>'<'>'上一页'；'next_text' =>'>' 改成 'next_text' =>'下一页'。

这时，我们再看trans主题首页的左侧底部，就可以看到分页数了，就是不太美观，如下图：

第三步：给分页添加css样式。

从上图中，我们可以看出，这个分页按钮实在是太难看了。为了让它变得美观，我们需要为它添加CSS样式代码。代码如下：

/*分页*/
.left_page{ float:left; padding:15px; background: #fff; width:100%; box-sizing:border-box; }
.left_page h2{ display:none; }
.left_page .nav-links a{ display:inline-block; padding:2px 5px; border:1px solid #ccc; }
.left_page .nav-links .current{ display:inline-block; padding:2px 5px; border:1px solid #ccc; background:#3571cc; color:#fff; }
.left_page .nav-links a:hover{ background:#3571cc; color:#fff; }

添加上这些CSS样式代码后，我们再到trans主题网站的首页看一下，这时的分页按钮就好看多了，如下图： 

当前页面的页码显示为蓝底白字，鼠标光标移到哪真页码上，这个页码也会显示为蓝底白字，这样，在用户浏览时，会更加的友好。

好了，通过上面的操作，我们为wordpress主题trans的首页左侧添加了文章列表的分页效果。不做的时候，是不是觉得很难？但是，一旦做起来，是不是又觉得特别的简单？就是这样的感觉了，使用wordpress的好处，就在这里了，它很多事情都为我们想了，我们只需要把它拿来用就行了 。