Lazy Load mit der WP_Query-Paginierung

Ich habe darüber nachgedacht, die WP_Query von WP_Query zu verwenden, um ein benutzerdefiniertes Lazy Loading zu WP_Query . WP_Query es eine Möglichkeit, die WP_Query für eine Lazy Load zu nutzen?

Sagen wir zum Beispiel, ich muss beim ersten Laden 24 Beiträge laden, und wenn die Schriftrolle den Boden erreicht, lädt sie die nächsten 24 Beiträge.

Ist das möglich?

Solutions Collecting From Web of "Lazy Load mit der WP_Query-Paginierung"

Schauen Sie sich dieses grobe Beispiel an. Dies erfordert ein wenig Anpassung, aber als Ganzes tut es, was Sie wollen – es lädt X Menge der nächsten Beiträge, wenn der Benutzer auf eine Schaltfläche klickt, die unterhalb der bereits geladenen Beiträge sein sollte.

Wenn Sie automatisch mehr Beiträge laden möchten, wenn der Benutzer nach unten scrollt, ersetzen Sie einfach click event durch einen anderen Code, der das Scrollen im Auge behält. Es gibt viele Beispiele online.

  • Behalten Sie jQuery('some-html-element')-s Auge, vergewissern Sie sich, dass Sie diese Elementnamen umbenennen oder Ihren eigenen HTML Code ändern, damit sie passen
  • Gesamtzahl der Posts: Sie können es sichtbar machen, wenn Sie möchten, dass Nutzer die Gesamtzahl der Posts anzeigen oder CSS opacity , um sie zu verbergen. Es muss immer noch irgendwo sein, um einen Platz zum Speichern des Wertes zu haben

Dies geht zu Ihrem Haupt-.js:

Diese function behandelt alle DOM-Manipulationen und Ajax. Es kann wie gewünscht aufgerufen werden.

 //ajaxLock is just a flag to prevent double clicks and spamming var ajaxLock = false; if( ! ajaxLock ) { function ajax_next_posts() { ajaxLock = true; //How many posts there's total var totalPosts = parseInt( jQuery( '#total-posts-count' ).text() ); //How many have been loaded var postOffset = jQuery( '.single-post' ).length; //How many do you want to load in single patch var postsPerPage = 24; //Hide button if all posts are loaded if( totalPosts < postOffset + ( 1 * postsPerPage ) ) { jQuery( '#more-posts-button' ).fadeOut(); } //Change that to your right site url unless you've already set global ajaxURL var ajaxURL = 'http://www.my-site.com/wp-admin/admin-ajax.php'; //Parameters you want to pass to query var ajaxData = '&post_offset=' + postOffset + '&action=ajax_next_posts'; //Ajax call itself jQuery.ajax({ type: 'get', url: ajaxURL, data: ajaxData, dataType: 'json', //Ajax call is successful success: function ( response ) { //Add new posts jQuery( '#posts-container' ).append( response[0] ); //Update the count of total posts jQuery( '#total-posts-count' ).text( response[1] ); ajaxLock = false; }, //Ajax call is not successful, still remove lock in order to try again error: function () { ajaxLock = false; } }); } } 

Dies geht zu Ihrem Haupt-.js:

Dies ist ein Beispiel, wie man die function oben mit der Taste aufrufen kann, dies ist meiner Meinung nach besser, der Benutzer kann wählen, ob er / sie mehr sehen möchte ..

 //Load more posts button jQuery( '#more-posts-button' ).click( function( e ) { e.preventDefault(); ajax_next_posts(); }); 

Das geht zu functions.php oder erstelle ein mu-plugin:

Dies ist die function, die auf Ihrem Server "läuft", Ajax ruft dies auf, macht es und sendet Ergebnisse zurück.

 //More posts - first for logged in users, other for not logged in add_action('wp_ajax_ajax_next_posts', 'ajax_next_posts'); add_action('wp_ajax_nopriv_ajax_next_posts', 'ajax_next_posts'); function ajax_next_posts() { //Build query $args = array( //All your query arguments ); //Get offset if( ! empty( $_GET['post_offset'] ) ) { $offset = $_GET['post_offset']; $args['offset'] = $offset; //Also have to set posts_per_page, otherwise offset is ignored $args['posts_per_page'] = 24; } $count_results = '0'; $query_results = new WP_Query( $args ); //Results found if ( $query_results->have_posts() ) { $count_results = $query_results->found_posts; //Start "saving" results' HTML $results_html = ''; ob_start(); while ( $query_results->have_posts() ) { $query_results->the_post(); //Your single post HTML here } //"Save" results' HTML as variable $results_html = ob_get_clean(); } //Build ajax response $response = array(); //1. value is HTML of new posts and 2. is total count of posts array_push ( $response, $results_html, $count_results ); echo json_encode( $response ); //Always use die() in the end of ajax functions die(); } 

Ich habe dafür unendlich scroll verwendet.

Hier ist, was ich in script.js verwendet habe

 $(function(){ var $container = $('#ms-container'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector : '.ms-item', }); }); //var templateUrl = object_name.templateUrl; //var src = "'"+templateUrl+"/images/loader.gif' "; $container.infinitescroll({ navSelector : '#navigation', // selector for the paged navigation nextSelector : '#navigation a', // selector for the NEXT link (to page 2) itemSelector : '.ms-item', loading: { finishedMsg: $('
No More Posts.
'), msgText: '', img: '', speed: 0 } }, // trigger Masonry as a callback function( newElements ) { // hide new items while they are loading var $newElems = $( newElements ).css({ opacity: 0 }); // ensure that images load before adding to masonry layout $newElems.imagesLoaded(function(){ // show elems now they're ready $newElems.animate({ opacity: 1 }); $container.masonry( 'appended', $newElems, true ); }); } ); });

Ich benutze Mauerwerk, also musst du das vielleicht ändern. Der gesamte Container auf der Archivseite ist

 

Daher:

 var $container = $('#ms-container'); 

Mein Container für jeden einzelnen Beitrag auf meiner Archivseite ist:

 

Daher:

 itemSelector : '.ms-item', 

Dies ist das, was ich als Seitenumbruch unten auf der Archivseite verwende:

   

Wenn ich mich richtig erinnere, habe ich hier die Info dazu: https://stackoverflow.com/questions/9766515/imagesloaded-method-not-working-with-jquery-maurismon-and-infinite-croll