Phân trang bằng javascript

1.Sử dụng theme TwentyFifteen2.Tạo thư mục plugin3.Nhúng tệp tin Javascript vào theme4.Tìm class phân trang và viết event mang lại AJAX5.Sử dụng AJAX trong WordPress6.Tạo hàm trả về dữ liệu trường đoản cú WordPress7.Vấn đề chạm chán phải vào tutorial này8.Bài liên quan

Kỹ thuật AJAX (Asynchronous JavaScript and XML) hiện giờ vẫn vượt phổ cập bên trên website rồi, nó sẽ giúp bài toán truyền gửi tài liệu trường đoản cú backover ra frontend cơ mà không đề xuất cài đặt lại trang.Mỗi ngày chúng ta cũng có thể đang thấy không hề ít ví dụ về câu hỏi sử dụng AJAX, như việc bấm nút ít like hoặc gửi bình luận bên trên Facebook cũng đông đảo là AJAX cả.

Bạn đang xem: Phân trang bằng javascript

Trong nội dung bài viết này, mình đang gợi ý chúng ta biện pháp làm quen thuộc với nghệ thuật AJAX áp dụng vào WordPress với cùng 1 ví dụ thông dụng tuyệt nhất là có tác dụng phân trang bởi AJAX. Từ ví dụ này, bạn cũng có thể đọc biện pháp AJAX chuyển động trong WordPress để gửi tài liệu về front-over.

Tải source

Sử dụng theme TwentyFifteen

Trong ví dụ này, bản thân vẫn thực hiện theme TwentyFifteen nhằm các bạn dễ dàng làm theo. Nhưng bạn vẫn có thể làm cho nghỉ ngơi những theme khác vì chưng chỉ việc đưa ra loại vùng chọn của liên kết gửi trang cơ mà thôi, nếu bạn custom lại xuất phát từ 1 theme không giống thì cần tạo ra child theme.

*

Tạo thư mục plugin

Bây giờ các bạn hãy vào thư mục /wp-content/plugins/ với sản xuất thêm 1 thư mục cùng với thương hiệu là ajax-pagination. Trong thỏng mục ajax-pagination, các bạn tạo thành một file tên là plugin.php với ngôn từ sau:

Từ bây chừ, phần lớn code bởi PHP. bạn sẽ đều viết trong file plugin.php này. Sau đó chúng ta có thể vào Plugins -> Installed Plugins rồi kích hoạt plugin này lên.

Nhúng file Javascript vào theme

Khi thao tác cùng với AJAX họ đã cần được viết thêm một số trong những đoạn Javascript buộc phải đang bắt buộc chế tạo ra một tệp tin .js trong plugin rồi viết code mang lại nó trường đoản cú nhúng vào theme. Bây tiếng các bạn hãy chế tạo ra một tệp tin thương hiệu ajax-pagination.js, sau đó viết thêm code này vào file plugin.php nhằm chèn tệp tin này vào theme sẽ thực hiện tự động hóa trải qua hàm wp_enqueue_script rồi móc vào hook wp_enqueue_scripts để nó tiến hành.

/*
ajax_pagination_scripts()
Nhúng tệp tin ajax-pagination.js vào theme */ add_action( "wp_enqueue_scripts", "ajax_pagination_scripts" ); function ajax_pagination_scripts() /* * Chèn file ajax-pagination.js vào frontend */ wp_enqueue_script( "ajax-pagination-script", plugins_url( "/ajax-pagination.js", __FILE__ ), array( "jquery" ) );

Về bí quyết hoạt động của hook wp_enqueue_scripts với hàm wp_enqueue_script thế nào thì mình đã lý giải tại một bài bác khác. Nhưng trước tiên hiện giờ chúng ta có thể hiểu đúng bản chất cùng với đoạn bên trên, nó sẽ tự động ckém một tệp tin ajax-pagination.js trong thỏng mục plugin hiện giờ của nó nhờ vào hàm plugins_url(), dòng array("jquery") Tức là cho WordPress từ bỏ gọi được script này đã sử dụng jQuery nhằm mục đích auto cyếu vào theme và luôn luôn load sau jQuery để bị lỗi.

