Machen Sie Ihr WordPress-Plugin mit AJAX responsiv

Zuletzt aktualisiert - 8. Juli 2021

AJAX ist die neueste Entwicklungsmethodik, die aufgrund der Benutzerfreundlichkeit, die sie ihren Entwicklern bietet, langsam an Dynamik gewinnt. Durch die einfache Integration von AJAX in Ihre WordPress-Plugins reduzieren Sie im Wesentlichen die Notwendigkeit, die gesamte Webseite ständig neu zu laden. Mit anderen Worten, AJAX macht Ihr WordPress-Plugin reaktionsfähig und ermöglicht es Benutzern, neue Informationen zu erhalten, indem sie nur diesen bestimmten Teil neu laden, während der Rest der Seite statisch bleibt.

Dadurch werden die Webseiten oder Plugins nicht nur responsiv, sondern auch die Wartezeit halbiert. Es gibt mehrere Plugins und Anwendungen, die Ajax verwenden, um bessere Erfahrungen für Benutzer zu schaffen. Beispielsweise verwendet WooCommerce die Ajax-Funktion, um das Verhalten in den Einkaufswagen zu verbessern.

In Anbetracht der Vorteile zeigen wir Ihnen, wie Sie Ihre WordPress-Plugins über AJAX reaktionsfähig machen.

Erstellen eines Plugins

Bevor Sie Ihre Magie mit AJAX entfalten können, benötigen Sie eine grundlegende Plugin-Grundlage, die Sie verwenden können, um ein fortschrittliches und reaktionsfähiges Produkt zu erstellen.

Das Erstellen eines Plugins ist nicht schwierig, da Sie lediglich eine Datei erstellen müssen, die Einzeiler-Inhalt enthält. Zu diesem Zweck müssen Sie zunächst zur wp-content/plugins-Datei navigieren und einen brandneuen Ordner mit einem Namen Ihrer Wahl erstellen. Öffnen Sie den Ordner und erstellen Sie eine neue Datei namens_des_Plugins.php. Sehen Sie sich nun die Datei in einem beliebigen Texteditor an und geben Sie die folgenden Informationen ein:

<?php

/*

Plugin-Name: Coolness Inducer

Plugin-URI: http://coolness-inducer.com

Beschreibung: >-

Ein Plugin, das perfekt ist, um Ihre Website besonders cool zu machen.

Version: 1.3

Autor: Frau Vader

Autor-URI: http://msvader.com

Lizenz: GPL2

*/

?>

Erstellen Sie zuvor ein ajaxloadpost-Verzeichnis in der Plugin-Installation Ihres WordPress. Sobald Sie dies getan haben, erstellen Sie das Plugin und aktivieren Sie es. Fügen Sie danach die folgenden Informationen in Ihren Ajaxloadpost ein.

define('AJAXLOADPOSTURL', WP_PLUGIN_URL.“/“.dirname( plugin_basename( __FILE__ ) ) );

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

Definieren Sie dann die Variable AJAXLOADPOSTURL, da Sie sie benötigen, um WordPress zur URL Ihres Plugins zu leiten. Jetzt müssen Sie Ihre Skripte einreihen, was Sie tun können, indem Sie ajaxloadpost_enqueuescripts zu wp_enqueue_scripts von WordPress hinzufügen.

Denken Sie daran, dass AJAX niemals in seiner Rohform verwendet werden kann. Es wird immer in Kombination mit anderen Programmiersprachen verwendet, zB jQuery oder JavaScript. In diesem Fall werden wir mit JavaScript arbeiten, daher müssen Sie ein gewisses Grundverständnis davon haben.

Fügen Sie als nächstes JavaScript zur ajaxloadpost.js hinzu, die Sie im Ordner \wp-content\plugins\ajaxloadpost\js\ finden. Befolgen Sie diese Aktion, indem Sie einen JS-Ordner erstellen und die Datei ajaxloadpost.js darin ablegen.

Verwenden Sie nun das WordPress wp_localize_script, um die erforderliche JS-Variable hinzuzufügen. Diese Aktion verleiht Ihrem Verzeichnis eine Struktur und stellt Ihre Skripts in die Warteschlange.

AJAX-Handler schreiben

Um den AJAX-Handler zu schreiben, benötigen Sie die folgenden Codes:

