首页>技术知识>WordPress WP主题开发10:修改trans主题首页模板的分页
WordPress教程学习网站
2022-06-23
WordPress教程学习网站丨模板定制、网站使用教程、插件推荐、代码优化、wp建站教程、数据文章采集、系统开发、系统优化,功能开发,仿站教程等各类WordPress技术知识,供网友学习了解。

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主题首页的左侧底部,就可以看到分页数了,就是不太美观,如下图:

image.png


第三步:给分页添加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主题网站的首页看一下,这时的分页按钮就好看多了,如下图: 

image.png


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

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

显示全部内容...