Utiliser AJAX avec PHP sur votre site WordPress avec votre propre plugin
Publié: 2021-07-23
Dans cet article, nous discutons d'AJAX avec PHP pour votre site Web WordPress.
AJAX est une technique de développement Web qui aide les utilisateurs à développer des applications interactives sur le site Web. Il offre aux utilisateurs une expérience Web plus rapide et plus fluide. Il permet aux utilisateurs d'apporter des modifications ou de mettre à jour le contenu de la page Web sans recharger ni actualiser les pages. Il faut connaître différents langages de programmation pour travailler avec AJAX.
Qu'est-ce qu'AJAX ?
AJAX signifie « JavaScript et XML asynchrones ». Comme mentionné précédemment, il est utilisé pour créer des applications Web divertissantes, en constante évolution et interactives.
Certains des exemples populaires d'applications Web développées avec l'aide d'AJAX et des technologies associées sont Google Maps, la fonction de saisie semi-automatique sur la recherche, les commentaires et les likes de Google sur divers messages de médias sociaux, et bien d'autres.
Bases d'AJAX
Ajax, à l'aide de divers langages de programmation tels que JavaScript, HTML, CSS et XML, développe des applications Web et des sites Web plus rapides et améliorés. Outre ces langages de programmation, pour le développement d'applications Web, AJAX avec PHP et d'autres langages côté serveur sont également utilisés.
Il utilise JavaScript pour l'affichage du contenu, tandis que CSS aide à la présentation et au modèle d'objet de document. Il utilise en outre XHTML pour le contenu.
Dans les applications Web traditionnelles ou les pages Web, les informations sont échangées avec le serveur de manière synchrone. D'autre part, dans les applications Web conçues pour utiliser AJAX, lorsqu'un événement se produit, comme cliquer sur un bouton ou remplir un formulaire, JavaScript crée une requête XMLHTTP et l'envoie au serveur au format XML.
Le serveur traite la requête, crée une réponse côté serveur et la renvoie au navigateur. JavaScript traite ensuite la réponse et le contenu de l'écran d'affichage actuel est mis à jour. Comme le rechargement ou l'actualisation des pages n'est pas nécessaire, les utilisateurs ne seront pas conscients du transfert d'informations vers le serveur.
Compétences nécessaires pour travailler avec AJAX dans WordPress
Comme il ressort de la discussion ci-dessus, les utilisateurs ont besoin des compétences suivantes pour utiliser correctement AJAX.
• Connaissance des langages de programmation tels que JavaScript, HTML et CSS
• Maîtrise des langages côté serveur tels que PHP et autres
• Bases de XML ou JSON
Avantages d'AJAX
Les différents avantages d'AJAX sont discutés ci-dessous
• Il prend en charge presque tous les navigateurs utilisés à l'heure actuelle
• Cela implique un temps de réponse plus rapide, ce qui signifie une expérience utilisateur améliorée en termes de vitesse et de performances
• Des bibliothèques JavaScript open source telles que Prototype, jQuery, etc. sont disponibles pour utilisation
• Il réduit le temps entre le client et le serveur, donc le temps des deux utilisateurs, ainsi que le serveur, est économisé
• Comme le serveur n'est pas obligé de traiter des charges de données, il aide à réduire l'utilisation de la bande passante et à optimiser le fonctionnement du réseau.
• Comme la requête XMLHTTP est utilisée pour récupérer des données, les utilisateurs peuvent effectuer plusieurs tâches simultanément.
AJAX dans WordPress
AJAX est utilisé à l'arrière de WordPress, à la suite de quoi, chaque fois que des modifications sont apportées à la publication ou aux catégories, ou chaque fois que l'administrateur modère les commentaires, les mises à jour sont effectuées instantanément. AJAX est principalement utilisé avec JQuery sur WordPress. Le processus dans lequel WordPress utilise AJAX est le suivant
• Lorsqu'une requête est faite, elle passe par le fichier 'admin-ajax.php' situé dans le dossier 'wp-admin'.
• Ces requêtes doivent obligatoirement fournir au moins une donnée, également appelée 'action' en général, en utilisant la méthode 'get' ou 'post'.
• Cette action demande au code du fichier 'admin-ajax.php' de créer deux crochets, à savoir 'wp_ajax_my_action' et 'wp_ajax_nopriv_my_action'. Le 'my_action' dans ces crochets indique la valeur de la variable 'action' de la méthode 'get' ou 'post'.
• Alors que le premier crochet est destiné aux actions entreprises par les utilisateurs connectés, le second crochet est destiné exclusivement aux utilisateurs déconnectés.
• Les fonctions accrochées doivent être prévues pour la dégradation gracieuse, qui garantit que même si JavaScript est désactivé sur les navigateurs, les codes fonctionneront toujours.
Créer un plugin WordPress AJAX
Dans cette section, prenons l'exemple d'un plugin WordPress AJAX de base appelé 'Post Likes Counter'. Ce plugin inclut les fonctionnalités suivantes :
• Il est mis à jour instantanément sur le frontend
• Les utilisateurs connectés sont autorisés à aimer les publications.
• Si les utilisateurs déconnectés essaient d'aimer la publication, un message d'erreur apparaîtra à l'écran
• Ce plugin aide à maintenir l'enregistrement total du nombre de "j'aime" et les affiche
Tout d'abord, un plugin WordPress vide doit être créé et activé. Pour créer un plugin, les étapes suivantes doivent être effectuées.
Étape 1 : Sélectionnez un nom unique pour le plugin. On peut vérifier les référentiels de plugins pour s'assurer que le nom proposé du plugin n'est déjà pas utilisé. Habituellement, les développeurs de plugins sélectionnent le nom d'un plugin en fonction de la fonction qu'il est censé remplir.
Étape 2 : À l'étape suivante, un fichier PHP est requis pour créer en utilisant le nom du plugin sélectionné. Comme les utilisateurs qui installeront ce plugin, devront placer le fichier PHP dans le répertoire du plugin WordPress 'wp-content/plugins-' pour son installation, les plugins ne peuvent pas partager le même nom pour les fichiers PHP.
Par conséquent, le nom du fichier du plug-in doit également être unique pour éviter tout conflit avec un autre plug-in du référentiel. On peut utiliser son nom ou le nom de sa société dans le préfixe pour créer un nom unique pour le fichier PHP.
Étape 3 : Il convient de noter que le plugin WordPress doit contenir au moins un fichier PHP ainsi que JavaScript, CSS, langues et fichiers image. Si plusieurs fichiers sont présents, sélectionnez un nom unique pour le répertoire et un nom préféré pour le fichier PHP principal.
Placez tous les fichiers du plugin dans le répertoire créé et demandez aux utilisateurs du plugin de télécharger tout ce répertoire dans le répertoire 'wp-content/plugins/'.
L'installation de WordPress peut être configurée pour modifier le répertoire standard du plugin 'wp-content/plugins/'. Par conséquent, il faut utiliser plugin_dir_path() et plugin_url() pour le chemin absolu et les URL dans leur code PHP.
Modèle de publication du thème
Après avoir créé le plugin, il faut trouver le modèle de publication 'single.php' de leur thème. Il se trouve dans le répertoire racine du thème actif. Il est utilisé lorsqu'un seul message est interrogé; où l'on veut placer son plugin 'Post Like Counter'. Le fichier doit rester ouvert pour modification.
Préparez le modèle de publication prêt pour l'appel AJAX
Un lien doit être créé pour que les utilisateurs puissent aimer les publications. Si les utilisateurs ont activé JavaScript, ils peuvent utiliser les fichiers JavaScript (qui seront créés plus tard) ou bien, ils peuvent suivre directement le lien. Pour cela, insérez le code suivant dans le fichier 'single.php'. Ce code peut également être ajouté à n'importe quelle partie du modèle contenue dans le fichier 'single.php'.
// La valeur de la clé méta 'likes' stockera le nombre total de likes pour un message spécifique, elle affichera 0 s'il s'agit d'une chaîne vide ID, "j'aime", vrai); $j'aime = ($j'aime == "") ? 0 : $j'aime ; ?> Ce message a <span id='like_counter'></span> j'aime<br> // Lien vers le fichier admin-ajax.php. Chèque nonce inclus pour plus de sécurité. Notez la classe "user_like" pour les clients compatibles JS. ID.'&nonce='.$nonce); echo '<a class="user_like" data-nonce="' . $nonce . '">ID . '" href="' . $lien . '">J'aime ce message</a>' ; ?>
Adressage de l'appel Ajax sans JavaScript
En cliquant sur le lien créé à l'étape précédente, on sera redirigé vers le script 'admin-ajax.php' ; cependant, ils ne trouveront aucun résultat utile, car la fonction n'est pas créée pour exécuter l'action. Pour créer la fonction dans le fichier du plugin et l'ajouter aux crochets créés par WordPress, insérez le code suivant.
<?php // utilisé ici uniquement pour activer la coloration syntaxique. Laissez-le de côté s'il est déjà inclus dans votre fichier de plug-in.
// définit les actions pour les deux hooks créés, d'abord pour les utilisateurs connectés et le suivant pour les utilisateurs déconnectés
add_action("wp_ajax_my_user_like", "my_user_like");
add_action("wp_ajax_nopriv_my_user_like", "Please_login");
// définit la fonction à déclencher pour les utilisateurs connectés
function mon_utilisateur_like() {
// vérification nonce d'une couche de sécurité supplémentaire, la fonction se terminera si elle échoue
if ( !wp_verify_nonce( $_REQUEST[#039;nonce#039;], "my_user_like_nonce")) {
exit("Woof Woof Woof");
}
// récupère like_count pour un message, le met à 0 s'il est vide, incrémente de 1 lorsqu'un clic est enregistré
$like_count = get_post_meta($_REQUEST["post_id"], "likes", true);
$like_count = ($like_count == ') ? 0 : $like_count ;
$new_like_count = $like_count + 1 ;
// Mettre à jour la valeur de 'j'aime#039; clé méta pour le message spécifié, crée de nouvelles métadonnées pour le message s'il n'en existe pas
$like = update_post_meta($_REQUEST["post_id"], "likes", $new_like_count);
// Si l'action ci-dessus échoue, le type de résultat est défini sur 'error#039; et like_count défini sur l'ancienne valeur, en cas de succès, mis à jour sur new_like_count
si($comme === faux) {
$resultat[#039;type#039;] = "erreur" ;
$résultat[#039;like_count#039;] = $like_count ;
}
autre {
$résultat[#039;type#039;] = "succès" ;
$result[#039;like_count#039;] = $new_like_count ;
}
// Vérifie si l'action a été déclenchée via un appel Ajax. Si oui, le code JS sera déclenché, sinon l'utilisateur est redirigé vers la page de publication
if(!empty($_SERVER[#039;HTTP_X_REQUESTED_WITH#039;]) && strtolower($_SERVER[#039;HTTP_X_REQUESTED_WITH#039;]) == 'xmlhttprequest#039;) {
$résultat = json_encode($résultat);
echo $résultat ;
}
autre {
header("Emplacement : ".$_SERVER["HTTP_REFERER"]);
}
// n'oubliez pas de terminer vos scripts avec une fonction die() - très important
mourir();
}
// définit la fonction à déclencher pour les utilisateurs déconnectés
function please_login() {
echo "Vous devez vous connecter pour aimer";
mourir();
}
Si tout fonctionne bien, lorsqu'un utilisateur connecté cliquera sur le lien "J'aime ce post", le nombre de likes sera automatiquement mis à jour. D'autre part, si le JavaScript est désactivé, la page sera actualisée en affichant le nombre mis à jour de "j'aime".
Ajout de la prise en charge de JavaScript
L'ajout de la prise en charge de JavaScript peut faciliter les choses. Pour utiliser AJAX avec PHP sur WordPress, il est nécessaire de mettre en file d'attente la bibliothèque jQuery avec le fichier JavaScript personnalisé du plugin. Pour cela, écrivez le code suivant dans le plugin.
admin_url( 'admin-ajax.php' ))); // mettre en file d'attente la bibliothèque jQuery et le script que vous avez enregistré ci-dessus wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'liker_script' ); }
Ensuite, le fichier Javascript 'liker_script.js' doit être créé, qui sera ensuite téléchargé dans le dossier racine du plugin. Le code suivant est utilisé pour créer le fichier 'liker_script.js'.
jQuery(document).ready( fonction() {
jQuery(".user_like").click( fonction(e) {
e.preventDefault();
post_id = jQuery(this).attr("data-post_id");
nonce = jQuery(this).attr("données-nonce");
jQuery.ajax({
tapez : "poste",
Type de données : "json",
url : monAjax.ajaxurl,
données : {action : "my_user_like", post_id : post_id, nonce : nonce},
succès : fonction (réponse) {
if(response.type == "succès") {
jQuery("#like_counter").html(response.like_count);
}
autre {
alert("Votre like n'a pas pu être ajouté");
}
}
});
});
});
Comment implémenter AJAX dans les thèmes WordPress
Les étapes suivantes vous aideront à implémenter AJAX avec PHP dans les thèmes WordPress. Par exemple, supposons que notre travail consiste à afficher les catégories dans un menu déroulant et qu'en cliquant sur 'Catégorie parente', les sous-catégories apparaîtront dans une autre liste déroulante. Cette tâche sera accomplie à l'aide des étapes suivantes
Étape 1 : Sélectionnez 'catégories' sur le côté gauche du tableau de bord, et insérez le nom des catégories dans la case apparaissant sur le côté droit et insérez le slug de catégorie ci-dessous. Si la catégorie parent est en cours de création, sélectionnez « aucune », ou si les sous-catégories sont en cours de création, sélectionnez la catégorie parent parmi les options.
Étape 2 : Dans cette étape, un modèle WordPress serait créé où la fonctionnalité AJAX sera implémentée. Ouvrez un nouveau fichier PHP et enregistrez-le. Insérez le code suivant dans la page créée.
Dans le code ci-dessus, 'Template Name: Implement Ajax', est le nom du modèle WordPress et les fonctions 'get_header()' et 'get_footer()' sont utilisées pour afficher le contenu de l'en-tête et du pied de page de la page.
Tout d'abord, le fichier de bibliothèque jQuery doit être inclus dans la page, ce qui aidera à ajouter les éléments AJAX. AJAX avec PHP, on peut soit utiliser n'importe quelle bibliothèque JavaScript, soit appeler AJAX avec du JavaScript brut. Dans l'exemple suivant, la bibliothèque JavaScript jQuery est utilisée pour implémenter AJAX.
Etape 3 : Ajoutez le fichier jQuery dans le template et appelez la fonction 'wp_dropdown_categories' afin que les catégories parentes du menu déroulant puissent être récupérées.
#content{largeur :auto ; hauteur : 400 pixels ; marge : 50px ;}
<div>
</div>
<?php
Étape 4 : Insérez le code jQuery pour obtenir l'ID de la catégorie principale qui est sélectionnée. Envoyez-le au fichier 'functions.php' pour obtenir les sous-catégories sous cet ID de catégorie parent sélectionné. Les résultats peuvent ensuite être renvoyés à la page sans la rafraîchir.
$(fonction(){
$('#main_cat').change(fonction(){
var $mainCat=$('#main_cat').val();
// appelle ajax
$("#sub_cat").empty();
$.ajax({
URL :"/wp-admin/admin-ajax.php",
taper : 'POSTER',
data:'action=my_special_action&main_catid=' + $mainCat,
succès : fonction (résultats)
{
// alerte (résultats);
$("#sub_cat").removeAttr("disabled");
$("#sub_cat").append(résultats);
}
});
}
);
});
Dans ce code ci-dessus, le code est ajouté lors de l'événement de modification de la liste déroulante des catégories principales avec l'ID '#main_cat'.
var $mainCat=$('#main_cat').val();
La fonction .val() aide à obtenir la valeur de l'option sélectionnée dans la liste déroulante et à la stocker dans la variable '$ mainCat'.
$("#sub_cat").empty();
La liste déroulante de sous-catégorie '#sub_cat' doit être libérée, si elle contient une valeur précédente, avant d'appeler l'AJAX.
La ligne jQuery suivante vous aidera à appeler les fonctions jQuery AJAX. Vérifiez les paramètres de la fonction AJAX donnés dans la section ci-dessous.
url:"bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
taper : 'POSTER',
Pour faire fonctionner AJAX dans WordPress, le paramètre 'URL' est utilisé. Par conséquent, les demandes seront envoyées au fichier 'admin-ajax.php'. Ensuite, les hooks dans le fichier 'functions.php' seront appelés pour obtenir les données postées qui ont été envoyées à l'URL : '/wp-admin/admin-ajax.php'
Pour envoyer les valeurs avec la requête, le paramètre 'data' est utilisé. Dans cet exemple, deux arguments avec le paramètre data sont utilisés – action et main_catid.
Etape 5 : Dans le fichier 'functions.php', le code suivant est utilisé pour accrocher une action.
add_action('wp_ajax_my_special_action', 'my_action_callback');
Dans cette action ci-dessus, hook a deux arguments. Dans le premier argument 'wp_ajax_my_special_action' , 'wp_ajax_ ' est la valeur qui est envoyée avec le paramètre de données 'action'. Dans le deuxième argument 'my_action_callback', les données seront traitées et les résultats seront renvoyés.
Ce crochet d'action ci-dessus est destiné aux utilisateurs connectés. Pour les utilisateurs déconnectés, on peut accrocher l'action suivante
add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');
Le code final après l'ajout de crochets pour les utilisateurs et la fonction de rappel est le suivant
fonction implement_ajax() {
if(isset($_POST['main_catid']))
{
$categories= get_categories('child_of='.$_POST['main_catid'].'&hide_empty=0');
foreach ($categories as $cat) {
$option .= 'term_id.'">';
$option .= $cat->cat_name;
$option .= ' ('.$cat->category_count.')' ;
$option .= '';
}
echo 'Scegli...'.$option;
mourir();
} // fin si
}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//pour les utilisateurs qui ne sont pas connectés.
Étape 6 : Dans cette étape, créez une nouvelle page dans le tableau de bord et attribuez-lui le modèle. Une fois la page chargée dans le navigateur, la première liste déroulante avec les catégories parentes y sera chargée.
Comme la deuxième liste déroulante est vide, sélectionnez l'option dans la première liste déroulante pour vérifier comment cela fonctionne.
Ainsi AJAX avec PHP peut être utilisé sur le site WordPress à l'aide d'un plugin nouvellement créé.