WordPress : créez un modal pour remplir dynamiquement à partir d’un type de publication personnalisé à l’aide d’Ajax

L’un des projets majeurs sur lesquels j’ai travaillé l’année dernière consiste à créer un bibliothèque d’acronymes en utilisant un type de publication personnalisé (CPT) sur Martech Zone. J’ai défini plus de 1 000 acronymes liés au marketing, aux ventes et à la technologie sur le site ! Il a été très populaire et suscite beaucoup d’engagement auprès des lecteurs et des références des moteurs de recherche.

Même si je suis satisfait des fiançailles, un problème me dérange. Lorsque les lecteurs cliquaient sur un acronyme, cela les dirigeait vers une page d’acronyme pour révéler la définition… loin de l’article qu’ils lisaient. Ce n’est pas une expérience utilisateur optimale (UX). Aujourd’hui, j’ai modifié mon thème enfant avec une jolie personnalisation. Désormais, lorsque vous cliquez sur un acronyme, la définition apparaît dans une jolie fenêtre modale facile à ignorer.

Modal avec type de publication personnalisé

Voici à quoi ressemblent les résultats… vous pouvez l’essayer vous-même en cliquant sur le bouton UX acronyme.

La particularité de cette solution est que je peux publier mon article comme je le ferais normalement, sans ajouter de code spécial dans l’article ou la page pour afficher le modal. En utilisant jQuery, je capture lorsqu’un utilisateur clique sur un texte d’ancrage, vérifie la structure du permalien, et s’il s’agit d’un acronyme, j’utilise Ajax interroger WordPress et remplissez le modal avec le contenu résultant.

Comme toujours, je fournirai le code ici afin que vous puissiez comprendre comment implémenter une solution similaire sur votre site WordPress !

Étape 1 : Ajoutez le CSS pour le modal dans votre thème enfant

Vous souhaiterez probablement modifier votre CSS du mien, je voulais y incorporer une peau foncée ou claire et personnaliser les largeurs pour différentes tailles d’écran.

.modal { 
  display:none;
  position:fixed;
  z-index:1000;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:auto;
  background-color:rgb(0,0,0);
  background-color:rgba(0,0,0,0.4); 
}
.modal-content {
  background-color: #fff;
  margin: 5% auto;
  padding: 20px;
  padding-right: 40px; /* Add space for the close button */
  border: 1px solid #888;
  border-radius: 20px;
  width: 50%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative; /* Make position relative for absolute positioning of children */
}
.dark-skin .modal-content {
  background-color: #111;
  border: 1px solid #000;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .modal-content {
    width: 70%;
  }
}
@media screen and (max-width: 767px) {
  .modal-content {
    width: 90%;
  }
}
.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
}
.modal-close-btn:hover,
.modal-close-btn:focus {
  cursor: pointer;
  text-decoration: none;
}

Étape 2 : Ajoutez le HTML modal à votre pied de page

Directement au-dessus de mon </body> étiquette dans mon footer.php page, j’ajoute mon Modal vide. Inclus dans ceci se trouve mon bouton de fermeture, qui est un simple HTML entité pour un X.

<div id="customModal" class="modal">
  <div class="modal-content">
    <span class="modal-close-btn">&times;</span>
    <h2></h2>
    <div class="entry-content entry clearfix"></div>
  </div>
</div>

Étape 3 : ajoutez la fonction Ajax et la requête de type de publication personnalisée à votre thème enfant

Il y a deux fonctions ci-dessous. modal_script ajoute un auditeur pour toute personne cliquant sur un lien. Il existe une règle regex dans laquelle je peux rechercher /acronyme/ dans le URL puis renvoyez le slug après le lien… qui se trouve être l’acronyme. Celui-ci est renvoyé sur WordPress, et le type de publication personnalisé est interrogé et renvoie le contenu dans JSONoù il est analysé et affiché dans le modal HTML.

function modal_script() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function(jQuery) {
        jQuery(document).on('click', 'a[data-type="link"]', function(e) {
            e.preventDefault(); // Prevent default action

            var href = jQuery(this).attr('href');
            // Ensure the regex accounts for URLs that may not end with a slash
            var match = href.match(/\/acronym\/([^\/]+)\/?$/);
            if (match && match[1]) {
                var acronym = match[1];

                jQuery.ajax({
                    url: '<?php echo admin_url('admin-ajax.php'); ?>',
                    method: 'POST',
                    dataType: 'json',
                    data: {
                        action: 'fetch_acronym_definition',
                        acronym: acronym,
                        nonce: '<?php echo wp_create_nonce('ajax_nonce'); ?>'
                    },
                    success: function(response) {
                        jQuery('#customModal .modal-content h2').text(acronym.toUpperCase());
                        jQuery('#customModal .modal-content .entry-content').html('<h3>' + response.definition + '</h3>' + response.content);
                        jQuery('#customModal').show();

                        gtag('event', 'modal_view', {
                            'event_label': acronym,
                            'event_category': 'Acronym Modal',
                            'non_interaction': false
                        });
                    }
                });
            } else {
                console.log("URL does not contain a valid acronym pattern.");
            }
        });

        jQuery('.modal-close-btn').on('click', function() {
            jQuery('#customModal').hide();
        });

        jQuery(window).on('click', function(e) {
            if (jQuery(e.target).is('.modal')) {
                jQuery('#customModal').hide();
            }
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'modal_script');

function fetch_acronym_definition() {
    // Check nonce for security
    check_ajax_referer('ajax_nonce', 'nonce');

    $acronym_slug = sanitize_text_field($_POST['acronym']);
    $args = array(
        'name'        => $acronym_slug,
        'post_type'   => 'acronym',
        'post_status' => 'publish',
        'numberposts' => 1
    );
    $post = get_posts($args);
    if (!empty($post)) {
        $post_id = $post[0]->ID;
        $acronym_definition = get_post_meta($post_id, 'acronym_definition', true);
        $content = apply_filters('the_content', $post[0]->post_content); // Get the content and apply content filters
        
        // Prepare and send JSON response
        wp_send_json(array(
            'definition' => $acronym_definition,
            'content' => $content
        ));
    } else {
        echo 'Definition not found.';
    }
    wp_die(); // This is required to terminate immediately and return a proper response
}
add_action('wp_ajax_fetch_acronym_definition', 'fetch_acronym_definition');
add_action('wp_ajax_nopriv_fetch_acronym_definition', 'fetch_acronym_definition');

Solution plutôt efficace ! Le seul désavantage à cette solution, c’est qu’elle supprimera mes pages vues par session. Cependant, comme cela améliore l’expérience de mon lecteur, les avantages l’emportent de loin !