WordPress 主题的分页函数一般是简单的数字分页,有些情况下,我们需要实现更多的分页功能,比如选择每页显示多少文章、直接跳转到指定数字的页面等。其实分页函数中,实现这些需求的数据都有,我们只需要把功能加上就可以了,本文用几段简单的代码演示了怎么为WordPress 的分页函数加上一个每页显示多少条文章的选项。
第一步、添加每页显示多少文章的选项
这一步很简单,就是一个标准的表单,表单的 method 为 get,action 留空,表示提交表单到当前页面。
<?php $options = [get_option('posts_per_page'), 12, 18, 24]; ?>
<form id="wprs-pager-form" class="flex item-center" action="" method="get">
<div class="whitespace-nowrap leading-8">共 <?= $pages; ?> 页</div>
<select name="cpg" id="wprs-cpg" class="mx-2 h-8">
<?php foreach ($options as $option): ?>
<option value="<?= $option; ?>" <?= wprs_data_get($_GET, 'cpg') == $option ? 'selected' : ''; ?>><?= $option; ?></option>
<?php endforeach; ?>
</select>
<div class="whitespace-nowrap leading-8">条/页</div>
</form>
有了这个表单,我们还需要实现选择选项时,自动提交表单的效果,用一段简单的JS 代码即可实现,如下:
<script >
jQuery(document).ready(function($){
$('#wprs-cpg').on('change', function(){
$('#wprs-pager-form').submit();
});
});
</script>
上面的 JS 代码的作用很明显,就是当 select选项发生变化时,直接提交表单,后端收到表单后,根据接收到的数据返回刷新后的页面。
第二步、添加自定义分页查询参数
前面都是前端实现代码,这一步,我们需要把前端提交过来的自定义每页文章数量参数添加到查询中,使用 pre_get_posts
action 即可。
add_action('pre_get_posts', function ($query)
{
if ( ! is_admin() && wprs_data_get($_GET, 'cpg', get_option('posts_per_page'))) {
if(wprs_data_get($_GET, 'cpg')){
$query->set('posts_per_page', wprs_data_get($_GET, 'cpg'));
}
}
});
其他常见的分页表单
根据本文中的演示代码,我们还可以实现常见的输入页数直接跳转到对应的页面,如果页数非常多时,把整数页作为跳转选项等更多的分页功能,当然,如果您的文章不是特别多,就没必要整太多复杂的功能,默认的数字分页足够用了,功能太多反而为增加页面复杂度,降低用户体验。