PHP

Ajax Loadmore Button + Numeric Pagination

Tôi đã được hỏi về bài viết này rất nhiều lần, tôi rất hào hứng giúp đỡ mọi người giải quyết vấn đề này, bắt đầu thôi!

Đối với những người không biết, bài đăng này là bổ sung cho hướng dẫn ban đầu về cách tạo nút Load More button trong WordPress.

Nhưng tại sao chúng ta cần nó? Câu trả lời là khá đơn giản – nó giữ chân người dùng nhiều hơn và thân thiện với SEO.

Bước 1. Tùy chỉnh chức năng phân trang

Mọi thứ bắt đầu bằng chức năng phân trang, bởi vì hàm the_posts_pagination () mặc định hoặc chức năng từ plugin sẽ không hoạt động cho bạn, vì vậy bên dưới là chức năng hoạt động. Trên thực tế, bạn không phải thực hiện bất kỳ thay đổi nào trong đó, chỉ cần chèn nó vào hàm functions.php chủ đề hiện tại của bạn.

Xin lưu ý rằng ví dụ dưới đây được chuẩn bị cho chủ đề Twenty Seventeen mặc định của WordPress và các chủ đề con của nó! Nó có nghĩa là bạn phải thay thế hàm twentyseventeen_get_svg () trong mã (dòng 66 và 80) bằng các mũi tên hoặc văn bản.

function iz_paginator( $first_page_url ){
 
  // the function works only with $wp_query that's why we must use query_posts() instead of WP_Query()
  global $wp_query;
 
  // remove the trailing slash if necessary
  $first_page_url = untrailingslashit( $first_page_url );
 
 
  // it is time to separate our URL from search query
  $first_page_url_exploded = array(); // set it to empty array
  $first_page_url_exploded = explode("/?", $first_page_url);
  // by default a search query is empty
  $search_query = '';
  // if the second array element exists
  if( isset( $first_page_url_exploded[1] ) ) {
    $search_query = "/?" . $first_page_url_exploded[1];
    $first_page_url = $first_page_url_exploded[0];
  }
 
  // get parameters from $wp_query object
  // how much posts to display per page (DO NOT SET CUSTOM VALUE HERE!!!)
  $posts_per_page = (int) $wp_query->query_vars['posts_per_page'];
  // current page
  $current_page = (int) $wp_query->query_vars['paged'];
  // the overall amount of pages
  $max_page = $wp_query->max_num_pages;
 
  // we don't have to display pagination or load more button in this case
  if( $max_page <= 1 ) return;
 
  // set the current page to 1 if not exists
  if( empty( $current_page ) || $current_page == 0) $current_page = 1;
 
  // you can play with this parameter - how much links to display in pagination
  $links_in_the_middle = 4;
  $links_in_the_middle_minus_1 = $links_in_the_middle-1;
 
  // the code below is required to display the pagination properly for large amount of pages
  // I mean 1 ... 10, 12, 13 .. 100
  // $first_link_in_the_middle is 10
  // $last_link_in_the_middle is 13
  $first_link_in_the_middle = $current_page - floor( $links_in_the_middle_minus_1/2 );
  $last_link_in_the_middle = $current_page + ceil( $links_in_the_middle_minus_1/2 );
 
  // some calculations with $first_link_in_the_middle and $last_link_in_the_middle
  if( $first_link_in_the_middle <= 0 ) $first_link_in_the_middle = 1;
  if( ( $last_link_in_the_middle - $first_link_in_the_middle ) != $links_in_the_middle_minus_1 ) { $last_link_in_the_middle = $first_link_in_the_middle + $links_in_the_middle_minus_1; }
  if( $last_link_in_the_middle > $max_page ) { $first_link_in_the_middle = $max_page - $links_in_the_middle_minus_1; $last_link_in_the_middle = (int) $max_page; }
  if( $first_link_in_the_middle <= 0 ) $first_link_in_the_middle = 1;
 
  // begin to generate HTML of the pagination
  $pagination = '<nav id="misha_pagination" class="navigation pagination" role="navigation"><div class="nav-links">';
 
  // when to display "..." and the first page before it
  if ($first_link_in_the_middle >= 3 && $links_in_the_middle < $max_page) {
    $pagination.= '<a href="'. $first_page_url . $search_query . '" class="page-numbers">1</a>';
 
    if( $first_link_in_the_middle != 2 )
      $pagination .= '<span class="page-numbers extend">...</span>';
 
  }
 
  // arrow left (previous page)
  if ($current_page != 1)
    $pagination.= '<a href="'. $first_page_url . '/page/' . ($current_page-1) . $search_query . '" class="prev page-numbers">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</a>';
 
 
  // loop page links in the middle between "..." and "..."
  for($i = $first_link_in_the_middle; $i <= $last_link_in_the_middle; $i++) {
    if($i == $current_page) {
      $pagination.= '<span class="page-numbers current">'.$i.'</span>';
    } else {
      $pagination .= '<a href="'. $first_page_url . '/page/' . $i . $search_query .'" class="page-numbers">'.$i.'</a>';
    }
  }
 
  // arrow right (next page)
  if ($current_page != $last_link_in_the_middle )
    $pagination.= '<a href="'. $first_page_url . '/page/' . ($current_page+1) . $search_query .'" class="next page-numbers">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ) . '</a>';
 
 
  // when to display "..." and the last page after it
  if ( $last_link_in_the_middle < $max_page ) {
 
    if( $last_link_in_the_middle != ($max_page-1) )
      $pagination .= '<span class="page-numbers extend">...</span>';
 
    $pagination .= '<a href="'. $first_page_url . '/page/' . $max_page . $search_query .'" class="page-numbers">'. $max_page .'</a>';
  }
 
  // end HTML
  $pagination.= "</div></nav>\n";
 
  // haha, this is our load more posts link
  if( $current_page < $max_page )
    $pagination.= '<div id="iz_loadmore">More posts</div>';
 
  // replace first page before printing it
  echo str_replace(array("/page/1?", "/page/1\""), array("?", "\""), $pagination);
}

