Warum funktioniert meine WordPress-Schaltfläche „Weitere Beiträge laden' nicht mit AJAX?

Implementieren von „Mehr Beiträge laden“ mit AJAX in WordPress

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.

Problemstellung:

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.

Lösung:

Bei der Analyse der bereitgestellten Codeausschnitte traten einige potenzielle Probleme auf :

1. jQuery: Die Offset-Eigenschaft im $.post-Aufruf verwendet (Seite * ppp) 1 statt (Seite - 1) * ppp. Diese Formel sollte auf (Seite - 1) * ppp angepasst werden, um den Offset für den nächsten Satz von Beiträgen korrekt zu berechnen.
2. AJAX-Funktion: In der Funktion more_post_ajax in Functions.php wird die Die Offset-Eigenschaft sollte in Verbindung mit der Paged-Eigenschaft verwendet werden. Dadurch wird sichergestellt, dass die WP_Query die entsprechende Seite mit Beiträgen abruft.
3. php: Möglicherweise fehlt irgendwo im Code ein schließendes PHP-Tag, das den Code beschädigen würde.
4. WordPress-Skriptlokalisierung: Die Funktion more_post_ajax muss als WordPress-Skript lokalisiert werden. Die Skriptlokalisierung sollte vor dem Laden von Skripten in „functions.js“ platziert werden. Dadurch kann das ajax_posts-Objekt im JavaScript-Code verwendet werden.

Überarbeiteter Code:**

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();
    });
});

Fazit:

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!