Xin code phân trang trong wordpress dễ sử dụng

Demo đây:


Code mặc định:

Code phân trang mặc đinh đây nhé: Chèn code sau vào tập tin function.php của themes nhé.

PHP:

//Code phan trang
function wp_corenavi_table($custom_query = null) {
      global $wp_query;
      if($custom_query) $main_query = $custom_query;
      else $main_query = $wp_query;
      $big = 999999999;
      $total = isset($main_query->max_num_pages)?$main_query->max_num_pages:'';
      if($total > 1) echo '<div class="paginate_links">';
      echo paginate_links( array(
         'base'        => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
         'format'   => '?paged=%#%',
         'current'  => max( 1, get_query_var('paged') ),
         'total'    => $total,
         'mid_size' => '10',
         'prev_text'    => __('<','itseovn'),
         'next_text'    => __('>','itseovn'),
      ) );
      if($total > 1) echo '</div>';
}


Chèn code sau vào vị trí cần hiển thị:

PHP:

   <?php wp_corenavi_table();?>

Sửa lại theo Code sẽ phân trang đổi lại như sau:

PHP:

<div class="large-9 col">
    <?php
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $args =  array(
            'post_type' => 'hoidap',
            'paged' => $paged,
            'order' => 'DECS',
            'posts_per_page' => 5,
            'orderby'=>'date'
        );
        $loop = new WP_Query($args);
        $i = 1;
        if($loop->have_posts()) {
            while ($loop->have_posts()) {
                $loop->the_post();
                ?>
                <div class="csq-item">
                    <div class="csq-title-item">
                        <span class="csq-number"><?php echo str_pad($i, 2, '0', STR_PAD_LEFT); ?></span>
                        <p class="csq-title">Khách hỏi: <?php echo get_field('question') ?></p>
                    </div>
                    <div class="csq-question">
                        <span>Câu hỏi:</span>
                        <h3><?php echo get_field('question') ?></h3>
                    </div>
                    <div class="csq-anwser">
                        <label>Trả lời:</label>
                        <p>Chuyên gia trả lời: <?php echo get_field('name_author') ?></p>
                        <div class="csq-content">
                            <?php the_content() ?>
                        </div>
                    </div>
                </div>
                <?php
                $i++;
            }
        }
    ?>
    <?php if (  $loop->max_num_pages > 1 ):
        ?>
        <nav class="navigation">
            <?php
                $main_query = $loop;
                $big = 999999999;
                $total = isset($main_query->max_num_pages)?$main_query->max_num_pages:'';
                if($total > 1) echo '<div class="paginate_links">';
                echo paginate_links( array(
                    'base'        => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
                    'format'   => '?paged=%#%',
                    'current'  => max( 1, get_query_var('paged') ),
                    'total'    => $total,
                    'mid_size' => '10',
                    'prev_text'    => __('<','itseovn'),
                    'next_text'    => __('>','itseovn'),
                ) );
                if($total > 1) echo '</div>';
            ?>
        </nav>
    <?php endif; ?>
</div>


Chèn thêm CSS vào cho đẹp

HTML:

/*paginate_links*/
.paginate_links {
    overflow: hidden;
    text-align: center;
    display: table;
    margin: 30px auto;
}
.paginate_links .page-numbers{
    width: 32px;
    height: 32px;
    float: left;
    margin: 0 5px 0px 5px;
    padding-top: 3px;
    color: #3a589d;
    border: 1px solid #3a589d;
}
.paginate_links .page-numbers:hover{
    background: #3a589d;
    color: #fff;
}
.paginate_links .page-numbers.prev,.paginate_links .page-numbers.next{
    background: transparent;
    width: auto;
    border: none;
}
.paginate_links .page-numbers.prev:hover,.paginate_links .page-numbers.next:hover{
    text-decoration: underline;
    color: #3a589d;
}
.paginate_links .page-numbers.current{
    background: #3a589d;
    color: #fff;
}
/*End paginate_links*/