Wie implementiert man Ajax-gestützte „Mehr laden'-Beiträge in WordPress?

Weitere Beiträge über Ajax in WordPress laden

Die Implementierung einer Schaltfläche „Mehr laden“ zum dynamischen Laden von Beiträgen in WordPress erfordert eine Kombination aus PHP und JavaScript. Obwohl Sie einen bestimmten Ansatz skizziert haben, kann es weitere Faktoren geben, die die Funktionalität oder Effizienz Ihres Codes beeinflussen. Hier ist eine überarbeitete und verbesserte Lösung:

HTML-Markup:

<div>
<p><strong>Funktionen PHP-Datei:</strong></p>
<pre class="brush:php;toolbar:false">function more_post_ajax() {
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];

    header("Content-Type: text/html");
    $args = [
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'cat' => 1,
        'offset' => $offset,
    ];

    $loop = new WP_Query($args);

    while ($loop->have_posts()) {
        $loop->the_post();
        the_content();
    }
    exit;
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

wp_localize_script(
    'twentyfifteen-script',
    'ajax_posts',
    array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'noposts' => __('No older posts found', 'twentyfifteen'),
    )
);

jQuery Funktion:

var ppp = 3; // Posts per page
var page = 5; // Current page number, starting from 1

$('#more_posts').click(function() {
    $('#more_posts').attr('disabled', true);
    var offset = (page * ppp) + 1;

    $.post(
        ajax_posts.ajaxurl,
        {
            action: 'more_post_ajax',
            offset: offset,
            ppp: ppp,
        }
    ).success(function(posts) {
        page++;
        $('#ajax-posts').append(posts);
        $('#more_posts').attr('disabled', false);
    });
});

Zusätzliche Überlegungen:

• Kategoriefilterung: Sie können die Kategoriefilterung integrieren, indem Sie Daten hinzufügen Attribut zur Schaltfläche „Mehr laden“ mit der Kategorie-ID. Rufen Sie dann im PHP-Code die Kategorie-ID aus dem Array $_POST ab und fügen Sie den Parameter „cat“ in die Abfrageargumente ein.
• Infinite Load: Für unendliches Scrollen können Sie verwenden Das Scroll-Ereignis von jQuery lädt Beiträge automatisch, wenn der Benutzer auf der Seite nach unten scrollt. Ein Ansatz besteht darin, Beiträge zu laden, wenn der Abstand vom unteren Rand der Seite zum oberen Rand des Ansichtsfensters weniger als einen Schwellenwert beträgt, beispielsweise 100 Pixel.
• Ladeindikator: Erwägen Sie das Hinzufügen eines Lade-Spinner oder -Anzeige, um dem Benutzer visuelles Feedback zu geben, während Beiträge geladen werden.
• Fehlerbehandlung: Stellen Sie eine ordnungsgemäße Fehlerbehandlung sicher sowohl den PHP- als auch den JavaScript-Code, um mögliche Fehler zu behandeln, die während der Ajax-Anfrage oder der Nachbearbeitung auftreten können.