Funktion ajaxloadpost_ajaxhandler() {

if ( !wp_verify_nonce( $_POST['nonce'], „ajaxloadpost_nonce“)) {

exit("Falsche Nonce");

}

$ergebnisse = ”;

$content_post = get_post($_POST['postid']);

$results = $content_post->post_content;

sterben($Ergebnisse);

}

add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );

add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );

Das Abschließen dieser Aktion führt zu zwei Ergebnissen. Erstens erstellt es die ID der Posts, die die Benutzer benötigen, und zweitens erstellt es Nonce. Aber das ist nebensächlich! Sobald die Codes des AJAX-Handlers vorhanden sind, müssen Sie mit dem nächsten Schritt fortfahren, der darin besteht, den AJAX-Handler im WordPress-Verzeichnis zu registrieren. Dadurch reagiert das WordPress-Plugin auf die AJAX-Aufrufe. Sie können dies durch diese Codes erreichen:

add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );

add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );

JavaScript-Grundlagen und AJAX

Wenn der AJAX-Aufruf und der AJAX-Handler vorhanden sind, müssen Sie eine JS-Funktion erstellen, die die beiden Punkte verbindet. Das folgende JavaScript hilft Ihnen dabei, diese Aktion zu erreichen, die Sie in Ihre ajaxloadpost.js einfügen:

Funktion ajaxloadpost_loadpost(postid,nonce) {

jQuery.ajax({

Typ: 'POST',

URL: ajaxloadpostajax.ajaxurl,

Daten: {

Aktion: 'ajaxloadpost_ajaxhandler',

postid: postid,

einmal: einmal

},

Erfolg: Funktion (Daten, TextStatus, XMLHttpRequest) {

var loadpostresult = '#loadpostresult';

jQuery(loadpostresult).html(”);

jQuery(loadpostresult).append(data);

},

error: function(MLHttpRequest, textStatus, errorThrown) {

alarm (errorThrown);

}

});

}

Genau wie der oben erwähnte Schritt erzeugt auch diese Aktion zwei Ergebnisse, nämlich Nonce und Post-ID.

Der nächste Schritt erfordert auch Kenntnisse in jQuery. Wenn Ihre Fähigkeiten also etwas rustikal sind, werden Sie diesen Artikel hilfreich finden!

Fahren Sie fort und verwenden Sie die jQuery.ajax-Funktion, um einen AJAX-Aufruf an die entsprechenden Server zu tätigen. In den obigen Codes ist die URL die URL admin-ajax.php, die in der JavaScript-Variablen zu finden ist, die wir zum Zeitpunkt des Einreihens der Skripts in die Warteschlange registriert haben. Geben Sie diese Aktion außerdem mit dem Namen des Aktionshandlers an, der bei WordPress registriert wurde, und posten Sie auch die Nonce und die Post-ID.

Wenn alles richtig läuft, können Sie <div> der ID #loadpostresult aktualisieren und den abgerufenen Inhalt durch den AJAX-Handler ersetzen.

Geben Sie Ihrem Code ein Gesicht

Jetzt ist es an der Zeit, Codes zu erstellen, die die Titel der entsprechenden Posts anzeigen und Informationen anzeigen, die die Benutzer über einen AJAX-Aufruf wünschen. Hier sind die folgenden Codes:

Funktion ajaxloadpost_show_latest_posts($number = '5'){

$ergebnisse =”;

$the_query = new WP_Query( 'posts_per_page='.$number );

while ( $the_query->have_posts() ):

$the_query->the_post();

$nonce = wp_create_nonce(“ajaxloadpost_nonce”);

$argumente = get_the_ID().”,'”.$nonce.”'”;

$link = ' <a onclick="ajaxloadpost_loadpost('.$arguments.');">'. get_the_title().'</a>';

$ergebnis.= '<li>' . $link . '</li>';

am Ende;

wp_reset_postdata();

$result.= '<div id="loadpostresult"></div>';

$ergebnis zurückgeben;

}

Funktion ajaxloadpost_shortcode_function( $atts ){

Rückgabe ajaxloadpost_show_latest_posts();

}

add_shortcode( 'AJAXLOADPOST', 'ajaxloadpost_shortcode_function' );

Hoffentlich hat Ihnen dieser Artikel dabei geholfen, Ihr WordPress-Plugin responsive zu machen. Hinterlassen Sie uns einen Kommentar, wenn Sie eine Frage haben.

Weiterlesen

• Responsive Design hilft Ihnen, die Konversionsraten zu verbessern.
• Die besten reaktionsschnellen WooCommerce-Designs