Single Post Navigation
Thumbnail

// <PageNav> .uk-margin-top.uk-margin-bottom .uk-grid-collapse.uk-padding.uk-padding-remove-horizontal.uk-child-width-1-2.uk-grid-divider.grid-divider-secondary(uk-grid) div a(href='#') .uk-position-relative i.uk-position-center-left.uk-text-secondary(uk-icon='icon:chevron-left; ratio: 2;' style='left: -.5rem;') .uk-grid-small.uk-margin-left(uk-grid) div(class='[email protected] [email protected]') .uk-width-1-1.uk-background-cover.uk-display-block(data-src="img/default_image.png" uk-img style="padding-top: calc(115 / 172 * 100%);") div(class='[email protected]') p.text-white.text-xsmall.uk-text-center(class='[email protected]') span.uk-background-secondary.uk-position-relative(style='top: .2rem; padding: .2rem .5rem;' class='[email protected]') PREV | 上一篇 span.uk-background-secondary.uk-position-relative.text-remove-spacing.uk-text-nowrap(style='top: 0; padding: .2rem .5rem;' class='[email protected]') PREV | 上一篇 p.text-medium-m.text-default.uk-padding-default-top.uk-text-bold(class='[email protected]' style='letter-spacing: .9px; line-height: 1.94') AA div a(href='#') .uk-position-relative i.uk-position-center-right.uk-text-secondary(uk-icon='icon:chevron-right; ratio: 2;' style='right: -.5rem;') .uk-grid-small.uk-margin-right(uk-grid) div(class='[email protected] [email protected]') .uk-width-1-1.uk-background-cover.uk-display-block(data-src="img/default_image.png" uk-img style="padding-top: calc(115 / 172 * 100%);") div(class='[email protected] padding-remove-left-s') p.text-white.text-xsmall.uk-text-center(class='[email protected]') span.uk-background-secondary.uk-position-relative(style='top: .2rem; padding: .2rem .5rem;' class='[email protected]') NEXT | 下一篇 span.uk-background-secondary.uk-position-relative.text-remove-spacing.uk-text-nowrap(style='top: 0; padding: .2rem .5rem;' class='[email protected]') NEXT | 下一篇 p.text-medium-m.text-default.uk-padding-default-top.uk-text-bold(class='[email protected]' style='letter-spacing: .9px; line-height: 1.94') BB // </PageNav>
.uk-grid-divider.grid-divider-secondary > :not(.uk-first-column)::before { border-color: $global-secondary-background; }
<div class="uk-margin-top uk-margin-bottom"> <div class="uk-grid-collapse uk-padding uk-padding-remove-horizontal uk-child-width-1-2 uk-grid-divider grid-divider-secondary" uk-grid=""> <div> <?php if(get_previous_post()): ?> <a href="<?php echo esc_url(get_previous_post()->guid); ?>"> <div class="uk-position-relative"> <i class="uk-position-center-left uk-text-secondary" uk-icon="icon:chevron-left; ratio: 2;" style="left: -.5rem;"></i> <div class="uk-grid-small uk-margin-left" uk-grid=""> <div class="[email protected] [email protected]"> <div class="uk-width-1-1 uk-background-cover uk-display-block" data-src="<?php echo esc_url(get_the_post_thumbnail_url(get_previous_post()->ID),'full'); ?>" uk-img="" style="padding-top: calc(115 / 172 * 100%);"></div> </div> <div class="[email protected]"> <p class="text-white text-xsmall uk-text-center [email protected]"><span class="uk-background-secondary uk-position-relative [email protected]" style="top: .2rem; padding: .2rem .5rem;">PREV | 上一篇</span><span class="uk-background-secondary uk-position-relative text-remove-spacing uk-text-nowrap [email protected]" style="top: 0; padding: .2rem .5rem;">PREV | 上一篇</span></p> <p class="text-medium-m text-default uk-padding-default-top uk-text-bold u[email protected]" style="letter-spacing: .9px; line-height: 1.94"><?php echo esc_html(get_previous_post()->post_title); ?></p> </div> </div> </div> </a> <?php endif; ?> </div> <div> <?php if(get_next_post()): ?> <a href="<?php echo esc_url(get_next_post()->guid); ?>"> <div class="uk-position-relative"> <i class="uk-position-center-right uk-text-secondary" uk-icon="icon:chevron-right; ratio: 2;" style="right: -.5rem;"></i> <div class="uk-grid-small uk-margin-right" uk-grid=""> <div class="[email protected] [email protected]"> <div class="uk-width-1-1 uk-background-cover uk-display-block" data-src="<?php echo esc_url(get_the_post_thumbnail_url(get_next_post()->ID),'full'); ?>" uk-img="" style="padding-top: calc(115 / 172 * 100%);"></div> </div> <div class="[email protected] padding-remove-left-s"> <p class="text-white text-xsmall uk-text-center [email protected]"><span class="uk-background-secondary uk-position-relative [email protected]" style="top: .2rem; padding: .2rem .5rem;">NEXT | 下一篇</span><span class="uk-background-secondary uk-position-relative text-remove-spacing uk-text-nowrap [email protected]" style="top: 0; padding: .2rem .5rem;">NEXT | 下一篇</span></p> <p class="text-medium-m text-default uk-padding-default-top uk-text-bold [email protected]" style="letter-spacing: .9px; line-height: 1.94"><?php echo esc_html(get_next_post()->post_title); ?></p> </div> </div> </div> </a> <?php endif; ?> </div> </div> </div>
Lists of users with Pagination
The sample code of pagination with get_users query.
Thumbnail

