Ajax et WordPress

La technique Ajax, comme nous l'avons expliqué dans notre article d'introduction sur Ajax est devenue populaire car elle nous permet de mettre à jour une partie du contenu de la page Web sans avoir à rafraîchir la page. Cela améliore l'expérience utilisateur.

Les sites WordPress ne font bien sûr pas exception. La façon dont nous utilisons Ajax dans WordPress diffère cependant de l'utilisation sur d'autres applications Web.

Qu'est-ce qu'admin-ajax et comment ça marche ?

WordPress a déjà implémenté Ajax pour ses propres fonctionnalités d'administration, telles que l'enregistrement automatique, les mises à jour instantanées, la modération des commentaires, l'ajout/la suppression de messages, etc. Cela signifie qu'il est prêt à être utilisé en utilisant simplement les fonctions associées fournies par WordPress.

Le fichier clé à cet effet est le fichier admin-ajax.php , situé sous le dossier wp-admin, qui est utilisé pour créer une connexion entre le client et le serveur.

Dans ce fichier, vers la ligne 159, vous pouvez voir comment toutes les requêtes Ajax sont enregistrées par certains crochets d'action.

 if ( ! empty( $_GET['action'] ) && in_array( $_GET['action'], $core_actions_get, true ) ) { add_action( 'wp_ajax_' . $_GET['action'], 'wp_ajax_' . str_replace( '-', '_', $_GET['action'] ), 1 ); } if ( ! empty( $_POST['action'] ) && in_array( $_POST['action'], $core_actions_post, true ) ) { add_action( 'wp_ajax_' . $_POST['action'], 'wp_ajax_' . str_replace( '-', '_', $_POST['action'] ), 1 ); }

Le wp_ajax_{$action} fait référence aux utilisateurs connectés et le wp_ajax_nopriv_{$_REQUEST['action']} aux visiteurs du site. Si vous souhaitez créer une requête qui inclut tous les utilisateurs, nous devrons utiliser les deux crochets.

Ainsi, à l'aide de ces actions, vous pouvez accrocher une fonction personnalisée et transmettre vos données à WordPress pour effectuer une requête Ajax. Jetons un coup d'œil à cela en action.

Exemple WordPress Ajax

Nous allons utiliser le même exemple que dans notre article d'introduction à Ajax et créer un formulaire qui permet à l'utilisateur de rechercher dans les titres des articles et de voir les résultats suggérés à la volée.

Dans l'espace d'en-tête de notre thème, nous insérerons la sortie HTML de notre formulaire de recherche. Nous utilisons le thème Twenty Twenty-One, nous avons donc édité le fichier header.php situé sous le dossier principal du thème et inséré les lignes suivantes avant la ligne <div id=”content” class=”site-content”>.

 <p><b>Search in articles:</b></p> <form> <input type="text" class="userInput"> </form> <p>Articles available: <span class="txtHint"></span></p>

Maintenant, le formulaire que l'utilisateur peut utiliser doit être visible dans le front-end.

NOTE : Ici, nous allons éditer directement le fichier header.php du thème sans créer de thème enfant. Ce n'est pas une bonne pratique et présente un certain nombre d'inconvénients. Si vous souhaitez en savoir plus sur l'importance des thèmes enfants, veuillez lire notre article connexe. Pour les besoins de cet exemple, nous avons gardé le code simple et sur le sujet. En tant que tel, il n'est pas suggéré d'utiliser ce code dans un site Web de production.

La prochaine chose est d'inclure la fonction JavaScript qui enverra la requête. Nous utiliserons plutôt jQuery, car il est déjà fourni avec WordPress et est prêt à l'emploi. Bien sûr, nous devons inclure un script à la manière de WordPress.

Mettre notre script en file d'attente

Nous informerons WordPress de l'existence du fichier JS en éditant le fichier function.php du thème et en mettant le script en file d'attente comme ceci. Notre fichier sera le custom.js que nous avons créé et placé dans un nouveau dossier "js" sous le dossier principal du thème.

 function ajax_search_script() { wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true ); $script_data_array = array( 'url' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'search_titles_nonce' ), ); wp_localize_script( 'custom-script', 'ajax_object', $script_data_array ); wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'ajax_search_script' );