Hàm này cũng hỗ trợ số lượng lớn các trang, bạn có thể thấy ý tôi trên ảnh chụp màn hình này – chức năng này sẽ hoạt động tốt ngay cả khi bạn có 154 trang nội dung.

Load More Posts Button + Numeric Pagination

Bước 2. Thêm tham số khác vào wp_localize_script ()

Trong bước thứ hai của hướng dẫn về load more button chúng tôi đưa ra các kịch bản cho chủ đề của chúng ta với action  hook  wp_enqueue_scripts.

wp_localize_script

 

Bước 3. Thêm chức năng phân trang vào Chủ đề của bạn và  wp_ajax_function

Chèn dòng mã dưới đây ngay sau vòng lặp chính của bạn:

iz_paginator( get_pagenum_link() );

Dòng mã này chèn sau endwhile; của vòng lặp trong hàm wp_ajax_.

iz_paginator( $_POST['first_page'] );

Bước 4. Kiểm tra tệp JavaScript của bạn

Mã jQuery của bạn sẽ hơi khác so với mã từ hướng dẫn ban đầu. Đoạn mã thay đổi đều có chú thích cho bạn dễ hiểu và theo dõi

jQuery(function($){
  // we will remove the button and load its new copy with AJAX, that's why $('body').on()
  $('body').on('click', '#misha_loadmore', function(){
    $.ajax({
      url : iz_loadmore_params.ajaxurl,
      data : {
        'action': 'loadmore',
        'query': iz_loadmore_params.posts,
        'page' : iz_loadmore_params.current_page,
        'first_page' : iz_loadmore_params.first_page // here is the new parameter
      },
      type : 'POST',
      beforeSend : function ( xhr ) {
        $('#iz_loadmore').text('Loading...'); 
      },
      success : function( data ){
 
        $('#misha_loadmore').remove(); // remove button
        $('#misha_pagination').before(data).remove(); // add new posts and remove pagination links
        iz_loadmore_params.current_page++;
 
 
      }
    });
    return false;
  });
});

 

Đó là tất cả, nếu bạn có câu hỏi, vui lòng comment phía dưới chúng tôi luôn sẵn sàng cho những thắc mắc của bạn.

Cuối cùng chúc bạn thành công!