AJAX est la dernière méthodologie de développement et celle qui gagne lentement du terrain en raison de la facilité d’utilisation qu’elle offre à ses développeurs. En intégrant simplement AJAX dans vos plugins WordPress, vous réduisez essentiellement la nécessité de recharger constamment la page Web entière. En d’autres termes, AJAX rendra votre plugin WordPress réactif et permettra aux utilisateurs d’obtenir de nouvelles informations en rechargeant uniquement cette partie spécifique tout en gardant le reste de la page statique.
Cela rend non seulement les pages Web ou les plugins réactifs, mais réduit également de moitié le temps d’attente. Il existe plusieurs plugins et applications qui utilisent Ajax pour créer de meilleures expériences pour les utilisateurs. Par exemple, WooCommerce utilise la fonctionnalité Ajax pour améliorer le comportement Ajouter au panier.
Compte tenu de ses avantages, nous vous apprendrons à rendre vos plugins WordPress réactifs via AJAX.
Création d’un plugin
Avant de pouvoir travailler votre magie avec AJAX, vous devez avoir une base de plugin de base que vous pouvez utiliser pour créer un produit avancé et réactif.
La création d’un plugin n’est pas difficile car tout ce dont vous avez besoin est la création d’un fichier contenant un contenu à une ligne. À cet effet, la première étape consiste à naviguer vers le fichier wp-content / plugins et à créer un tout nouveau dossier avec un nom de votre choix. Ouvrez le dossier et créez un nouveau fichier name_of_the_plugin.php. Maintenant, affichez le fichier dans n’importe quel éditeur de texte et écrivez les informations suivantes:
php
/ *
Nom du plugin: Coolness Inducer
URI du plugin: http://coolness-inducer.com
description:> –
un plugin parfait pour rendre votre site Web encore plus cool.
Version: 1.3
Auteur: Ms. Vader
URI de l’auteur: http://msvader.com
Licence: GPL2
* /
?>
Avant de faire cela, créez un répertoire ajaxloadpost dans l’installation de votre plugin WordPress. Une fois cela fait, créez le plugin et activez-le. Après cela, incluez les informations suivantes dans votre ajaxloadpost.
define (‘AJAXLOADPOSTURL’, WP_PLUGIN_URL. ”/”. dirname (plugin_basename (__FILE__)));
fonction 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);
Ensuite, définissez la variable AJAXLOADPOSTURL car vous en aurez besoin pour diriger WordPress vers l’URL de votre plugin. Vous devez maintenant mettre vos scripts en file d’attente, ce que vous pouvez faire en ajoutant ajaxloadpost_enqueuescripts à wp_enqueue_scripts de WordPress.
Gardez à l’esprit que AJAX ne peut jamais être utilisé sous sa forme brute. Il sera toujours utilisé en combinaison avec d’autres langages de programmation, à savoir jQuery ou JavaScript. Dans ce cas, nous travaillerons avec JavaScript, vous devez donc avoir une compréhension de base de celui-ci.
Ensuite, ajoutez JavaScript au ajaxloadpost.js que vous trouverez dans le dossier wp-content plugins ajaxloadpost js . Suivez cette action en créant un dossier JS et placez-y le fichier ajaxloadpost.js.
Maintenant, utilisez WordPress wp_localize_script pour ajouter la variable JS requise. Cette action fournira une structure à votre répertoire et mettra vos scripts en file d’attente.
Rédaction du gestionnaire AJAX
Pour écrire le gestionnaire AJAX, vous aurez besoin des codes suivants:
fonction 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;
mourir ($ résultats);
}
add_action («wp_ajax_nopriv_ajaxloadpost_ajaxhandler», «ajaxloadpost_ajaxhandler»);
add_action («wp_ajax_ajaxloadpost_ajaxhandler», «ajaxloadpost_ajaxhandler»);
L’achèvement de cette action entraînera deux résultats. Premièrement, il créera l’ID des publications dont les utilisateurs ont besoin et deuxièmement, il créera un nonce. Mais ce n’est pas le sujet! Une fois les codes du gestionnaire AJAX en place, vous devez passer à l’étape suivante qui consiste à enregistrer le gestionnaire AJAX dans le répertoire WordPress. Faire cela rendra le plugin WordPress sensible aux appels AJAX. Vous pouvez y parvenir grâce à ces codes:
add_action («wp_ajax_nopriv_ajaxloadpost_ajaxhandler», «ajaxloadpost_ajaxhandler»);
add_action («wp_ajax_ajaxloadpost_ajaxhandler», «ajaxloadpost_ajaxhandler»);
Bases de JavaScript et AJAX
Avec l’appel AJAX et le gestionnaire AJAX en place, vous devez créer une fonction JS qui reliera les deux points. Le code JavaScript suivant vous aidera à réaliser cette action que vous mettrez dans votre ajaxloadpost.js:
fonction ajaxloadpost_loadpost (postid, nonce) {
jQuery.ajax ({
tapez: «POST»,
url: ajaxloadpostajax.ajaxurl,
Les données: {
action: «ajaxloadpost_ajaxhandler»,
postid: postid,
nonce: nonce
},
succès: fonction (data, textStatus, XMLHttpRequest) {
var loadpostresult = ‘#loadpostresult’;
jQuery (loadpostresult) .html (”);
jQuery (loadpostresult) .append (data);
},
erreur: fonction (MLHttpRequest, textStatus, errorThrown) {
alerte (errorThrown);
}
});
}
Tout comme l’étape mentionnée ci-dessus, cette action créera également deux résultats, à savoir nonce et post ID.
L’étape suivante nécessite également une bonne maîtrise de jQuery. Donc, si vos compétences sont un peu rustiques, vous trouverez cet article utile!
Poursuivant, utilisez la fonction jQuery.ajax pour effectuer un appel AJAX vers les serveurs appropriés. Dans les codes ci-dessus, l’URL est l’URL admin-ajax.php qui se trouve dans la variable JavaScript que nous avons enregistrée au moment de la mise en file d’attente des scripts. En outre, spécifiez cette action avec le nom du gestionnaire d’actions enregistré avec WordPress et publiez également le nonce et l’ID de publication.
Si tout va bien, vous pouvez mettre à jour
Mettre un visage sur votre code
Maintenant, il est temps de créer des codes qui afficheront les titres des articles appropriés et afficheront les informations souhaitées par les utilisateurs via un appel AJAX. Voici les codes suivants:
fonction 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 = ‘ ». get_the_title (). ‘»
$ result. = ‘
»
en attendant;
wp_reset_postdata ();
$ result. = ‘
»
return $ result;
}
fonction ajaxloadpost_shortcode_function ($ atts) {
return ajaxloadpost_show_latest_posts ();
}
add_shortcode (‘AJAXLOADPOST’, ‘ajaxloadpost_shortcode_function’);
J’espère que cet article vous a aidé à rendre votre plugin WordPress réactif. Laissez-nous un commentaire si vous avez une question.