Dans la fonction ajax_search_script() , nous avons enregistré et localisé le script, puis mis en file d'attente les données localisées avec la fonction intégrée wp_enqueue_script(). Ensuite, nous avons accroché la fonction ajax_search_script() sur wp_enqueue_scripts, qui est l'action appropriée à utiliser lors de la mise en file d'attente des scripts dans WordPress.

L'utilisation de wp_localize_script peut prêter à confusion car, en tant que fonction WordPress, elle a été conçue à l'origine pour traduire toutes les chaînes utilisées dans votre script. Cependant, il est également fréquemment utilisé pour transmettre des données génériques de PHP à JavaScript. Dans notre cas, pour passer l'URL Ajax et l'objet nonce.

L'utilisation nonce est nécessaire pour que la requête jQuery Ajax puisse être validée en tant que requête provenant du site Web. Si vous n'êtes pas familier avec l'utilisation des nonces dans WordPress, vous pouvez en savoir plus dans notre article connexe.

L' ajax_object est la valeur du paramètre requis $object_name de la fonction wp_localize_script() et c'est ce qui sera utilisé plus tard dans le code jQuery.

Super! Remplissons maintenant notre fonction avec le bon contenu.

Javascript

Dans le fichier custom.js , nous avons inclus notre jQuery.

 jQuery(function($) { $('.userInput').on('keyup', function() { var input = $(this).val(); if(input != '') { var data = { 'action': 'get_articles_titles', 'search_text': input, 'nonce': ajax_object.nonce } $.post(ajax_object.url, data, function(response) { $('#txtHint').html(response); }); } }); });

Cette fois, nous avons utilisé jQuery et JSON afin de transmettre les données souhaitées, action, search_text, nonce, au script côté serveur. La fonction de rappel get_articles_titles() sera responsable du traitement des données dans le back-end, de la préparation des résultats et du renvoi d'une réponse.

De plus, comme vous pouvez le voir, nous utilisons ajax_object de wp_localize_script avec ses deux valeurs de tableau, nonce et url.

Les crochets

Nous devons maintenant lier les actions Ajax authentifiées avec les crochets nécessaires que nous avons mentionnés précédemment. Nous vous rappelons que pour inclure à la fois les utilisateurs connectés et non connectés, vous devez utiliser les deux crochets. Dans votre fichier functions.php , ajoutez ces deux lignes sous le code ajouté précédemment pour mettre le script en file d'attente.

 add_action('wp_ajax_get_articles_titles', 'get_articles_titles'); add_action('wp_ajax_nopriv_get_articles_titles', 'get_articles_titles');

Comme vous l'avez peut-être déjà remarqué, le nom du crochet est en fait un préfixe suivi de notre nom d'action. La fonction get_articles_titles est l'endroit où nous allons réellement récupérer les titres des articles. Nous définirons également cette fonction dans functions.php .

 function get_articles_titles() { check_ajax_referer('ajax_nonce', 'nonce'); $input = $_POST['search_text']; $args = array( 'posts_per_page' => -1, 'post_type' => 'post', ); $the_query = new WP_Query( $args ); $autocomplete = "<br>"; if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); $title = get_the_title( get_the_ID() ); if ( strpos( strtolower($title), strtolower($input) ) !== false ) { $autocomplete .= $title . "<br>" ; } } wp_reset_postdata(); } echo $autocomplete; wp_die(); }

Le check_ajax_referer est chargé de vérifier que la requête Ajax n'est pas traitée en externe.

Les paramètres nécessaires ici sont l'action, qui est liée à 'nonce' => wp_create_nonce( 'ajax_nonce' ) à l'intérieur de votre fonction ajax_search_script() , ainsi que la valeur liée à nonce.

Et c'est tout! Nous venons de créer un exemple Ajax-PHP très simple. À ce stade, si vous essayez le code dans un environnement de test WordPress, cela devrait fonctionner comme ceci.

Où le Service 1-5 sont les titres de nos articles de test.

Conclusion

Il s'agissait d'un article sur la façon dont nous pouvons augmenter la réactivité et les performances d'un site Web WordPress en tirant parti des avantages d'Ajax. J'espère que vous êtes maintenant prêt à utiliser des techniques similaires sur votre propre site Web et à profiter de l'amélioration de l'expérience utilisateur !