为WordPress添加分页
有的主题只有向前/向后翻页,不能直接点击页码,还不知道有多少页。可是如果你不知道怎么做,只得叹气换主题——你还可以改呀。
找到输出翻页的代码
一般在主题的index.php(首页模板)中,可能是the_posts_navigation()函数,也可能是主题的自定义函数,这些函数的名字里通常带有the_posts_navigation或the_posts_pagination。我们把它注释掉,换一个。
the_posts_navigation()
该WP自带函数实现了向前/向后翻页的功能,但也只支持到这里,如果想支持页码,需要换一个函数。
get_the_posts_pagination()
该自带函数支持返回向前、向后、页码、当前页的html代码(get前缀的函数返回代码,也可以用the_posts_pagination()直接输出),参考它的源码:
function get_the_posts_pagination( $args = array() ) {
$navigation = '';
// Don't print empty markup if there's only one page.
if ( $GLOBALS['wp_query']->max_num_pages > 1 ) {
$args = wp_parse_args( $args, array(
'mid_size' => 1,
'prev_text' => _x( 'Previous', 'previous set of posts' ),
'next_text' => _x( 'Next', 'next set of posts' ),
'screen_reader_text' => __( 'Posts navigation' ),
) );
// Make sure we get a string back. Plain is the next best thing.
if ( isset( $args['type'] ) && 'array' == $args['type'] ) {
$args['type'] = 'plain';
}
// Set up paginated links.
$links = paginate_links( $args );
if ( $links ) {
$navigation = _navigation_markup( $links, 'pagination', $args['screen_reader_text'] );
}
}
return $navigation;
}
我们看到这个函数调用了paginate_links()函数,而该函数接受的参数如下:
$args (string|array) (Optional) Array or string of arguments for generating paginated links for archives. 'base' (string) Base of the paginated url. 'format' (string) Format for the pagination structure. 'total' (int) The total amount of pages. Default is the value WP_Query's
max_num_pages
or 1. 'current' (int) The current page number. Default is 'paged' query var or 1. 'aria_current' (string) The value for the aria-current attribute. Possible values are 'page', 'step', 'location', 'date', 'time', 'true', 'false'. Default is 'page'. 'show_all' (bool) Whether to show all pages. Default false. 'end_size' (int) How many numbers on either the start and the end list edges. Default 1. 'mid_size' (int) How many numbers to either side of the current pages. Default 2. 'prev_next' (bool) Whether to include the previous and next links in the list. Default true. 'prev_text' (bool) The previous page text. Default '« Previous'. 'next_text' (bool) The next page text. Default 'Next »'. 'type' (string) Controls format of the returned value. Possible values are 'plain', 'array' and 'list'. Default is 'plain'. 'add_args' (array) An array of query args to add. Default false. 'add_fragment' (string) A string to append to each link. 'before_page_number' (string) A string to appear before the page number. 'after_page_number' (string) A string to append after the page number. Default value: '' https://developer.wordpress.org/reference/functions/paginate_links/
那么,我们怎么用起来呢
在index.php(首页模板)中使用
$pagination = get_the_posts_pagination( array(
'mid_size' => 3,
'prev_text'=>__('上一页','textdomain'),
'next_text' => __( '下一页', 'textdomain' ),
) );
$pagination = str_replace('"next page-numbers"', '"next uk-button uk-button-link " style="font-size:18px"', $pagination);
$pagination = str_replace('"prev page-numbers"', '"prev uk-button uk-button-link " style="font-size:18px"', $pagination);
$pagination = str_replace(''page-numbers'', '"uk-button uk-button-link " style="font-size:18px" ', $pagination);
$pagination = str_replace(''page-numbers current'', '"uk-button uk-button-link " style="font-size:18px"', $pagination);
$pagination = str_replace('下一页</a>', '下一页</a></div>', $pagination);
$pagination = str_replace('<a class="next', '<div class="nav-next"><a class="next', $pagination);
$pagination = str_replace('上一页</a>', '上一页</a></div>', $pagination);
$pagination = str_replace('<a class="prev', '<div class="nav-previous"><a class="prev', $pagination);
echo $pagination;
__()是个翻译函数,从文本域中获取翻译后的内容,不过我直接改了第一个参数,而不是对应的翻译,不管了。
可以看到我传入了一个关联数组,mid_size代表了当前页左右都显示多少页。
这个函数返回的html代码,为了处理这段代码,不得不用str_replace,最后echo,我们就可以输出与主题风格相符的页码了。
- 未来3年 人工智能如何影响法律行业?5位权威专家给出趋势
- silverlight.js详解.
- 前端三大框架vue,angular,react大杂烩
- Silverlight制作scrollbar.
- [Silverlight动画]转向行为 - 躲避行为
- WCF后续之旅(1): WCF是如何通过Binding进行通信的
- CaseStudy(showcase)布局篇-列表的排放与遮罩
- [Silverlight动画]转向行为 - 追捕行为
- 前端三大框架vue,angular,react大杂烩
- CaseStudy(showcase)布局篇-如何做一个自适应窗口大小的布局
- WCF后续之旅(2): 如何对Channel Layer进行扩展——创建自定义Channel
- [Silverlight动画]转向行为 - 到达行为
- Asp.Net统一前后端提示信息方案
- 人工智能:未来决策制定的机遇与影响
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法