如何通过示例在 WordPress 中创建自定义查询分页
已发表: 2020-02-24在 WordPress 中创建自定义查询分页是针对博客帖子和自定义帖子类型的最后排序的分页解决方案之一。 如果您想在您的 WordPress 博客中创建自定义查询分页,这篇文章将指导您。 理想情况下,自定义查询分页涉及使用不同的查询参数来构建基于此查询的 WordPress 帖子的分页。
在上一篇教程中,我详细解释了如何在 WordPress 中添加数字分页,以及如何创建缩略图上一篇和下一篇分页,以及如何使用分页将一篇文章拆分为多个页面。 我还分享了一些 WordPress 分页代码,您可以在博客中使用它们来添加您喜欢的分页选项。 在这篇文章中,我将阐述如何在您的 WordPress 网站上构建和实现自定义查询分页。
自定义查询分页
正如我在介绍中提到的,自定义查询分页由三部分组成,包括:自定义查询、显示分页的代码和一些使分页看起来不错的样式。 我们将把这个自定义查询分页代码分解为这三个步骤:
创建帖子或自定义帖子的自定义查询
第一步是创建一个查询,该查询基本上是我们打算在自定义查询中使用的参数数组。
要显示此自定义查询分页,让我们首先创建一个自定义页面模板,我们将在其中添加自定义查询分页的代码。
以下是带有自定义查询代码的自定义页面模板示例:
<?php /** * 模板名称:CQ 分页 * */ get_header(); // 第 1 步:创建自定义查询 $paged = (get_query_var('paged')) ? get_query_var(“分页”):1; $args = 数组( 'posts_per_page' => 2,// 查询最后 5 个帖子 '分页' => $分页 ); $customQuery = new WP_Query($args);
此代码只是创建了一个自定义页面模板,您可以在页面属性下看到该模板,如下图所示:
查询可以有多个参数,但在这种情况下,我们只限于“posts_per_page”,即我们希望在页面上显示的帖子数。
我们还可以使用 'post_type'、orderby、author 等来指定帖子类型。 以下是名为“book”的自定义帖子类型的另一个查询示例:
//获取当前作者在查询中使用 $current_author = (isset($_GET)) ? get_user_by( 'slug', $author_name ) : get_userdata( intval( $author ) ); /* 设置查询的参数 $args = 数组( 'post_type' => 数组('目标'), 'orderby' => '日期', '顺序' => 'desc', 'posts_per_page' => 10, 'paged' => get_query_var('page') ? 获取查询变量(“页面”):1, '作者' => $current_author->ID ); // 实例化查询 $query = new WP_Query($args);
在我们构建 $args 并实例化查询之后,我们现在准备在循环中显示帖子并在下一步中添加自定义查询。
在自定义页面模板中显示查询的帖子
为了显示查询的帖子,代码已添加到原始自定义模板代码中,完整代码如下:
<?php /** * 模板名称:CQ 分页 * */ get_header(); // 第 1 步:创建自定义查询 $paged = (get_query_var('paged')) ? get_query_var(“分页”):1; $args = 数组( 'posts_per_page' => 2,// 查询最后 5 个帖子 '分页' => $分页 ); $customQuery = new WP_Query($args); ?> <!-- 步骤2:显示我们在步骤1中查询的帖子--> <div class="wrap"> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <?php 如果($customQuery->have_posts()): while($customQuery->have_posts()) : $customQuery->the_post(); 全球 $post; ?> <div class ="inner-content-wrap"> <ul class ="cq-posts-list"> <li> <h3 class ="cq-h3"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3> <div> <ul> <div> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a> </div> </ul> <ul> <p><?php echo the_content(); ?></p> </ul> </div> </li> </ul> </div> <!-- 结束博文--> <?php 结束; 万一; wp_reset_query();
创建分页功能
在这最后一步中,我们需要创建分页函数,我们将在上面的自定义页面模板中使用它来显示自定义查询分页。 要创建分页功能,我们需要将以下代码添加到 functions.php 文件中:
// 自定义分页函数 函数 cq_pagination($pages = '', $range = 4) { $showitems = ($range * 2)+1; 全局 $paged; if(空($paged)) $paged = 1; if($pages == '') { 全局 $wp_query; $pages = $wp_query->max_num_pages; 如果(!$页) { $pages = 1; } } 如果(1!= $页) { echo "<nav aria-label='页面导航示例'> <ul class='pagination'> <span>Page ".$paged." of ".$pages."</span>"; if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« First</a>"; if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ 上一个</a>"; 对于 ($i=1; $i <= $pages; $i++) { if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) { 回声($paged == $i)? "<li class=\"page-item active\"><a class='page-link'>".$i."</a></li>":"<li class='page-item' > <a href='".get_pagenum_link($i)."' class=\"page-link\">".$i."</a></li>"; } } if ($paged < $pages && $showitems < $pages) echo " <li class='page-item'><a class='page-link' href=\"".get_pagenum_link($paged + 1)." \">i class='flaticon flaticon-back'></i></a></li>"; if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo " <li class='page-item'><a class='page-link' href=' ".get_pagenum_link($pages)."'><i class='flaticon flaticon-arrow'></i></a></li>"; 回声“</ul></nav>\n”; } }
在自定义模板中调用分页函数
最后一步是在模板中调用我们上面添加的函数,以便显示分页。 要调用此函数,我们应该使用以下代码:
// 第三步:在这里调用分页函数 if (function_exists("cq_pagination")) { cq_pagination($customQuery->max_num_pages); }
使用此分页功能创建自定义页面模板的最终代码应如下所示:
<?php /** * 模板名称:CQ 分页 * */ get_header(); // 第 1 步:创建自定义查询 $paged = (get_query_var('paged')) ? get_query_var(“分页”):1; $args = 数组( 'posts_per_page' => 2,// 查询最后 5 个帖子 '分页' => $分页 ); $customQuery = new WP_Query($args); ?> <!-- 步骤2:显示我们在步骤1中查询的帖子--> <div class="wrap"> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <?php 如果($customQuery->have_posts()): while($customQuery->have_posts()) : $customQuery->the_post(); 全球 $post; ?> <div class ="inner-content-wrap"> <ul class ="cq-posts-list"> <li> <h3 class ="cq-h3"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3> <div> <ul> <div> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a> </div> </ul> <ul> <p><?php echo the_content(); ?></p> </ul> </div> </li> </ul> </div> <!-- 结束博文--> <?php 结束; 万一; wp_reset_query(); // 第三步:在这里调用分页函数 if (function_exists("cq_pagination")) { cq_pagination($customQuery->max_num_pages); } ?> </main><!-- #main --> </div><!-- #primary --> </div><!-- .wrap --> <!----页面结束--------> <?php get_footer(); ?>
如果您按照正确的方式执行每一步,您应该有如下图所示的分页:
样式化自定义查询分页
最后一步是将样式添加到自定义分页中,使其与主题的样式和设计相匹配。 以下是您应该添加到样式表以设置此自定义分页样式的 CSS 样式:
/** * CQ 分页样式 * @作者乔恩杰加 */ .分页{ 明确:两者; 位置:相对; 字体大小:16px; 行高:13px; 浮动:对; 列表样式类型:无; 宽度:100%; } .pagination 跨度,.pagination 一个 { 显示:块; 向左飘浮; 边距:2px 2px 2px 0; 填充:6px 9px 5px 9px; 文字装饰:无; 宽度:自动; 颜色:#fff; 背景:#237697; } .分页:悬停{ 颜色:#fff; 背景:#000; } .分页 .current{ 填充:6px 9px 5px 9px; 背景:#999; 颜色:#fff; }
添加这些分页样式后,自定义分页的最终外观应如下图所示:
最后的想法
在这篇文章中,我们逐步概述了向您的 WordPress 博客添加自定义查询分页的方法。 这些步骤包括; 创建查询,创建自定义页面模板以显示带有分页的自定义查询帖子,并将分页函数添加到 functions.php 文件。 最后不要忘记调用分页功能并添加与您的 WordPress 主题设计相匹配的适当样式。