Entwicklung & Design

So beschleunigst du WordPress-Plugins mit AJAX

Jedes mal wenn ein Website-Besucher einen Link anklickt, wird die gesamte Website neu geladen. Lässt man statt dessen einzelne Seitenbestandteile via AJAX dynamisch nachladen, kann das die Website-Performance deutlich verbessern. Wir zeigen euch anhand eines Beispiels, wie ihr ein WordPress-Plugin erstellt, das auf AJAX setzt.

Normalerweise wird eine Webseite neu geladen, wenn ein Besucher etwas anklickt. Das heißt der Server muss die komplette Seitenstruktur generieren und an den Client verschicken. Das ist soweit vollkommen in Ordnung, steht aber bei nur kleinen Veränderungen auf der Webseite in keinem Verhältnis zur damit verbundenen Ladezeit.

Foto: Bull3t, flickr.com. Lizenz: CC BY-SA 2.0

Man kann die Reaktionszeit von Webseiten deutlich verbessern, indem man auf AJAX-Requests zurückgreift. Durch den Einsatz von AJAX muss die Webseite nicht bei jeder Interaktion neu geladen werden und wirkt so deutlich performanter. WordPress bietet ebenfalls AJAX-Unterstützung, sodass man sehr einfach Plugins mit AJAX-Funktionen für das Content Management System erstellen kann.

Wir werden hier ein einfaches Plugin zum Laden von weiteren Themen innerhalb eines Posts erstellen.

Dateistruktur

Beginnen wir nun also mit der Plugin-Erstellung. Zunächst benötigen wir einen neuen Ordner im Plugin-Verzeichnis der WordPress-Installation (wp-content/plugins). Wir nennen ihn „ajaxloadpost“ und erstellen direkt eine PHP-Datei mit den folgenden Inhalten:


<?php
/*
Plugin Name: AJAX Load Post
Description: Dieses Plugin wird seperate Posts innerhalb eines anderen Posts laden
Author: Euer Name
Version: 1
*/
?>

Das Plugin sollte nun im Administrationsbereich von WordPress zur Aktivierung bereitstehen. Sobald das Plugin aktiviert wird, fügen wir den folgenden Code in die Datei ajaxloadpost.php ein.


define('AJAXLOADPOSTURL', WP_PLUGIN_URL."/".dirname( plugin_basename( __FILE__ ) ) );
function ajaxloadpost_enqueuescripts() {
wp_enqueue_script('ajaxloadpost', AJAXLOADPOSTURL.'/js/ajaxloadpost.js', array('jquery'));
wp_localize_script( 'ajaxloadpost', 'ajaxloadpostajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', ajaxloadpost_enqueuescripts);

Hier wird zunächst die Konstante „AJAXPOSTURL“ definiert, in der die URL zum Plugin-Ordner gespeichert wird. Diese URL werden wir benötigen, um auf unser Plugin verweisen zu können. Im Anschluss fügen wir die Funktion „ajaxloadpost_enqueuescripts“ zur Funktion „wp_enque_scripts“ von WordPress hinzu, um das zum Skript gehörende JavaScript mit in WordPress zu laden.

Die Funktion „wp_enque_scripts“ wird unsere JavaScript-Datei nach jQuery einfügen, sodass wir auf alle Funktionen von jQuery zurückgreifen können.

Mit „wp_localize_script“ stellen wir uns die Variable „ajaxhandler“ zur Verfügung, die den Pfad zur Datei admin-ajax.php enthält, sodass die spätere JavaScript-Funktion weiß, an welche Datei die Anfragen gestellt werden sollen.

Nun fehlt nur noch die JavaScript-Datei in unserem Plugin Ordner. Wir hinterlegen sie, wie in ajaxloadposts.php definiert im Ordner „/js/ajaxloadposts.js“, sodass die links stehende Ordnerstruktur entsteht.

Handler-Funktion für AJAX-Requests in WordPress

Bevor wir Anfragen an WordPress schicken, benötigen wir eine Funktion, die auf die Anfragen reagieren kann. Diese definieren wir in ajaxloadpost.php wie folgt:


function ajaxloadpost_ajaxhandler() {
if ( !wp_verify_nonce( $_POST['nonce'], "ajaxloadpost_nonce")) {
exit("Wrong nonce");
}
$result = '';
$content_post = get_post($_POST['postid']);
$result = strip_shortcodes($content_post->post_content);
die($result);
}

Die Funktion erwartet zwei Eingaben. Die Post-ID ($_POST[‚postid‘]) mit der wir später die richtigen Inhalte auslesen können und die Nonce ($_POST[’nonce‘]), die dazu dient zu überprüfen, ob die Requests berechtigterweise stattfinden.

Die Funktion überprüft, ob die Anfrage berechtigt ist, holt im Anschluss die Inhalte des abgefragten Posts und gibt sie zurück. Nun muss die Funktion nur noch bei WordPress registriert werden:


add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );

