• Speedtest Internet
  • Test Code
  • Nén CSS
  • Chuyển đổi định dạng Webp
  • Mã Hóa URL
  • Shorturl
Blog thủ thuật máy tính f4vnn
No Result
View All Result
13 Tháng Tám , 2022
  • Login
  • Trang chủ
  • TIPS COMPUTER
    • WINDOWS
    • SERVER
    • OFFICE
    • SOFTWARE
    • GAME
    • INTERNET
    • SECURITY
  • TIPS MAC – IOS
  • TIPS MOBILE
  • TIPS SOURCE
    • TIPS WORDPRESS
    • TIPS BLOGSPOT
    • OTHER SOURCE
  • TIPS OTHER
  • REVIEWS
  • LYRICS
  • Trang chủ
  • TIPS COMPUTER
    • WINDOWS
    • SERVER
    • OFFICE
    • SOFTWARE
    • GAME
    • INTERNET
    • SECURITY
  • TIPS MAC – IOS
  • TIPS MOBILE
  • TIPS SOURCE
    • TIPS WORDPRESS
    • TIPS BLOGSPOT
    • OTHER SOURCE
  • TIPS OTHER
  • REVIEWS
  • LYRICS
No Result
View All Result
Blog thủ thuật máy tính f4vnn
No Result
View All Result
Home Tips Source

Tùy biến phân trang không dùng Plugin cho WordPress

Blog Tips f4vnn by Blog Tips f4vnn
29/11/2020
Reading Time: 6 mins read

Nội dung chính

  • Tùy biến phân trang không dùng Plugin cho WordPress
    • 1] Code phân trang
    • 2] Code CSS làm đẹp cho phân trang

Tùy biến phân trang không dùng Plugin cho WordPress: Mặc định mỗi Theme WordPress sẽ có một phân trang cho các bài viết mặc định trên trang chủ. Tuy nhiên đôi khi với cái phân trang mặc định đó của Theme bạn không được ưng ý và bạn muốn thay đổi nó.Trong bài viết này Blog thủ thuật máy tính f4vnn sẽ giới thiệu với bạn và tùy biến phân trang không dùng Plugin cho WordPress để vừa với thẩm mỹ của bạn.

Tùy biến phân trang không dùng Plugin cho WordPress

Tùy biến phân trang không dùng Plugin cho WordPress

Một trong số kỹ thuật khi lập trình theme wordpress đó chính là phân trang wordpress. Bạn không thể hiển thị tất cả bài viết trên 1 trang được nếu website bạn có 10 bài thì được nhưng nếu số lượng bài trên 1 trang quá nhiều thì sao như vậy nó sẽ giảm tốc độ tải trang để load bài khiến website bạn chậm lại và không tối ưu cho SEO. Để phù hợp hơn bài viết này mình sẽ hướng dẫn cách phân trang trong wordpress giúp tối ưu website tối nhất.

  • Code phân trang
  • Css làm đẹp phân trang

Nào bắt tay vào việc thôi nào, bác bước thì các bạn cứ làm theo các hướng dẫn bên dưới là ok ngay thôi.

1] Code phân trang

Plugin trong việc phân trang wordpress có rất nhiều nhưng giao diện hiển thị không được đẹp bởi vì bạn sẽ rất khó để tùy chỉnh nó và đôi khi nó sẽ còn làm chậm web của bạn. Vậy để bạn custom dễ hơn hãy tham khảo code dưới đây để tùy biến cho website mình một kiểu phân trang đẹp nhất nhé. Việc phân trang cho wordpress không quá khó bạn chỉ cần làm như sau là được.

Bước 1: Bạn mở file function.php của theme lên. Sau đó sao chép code phân trang sau đây và lưu lại

