Wie implementiert man eine Schaltfläche „Weitere Beiträge laden' mit Ajax in WordPress?

Ajax-Schaltfläche zum Laden weiterer Beiträge in WordPress

Das Laden weiterer Beiträge über Ajax ist ein häufiger Bedarf für Websites mit einer großen Menge an Inhalten. Dadurch können Benutzer mehrere Inhaltsseiten durchsuchen, ohne die gesamte Seite zu aktualisieren. In diesem Artikel werden wir die Schritte untersuchen, die zur Implementierung einer Schaltfläche „Weitere Beiträge laden“ mit Ajax in WordPress erforderlich sind.

Erstellen des Vorlagencodes

Beginnen Sie mit der Erstellung eines Vorlagendatei, in der die Schaltfläche „Weitere Beiträge laden“ angezeigt werden soll. In diesem Beispiel verwenden wir index.php. Fügen Sie Ihrer Vorlage den folgenden Code hinzu:

<div>

Funktion zum Laden weiterer Beiträge

Als nächstes erstellen Sie eine Funktion in Ihrer Datei „functions.php“, um den Ajax-Aufruf zu verarbeiten zum Laden weiterer Beiträge. Diese Funktion fragt nach dem nächsten Satz von Beiträgen basierend auf der aktuellen Seite und der Anzahl der Beiträge pro Seite.

function more_post_ajax(){
    // Get parameters from the Ajax request
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];

    // Prepare query arguments
    $args = [
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'offset' => $offset,
    ];

    // Perform the query
    $loop = new WP_Query($args);

    // Output the posts
    while ($loop->have_posts()) : $loop->the_post(); 
        the_content();
    endwhile;
    exit; 
}

// Hook the function to the WordPress Ajax action
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');

jQuery Ajax Script

In Ihrer Fußzeile Fügen Sie das folgende jQuery-Skript ein, um die Funktionalität der Ajax-Schaltfläche zu verwalten:

<script type="text/javascript">
    jQuery(document).ready( function($) {
        // Ajax post endpoint
        var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";

        // Page counter
        var page = 5; 
        // Posts per page
        var ppp = 3; 

        // Event handler for the "Load More Posts" button
        $("[id^=more_posts]").on("click", function() {
            $("[id^=more_posts]").attr("disabled", true);

            $.post(ajaxUrl, {
                action: "more_post_ajax",
                offset: (page * ppp) + 1,
                ppp: ppp
            })
            .success(function(posts) {
                page++;
                $("#ajax-posts").append(posts);
                $("[id^=more_posts]").attr("disabled", false);
            });
        });
    });
</script>

Anpassen der Funktion

Der bereitgestellte Code ist ein einfaches Beispiel. Sie können es an Ihre spezifischen Anforderungen anpassen, wie zum Beispiel:

• Abfrageparameter: Fügen Sie zusätzliche Parameter zu den Abfrageargumenten hinzu, um Beiträge basierend auf bestimmten Kriterien (z. B. Kategorie, Tags).
• Paginierung: Fügen Sie Paginierungslinks hinzu, um zwischen den Seiten von zu navigieren Beiträge.
• Unendliches Scrollen:Verwenden Sie das Scroll-Ereignis, um automatisch weitere Beiträge zu laden, während der Benutzer auf der Seite nach unten scrollt.

Indem Sie diese Schritte befolgen, können Sie dies tun Implementieren Sie mit Ajax eine funktionale Schaltfläche „Weitere Beiträge laden“ in WordPress und verbessern Sie so das Benutzererlebnis für Ihre Besucher, die große Inhaltsmengen durchsuchen.

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