JavaScript Funktion für die AJAX-Abfrage

Als nächstes schreiben wir die JavaScript-Funktion, die später die Daten via AJAX anfragen wird. In ajaxloadpost.js solltet ihr folgenden Code unterbringen:


function ajaxloadpost_loadpost(postid,nonce) {
jQuery.ajax({
type: 'POST',
url: ajaxloadpostajax.ajaxurl,
data: {
action: 'ajaxloadpost_ajaxhandler',
postid: postid,
nonce: nonce
},
success: function(data, textStatus, XMLHttpRequest) {
var loadpostresult = '#loadpostresult';
jQuery(loadpostresult).html('');
jQuery(loadpostresult).append(data);
console.log(data);
},
error: function(MLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
}

Diese Funktion sendet eine Post-ID und die Nonce an den Server. Die URL ist der Pfad zur Datei admin-ajax.php, den wir zuvor in der JavaScript-Variable „ajaxurl“ gespeichert haben. Anschließend definieren wir die Action mit der zuvor im PHP-Teil definierten Handler und schicken Post-ID und Nonce via POST an den Server.

Ist die Funktion erfolgreich, wird der div mit der id „#loadpostresult“ mit dem vom Server zurückgelieferten Inhalt gefüllt. Im Fall eines Fehlers lösen wir eine Fehlermeldung aus.

Post-Liste anzeigen

Sobald alle Funktionen stehen, müssen nur noch die Titel der Posts mit Links zum Aufruf unserer JavaScript-Funktion versehen werden.


function ajaxloadpost_show_latest_posts($number = '5'){
$results ='';
$the_query = new WP_Query( 'posts_per_page='.$number);
while ( $the_query->have_posts() ) :
$the_query->the_post();
$nonce = wp_create_nonce("ajaxloadpost_nonce");
$arguments =  get_the_ID().",'".$nonce."'";
$link = ' <a onclick="ajaxloadpost_loadpost('.$arguments.');">'. get_the_title().'</a>';
$results.= '<li>' . $link . '</li>';
endwhile;
wp_reset_postdata();
$results.=  '<div id="loadpostresult"></div>';
return $results;
}

In der Funktion „ajaxloadpost_show_latest_posts“ werden die neuesten Beiträge abgefragt und als Linkliste mit Verweis auf unsere AJAX-Funktion ausgegeben. Zusätzlich dazu wird ein leeres div mit der id „#loadpostresult“ ausgegeben, in das später die Inhalte unseres AJAX-Requests reingeladen werden können.

Zu guter Letzt müssen wir nur noch einen Shortcode für die Verwendung in unseren Beiträgen definieren und die entsprechende Funktion hinterlegen.


function ajaxloadpost_shortcode_function( $atts ){
return ajaxloadpost_show_latest_posts();
}
add_shortcode( 'AJAXLOADPOST', 'ajaxloadpost_shortcode_function' );

Durch den oben stehenden Code wird nun im Beitrag durch das Einfügen des Shortcodes [AJAXLOADPOST] die Funktion „ajaxloadpost_shortcode_function“ aufgerufen und die Liste mit den Links ausgegeben.

Mit einem Klick auf einen der Links sollte der Inhalt des jeweiligen Posts in den aktuellen Beitrag reingeladen werden.

Zusammenfassung

Dieses Beispiel zeigt wie leicht es ist, Plugins für WordPress zu erstellen und Funktionen des Systems mit AJAX-Funktionen zu beschleunigen, sodass die Reaktionszeiten der Webseite deutlich verbessert werden.

Making your WordPress Plugins responsive by using AJAX – via Designmodo

Weiterführende Links

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

2 Kommentare

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung