Heim > Backend-Entwicklung > PHP-Tutorial > Wie implementiert man Ajax-gestützte „Mehr laden'-Beiträge in WordPress?

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

Linda Hamilton
Freigeben: 2024-12-01 09:59:10
Original
365 Leute haben es durchsucht

How to Implement Ajax-Powered

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>
Nach dem Login kopieren

Funktionen PHP-Datei:

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'),
    )
);
Nach dem Login kopieren

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);
    });
});
Nach dem Login kopieren

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.

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage