Code phân trang website wordpress đẹp

Ở bài viết này, Ứng Dụng Free chia sẽ các bạn cách phân trang danh mục bài viết hoặc danh mục sản phẩm ở website WordPress. Code phân trang website đẹp thực hiện đơn giản các bạn mới không rành về code cũng có thể thực  hiện được. Chỉ cần coppy và pass theo hướng dẫn 100% thành công nhé.

Tại sao phải phân trang?

Nếu bạn có một chuyên mục chứa nhiều bài viết trong chuyên mục đó, nếu sử dụng tự động phân trang theo theme wordpress bạn sử dụng cũng được nhưng không đẹp, và cũng có nhiều cách phân trang bằng plugin. Tất cả những cách trên các bạn tìm và thực hiện chỉ mục đích làm website của mình thêm đẹp và bắt mắt chuyên nghiệp hơn. Nên chúng ta mới tự code riêng cho mình một phân trang riêng biệt.

Hướng dẫn phân trang WordPress bằng code

Đối với việc phân trang cho wordpress bằng code thì ta có ưu điểm là nhẹ nhàng chỉ với vài dòng code thì đã đã có thể gọi ra được phân trang trong wordpress. Đơn giản đó cũng chính là nhược điểm của nó khi mà không phải ai cũng biết code và nếu không rành code thì có thể có nguy cơ làm hỏng trang web không mong muốn chút nào. Nhưng bạn an tâm cứ làm theo chi tiết hướng dẫn này sẽ không ảnh hưởng gì đến website của bạn.

Chúng ta bắt đầu thực hiện phân trang như hình ảnh mô tả này nhé, cũng chính là code phân trang mà website ungdungfree.com đang dùng luôn.

Bước 1: Chèn đoạn code sau vào file function.php của theme bạn đang sử dụng.

• Bạn mở file function.php theo đường dẫn: wp-content/themes/Tên theme của bạn/function.php.
• Coppy đoạn code này vào file function.php. Xong bấm lưu lại.

/**
 * Phân trạng đẹp cho wordpress
 * Chèn đoạn code sau vào file function.php của theme bạn đang sử dụng.
 * ungdungfree.com
 */
if (!function_exists('ungdungfree_paging_nav')) {

    function theme_paging_nav() {
        global $wp_query, $wp_rewrite;

        // Don't print empty markup if there's only one page.
        if ($wp_query->max_num_pages < 2) { return; } $paged = (get_query_var('paged') ? get_query_var('paged') : 1); $pagenum_link = html_entity_decode(get_pagenum_link()); $query_args = array(); $url_parts = explode('?', $pagenum_link); if (isset($url_parts[1])) { wp_parse_str($url_parts[1], $query_args); } $pagenum_link = remove_query_arg(array_keys($query_args), $pagenum_link); $pagenum_link = trailingslashit($pagenum_link) . '%_%'; $format = $wp_rewrite->using_index_permalinks() && !strpos($pagenum_link, 'index.php') ? 'index.php/' : '';
        $format .= $wp_rewrite->using_permalinks() ? user_trailingslashit($wp_rewrite->pagination_base . '/%#%', 'paged') : '?paged=%#%';

        // Set up paginated links.
        $links = paginate_links(array(
            'base' => $pagenum_link,
            'format' => $format,
            'total' => $wp_query->max_num_pages,
            'current' => $paged,
            'mid_size' => 1,
            'show_all' => true,
            'add_args' => array_map('urlencode', $query_args),
            'prev_text' => __('', 'hhvn'),
            'next_text' => __('', 'hhvn'),
        ));
        $pagenum_link = html_entity_decode(get_pagenum_link());
        $url_parts = explode('?', $pagenum_link);

        // Append the format placeholder to the base URL.
        $pagenum_link = trailingslashit($url_parts[0]);
        $first = ($wp_rewrite->using_permalinks() ? 'page/1' : '?paged=1');
        $last = ($wp_rewrite->using_permalinks() ? 'page/' . $wp_query->max_num_pages : '?paged=' . $wp_query->max_num_pages);
        if ($links) {
        $search_var = get_query_var('s', '');
?>

Bước 2: Bạn chèn đoạn code sau để gọi hàm phân trang ở các file nơi bạn muốn phân trang như category.php, archive.php hoặc taxonomy-{slug-custom-taxonomy}.php, archive-{slug-post-type}.php …

<?php echo ungdungfree_paging_nav(); ?>

Như vậy chỉ với 2 bước đơn giản trên bạn đã có thể phân trang cho wordpress được rồi. Giờ muốn đẹp hơn bạn chỉ việc dựa vào các thẻ html ở trong đoạn code phân trang ở trên và css cho nó mà thôi.

Bước 3: Thêm css vào để trang trí cho phân trang được đẹp như hình trên nhé.

.pagination span, .pagination a {
display: inline-block;
padding: 5px 12px;
background-color: #00aeef;
border-radius: 2px;
color: #fff;
font-size: 14px;
}
.pagination span, .pagination a {
display: inline-block;
padding: 5px 12px;
background-color: #00aeef;
border-radius: 2px;
color: #fff;
font-size: 14px;
}
.pagination span, .pagination a:hover, .pagination a:focus {
background-color: #ff8e16;
}
.pagination {
float: right;
}

Kết luận

Qua bài viết chia sẻ cách code phân trang website wordpress đẹp này, sẽ giúp ích cho những bạn chưa làm được và cũng hy vọng các bạn thực hiện thành công 100%. Trong quá trình thực hiện các bạn lỗi hoặc không được hãy để lại bình luận để được hổ trợ.

18/03/2022 Ứng Dụng Miễn Phí