Wordpress 5 phân trang - wordpress 5 pagination

Chia sẽ Hàm xử lý phân trang trong wordpress version 5 đơn giản, bao gồm cả css, có tham khảo css của bootstrap 5 nhé

Bước 1: Add vào file functions.php đoạn như sau:

function al_pagination() {
	$allowed_tags = [
		'span' => [
			'class' => []
		],
		'a' => [
			'class' => [],
			'href' => [],
		]
	];

	$args = [
		//'before_page_number' => '<span>',
		//'after_page_number' => '</span>',
	];

	printf( '<div class="pagination mb-5 justify-content-center">%s</div>', wp_kses( paginate_links( $args ), $allowed_tags ) );
}

Bước 2: Thêm vào index.php hay trang bạn cần phân trang gọi hàm al_pagination() ra:

<?php al_pagination();?>

Bước 3: Thêm css vào cho đẹp

/* Pagination Anhlinh.net */

.pagination a,
.pagination span {
    color: #0d6efd;
    float: left;
    padding: .375rem .85rem;
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    border: 1px solid #dee2e6;
}

.page-numbers:first-child {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.page-numbers:not(:first-child) {
    margin-left: -1px;
}

.page-numbers:last-child {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

span.page-numbers.current {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

.pagination a:hover:not(.active) {
    background-color: #e9ecef;
    border-color: #dee2e6;
}