WordPress et Ajax – Moteur de recherche

Ce chapitre explique comment intégrer ajax à WordPress par le biais d’un exemple précis : le moteur de recherche.

Notions abordées : wp_register_script(), wp_localize_script(),wp_send_json(), add_action(‘wp_ajax_…), add_action(‘wp_ajax_nopriv…).
Rqe : Le traitement ajax se fait ici à l’aide de jquery, il faut donc charger jquery dans le fichier functions.php (se reporter au chapitre « Chargement des fichiers css et js« ).

template php

<?php
<div id="wrap_ajax_articles">
    // name="s" permet d'ajouter un filtre
    // à la requête WordPress développée dans la 
    //fonction mytheme_ajax_articles()
    <input id="ajax_articles_search" type="text" name="s" placeholder="Rechercher">

    // div d'affichage des résultats de recherche
    <div id="show_ajax_articles"></div>
</div>
?>



functions.php

<?php
// Chargement du fichier app.js auquel on passe une variable admin_ajax_url  
// contenant l’url vers le fichier <projet>/wp-admin/admin-ajax.php.
// Cette url est récupérée à l’aide de la fonction admin_url('admin-ajax.php').
wp_register_script(
    'app_js',
    get_template_directory_uri() .'/dist/js/app.js',
    ['jquery'], 
    '1.0.0',
    false
); 
wp_localize_script('app_js', 'admin_ajax_url', admin_url('admin-ajax.php'));
wp_enqueue_script('app_js');
?>

<?php
// <mytheme>/template-parts/ajax-articles.php
function mytheme_ajax_articles() {
    // On récupère le mot clé entré
    // dans le champ input
    $keyword = $_POST['keyword'];

    // requête retournant les articles contenant
    // le mot clé recherché
    $q = new WP_Query([
        'post_type' => 'post',
        's' => $keyword
    ]);

    // La fonction renvoie du code html construit
    // sur la boucle WP et le contenu du template 
    // <mytheme>/template-parts/ajax-articles.php
    if ($q->have_posts()) : while ($q->have_posts()) : $q->the_post();  
        get_template_part('template-parts/ajax-articles');
    endwhile; endif;

    die();
}

// action permettant d’appeler la fonction 
// mytheme_ajax_articles() qui retourne la
// réponse à la requête ajax.
// pour personnes non loguées
add_action('wp_ajax_nopriv_do_show_ajax_articles', 'mytheme_ajax_articles'); 
// pour personnes loguées
add_action('wp_ajax_do_show_ajax_articles', 'mytheme_ajax_articles'); 
?>



ajax-articles.php

<?php
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
?>

app.js

jQuery(function($) {
    $('#wrap_ajax_articles').on('keyup change', '#ajax_articles_search', function(e) {
        e.preventDefault();
        // On récupère le mot clé entré
        // dans le champ input
        var keyword = $(this).val();
        console.log(keyword);
        //$('#show_ajax_articles').empty();

        // Si le champ de recherche est vide, 
        // la div d'affichage doit être vide
        if (keyword === '') {
            $('#show_ajax_articles').empty();

        } else {
            $.ajax({
                type: 'post',
                // Le paramètre url doit fournir l’url du fichier
                // <projet>/wp-admin/admin-ajax.php.
                // Cette url a été  définie lors du chargement du fichier app.js    
                // et  placée dans la variable admin_ajax_url.
                url: admin_ajax_url,
                data: {
                    // Sert à définir le nom des actions à lancer :
                    // 'wp_ajax_do_show_ajax_articles'  et
                    // 'wp_ajax_nopriv_do_show_ajax_articles'               
                    'action': 'do_show_ajax_articles',
                    'keyword': keyword
                },
                // Le type de donnée attendu est du html
                dataType: 'html',
                // En cas de succès de la requête ajax, le résultat s’affiche 
                // dans la div contenant l’id #show_ajax_articles'
                success: function(data, textStatus, jqXHR) {
                    // A chaque modification du champ de recherche,
                    // la div d'affichage doit être vidée avant
                    // l'affichage du nouveau résultat de recherche
                    $('#show_ajax_articles').empty();
                    // Affichage du résultat en html
                    $('#show_ajax_articles').append(data)       
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $('#show_ajax_articles').text('erreur !!!')
                }
            })
        }
    })
});