{"id":24547,"date":"2021-05-20T12:46:00","date_gmt":"2021-05-20T09:46:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24547"},"modified":"2021-10-18T02:40:34","modified_gmt":"2021-10-17T23:40:34","slug":"so-laden-sie-wordpress-posts-mit-ajax","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-laden-sie-wordpress-posts-mit-ajax\/","title":{"rendered":"So laden Sie WordPress-Posts mit AJAX"},"content":{"rendered":"

Ich betreibe einen YouTube-Kanal, auf<\/a> dem ich Videos zu Programmierung und Software poste. K\u00fcrzlich hat mich einer der Abonnenten gefragt, wie man WordPress-Beitr\u00e4ge mit AJAX l\u00e4dt. 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\u00e4che zum Laden von mehr und einen Seitenscroll verwenden.<\/p>\n

Der Unterschied zwischen dem Laden mehr und einem Seitenscrollen ist recht einfach. Wenn Sie die Schaltfl\u00e4che "Mehr laden" verwenden, m\u00fcssen Sie auf eine Schaltfl\u00e4che klicken, um die n\u00e4chsten Beitr\u00e4ge anzuzeigen. Und wenn Sie beim Seitenscrollen zum Ende eines Ansichtsfensters scrollen, sollte der n\u00e4chste Satz von Beitr\u00e4gen automatisch geladen werden.<\/p>\n

Nehmen wir an, Sie haben ein paar Beitr\u00e4ge und m\u00fcssen beim Laden der Seite 2 Beitr\u00e4ge anzeigen und dann durch Klicken auf "Mehr laden" oder "Seitenscrollen" die n\u00e4chsten 2 Beitr\u00e4ge anzeigen. Dieser Vorgang wird fortgesetzt, bis alle Ihre Beitr\u00e4ge angezeigt werden.<\/p>\n

Erstellen Sie eine neue Seite namens ‚Blog‘. Um Ihre Beitr\u00e4ge auf der Blog-Seite anzuzeigen, erstellen Sie eine benutzerdefinierte Vorlage page-blog.php<\/code>im Verzeichnis Ihres aktiven Themas.<\/p>\n

Wenn Benutzer Ihre Blog-Seite besuchen, sollten sie jetzt 2 Beitr\u00e4ge sehen. F\u00fcgen Sie also den folgenden Code in Ihre benutzerdefinierte Vorlagendatei ein.<\/p>\n

<div class=\"entry-content\">\n\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0$args = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'post_type' => 'post',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'post_status' => 'publish',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'posts_per_page' => '2',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'paged' => 1,\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0$blog_posts = new WP_Query( $args );\n\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\n\u00a0\u00a0\u00a0\u00a0<?php if ($blog_posts->have_posts() ): ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"blog-posts\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php while ($blog_posts->have_posts() ): $blog_posts->the_post(); ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2><?php the_title(); ?><\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php the_excerpt(); ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php endwhile; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"loadmore\">Load More...<\/div>\n\u00a0\u00a0\u00a0\u00a0<?php endif; ?>\n<\/div><\/code><\/pre>\n
Hier habe ich den ‚paged‘-Schl\u00fcssel verwendet und ihm den Wert ‚1‘ \u00fcbergeben. ‚paged‘ ist ein Schl\u00fcssel, der in WordPress verwendet wird, wenn es um Paginierung geht. ‚paged‘ => 1 bedeutet die erste Seite.<\/p>\n
Sie w\u00fcrden das div-Element mit der Klasse ‚loadmore‘ bemerken. Wenn Sie auf Mehr laden klicken, geben wir einen Ajax-Aufruf ab und erhalten die n\u00e4chsten Beitr\u00e4ge.<\/p>\n
Laden Sie WordPress-Beitr\u00e4ge mit Ajax \u00fcber die Schaltfl\u00e4che \u201eMehr laden“<\/h3>\n
Um einen Ajax-Aufruf zu t\u00e4tigen, m\u00fcssen Sie die JS-Datei in die WordPress-Umgebung einbinden. Erstellen Sie eine custom.js<\/code>Datei im js<\/code>Verzeichnis und f\u00fcgen Sie dann den folgenden Code in die functions.php<\/code>Datei ein.<\/p>\n
function blog_scripts() {\n\u00a0\u00a0\u00a0\u00a0\/\/ Register the script\n\u00a0\u00a0\u00a0\u00a0wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), false, true );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Localize the script with new data\n\u00a0\u00a0\u00a0\u00a0$script_data_array = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'ajaxurl' => admin_url( 'admin-ajax.php' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security' => wp_create_nonce( 'load_more_posts' ),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'custom-script', 'blog', $script_data_array );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Enqueued script with localized data.\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'custom-script' );\n}\nadd_action( 'wp_enqueue_scripts', 'blog_scripts' );<\/code><\/pre>\n
Als n\u00e4chstes schreiben wir ein wenig jQuery und geben einen Ajax-Aufruf ab, der im Gegenzug die n\u00e4chsten Beitr\u00e4ge liefert.<\/p>\n
custom.js<\/strong><\/p>\n
var page = 2;\njQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('click', '.loadmore', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'action': 'load_posts_by_ajax',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'page': page,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security': blog.security\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.post(blog.ajaxurl, data, function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if($.trim(response) != '') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.blog-posts').append(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0page++;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.loadmore').hide();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n
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\u00e4nge ich sie an die Liste der vorhandenen Beitr\u00e4ge an.<\/p>\n
Ich habe auch den Aktionsparameter als ‚load_posts_by_ajax‘ f\u00fcr einen Ajax-Aufruf verwendet, der WordPress-Aktionen zugeordnet werden muss. \u00d6ffnen Sie Ihre functions.php<\/code>Datei und f\u00fcgen Sie den folgenden Code zu einer Datei hinzu.<\/p>\n
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');\nadd_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');<\/code><\/pre>\n
In obigen WordPress-Aktionen rufen wir die Callback-Funktion auf, load_posts_by_ajax_callback<\/code>die ich im n\u00e4chsten Schritt definieren werde. Sie k\u00f6nnen diese Funktion in Ihrer functions.php<\/code>.<\/p>\n
function load_posts_by_ajax_callback() {\n\u00a0\u00a0\u00a0\u00a0check_ajax_referer('load_more_posts', 'security');\n\u00a0\u00a0\u00a0\u00a0$paged = $_POST['page'];\n\u00a0\u00a0\u00a0\u00a0$args = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'post_type' => 'post',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'post_status' => 'publish',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'posts_per_page' => '2',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'paged' => $paged,\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0$blog_posts = new WP_Query( $args );\n\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\n\u00a0\u00a0\u00a0\u00a0<?php if ($blog_posts->have_posts() ): ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php while ($blog_posts->have_posts() ): $blog_posts->the_post(); ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2><?php the_title(); ?><\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php the_excerpt(); ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php endwhile; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0endif;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
Wenn Sie jetzt auf die Schaltfl\u00e4che "Mehr laden" klicken, werden die n\u00e4chsten Beitr\u00e4ge \u00fcber Ajax geladen und als Antwort zur\u00fcckgegeben. Der oben geschriebene JavaScript-Code w\u00fcrde den Rest erledigen.<\/p>\n
Laden Sie WordPress-Beitr\u00e4ge mit Ajax beim Seitenscrollen<\/h3>\n
Einige Benutzer m\u00f6chten m\u00f6glicherweise keine Schaltfl\u00e4che zum Laden mehr, um die Beitr\u00e4ge mit Ajax anzuzeigen. Stattdessen ziehen sie es vor, dass die Beitr\u00e4ge angezeigt werden, sobald der Benutzer das Ende eines Ansichtsfensters erreicht.<\/p>\n
Um dies zu erreichen, m\u00fcssen Sie eine Logik schreiben, die das Ereignis am Ende eines Ansichtsfensters erfasst. Der Rest des Codes entspricht der Schaltfl\u00e4che "Mehr laden". Unten ist der jQuery-Code f\u00fcr den Seitenscroll.<\/p>\n
jQuery(window).scroll(function($) {\n\u00a0\u00a0\u00a0\u00a0if (jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height()) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'action': 'load_posts_by_ajax',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'page': page,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security': blog.security\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.post(blog.ajaxurl, data, function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if($.trim(response) != '') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.blog-posts').append(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0page++;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.loadmore').hide();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0}\n});<\/code><\/pre>\n
Das ist es! Sie k\u00f6nnen weitermachen und es versuchen. Ich w\u00fcrde gerne Ihre Gedanken und Vorschl\u00e4ge in den Kommentaren unten erfahren.<\/p>\n
Zum Thema passende Artikel<\/h4>\n