Arts numériques

Plusieurs morceaux de code

La difficulté des requêtes en ajax est qu’elles sont constituées de plusieurs morceaux de code : du html, du javascript, du php et du html encore.
Pour ne pas se perdre il faut comprendre la fonction de ces différents éléments.

Un bouton
Le premier éléments est un bouton en html, associé àune fonction javascript

<button onclick="charge_article(52)" class="btn btn-sm btn-primary text-light">charge l'article 52</button>
<div id="conteneur"></div>

Ce bouton appelle la fonction "charge_article" en lui envoyant l’argument "52", qui est l’id de l’article que nous voulons charger. Remplacez-le par l’id d’un article existant, ou dans une boucle wordpress, par le code php <?php the_ID(); ?>.
Le div avec l’id #conteneur est destiné àrecevoir le résultat de la requête.

Une fonction javascript
Nous allons maintenant écrire la fonction javascript qui reçoit l’appel de fonction, dans un fichier js chargé dans le site ou directement dans la page :

<script>
                function charge_article(id_du_post){
                    jQuery.ajax({
                        type: 'POST',
                        url: '<?php echo admin_url('admin-ajax.php');?>',
                        dataType: "html",
                        data: { action : 'get_article', post_id: id_du_post  },
                        success: function( reponse ) {
                            jQuery( '#conteneur' ).html( reponse ); 
                        }
                    });
                }
</script>

Cette fonction récupère l’id, puis fait une requête ajax. Javascript va charger une page présente dans la machinerie de Wordpress, une page spécialement dédiée àcet usage.

Une fonction php
La fonction javascript appelle une fonction php du nom de charger_article() et récupérer l’id du post.
Cette fonction doit être placée dans le fichier functions.php du thème !

function get_article() {
    // construire la requête
    $args = array(
       'post_type' => 'post',
       'p' => $_REQUEST["post_id"],
   );
    // envoyer
    $resultat = new WP_Query( $args );
    $reponse = '';
    // traiter la requête, un seul résultat ici
    if ( $resultat->have_posts() ) {
        while ( $resultat->have_posts() ) {
            $resultat->the_post();
            $reponse .= get_template_part('morceaux/ajax_article');
        }
    } else {
        $reponse .= "rien reçu"; // ou faire autre chose
    }
    echo $reponse;
    exit; // fin de la requête
}

// rendre la requête disponible pour les utilisateur logués ou non logués
add_action('wp_ajax_get_article', 'get_article');
add_action('wp_ajax_nopriv_get_article', 'get_article');

Un template part
Ce n’est pas encore fini ! Ce code fait une requête sur la base de donnée, et prépare une boucle wordpress prête àl’emploi. Elle appelle alors un template part, un morceau de fichier permettant d’entourer les éléments tirés de la base de donnée d’un code html permettant son affichage en accord avec le reste du site.
En voici un exemple simple :

<?php the_post_thumbnail('jumbo', array( 'class' => 'mb-3' )); ?>
<h2><?php the_title(); ?></h2>
<div class="text"><?php the_content(); ?></div>

Il affiche l’image mise en avant, le titre et le texte complet, avec un peu de html. On peut évidemment y mettre tout ce qui est possible dans une loop wordpress.

C’est fait !

Chacun de ces fichiers est évidemment aménageable selon les besoins, mais la logique est posée.