Wie implementiert man eine AJAX-Funktion „Mehr Beiträge laden' in WordPress?

So implementieren Sie eine AJAX-Funktion „Mehr Beiträge laden“ in WordPress

Dieser Artikel befasst sich mit dem Problem der Implementierung einer AJAX-Funktion „Mehr Beiträge laden“. „Funktion in WordPress, die es Benutzern ermöglicht, dynamisch zusätzliche Beiträge auf einer Webseite zu laden, ohne die gesamte Seite neu laden zu müssen Seite.

Problembeschreibung

Der Benutzer stieß auf Schwierigkeiten, als er versuchte, diese Funktion mit verschiedenen Methoden zu implementieren, einschließlich der im Abschnitt „Paginierung bei einer benutzerdefinierten WP_Query Ajax“ genannten Methode. Beitrag.

Lösung

Die bereitgestellte Lösung konzentriert sich auf die Verbesserung des Codes Gewährleistung der ordnungsgemäßen Funktionalität. Zu den Schlüsselaspekten gehören:

1. Serverseitiger Code

• Stellen Sie in der Vorlagendatei sicher, dass die erste Beitragsabfrage die gewünschte Anzahl von Beiträgen pro Seite zurückgibt.
• Erstellen Sie in der Funktionsdatei eine Funktion um die AJAX-Anfrage zu verarbeiten und dynamisch weitere Beiträge zu laden. Die Funktion sollte eine Paginierungslogik enthalten, um den richtigen Satz von Beiträgen abzurufen.

2. Clientseitiger Code (jQuery)

• Binden Sie auf der Clientseite einen Ereignis-Listener an die Schaltfläche „Mehr laden“.
• Wenn auf die Schaltfläche geklickt wird, senden Sie eine AJAX-Anfrage an die serverseitige Funktion mit jQuery.
• Übergeben Sie notwendige Parameter wie den Offset und die Anzahl der Beiträge pro Seite.
• Fügen Sie den zurückgegebenen HTML-Code an die vorhandene Beitragsliste an.

3. Zusätzliche Überlegungen

• Behandeln Sie den Fall, dass keine Beiträge mehr geladen werden können, indem Sie die Schaltfläche „Mehr laden“ deaktivieren.
• Um einen „unendlichen Ladeeffekt“ zu erzeugen, verwenden Sie das Scrollen im Fenster anstelle von Schaltflächenklickereignissen.

Code Implementierung

Folgen Sie den bereitgestellten Codeausschnitten, um das zu implementieren Lösung:

functions.php:

/**
 * Handle AJAX "Load More" request
 */
function load_more_posts() {
    $offset = $_POST['offset'];
    $ppp = $_POST['ppp'];

    $args = [
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'offset' => $offset,
        // Other query parameters...
    ];

    $query = new WP_Query($args);
    $html = '';

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $html .= '<div>' . get_the_content() . '</div>';
        }
        wp_reset_postdata();
    } else {
        $html = 'No more posts to load';
    }

    echo $html;
    exit();
}

add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');

script.js:

$(function() {
    var offset = 0;
    var ppp = 3;

    $('#load-more').on('click', function() {
        $.ajax({
            type: 'POST',
            url: 'path/to/wp-admin/admin-ajax.php',
            data: {
                action: 'load_more_posts',
                offset: offset,
                ppp: ppp
            },
            success: function(response) {
                $('#posts').append(response);
                offset += ppp;
            }
        });

        // Prevent the button from triggering multiple AJAX requests
        $('#load-more').attr('disabled', true);
    });
});

Hinweis : Ersetzen Sie „path/to/wp-admin/admin-ajax.php“ durch die tatsächliche URL zu Ihrem WordPress admin-ajax.php-Datei.

Fazit

Indem Sie diese Schritte befolgen, können Sie effektiv eine AJAX-Funktion „Weitere Beiträge laden“ für Ihre WordPress-Site implementieren, die es Benutzern ermöglicht um nahtlos große Mengen an Inhalten zu durchsuchen, ohne die gesamte Seite aktualisieren zu müssen.

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