Machen Sie Ihr WordPress-Plugin mit AJAX responsiv

WordPress ist eine hervorragende Plattform zum Erstellen von Websites. Das Content-Manager-Tool hat jedoch seine Nachteile. Wenn Sie Ihre Website auf WordPress erstellt haben, ist es nicht ungewöhnlich, dass Sie mit dem Problem der langsamen Ladegeschwindigkeit konfrontiert werden. Aufgrund der großen Anzahl von Plugins, die zusammen mit dem Zustrom von Datenbanken und Codebasen hinzugefügt wurden, ist dies tatsächlich keine Seltenheit. Es ist jedoch wichtig, sich auf die Lösung zu konzentrieren. Sie möchten nicht, dass Ihr Publikum ungeduldig wird und aufgrund der langsamen Geschwindigkeit geht und potenzielle Geschäfte verliert!

Was wäre, wenn wir Ihnen sagen würden, dass Sie die Geschwindigkeit Ihrer WordPress-Website optimieren könnten, indem Sie eine einfache Funktion in Ihre Plugins integrieren, die als AJAX bekannt ist. Der Begriff AJAX ist die Abkürzung für Asynchronous JavaScript and XML. AJAX hilft Ihnen, die Geschwindigkeit Ihrer Website zu verbessern. Es lädt nur einen bestimmten Teil der Seite und hält die verbleibende Seite statisch, wodurch die Ladezeit verbessert wird. Mehrere Plugins und Apps nutzen diese Funktion bereits heute, um die Geschwindigkeit ihrer Webseiten zu verbessern.

In nur kurzer Zeit hat sich AJAX in der Welt des digitalen Marketings einen hervorragenden Ruf erworben und wird von der Mehrheit der Website-Eigentümer verwendet. Glücklicherweise bietet WordPress eine hervorragende Unterstützung für AJAX, wodurch es einfacher wird, Plugins zu schreiben, die in AJAX integriert sind. Mit der Unterstützung von WordPress und unserem Artikel sollten Sie AJAX im Handumdrehen in Ihre Plugins integrieren können.

Nachfolgend finden Sie eine Schritt-für-Schritt-Anleitung, die Sie durch den Prozess führt.

Schritt #1 – Erstellen Sie Ihr Plugin

Der erste Schritt besteht darin, ein einfaches Plugin zu erstellen, mit dem Sie dann ein fortschrittlicheres Produkt entwickeln können, das reaktionsschneller ist und die Ladezeit Ihrer Webseite verkürzt. Die gute Nachricht ist, dass Sie beim Erstellen des Plugins keine Schwierigkeiten haben werden, da Sie lediglich eine Datei erstellen müssen, die Einzeiler-Daten enthält.

Sie können dies tun, indem Sie die Datei „wp-content/plugins“ durchsuchen und einen Ordner mit einem beliebigen Namen erstellen. Nachdem Sie dies getan haben, müssen Sie nun den Ordner öffnen und eine Datei mit dem Namen: „Name_des_Plugins.php“ erstellen. Nachdem Sie diese Datei im Texteditor geöffnet haben, geben Sie den folgenden Code in den Texteditor ein.

<?php
/*
Plugin Name: Your choice
Plugin URI: http://yout-choice.com
Description: This loads post via ajax
Author: Your name
Author URI: http://yourname.com
Version: 1
*/

Schritt #2 – Fügen Sie die JavaScript-Bibliothek hinzu

Sie beginnen diesen Schritt, indem Sie ein „ajaxloadpost“-Verzeichnis erstellen. Wie geht das? Es ist ziemlich einfach, da Sie es zusammen mit dem WordPress-Plugin installieren können. Sobald dieser Schritt abgeschlossen ist, können Sie nun das Plugin erstellen, das Sie codiert haben, und es ausführen. Sie müssen dann den folgenden Code in Ihren Ajaxloadpost einfügen:

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);

Sie müssen WordPress über die URL des erstellten Plugins leiten; Aus diesem Grund müssen Sie die Variable mit dem Namen AJAXLOADPOSTURL definieren.

AJAX wird immer mit einer Kombination von Programmiersprachen verwendet, wir werden in unserem verbleibenden Artikel mit JavaScript arbeiten. Suchen Sie im Ordner \wp-content\plugins\ajaxloadpost\js\ nach ajaxloadpost.js und fügen Sie JavaScript hinzu. Sie können Ihrem Skript jetzt die JavaScript-Variable hinzufügen.