function page_nav() {
  
  if( is_singular() )
    return;
  
  global $wp_query;
  
  /** Stop execution if there's only 1 page */
  if( $wp_query->max_num_pages <= 1 ) return; $paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1; $max = intval( $wp_query->max_num_pages );
  
  /** Add current page to the array */
  if ( $paged >= 1 )
    $links[] = $paged;
  
  /** Add the pages around the current page to the array */
  if ( $paged >= 3 ) {
    $links[] = $paged - 1;
    $links[] = $paged - 2;
  }
  
  if ( ( $paged + 2 ) <= $max ) {
    $links[] = $paged + 2;
    $links[] = $paged + 1;
  }
  
  echo '
<div class="navigation">
<ul>' . "\n";
  
  /** Previous Post Link */
  if ( get_previous_posts_link() )
    printf( '
<li>%s</li>
 
' . "\n", get_previous_posts_link('<< Trước') );
  
  /** Link to first page, plus ellipses if necessary */
  if ( ! in_array( 1, $links ) ) {
    $class = 1 == $paged ? ' class="active"' : '';
  
    printf( '<li%s><a href="%s">%s</a></li>
 
' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
  
    if ( ! in_array( 2, $links ) )
      echo '
<li>…</li>
 
';
  }
  
  /** Link to current page, plus 2 pages in either direction if necessary */
  sort( $links );
  foreach ( (array) $links as $link ) {
    $class = $paged == $link ? ' class="active"' : '';
    printf( '<li%s><a href="%s">%s</a></li>
 
' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
  }
  
  /** Link to last page, plus ellipses if necessary */
  if ( ! in_array( $max, $links ) ) {
    if ( ! in_array( $max - 1, $links ) )
      echo '
<li>…</li>
 
' . "\n";
  
    $class = $paged == $max ? ' class="active"' : '';
    printf( '<li%s><a href="%s">%s</a></li>
 
' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
  }
  
  /** Next Post Link */
  if ( get_next_posts_link() )
    printf( '
<li>%s</li>
 
' . "\n", get_next_posts_link('Sau >>') );
  
  echo '</ul>
</div>
 
' . "\n";
  
}

Bước 2: Sao chép đoạn code hiển thị phân <?php page_nav(); ?> ra nơi vị trí bạn muốn hiển thị. Ví dụ bạn muốn hiển thị phân trang trong category, tags, index chẳng hạn.

Bước 3: Để thêm phân trang cho Category thì bạn copy và dán đoạn code ở bước 2 vào trang archive.php để tạo phân trang cho Category nhé.

2] Code CSS làm đẹp cho phân trang

Bây giờ sau khi phân trang xong bạn quay ra trang hiển thị phân trang xem sao nhé. Nó vẫn chưa được đẹp đâu để hiển thị phân trang đẹp tiếp tục bạn sao chép đoạn CSS này bỏ vào file style.css hoặc cũng có thể để vào Css bổ sung để custom cho đẹp hơn nhé.

.navigation{margin-top:20px;margin-bottom:-10px;text-align:center}.navigation li a,.navigation li a:hover,.navigation li.active a,.navigation li.disabled{color:#666;text-decoration:none}.navigation li{display:inline}.navigation li a,.navigation li a:hover,.navigation li.active a,.navigation li.disabled{border-radius:3px;cursor:pointer;padding:5px 10px}.navigation li a:hover,.navigation li.active a{background-color:#f90;color:#fff!important}
phan trang cho wordpress 1

Xong chỉ cần thế thôi, nếu bạn có biết thêm chút CSS thì có thể tùy biến để khác hơn một tí nhé. Và hiện tại Blog của mình cũng đang dùng phân trang này nên bạn khỏi lo là nó không hoạt động nhé.

Hy vọng với tùy biến phân trang không dùng Plugin cho WordPress mà Blog thủ thuật máy tính f4vnn vừa chia sẻ sẽ có ích với bạn. Chúc bạn thành công.

Bài Viết Cùng Chuyên Mục
Game & Apk Mod Acapella Việt Template BLogspot Liên Kết URL
Tags: Customizing the pagination for WordpressPagination customizers do not use plugins for Wordpresstạo phân trang không dùng Plugin cho WordpressTùy biến phân trang cho WordpressTùy biến phân trang không dùng Plugin cho Wordpress
ShareTweetPin1Share1ShareShare

Related Posts

Chia sẻ giao diện làm trang web download dành cho wordpress

Chia sẻ giao diện làm trang web download dành cho wordpress

15/06/2022
Hướng dẫn cách cài đặt WordPress trên Windows 10

Hướng dẫn cách cài đặt WordPress trên Windows 10

06/12/2021

Chia sẻ danh sách Ping list tăng tốc độ index tốt nhất cho WordPress

04/12/2021

Hướng dẫn cách tạo Popup thông báo bằng html css cho WordPress

15/11/2021

Hướng dẫn cách tùy biến Menu trên Mobile cho WordPress

11/11/2021

Giới thiệu 4 giao diện wordpress chia sẻ video miễn phí cực đẹp

08/10/2021
Next Post
Cách vô hiệu hóa nút hiển thị mật khẩu trong Windows 10

Cách vô hiệu hóa nút hiển thị mật khẩu trong Windows 10

Cách sửa lỗi Zoom Unable to Connect Error Code 5003

Cách sửa lỗi Zoom Unable to Connect Error Code 5003

☊ BLOG NGHE NHẠC DJ

slide-dj24h

Receive updates of our latest tutorials.

By signing up, you agree to our Privacy Policy.

Facebook logoTwitter logoLinked-in logo

✪ TÌM KIẾM NHANH TRÊN GOOGLE

Mẹo để tìm kiếm nhanh cách sửa lỗi bạn vào Google gõ tên lỗi + từ khóa f4vnn!

☷ BÀI VIẾT MỚI NHẤT

Hướng dẫn sửa lỗi Windows Cannot Connect to the Printer Error 0x0000011b

Hướng dẫn sửa lỗi Windows Cannot Connect to the Printer Error 0x0000011b

13/08/2022
Hướng dẫn cách kiểm tra điện thoại có hỗ trợ 5G

Hướng dẫn cách kiểm tra điện thoại có hỗ trợ 5G

13/08/2022
Hướng dẫn cách kiểm tra phiên bản và cập nhật BIOS

Hướng dẫn cách kiểm tra phiên bản và cập nhật BIOS

08/08/2022
Lời Bài Hát Kèm Acapella Vocal Tự Cắt Duyên Tình – Tú Na

Lời Bài Hát Kèm Acapella Vocal Tự Cắt Duyên Tình – Tú Na

04/08/2022
Hướng dẫn cách cài đặt phần mềm HomePod Public Beta 16

Hướng dẫn cách cài đặt phần mềm HomePod Public Beta 16

02/08/2022

☷ BÀI VIẾT XEM NHIỀU

  • Chuyển từ Google Slides sang PowerPoint và ngược lại 27.6k views
  • Làm thế nào để dừng Fixing Stage 1 trong Windows 10 27k views
  • Sửa lỗi A JavaScript error occurred in the main process trên Windows 10 15.9k views
  • Sửa lỗi Run-time error 1004 không thể chạy Macro trong Excel 15.1k views
  • Cách sửa lỗi Runtime Error 1004 trong Microsoft Excel 11.7k views
  • Cách sửa lỗi Bad Image 0xc000012f trong Windows 10 10.7k views
Blog thủ thuật máy tính f4vnn

© 2021 Blog Tips F4vnn - Chia sẻ thủ thuật công nghệ.

Giới thiệu & Bạn bè

  • Chính sách
  • Quy định
  • About Us
  • DMCA
  • Nhạc DJ24h
  • Truyện Ma
  • Vocal

Follow Us

No Result
View All Result
  • Trang chủ
  • TIPS COMPUTER
    • WINDOWS
    • SERVER
    • OFFICE
    • SOFTWARE
    • GAME
    • INTERNET
    • SECURITY
  • TIPS MAC – IOS
  • TIPS MOBILE
  • TIPS SOURCE
    • TIPS WORDPRESS
    • TIPS BLOGSPOT
    • OTHER SOURCE
  • TIPS OTHER
  • REVIEWS
  • LYRICS

© 2021 Blog Tips F4vnn - Chia sẻ thủ thuật công nghệ.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In