Nếu bạn cần chèn các tệp tin Javascript không giống nhau thì chỉ cần viết các đoạn wp_enqueue_script() vào một hàm nào kia rồi móc vào hook wp_enqueue_scripts là được.

Bây giờ các bạn hãy ra ngoài trang web kiểm tra qua mã mối cung cấp HTML kế bên frontkết thúc của nó, file ajax-pagination.js đã có được hotline ra rứa này.

*

Tìm class phân trang và viết sự kiện đến AJAX

Event mang đến AJAX nghĩa là một hành vi nào đó mà họ ao ước phụ thuộc vào đó để kích hoạt bài toán gửi tầm nã vấn, ở đây họ đã thực hiện event click để gửi tróc nã vấnlúc clichồng vào trong 1 địa điểm nào đó. Và địa chỉ kia chúng ta đã khẳng định là những con đường link phía bên trong tkhô nóng phân trang.

Bây giờ đồng hồ bạn hãy tìm tới tkhô giòn phân trang, ấn con chuột bắt buộc vào đường link với chọn Inspect Element (hoặc Firebug) giúp xem vùng lựa chọn khoanh vùng đó, nó như thế này.

*

Quý Khách hãy xem xét nlỗi vào hình, tkhô nóng phân trang sẽ tiến hành phía bên trong một vùng chọn cùng với class .nav-links. Sau đó các link bên trong sẽ sở hữu được class là .page-numbers. Riêng links mang lại nút ít next thì sẽ có được thêm class .next. Vậy bắt buộc nhằm tạo ra sự kiện đúng mực, bọn họ đã tùy chỉnh cấu hình một sự kiện click dựa trên thẻ a vào vùng lựa chọn .nav-link (viết là .nav-liên kết a).

Trước hết hãy viết đoạn này vào tệp tin ajax-pagination.js nhằm cấu hình thiết lập sự kiện cùng thể nghiệm nó.

// chắc chắn là là vẫn áp dụng cơ chế No Conflict của jQuery, thực hiện jQuery() cầm cố bởi $() jQuery.noConflict(); // load sau khoản thời gian website được cài đặt xong jQuery( document ).ready( function($) $(document).on ( "click", ".nav-liên kết a", function( event ) event.preventDefault(); // khám nghiệm sự kiện click alert( "quý khách hàng vừa cliông xã vào phân trang đấy!" ); ) // over sự kiện );

Và hiện giờ hãy thử cliông chồng vào phân trang đi coi tất cả thấy cái bảng alert, trường hợp thấy thì thành công cùng xóa đoạn alert() vào code đi.


*

Thử nghiệm event


Sử dụng AJAX vào WordPress

Mặc định WordPressđã tích hợp sẵn các cách tiến hành cách xử trí dữ liệubằng AJAX, cần bọn họ bao gồm sử dụng thì chỉ cần Gọi nó ra mà lại thôi. Để Gọi nó ra, họ đang thực hiện Hotline file admin-ajax.php có trong WordPress ra với code sau (đặt bên phía trong hàm ajax_pagination_scripts mà lại ta đã knhì báo sinh hoạt trên):

