So laden Sie WordPress-Posts mit AJAX
Ich betreibe einen YouTube-Kanal, auf dem ich Videos zu Programmierung und Software poste. Kürzlich hat mich einer der Abonnenten gefragt, wie man WordPress-Beiträge mit AJAX lädt. Als Antwort auf ihn beschloss ich, einen Beitrag zu seiner Frage zu schreiben. In diesem Artikel untersuchen wir also, wie Sie WordPress-Posts mit AJAX laden, indem Sie eine Schaltfläche zum Laden von mehr und einen Seitenscroll verwenden.
Der Unterschied zwischen dem Laden mehr und einem Seitenscrollen ist recht einfach. Wenn Sie die Schaltfläche "Mehr laden" verwenden, müssen Sie auf eine Schaltfläche klicken, um die nächsten Beiträge anzuzeigen. Und wenn Sie beim Seitenscrollen zum Ende eines Ansichtsfensters scrollen, sollte der nächste Satz von Beiträgen automatisch geladen werden.
Nehmen wir an, Sie haben ein paar Beiträge und müssen beim Laden der Seite 2 Beiträge anzeigen und dann durch Klicken auf "Mehr laden" oder "Seitenscrollen" die nächsten 2 Beiträge anzeigen. Dieser Vorgang wird fortgesetzt, bis alle Ihre Beiträge angezeigt werden.
Erstellen Sie eine neue Seite namens ‘Blog’. Um Ihre Beiträge auf der Blog-Seite anzuzeigen, erstellen Sie eine benutzerdefinierte Vorlage page-blog.phpim Verzeichnis Ihres aktiven Themas.
Wenn Benutzer Ihre Blog-Seite besuchen, sollten sie jetzt 2 Beiträge sehen. Fügen Sie also den folgenden Code in Ihre benutzerdefinierte Vorlagendatei ein.
<div class="entry-content">
<?php
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => '2',
'paged' => 1,
);
$blog_posts = new WP_Query( $args );
?>
<?php if ($blog_posts->have_posts() ): ?>
<div class="blog-posts">
<?php while ($blog_posts->have_posts() ): $blog_posts->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<?php endwhile; ?>
</div>
<div class="loadmore">Load More...</div>
<?php endif; ?>
</div>Hier habe ich den ‘paged’-Schlüssel verwendet und ihm den Wert ‘1’ übergeben. ‘paged’ ist ein Schlüssel, der in WordPress verwendet wird, wenn es um Paginierung geht. ‘paged’ => 1 bedeutet die erste Seite.
Sie würden das div-Element mit der Klasse ‘loadmore’ bemerken. Wenn Sie auf Mehr laden klicken, geben wir einen Ajax-Aufruf ab und erhalten die nächsten Beiträge.
Laden Sie WordPress-Beiträge mit Ajax über die Schaltfläche „Mehr laden”
Um einen Ajax-Aufruf zu tätigen, müssen Sie die JS-Datei in die WordPress-Umgebung einbinden. Erstellen Sie eine custom.jsDatei im jsVerzeichnis und fügen Sie dann den folgenden Code in die functions.phpDatei ein.
function blog_scripts() {
// Register the script
wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
// Localize the script with new data
$script_data_array = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'security' => wp_create_nonce( 'load_more_posts' ),
);
wp_localize_script( 'custom-script', 'blog', $script_data_array );
// Enqueued script with localized data.
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'blog_scripts' );Als nächstes schreiben wir ein wenig jQuery und geben einen Ajax-Aufruf ab, der im Gegenzug die nächsten Beiträge liefert.
custom.js
var page = 2;
jQuery(function($) {
$('body').on('click', '.loadmore', function() {
var data = {
'action': 'load_posts_by_ajax',
'page': page,
'security': blog.security
};
$.post(blog.ajaxurl, data, function(response) {
if($.trim(response) != '') {
$('.blog-posts').append(response);
page++;
} else {
$('.loadmore').hide();
}
});
});
});Was wir hier tun, ist, dass ich eine Javascript-Variable ‘page’ mit dem Anfangswert 2 genommen habe, da wir mit der Paginierung der zweiten Seite beginnen werden. Ich inkrementiere diese Variable "Seite", nachdem ich die Ajax-Antwort erhalten habe. Nachdem ich die Antwort erhalten habe, hänge ich sie an die Liste der vorhandenen Beiträge an.
Ich habe auch den Aktionsparameter als ‘load_posts_by_ajax’ für einen Ajax-Aufruf verwendet, der WordPress-Aktionen zugeordnet werden muss. Öffnen Sie Ihre functions.phpDatei und fügen Sie den folgenden Code zu einer Datei hinzu.
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');In obigen WordPress-Aktionen rufen wir die Callback-Funktion auf, load_posts_by_ajax_callbackdie ich im nächsten Schritt definieren werde. Sie können diese Funktion in Ihrer functions.php.
function load_posts_by_ajax_callback() {
check_ajax_referer('load_more_posts', 'security');
$paged = $_POST['page'];
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => '2',
'paged' => $paged,
);
$blog_posts = new WP_Query( $args );
?>
<?php if ($blog_posts->have_posts() ): ?>
<?php while ($blog_posts->have_posts() ): $blog_posts->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<?php endwhile; ?>
<?php
endif;
wp_die();
}Wenn Sie jetzt auf die Schaltfläche "Mehr laden" klicken, werden die nächsten Beiträge über Ajax geladen und als Antwort zurückgegeben. Der oben geschriebene JavaScript-Code würde den Rest erledigen.
Laden Sie WordPress-Beiträge mit Ajax beim Seitenscrollen
Einige Benutzer möchten möglicherweise keine Schaltfläche zum Laden mehr, um die Beiträge mit Ajax anzuzeigen. Stattdessen ziehen sie es vor, dass die Beiträge angezeigt werden, sobald der Benutzer das Ende eines Ansichtsfensters erreicht.
Um dies zu erreichen, müssen Sie eine Logik schreiben, die das Ereignis am Ende eines Ansichtsfensters erfasst. Der Rest des Codes entspricht der Schaltfläche "Mehr laden". Unten ist der jQuery-Code für den Seitenscroll.
jQuery(window).scroll(function($) {
if (jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height()) {
var data = {
'action': 'load_posts_by_ajax',
'page': page,
'security': blog.security
};
$.post(blog.ajaxurl, data, function(response) {
if($.trim(response) != '') {
$('.blog-posts').append(response);
page++;
} else {
$('.loadmore').hide();
}
});
}
});Das ist es! Sie können weitermachen und es versuchen. Ich würde gerne Ihre Gedanken und Vorschläge in den Kommentaren unten erfahren.