Schritt Nr. 3 – Integrieren des AJAX-Handlers

Sobald alle oben genannten Punkte sortiert sind, können Sie endlich mit der Integration des AJAX-Handlers in Ihr Plugin fortfahren. Das Folgende ist der Code für Ihren AJAX-Handler:

function ajaxloadpost_ajaxhandler() {
if ( !wp_verify_nonce( $_POST['nonce'], "ajaxloadpost_nonce")) {
exit("Wrong nonce");
}

$results = '';
$content_post = get_post($_POST['postid']);
$results = $content_post->post_content;

die($results);
}

Der obige Code erfüllt im Wesentlichen zwei Aufgaben. Es entwickelt zunächst eine ID für die vom Benutzer gewünschten Posts. Die zweite Aufgabe besteht darin, „Nonce“ zu erstellen. Um das zweite Element müssen Sie sich vorerst keine Gedanken machen (es wurde am Ende des Artikels ausführlich beschrieben).

Stattdessen sollten Sie mit dem zweiten Schritt fortfahren, der darin besteht, Ihren AJAX-Handler im WordPress-Verzeichnis zu registrieren. Dadurch kann die AJAX-Funktion aufgerufen werden, sobald sie angefordert wurde. Diese Aktion kann durch den unten genannten Code erreicht werden:

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

Hintergrundwissen über JavaScript ist ein großes Plus für Sie, wenn Sie mit dieser Programmiersprache nicht vertraut sind, nehmen Sie Hilfe von einem Experten, der Sie durch den gesamten Prozess führt. Sie können Ihre JavaScript-Kenntnisse auch durch einen Web-Tutor verbessern oder Artikel hier lesen.

Schritt #4 – Verwendung von JavaScript für AJAX

Als Nächstes müssen Sie eine Funktion schreiben, die es AJAX ermöglicht, Daten aufzurufen und zu aktualisieren, die über den AJAX-Handler zurückgegeben wurden. Die Funktion ist im Allgemeinen ajacloadpost.js. Der folgende Code kann verwendet werden, um die oben beschriebene Aktion zu bestimmen.

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);
},
error: function(MLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});

Die obige Funktion benötigt zwei Eingaben, eine davon ist die ID des Beitrags und die zweite ist Nonce. Sie können die jQuery.ajax-Funktion verwenden, um den Aufruf an den Server zu tätigen. Aktualisieren Sie bei Erfolg das <div> der ID #loadpostresult mit den Daten, die über den AJAX-Handler zurückgegeben wurden. Das letzte Bit des Codes ist eine Bedingung im Fehlerfall. Wenn ein Fehler auftritt, wird das System mit einem Pop-up gewarnt.

Schritt #5 – Anzeigen der Listen

Sobald alle Funktionen sortiert sind, können Sie zum letzten Schritt übergehen, der darin besteht, den Beitragstitel anzuzeigen. Denken Sie daran, dass jeder Klick zu einem anderen Beitragstitel führen kann und Ihr Code in der Lage sein sollte, den aufgerufenen Code abzurufen. Der folgende Code kann Ihnen dabei helfen:

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>'. get_the_title().'</a>';  

$result.= '<li>' . $link . '</li>';
endwhile;
wp_reset_postdata();  

$result.= '<div></div>';  

return $result;
}  

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

Was ist „nonce“?

Eine Nonce wird verwendet, um zu prüfen, ob die Anfrage von einer authentischen Quelle stammt oder nicht. Eine Nonce kann mit einer einfachen WordPress-Funktion generiert werden: „wp_create_nonce“. Es kann weiter durch einen AJAX-Handler mit der Funktion „wp_verify_nonce“ überprüft werden. Die Verwendung dieser Funktion ist äußerst wichtig, wenn Sie eine sensible Aufgabe in Ihrem WordPress ausführen.

  Fazit

  Die Integration von AJAX in Ihre Plugins kann dazu beitragen, die Reaktionsfähigkeit Ihrer Seiten sichtbar zu verbessern. Wenn Sie mit JavaScript nicht vertraut sind, können Sie sich für eine Programmiersprache entscheiden, mit der Sie einfacher programmieren können, oder einen Experten finden, der Ihnen beim Programmieren Ihres Plugins helfen kann. Versuchen Sie AJAX in Ihre Plugins zu integrieren und Sie werden nicht enttäuscht sein!