css 自定义WP_Query与分页循环

Posted 2021-05-13

<?php
//Wordpress Docs Link - http://codex.wordpress.org/Function_Reference/paginate_links

//Protect against arbitrary paged values
$paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;

$args = array(
  'category_name'    => $filterBy, // Only apply if filtering by category
	'orderby'          => 'post_date',
	'order'            => 'DESC',
	'post_type'        => 'post',
	'post_status'      => 'publish',
	'suppress_filters' => true,
	'paged'            => $paged,
	'posts_per_page'   => 6 //Number of posts to display per page
);

$serviceposts = new WP_Query( $args );

if ( $serviceposts->have_posts() ) :
  while ( $serviceposts->have_posts() ) : $serviceposts->the_post(); ?>
		<div class="col-md-4 col-sm-4">
			<?php get_template_part( 'article-template' ); ?>
		</div>
	<?php
	endwhile;
	
	//PAGINATION OUTPUT
	$big = 999999999; // need an unlikely integer
	echo paginate_links( array(
		'base'      => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
		'format'    => '?paged=%#%',
		'current'   => max( 1, get_query_var('paged') ),
		'total'     => $serviceposts->max_num_pages,
		'prev_text' => '<< Older',
		'next_text' => 'Newer >>'
	) );
endif;

wp_reset_postdata();

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
    text-align: center;
    width: 100%;
}
.pagination .page-numbers {
    background-color: #413636;
    color: #fff;
    font-size: 14px;
    padding: 8px 0px 7px;
    min-width: 34px;
    display: inline-block;
    border-radius: 34px;
    text-align: center;
    font-weight: 500;
    line-height: 19px;
    text-decoration: none;
    margin: 20px 3px 50px;
}
.pagination .page-numbers:hover,
.pagination .page-numbers:focus,
.pagination .page-numbers.current {
    background-color: #F15D2F;
}
.pagination .page-numbers.next,
.pagination .page-numbers.prev {
    padding-left: 16px;
    padding-right: 16px;
}