Tích hợp Phân Trang Bootstrap 4 vào WP

1

Cái này job mình triển cũng lâu rồi nay chợt nhớ lại có code nên lên đây share 1 vài Thủ thuật WordPress mình đã làm hoặc sưu tầm cho AE cùng sử dụng chung.

Việc sử dụng thì khá đơn giản. Chỉ việc chép mã code bên dưới vào Functions.php của Themes đang sử dụng.

//Phân trang wordpress với giao diện bootstrap 4x
//Dev by phongmy.vn

function bootstrap_pagination( \WP_Query $wp_query = null, $echo = true, $params = [] ) {
    if ( null === $wp_query ) {
        global $wp_query;
    }

    $add_args = [];

    $pages = paginate_links( array_merge( [
            'base'         => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
            'format'       => '?paged=%#%',
            'current'      => max( 1, get_query_var( 'paged' ) ),
            'total'        => $wp_query->max_num_pages,
            'type'         => 'array',
            'show_all'     => false,
            'end_size'     => 3,
            'mid_size'     => 1,
            'prev_next'    => true,
            'prev_text'    => __( '« Prev' ),
            'next_text'    => __( 'Next »' ),
            'add_args'     => $add_args,
            'add_fragment' => ''
        ], $params )
    );

    if ( is_array( $pages ) ) {
        //$current_page = ( get_query_var( 'paged' ) == 0 ) ? 1 : get_query_var( 'paged' );
        $pagination = '<div class="pagination"><ul class="pagination">';

        foreach ( $pages as $page ) {
			// $pagination .= '<li class="page-item' . (strpos($page, 'current') !== false ? ' active' : '') . '"> ' . str_replace('page-numbers', 'page-link', $page) . '</li>';
			$pagination .= '<li class="page-item '.(strpos($page, 'current') !== false ? 'active' : '').'"> ' . str_replace( 'page-numbers', 'page-link', $page ) . '</li>';
        }

        $pagination .= '</ul></div>';

        if ( $echo ) {
            echo $pagination;
        } else {
            return $pagination;
        }
    }
    return null;
}
// Cách sử dụng

bootstrap_pagination(); đối với vòng lặp bình thường của danh mục 
hoặc bootstrap_pagination($query) đối với trường hợp custom query như ở các pages

Sau khi làm xong thì sẽ được i chang như Phân Trang Bootstrap luôn nhé.

phan-bootstrap-4-cho-wordpress-1
phan-bootstrap-4-cho-wordpress-11200×630 61.8 KB

**Các bạn có thể xem chi tiết hơn về **
Cách sử dụng cho trường hợp Custom Query và Query mặc định tại link bên dưới nhé.