Rendre votre plugin WordPress responsive en utilisant AJAX

WordPress est une excellente plateforme pour créer des sites Web ; cependant, l'outil de gestion de contenu a ses inconvénients. Si vous avez construit votre site Web sur WordPress, il n'est pas rare de rencontrer le problème de la vitesse de chargement lente. En raison du grand nombre de plugins ajoutés ainsi que de l'afflux de bases de données et de bases de code, ce n'est en fait pas rare. Cependant, il est important de se concentrer sur la solution. Vous ne voulez pas que votre public s'impatiente et parte à cause de la lenteur de la vitesse et perde des affaires potentielles !

Et si nous vous disions que vous pourriez optimiser la vitesse de votre site WordPress en intégrant une fonctionnalité simple dans vos plugins, connue sous le nom d'AJAX. Le terme AJAX est l'abréviation de JavaScript asynchrone et XML. AJAX vous aide à améliorer la vitesse de votre site Web. Il ne chargera qu'une certaine partie de la page et gardera la page restante statique, améliorant ainsi le temps de chargement. Plusieurs plugins et applications utilisent déjà cette fonctionnalité pour aider à améliorer la vitesse de leurs pages Web, même aujourd'hui.

En peu de temps, AJAX a acquis une excellente réputation dans le monde du marketing numérique et il est utilisé par la majorité des propriétaires de sites Web. Heureusement, WordPress fournit un excellent support pour AJAX, ce qui facilite l'écriture de plugins intégrés à AJAX. Avec le support de WordPress et de notre article, vous devriez pouvoir intégrer AJAX dans vos plugins en un rien de temps.

Vous trouverez ci-dessous un guide étape par étape pour vous guider tout au long du processus.

Étape #1 - Créez votre plugin

La première étape consiste à créer un plugin simple que vous pourrez ensuite utiliser pour développer un produit plus avancé, plus réactif et qui réduit le temps de chargement de votre page Web. La bonne nouvelle est que vous n'aurez aucune difficulté à créer le plug-in, car tout ce que vous avez à faire est de créer un fichier contenant des données en une seule ligne.

Vous pouvez le faire en recherchant le fichier "wp-content/plugins" et en générant un dossier du nom qui vous convient. Une fois que vous avez fait cela, vous devez maintenant ouvrir le dossier et créer un fichier avec le nom : "name_of_the_plugin.php". Une fois que vous avez ouvert ce fichier dans l'éditeur de texte, tapez le code suivant dans l'éditeur de texte.

<?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
*/

Étape #2 - Ajouter la bibliothèque JavaScript

Vous commencez cette étape en créant un répertoire « ajaxloadpost ». Comment faire ? C'est assez simple puisque vous pouvez l'installer avec le plugin WordPress. Une fois cette étape terminée, vous pouvez maintenant créer le plugin que vous avez codé et l'exécuter. Vous devez ensuite ajouter le code ci-dessous dans votre ajaxloadpost :

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

Vous devez diriger WordPress via l'URL du plugin créé ; c'est pourquoi vous devez définir la variable par le nom de AJAXLOADPOSTURL.

AJAX est toujours utilisé avec une combinaison de langages de programmation, nous travaillerons avec JavaScript dans notre article restant. Recherchez ajaxloadpost.js dans le dossier \wp-content\plugins\ajaxloadpost\js\folder et ajoutez-y JavaScript. Vous pouvez maintenant ajouter la variable JavaScript à votre script.

Étape #3 - Intégration du gestionnaire AJAX

Une fois que tout ce qui précède est trié, vous pouvez enfin passer à l'intégration du gestionnaire AJAX dans votre plugin. Voici le code de votre gestionnaire AJAX :

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

Le code ci-dessus remplira essentiellement deux tâches. Il développera d'abord un identifiant pour les messages requis par l'utilisateur. La deuxième tâche consiste à créer "nonce". Vous n'avez pas à vous soucier du deuxième élément pour le moment (il a été décrit en détail à la fin de l'article).

Au lieu de cela, vous devriez passer à la deuxième étape qui consiste à enregistrer votre gestionnaire AJAX dans le répertoire WordPress. Cela permettra à la fonction AJAX d'être appelée une fois demandée. Cette action peut être réalisée via le code mentionné ci-dessous :

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

Avoir des connaissances de base sur JavaScript est un énorme avantage pour vous, si vous n'êtes pas adepte de ce langage de programmation, faites appel à un expert pour vous guider tout au long du processus. Vous pouvez également perfectionner vos compétences en JavaScript grâce à un tuteur Web ou en lisant des articles ici .

Étape #4 - Utilisation de JavaScript pour AJAX

La prochaine chose dont vous avez besoin est d'écrire une fonction qui permettra à AJAX d'appeler et de mettre à jour les données qui ont été renvoyées via le gestionnaire AJAX. La fonction est généralement ajacloadpost.js. Le code suivant peut être utilisé pour déterminer l'action décrite ci-dessus.

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

La fonction ci-dessus prendra deux entrées, l'une d'elles est l'identifiant du message et la seconde est nonce. Vous pouvez utiliser la fonction jQuery.ajax pour effectuer l'appel au serveur. Une fois l'opération réussie, mettez à jour le <div> de l'id #loadpostresult avec les données renvoyées via le gestionnaire AJAX. Le dernier bit du code est une condition en cas d'erreur. Si une erreur se produit, le système est alerté par une fenêtre contextuelle.

Étape #5 - Afficher les listes

Une fois toutes les fonctions triées vous pouvez passer à la dernière étape qui consiste à afficher le titre du post. Gardez à l'esprit que chaque clic peut être dirigé vers un titre de publication différent et que votre code doit pouvoir récupérer le code qui a été appelé. Le code suivant peut vous aider à y parvenir :

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

Qu'est-ce que le "nonce" ?

Un nonce est utilisé pour vérifier si la demande provient d'une source authentique ou non. Un nonce peut être généré à l'aide d'une simple fonction WordPress : « wp_create_nonce ». Il peut être vérifié davantage via un gestionnaire AJAX à l'aide de la fonction : "wp_verify_nonce". L'utilisation de cette fonctionnalité est extrêmement importante si vous effectuez une tâche sensible sur votre WordPress.

  Conclusion

  L'intégration d'AJAX à vos plugins peut aider à améliorer visiblement la réactivité de vos pages. Si vous n'êtes pas à l'aise avec JavaScript, vous pouvez opter pour un langage de programmation avec lequel vous trouvez plus facile de coder ou trouver un expert qui peut vous aider à coder pour votre plugin. Essayez d'intégrer AJAX dans vos plugins et vous ne serez pas déçu !