Wordpress BootStrap Pagination Develop
Wordpress BootStrap Pagination Develop
目录:
Origin Loop
Custom Loop
Single Next Prev
Wordpress 主题开发中最常见的分页功能及文章内容页中的"上一篇/下一篇"功能,均是最基本的需求.这里需要是注意是,分页分为自定义 Loop 中的分页及 Archive 页面中的 分页.
Origin Loop 中的分页
基于Bootstrap使用的分页效果如下
function wp_bs_pagination($pages = '', $range = 4)
{
$showitems = ($range * 2) + 1;
global $paged;
if(empty($paged)) $paged = 1;
if($pages == '')
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if (!$pages) {
$pages = 1;
}
}
if(1 != $pages)
{
echo '<div class="text-center">';
echo '<nav><ul class="pagination"><li class="disabled hidden-xs"><span><span aria-hidden="true">页面 '.$paged.' of '.$pages.'</span></span></li>';
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link(1)."' aria-label='First'>«<span class='hidden-xs'> First</span></a></li>";
if($paged > 1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged - 1)."' aria-label='Previous'>‹<span class='hidden-xs'> Previous</span></a></li>";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<li class=\"active\"><span>".$i." <span class=\"sr-only\">(current)</span></span>
</li>":"<li><a href='".get_pagenum_link($i)."'>".$i."</a></li>";
}
}
if ($paged < $pages && $showitems < $pages) echo "<li><a href=\"".get_pagenum_link($paged + 1)."\" aria-label='Next'><span class='hidden-xs'>Next </span>›</a></li>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($pages)."' aria-label='Last'><span class='hidden-xs'>Last </span>»</a></li>";
echo "</ul></nav>";
echo "</div>";
}
}Custom Loop
function custom_pagination($numpages = '', $pagerange = '', $paged='') {
if (empty($pagerange)) {
$pagerange = 2;
}
/**
* This first part of our function is a fallback
* for custom pagination inside a regular loop that
* uses the global $paged and global $wp_query variables.
*
* It's good because we can now override default pagination
* in our theme, and use this function in default quries
* and custom queries.
*/
global $paged;
if (empty($paged)) {
$paged = 1;
}
if ($numpages == '') {
global $wp_query;
$numpages = $wp_query->max_num_pages;
if(!$numpages) {
$numpages = 1;
}
}
/**
* We construct the pagination arguments to enter into our paginate_links
* function.
*/
$pagination_args = array(
'base' => get_pagenum_link(1) . '%_%',
'format' => 'page/%#%',
'total' => $numpages,
'current' => $paged,
'show_all' => false,
'end_size' => 1,
'mid_size' => $pagerange,
'prev_next' => True,
'prev_text' => __('«'),
'next_text' => __('»'),
'type' => 'plain',
'add_args' => false,
'add_fragment' => ''
);
$paginate_links = paginate_links($pagination_args);
if ($paginate_links) {
$pagination = '<div class="text-center"> <ul class="pagination ">';
$pagination .= "<li>$paginate_links</li>";
$pagination .= '</ul></div>';
echo $pagination;
}
}Single Next/Prev
该功能主要基于 <?php previous_post_link( $format, $link, $in_same_term = false, $excluded_terms = '', $taxonomy = 'category' ); ?> <?php next_post_link( $format, $link, $in_same_term = false, $excluded_terms = '', $taxonomy = 'category' ); ?>
<ul class="pager">
<li class="previous"><?php previous_post_link("%link", " <i class=\"fa fa-angle-double-left\" ></i> 上一篇 %title") ?></li>
<li class="next"><?php next_post_link("%link", "下一篇 %title <i class=\"fa fa-angle-double-right\" ></i> ") ?></li>
</ul>