PHP
<div class="uk-grid-small uk-margin-medium-bottom uk-grid-match [email protected] uk-child-wid[email protected] [email protected]" uk-grid> <?php $number = get_option('posts_per_page',); $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $offset = ($paged - 1) * $number; $users = get_users(array('role__in' => array('author','innews_admin'))); $args = array( 'offset' => $offset, 'number' => $number, 'role__in' => array('author','innews_admin') ); $query = get_users($args); $total_users = count($users); $total_query = count($query); $total_pages = ($total_users / $number); foreach ( $query as $user ): ?> <div> <a class="uk-background-muted uk-padding-default uk-position-relative uk-display-block" href="<?php echo esc_url(home_url().'/author/'.$user->user_login); ?>"> <img class="uk-position-top-center" src="<?php echo get_template_directory_uri(); ?>/assets/img/icon-hot_news.svg" style="transform: translateX(-50%) scale(1.5,1.8); top: 8px;"> <p class="uk-text-center uk-margin-medium-top uk-margin-bottom text-default uk-text-primary text-large-weight text-small-spacing"><?php echo get_field('author_job','user_'.$user->ID); ?></p> <p class="uk-text-center uk-margin-bottom text-dark text-xxlarge text-large-weight text-small-spacing"><?php echo esc_html($user->display_name); ?></p> <p class="uk-text-center uk-margin-bottom text-small text-large-weight text-small-spacing" style="color:#606060"><?php echo esc_html(get_user_meta($user->ID,'description',true)); ?></p> <p class="uk-text-center uk-margin-bottom"><span class="uk-background-cover uk-display-block uk-margin-auto" data-src="<?php echo (get_field('author_avatar','user_'.$user->ID))?get_field('author_avatar','user_'.$user->ID)['url']:get_template_directory_uri().'/assets/img/default_image.png'; ?>" uk-img style="width:107px;height:107px;border-radius:100%;"></span></p> </a> </div> <?php endforeach; ?> </div> <?php if ($total_users > $total_query) { $pages = paginate_links( array( 'base' => get_pagenum_link(1) . '%_%', 'format' => '?paged=%#%', 'current' => max(1, get_query_var('paged')), 'total' => is_float($total_pages) ? intval($total_users / $number) + 1 : intval($total_users / $number), 'type' => 'array', 'prev_text' =>'<span uk-pagination-previous></span>', 'next_text' =>'<span uk-pagination-next></span>', )); if( is_array( $pages ) ) { echo '<ul class="uk-pagination uk-flex-center">'; foreach ( $pages as $page ) { echo "<li>$page</li>"; } echo '</ul>'; echo '<script>jQuery(".page-numbers.current").wrap("<a href></a>");jQuery(".page-numbers.current").parent().parent().addClass("uk-active")</script>'; } } ?>
Pagination

ul.uk-pagination.uk-flex-center(uk-margin="") li a(href="#") span(uk-pagination-previous="") li a(href="#") 1 li a(href="#") 2 li a(href="#") 3 li.uk-disabled span ... li a(href="#") 5 li a(href="#") 6 li.uk-active span 7 li a(href="#") 8 li a(href="#") span(uk-pagination-next="")
.uk-pagination { margin-top: rem(62px); } .uk-pagination>* { width: rem(40px); height: rem(40px); text-align: center; color: #222; margin-left: 10px; padding-left: 0; @include mq(640px){ margin-left: 0; } a { padding: .5rem; color: #4D4D4D; &:hover { color: $global-secondary-background; } } } .uk-pagination>.uk-disabled>* { color: #4D4D4D; line-height: 30px; } .uk-pagination>.uk-active>* { width: 40px; background-color: rgba(225, 49, 51,.8); padding: 12px 0; margin-top: -3px; color: #fff; } .uk-pagination-previous, .uk-pagination-next { color: #ccc; transform: scale(1.8); &:hover, &:focus { color: $global-secondary-background; } }
<?php global $wp_query; $cats = $wp_query->get_queried_object(); if ( $wp_query->max_num_pages <= 1 ) return; $big = 999999999; // need an unlikely integer $pages = paginate_links( array( 'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ), 'format' => '?paged=%#%', 'current' => max( 1, get_query_var('paged') ), 'total' => $wp_query->max_num_pages, // 'total' => ceil(wp_count_posts('post')->publish / get_option('posts_per_page')), // for static page 'type' => 'array', 'prev_text' =>'<span uk-pagination-previous></span>', 'next_text' =>'<span uk-pagination-next></span>', )); if( is_array( $pages ) ) { echo '<ul class="uk-pagination uk-flex-center">'; foreach ( $pages as $page ) { echo "<li>$page</li>"; } echo '</ul>'; echo '<script>jQuery(".page-numbers.current").wrap("<a href></a>");jQuery(".page-numbers.current").parent().parent().addClass("uk-active")</script>'; }