Einführung:
Das dynamische Laden von Beiträgen über AJAX ist eine häufig gesuchte Methode. nach Feature in der WordPress-Entwicklung. Dadurch können Benutzer mehr Inhalte erkunden, ohne die gesamte Seite neu laden zu müssen, was das Benutzererlebnis verbessert. Dieser Artikel befasst sich mit einem häufigen Problem, mit dem viele bei der Implementierung von Load More Posts mit AJAX konfrontiert sind.
Der Benutzer hat versucht, die Paginierung mit AJAX zu implementieren, stieß jedoch auf Schwierigkeiten, was zu keinen sichtbaren Änderungen führte der Seite und Fehlfunktion der Schaltfläche „Mehr laden“. Obwohl das Element untersucht und das erwartete Verhalten in jQuery beobachtet wurde, wurden die Beiträge nicht zur Seite hinzugefügt.
Bei der Analyse der bereitgestellten Codeausschnitte traten einige potenzielle Probleme auf :
Vorlagendatei (index.php):
// Calculate the offset for page 2 onwards $offset = ( isset( $_GET['page'] ) && $_GET['page'] > 1 ) ? ( $_GET['page'] - 1 ) * $postsPerPage : 0; $args = [ 'post_type' => 'post', 'posts_per_page' => $postsPerPage, 'cat' => 1, 'offset' => $offset, ];
AJAX-Funktion (functions.php):
function more_post_ajax(){ $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3; $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0; header("Content-Type: text/html"); $args = array( 'suppress_filters' => true, 'post_type' => 'post', 'posts_per_page' => $ppp, 'cat' => 1, 'paged' => $page + 1, // Increase the page by 1 since offset is already calculated in the template file ); $loop = new WP_Query($args); $out = ''; if ($loop->have_posts()) : while ($loop->have_posts()) : $loop->the_post(); // Generate HTML for the post $out .= '<div class="small-12 large-4 columns">'; $out .= '<h1>'.get_the_title().'</h1>'; $out .= '<p>'.get_the_content().'</p>'; $out .= '</div>'; endwhile; endif; wp_reset_postdata(); die($out); } // Localize the 'more_post_ajax' script wp_localize_script( 'twentyfifteen-script', 'ajax_posts', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'noposts' => __('No older posts found', 'twentyfifteen'), )); add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax'); add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
ajax.js:
$(document).ready(function() { var ppp = 3; var cat = 8; var pageNumber = 1; function load_posts(){ pageNumber++; var str = '&cat=' + cat + '&pageNumber=' + pageNumber + '&ppp=' + ppp + '&action=more_post_ajax'; $.ajax({ type: "POST", dataType: "html", url: ajax_posts.ajaxurl, data: str, success: function(data){ var $data = $(data); if($data.length){ $("#ajax-posts").append($data); $("#more_posts").attr("disabled",false); } else { $("#more_posts").attr("disabled",true); } }, error : function(jqXHR, textStatus, errorThrown) { $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown); } }); return false; } $("#more_posts").on("click",function(){ $("#more_posts").attr("disabled",true); load_posts(); }); });
Durch sorgfältige Auseinandersetzung mit diesen Problemen , kann die Funktion zum Laden weiterer Beiträge mit AJAX erfolgreich implementiert werden. Die Offset-Formel und die Lokalisierung des WordPress-Skripts spielen eine entscheidende Rolle bei der Gewährleistung einer ordnungsgemäßen Paginierung und des Zugriffs auf WordPress-Variablen im JavaScript-Code. Diese Korrekturen sollten zu einer voll funktionsfähigen Schaltfläche „Mehr laden“ führen, die dynamisch zusätzliche Beiträge auf die Seite lädt.
Das obige ist der detaillierte Inhalt vonWarum funktioniert meine WordPress-Schaltfläche „Weitere Beiträge laden' nicht mit AJAX?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!