Rendre votre plugin WordPress responsive en utilisant AJAX
Publié: 2020-06-02
Dernière mise à jour - 8 juillet 2021
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 le besoin 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 d'ajout au panier.
Compte tenu de ses avantages, nous allons vous apprendre à rendre vos plugins WordPress responsive via AJAX.
Création d'un plugin
Avant de pouvoir travailler votre magie avec AJAX, vous devez disposer d'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 en une seule ligne. À cette fin, la première étape consiste à accéder au fichier wp-content/plugins et à créer un tout nouveau dossier avec le 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
descriptif : >-
un plugin parfait pour rendre votre site Web encore plus cool.
Version : 1.3
Auteur : Mme Vador
URI de l'auteur : http://msvader.com
Licence : GPL2
*/
?>
Avant de faire cela, créez un répertoire ajaxloadpost dans l'installation du plugin de votre WordPress. Une fois que vous avez fait cela, 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 qu'AJAX ne peut jamais être utilisé sous sa forme brute. Il sera toujours utilisé en combinaison avec d'autres langages de programmation, c'est-à-dire jQuery ou JavaScript. Dans ce cas, nous travaillerons avec JavaScript, vous devez donc en avoir une compréhension de base.
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 ajaxloadpost.js.
Maintenant, utilisez le 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.
Écrire un gestionnaire AJAX
Pour écrire le gestionnaire AJAX, vous aurez besoin des codes suivants :
fonction ajaxloadpost_ajaxhandler() {
si ( !wp_verify_nonce( $_POST['nonce'], "ajaxloadpost_nonce")) {
exit ("Mauvais nonce");
}
$résultats = ”;
$content_post = get_post($_POST['postid']);
$resultats = $content_post->post_content ;
die($résultats);
}
add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
La réalisation de cette action entraînera deux résultats. Premièrement, il créera l'ID des messages 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. Cela rendra le plugin WordPress réactif 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 JavaScript suivant vous aidera à réaliser cette action que vous mettrez dans votre ajaxloadpost.js :
function ajaxloadpost_loadpost(postid,nonce) {
jQuery.ajax({
taper : 'POSTER',
URL : ajaxloadpostajax.ajaxurl,
Les données: {
action : 'ajaxloadpost_ajaxhandler',
postid : postid,
nonce: nonce
},
succès : function(data, textStatus, XMLHttpRequest) {
var loadpostresult = '#loadpostresult';
jQuery(loadpostresult).html(”);
jQuery(loadpostresult).append(data);
},
erreur : fonction (MLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
Tout comme l'étape mentionnée ci-dessus, cette action créera également deux résultats, à savoir nonce et post ID.
La prochaine étape nécessite également la maîtrise de jQuery. Donc, si vos compétences sont un peu rustiques, vous trouverez cet article utile !
Ensuite, utilisez la fonction jQuery.ajax pour effectuer un appel AJAX aux 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. De plus, spécifiez cette action avec le nom du gestionnaire d'action qui a été enregistré avec WordPress et publiez également le nonce et l'ID de publication.
Si tout se passe bien, vous pouvez mettre à jour <div> de l'id #loadpostresult et remplacer le contenu récupéré par le gestionnaire AJAX.
Mettre un visage sur votre code
Il est maintenant temps de créer des codes qui afficheront les titres des messages 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'){
$résultats = » ;
$the_query = new WP_Query( 'posts_per_page='.$number );
tandis que ( $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>';
$résultat.= '<li>' . $lien . '</li>' ;
pendant ce temps;
wp_reset_postdata();
$result.= '<div id=”loadpostresult”></div>' ;
retourne $résultat ;
}
fonction ajaxloadpost_shortcode_function( $atts ){
retourner 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.
Lectures complémentaires
- La conception réactive vous aide à améliorer les taux de conversion.
- Meilleurs thèmes WooCommerce réactifs