ONPAGE WP 17: Phân trang đẹp trong wordpress không cần Plugin

ONPAGE WP 17: Phân trang đẹp trong wordpress không cần Plugin

Đối với 1 website bất kỳ, Đặc biệt là website về dạng tin tức thì nội dung của nó là vô số kể. Chúng ta không thể để tất cả nội dung dàn trang trên cùng 1 Page. Điều này sẽ ảnh hưởng đến tốc độ tải trang trong Website của bạn. Trong khi đó, Tốc độ tải trang dường như là 1 trong 9 tiêu chí đánh giá SEO Onpage quang trọng nhất của một Website bất kỳ. Người ta đã phát mình ra thuật ngữ “Phân trang” nhằm tối ưu tốc độ tải trang. Đồng thời đưa đến cho độc giả một bố cục website gọn nhẹ không quá rối, phức tạp, Rườm rà!.

phan-trang-wordpress-1

Để có thể phân trang đẹp trong WordPress thì chúng ta đã có sẵn rất nhiều Plugin khác nhau hỗ trợ thao tác phân trang tuyệt vời. Song bố cục phân trang của bạn sẽ gặp khá nhiều vấn đề, trong đó “Template” giao diện phân trang cũng là 1 trong những yếu tố khá quan trọng. Ở bài viết này, SEOCAM sẽ giúp bạn cách Phân trang đẹp cho website WordPress mà không cần dùng đến Plugin. Cách làm khá đơn giản và không đòi hỏi kiến thức chuyên sâu về lập trình Code PHP. Bài viết này bạn có thể áp dụng phân trang cho các dạng trang:

  • Home (Trang chủ)
  • Category (Chuyên mục)
  • Achiver (Lưu trữ)
  • Tag (mô tả bài viết)

Ở đây, tôi sẽ đi sâu vào việc phân trang cho Category (chuyên dụng nhất). Đối với các site khác các bạn áp dụng tương tự!.

Hướng dẫn Phân trang đẹp trong wordpress không cần dùng Plugin

Với 1 đoạn Code khá đơn giản và 1 đoạn định dạng phần tử CSS không quá phức tạp. Công việc của bạn chỉ là Coppy và Paste thôi sau 5′ bạn đã có 1 giao diện phân trang cho wordpress cực đẹp mà không cần dùng đến Plugin (Lưu ý là code sạch chả gắn Script gì trong này, yên tâm sử dụng tẹt ga nhé).

Bước 1: Chèn Code Phân trang vào Category WordPress

Bạn sao chép đoạn code phân trang trong wordpress dưới đây chèn vào vị trí mà bạn muốn cho nó hiển thị:

<div id=”navigation”>// Nhiều người dùng nav nhưng mình dùng div cho lành

<div class=”wp-pagenavi”>

<?php

global $wp_query;

$big = 999999999; // phân trang seocam.edu.vn

echo paginate_links( array(
‘base’ => str_replace( $big, ‘%#%’, esc_url( get_pagenum_link( $big ) ) ),
‘format’ => ‘?paged=%#%’,
‘prev_text’ => __(‘« Mới hơn‘),
‘next_text’ => __(‘Xem trang sau »‘),
‘current’ => max( 1, get_query_var(‘paged’) ),
‘total’ => $wp_query->max_num_pages
) );
?>

<div class=”clear”></div>

</div>

</div>

Đầu tiên, Bạn coppy đoạn code sau gắn vào vị trí mà bạn muốn cho nó hiển thị. Đối với Category trong WordPress bạn vào Giao Diện -> Editor -> truy vấn vào File Category.php và dán đoạn mã này  vào trước thẻ:

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Ok, Bây giờ bạn ra F5 lại trang Category bạn đã thấy phần phân trang của WordPress rồi đấy. Để thay đổi đoạn text “xem trang sau”, “xem trang trước” thành cách của bạn thì bạn chỉ việc thay đoạn văn bản mình bôi đỏ ở trên!.

Bước 2: Định dạng CSS cho giao diện Phân Trang WordPress

Để nhìn đoạn phân trang nó bắt mắt, đẹp hơn bạn cần sử dụng một đoạn code định dạng màu sắc, khung viền cho phần tử phân trang của mình. Như định dạng mà SEOCAM đang dùng thì đoạn thuộc tính CSS nó sẽ như dưới đây, bạn có thể tùy chỉnh theo ý của mình.

#navigation {margin-bottom:10px;padding: 0 20px; line-height: 46px; text-align: center; }
#navigation a {padding:5px 20px; margin: 0 3px ; font-weight: bold; background:#fff; color:#333; border:1px solid #d1d1d1;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#navigation a:hover {background:#F5AE42; color:#fff; border:1px solid #aaa;}

#navigation span.current {padding:5px 20px; margin: 0 5px ; font-weight: bold; background:#F5AE42; color:#fff; border:1px solid #d1d1d1;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

Đối với đoạn CSS này bạn vào Giao Diện -> Editor -> Chọn File Style.css nhé!. Ok, vậy là công việc định dạng CSS cho đoạn phân trang đã xong. Bạn ra ngoài Crtl+F5 lại và xem kết quả nhé.

3. Tùy chỉnh số bài viết hiển thị trên mỗi phân trang của WordPress

Vấn đề còn lại là khá đơn giản. Bạn chỉ việc trở về tùy chỉnh số lượng bài viết được hiển thị trên mỗi trang theo ý muốn. Để lựa chọn số lượng bài viết được phép hiển thị bạn truy cập vào: Cài Đặt -> Đọc -> Tại ô hiển thị nhiều nhất bạn thiết lập lại số bài viết bạn muốn hiển thị.

phan-trang-wordpress

Ok. Vậy là các bước Phân trang đẹp cho WordPress đã hoàn thành nhanh chóng trong 3 thao tác. Chúc các bạn thành công!.

5/5 - (1 bình chọn)

Share this post

Comment (1)

  • Avatar
    huong Reply

    thank ban ve doan code phantrang nhe!

    19 Tháng Ba, 2016 at 6:04 chiều

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *