Wie implementiert man einen Ajax-Button „Mehr laden' für WordPress-Beiträge?

Ajax-Schaltfläche „Mehr Beiträge laden“ in WordPress

Dieses Tutorial befasst sich mit dem Problem der Implementierung einer Schaltfläche „Mehr Beiträge laden“ in WordPress, um Beiträge schrittweise zu laden über Ajax. Das Problem besteht darin, jQuery-, Ajax- und WordPress-Funktionen zu integrieren, um neue Beiträge bei Bedarf abzurufen und anzuzeigen.

Lösung:

In der index.php Vorlagendatei, erstellen Sie ein Containerelement mit der ID „ajax-posts“ und fügen Sie PHP-Code ein, um eine begrenzte Anzahl von Beiträgen (z. B. drei) abzufragen und anzuzeigen. Fügen Sie eine Schaltfläche mit der ID „more_posts“ hinzu, um das Laden zusätzlicher Beiträge auszulösen.

Erstellen Sie in der Datei functions.php eine Funktion (more_post_ajax()), um die Ajax-Anfrage zu verarbeiten. Diese Funktion empfängt den Offset und die Anzahl der Beiträge pro Seite als Parameter und fragt die Datenbank ab, um den nächsten Satz von Beiträgen abzurufen.

Im Ajax-Aufruf (entweder in einer Skriptdatei oder inline ), legen Sie die Ajax-URL fest, senden Sie den Offset und die Anzahl der Beiträge pro Seite als Daten und verarbeiten Sie die Antwort, indem Sie die abgerufenen Beiträge an den Container „ajax-posts“ anhängen und die Seite erhöhen Nummer.

Beispielcode:

index.php

<div>

functions.php

function more_post_ajax() {
    // Get offset and number of posts per page
    $offset = $_POST['offset'];
    $ppp = $_POST['ppp'];

    // Query database to retrieve next set of posts

    // Return retrieved posts
    echo $posts;
    exit;
}

Ajax anrufen

// Set Ajax URL
var ajaxUrl = '<?php echo admin_url('admin-ajax.php') ?>';

// When "Load More" button is clicked
$('#more_posts').on('click', function() {
    // Disable button temporarily
    $(this).attr('disabled', true);

    // Send Ajax request with offset and number of posts per page
    $.post(ajaxUrl, {
        action: 'more_post_ajax',
        offset: (page * ppp) + 1,
        ppp: ppp
    })
    .success(function(posts) {
        // Append retrieved posts to container
        $('#ajax-posts').append(posts);
        // Increment page number
        page++;
        // Re-enable "Load More" button
        $('#more_posts').attr('disabled', false);
    });
});

Das obige ist der detaillierte Inhalt vonWie implementiert man einen Ajax-Button „Mehr laden' für WordPress-Beiträge?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!