/* * Hotline AJAX vào WordPress */ global $wp_query; wp_localize_script( "ajax-pagination-script", "ajax_object", array( // Các cách tiến hành sẽ sử dụng "ajax_url" => admin_url( "admin-ajax.php" ), "query_vars" => json_encode( $wp_query->query ) ));

Hàm wp_localize_script() sẽ có tính năng dò search và áp dụng một script nào đó đã bao gồm vào mã mối cung cấp WordPress vị tệp tin admin-ajax.php sẽ bao gồm sẵn rồi buộc phải không dùng wp_enqueue_script() như sống bên trên nữa. Trong số đó, ajax_object là đối tượng cơ mà chút ít nữa họ sẽ sử dụng trong tệp tin .js nhằm khẳng định đối tượng người tiêu dùng AJAX. Còn global $wp_query; là ta đã chuyển đối tượng người sử dụng $wp_query ra toàn cục để rất có thể sử dụng vào file của plugin nhằm rước dữ liệu của post.

Sau khi cyếu xong, các bạn soát sổ source thì đã thấy một đoạn script được in ra như sau:

Bây giờ đồng hồ vấn đề còn lại mà bạn cần làm sinh sống bước này chính là viết Javascript nhằm khai báo AJAX.

// chắc chắn là vẫn áp dụng cơ chế No Conflict của jQuery, sử dụng jQuery() chũm vì chưng $() jQuery.noConflict(); // load sau khi trang web được mua dứt jQuery( document ).ready( function($) $(document).on ( "click", ".nav-liên kết a", function( event ) sự kiện.preventDefault(); // AJAX $.ajax( url: ajax_object.ajax_url, type: "post", data: action: "ajax_pagination_data" , success: function( ketqua ) // Thử nghiệm var ketqua = "AJAX working"; alert( ketqua ); ) ) // kết thúc sự kiện );

Từ đoạn 10 đến đoạn 23 là rất nhiều code mà lại bọn họ buộc phải viết bổ sung vào file ajax-pagination.js, bản thân giải thích nlỗi sau:

$.ajax() – Đây là 1 hàm quan trọng vào jQuery để cách xử lý AJAX dễ dàng và nhỏ gọn hơn.url: Đường dẫn của tệp tin mà những dữ liệu sẽ tiến hành gửi vào Lúc thực thi AJAX từ bỏ sự kiện clichồng. ajax_object.ajax_url có nghĩa là băng thông của file admin-ajax.php mà lại ta sẽ knhị báo ở tệp tin plugin.php.type: loại cách làm gửi tài liệu, thực hiện POST tuyệt GET gì tùy các bạn tuy vậy nếu chỉ nên nhấn dữ liệu thôi thì bản thân khuyến khích các bạn cần sử dụng POST.data: knhì báo đối tượng người sử dụng cất dữ liệu trả về sau thời điểm gửi request tự AJAX. ajax_pagination_data nghĩa là dòng hàm trả dữ liệu về, chút nữa chúng ta vẫn viết nó sau.success: hành vi sau khi AJAX truyền dữ liệu thành công xuất sắc, nhất thời sinh hoạt tại đây sẽ soát sổ bằng cách in một quãng chữ ra nhằm thử nghiệm. Nếu nó trả về được thì thành công xuất sắc.

Xem thêm: Hướng Dẫn Upload Wordpress Lên Host Của Bạn, Cách Up Web Lên Host Của Bạn

Bây giờ giữ lại với hãy thử click vào dòng link phân trang coi trở nên ketqua tất cả trả về ko, trường hợp có thì thành công.

*

Tạo hàm trả về dữ liệu tự WordPress

Nlỗi bản thân nói trên, tham số data là đang đựng đối tượng trả công dụng về, đề xuất bây chừ họ sẽ xây dựng đối tượng người dùng ajax_pagination_data để trả về mang đến user lúc chúng ta truyền dữ liệu về. Thứ nhất, bạn sẽ cần sửa lại tệp tin ajax-pagination.js thành nlỗi sau:

// chắc hẳn rằng là đã áp dụng cơ chế No Conflict của jQuery, áp dụng jQuery() ráng vày $() jQuery.noConflict(); // load sau thời điểm website được tải xong xuôi jQuery( document ).ready( function($) /*
bằng cách bóc tách tách số vào chuỗi dữ liệu */ function set_page( element ) element.find("span").remove(); return parseInt( element.html() ); $(document).on ( "click", ".nav-liên kết a", function( sự kiện ) sự kiện.preventDefault(); page = set_page( $(this).clone() ); // AJAX $.ajax( url: ajax_object.ajax_url, type: "post", data: action: "ajax_pagination_data", query_vars: ajax_object.query_vars, page: page , beforeSend: function() /*
Tạo các cảm giác trước lúc request gửi đi */ $( "#main" ).find( "article" ).remove(); $( "#main nav" ).remove(); $( "#main" ).scrollTop(0); $( "#main" ).append( "
cùng khôi phục lại tài liệu trả về */ $( "#main" ).find( "#loading" ).remove(); $( "#main" ).append( ketqua ); console.log(page); ) ) // over event );

Ở đoạn code mới, họ gồm thêm một hàm mới sở hữu tên set_page() trong Javascript. Hàm này sẽ sở hữu tác dụng search kiếm tất cả nội dung vào thẻ span của tài liệu. Sau kia thực hiện cần sử dụng hàm parseInt() trong Javascript để tách bóc số trong chuỗi tài liệu tìm thấy. Mục đích của chính nó là nhằm họ đem được con số của trang trong các đoạn text bên trên website, ví dụ trên thanh hao pagination sẽ có các hàng đầu,2,3,4,…nó đã mang những số này để gia công giá trị của ttê mê số page nhằm giúp query của WordPress đọc được sẽ cần lấy dữ liệu của trang như thế nào.

Chúng ta vẫn khai báo thêm tyêu thích số query_vars và page vốn sẽ tiến hành dùng vào việc gửi truy nã vấn trong WordPress để đưa danh sách post. Tsay đắm số query_vars được xem là một cách thức của đối tượng người tiêu dùng ajax_object mà họ sẽ khai báo ngơi nghỉ tệp tin plugin.php. Còn tyêu thích số page là nó vẫn sử dụng cực hiếm trả về của hàm set_page() ta tạo ra ngơi nghỉ trên.

tiếp đến là tđắm say số beforeSkết thúc nhằm thêm loại gì đấy trước lúc tài liệu của truy vấn vấn gửi đi. Chúng ta đang dùng để làm xóa các post (thẻ aritlce vào #main của TwentyFifteen), xóa thẻ form pagination đang có (thẻ nav bao gồm class pagination vào #main của TwentyFifteen) và sau cùng là sản xuất tài liệu nhận thấy vào vào #main. Và đặc biệt quan trọng là auto nhảy đầm lên đầu website với cách thức scrollTop cùng in một quãng câu chữ cho những người sử dụng biết là dữ liệu đang rất được mua.

Cuối cùng là tđê mê số success vẫn trả kết quả về sau khoản thời gian gửi tróc nã vấn AJAX đến WordPress vì chưng tsay đắm số ketqua WordPress tự đọc được chính là hàm hứng tài liệu trả về. Đồng thời xóa chiếc chữ Đang đem tài liệu bài viết tê đi.

Mình cũng xin lưu ý nlỗi sau:

#main – vùng chọn của form hiển thị list các post.article – vùng chọn đơn lẻ của post, bạn cũng có thể cần sử dụng class .post cũng rất được.nav.pagination – vùng lựa chọn mang lại khung phân trang.

Và tiếp sau là sản xuất hàm để trả dữ liệu về mang lại AJAX cùng với hook là tên action wp_ajax_ajax_pagination_data, trong các số ấy ajax_pagination là tên gọi action mà ta đang knhì báo ngơi nghỉ ajax-pagination.js, còn wp_ajax là chi phí tố phải mang đến hook lúc thao tác làm việc với AJAX trong WordPress.

/*
Hàm chứa tài liệu trả về */ add_action( "wp_ajax_nopriv_ajax_pagination_data", "set_ajax_pagination_data" ); add_action( "wp_ajax_ajax_pagination_data", "set_ajax_pagination_data" ); function set_ajax_pagination_data() $query_vars = json_decode( stripslashes( $_POST<"query_vars"> ), true ); $query_vars<"paged"> = $_POST<"page">; $posts = new WP_Query( $query_vars ); $GLOBALS<"wp_query"> = $posts; if( ! $posts->have_posts() ) get_template_part( "content", "none" ); else while ( $posts->have_posts() ) $posts->the_post(); get_template_part( "content", get_post_format() ); the_posts_pagination( array( "mid_size" => 5, "prev_text" => __( "Previous page", "twentyfifteen" ), "next_text" => __( "Next page", "twentyfifteen" ), "before_page_number" => "" . __( "Page", "twentyfifteen" ) . " ", ) ); die();

Tại đoạn trên, trước tiên là bọn họ chuyển tài liệu ngơi nghỉ biến hóa $_POST<"query_vars"> được trả về vị AJAX vì chưng khoác định hàm $.ajax() của jQuery đã trả tài liệu về là giao diện JSON với lưu lại vào phát triển thành $query_vars.

Tiếp đến, bọn họ đưa quý hiếm của $_POST<"page"> lúc được AJAX gửi về vào biến hóa $query_vars<"paged"> nhằm tùy chỉnh phân trang mang đến query.

Cuối cùng là ta tạo một đối tượng người sử dụng $posts tự vươn lên là $query_vars sống trên và Hotline template content.php ra nhằm hiển thị nội dung. Trong theme TwentyFifteen thì tệp tin này sẽ chứa các đoạn code hiển thị từng yếu tắc của một post và vòng lặp cđọng gắng lặp đi lặp lại. Đồng thời chèn thêm một thanh phân trang bắt đầu cùng với hàm the_posts_pagination() và xong xuôi quy trình cho đến khi nó vẫn hoàn chỉnh câu hỏi lặp.

Bây tiếng chúng ta có thể lưu giữ cùng ra phía bên ngoài demo click vào link chuyển trang sinh sống những con số trong phần phân trang để thấy nó gồm vận động hay là không, nếu khách hàng có tác dụng từ đầu bài cho tới tiếng thì nó sẽ chuyển động được.

Cũng buộc phải xem xét là kể từ WordPress 4.1 trở đi thì hàm the_posts_pagination() vẫn hiển thị thanh hao phân trang dạng số rồi.

Vấn đề chạm chán buộc phải trong tutorial này

Thực ra tutorial này bản thân vẫn chạm chán nên một sự việc là nếu bạn nhấp vào liên kết dạng số trên phân trang thì nó đã làm việc được, tuy nhiên nếu bạn click vào nút ít Next tốt đại loại những điều đó thì nó đang trả về Home. Bởi bởi theo tutorial này thì dữ liệu từng trang của WordPress sẽ được lấy dựa vào biến đổi $query_vars<"paged"> nhưng nó hứng được từ dữ liệu mà jQuery gửi về bằng AJAX, trong lúc đó làm việc file Javascript mình đã xác định rằng số trang sẽ được search bằng phương pháp sử dụng hàm parseInt() vào Javascript nhằm bóc số bên trên thẻ , vốn là links của từng trang trong phân trang. Nhưng ví như thẻ kia gồm văn bản là chữ Next thì dĩ nhiên nó vẫn trả về quý hiếm là “NaH”, tương xứng cùng với câu hỏi không có dữ liệu kiểu dáng số nào, vì thế sẽ không còn chuyển động được.

Còn bí quyết làm cho phân trang thứ hạng Next, Prev thì hiện nay có tương đối nhiều tutorial phải chúng ta có thể tra cứu bên trên Google.

Xem thêm: Theo Dõi Cuộc Gọi Và Tin Nhắn Trên Iphone Tốt Nhất Và Hiệu Quả 2020

Chúc các bạn thành công!


Bài liên quan

2 cách thức từ bỏ tạo ra code mang đến WordPressĐếm lượt coi bài viết lúc bao gồm cacheTự code công dụng đếm lượt xem và top bài bác coi nhiềuTổng hòa hợp các Framework có tác dụng Theme Options cho WordPressThêm hình ảnh cùng sửa footer vào trang cai quản trị WordPress Biến dữ liệu (variable)

Content retrieved from:https://thachptê mê.com/wordpress/wordpress-development/tu-code-chuc-nang-phan-trang-bang-ajax.html" target="_blank">https://thachpham mê.com/wordpress/wordpress-development/tu-code-chuc-nang-phan-trang-bang-ajax.html.


Chuyên mục: Theme wordpress