Charger du contenu dynamique sur Bootstrap Modal dans WordPress

Dernière mise à jour Oct 18, 2021

Teneur

Mettre en file d’attente le style Bootstrap et JS

Mettre en file d’attente le style Bootstrap et JS

Pour commencer, vous devriez avoir inclus les fichiers CSS et JS de Bootstrap dans votre projet WordPress. Je vais utiliser la norme WordPress pour inclure les fichiers JS et CSS requis. Outre les fichiers Bootstrap, j’ajoute également custom.jsoù nous écrirons la logique JavaScript.

Ouvrez votre functions.phpfichier et ajoutez-y le code ci-dessous.

function artisansweb_scripts() {
    wp_enqueue_style( 'bootstrapcss', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css', array(), false, 'all' );
     
    wp_register_script('bootstrapjs', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js', array('jquery'), false, true);
    wp_enqueue_script('bootstrapjs');
 
    wp_register_script('custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true);
    // Localize the script with new data
    $script_data_array = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'security' => wp_create_nonce( 'view_post' ),
    );
    wp_localize_script( 'custom-script', 'blog', $script_data_array );
    wp_enqueue_script('custom-script');
}
add_action( 'wp_enqueue_scripts', 'artisansweb_scripts' );

Ici, j’inclus les fichiers Bootstrap directement à partir du CDN. Vous voudrez peut-être l’ajouter localement. Ajustez le chemin en conséquence si vous le faites localement. Au custom.jsfichier, j’ai attribué l’URL Ajax par défaut de WordPress et un nonce.

Charger du contenu dynamique sur Bootstrap Modal dans WordPress

Comme dit, je vais charger dynamiquement le contenu d’un article dans Bootstrap Modal. Supposons que vous ayez créé un modèle dans lequel vous répertoriez les articles. Chaque publication a un bouton ‘Voir plus’. En cliquant sur ce bouton, Bootstrap Modal devrait s’ouvrir avec le contenu.

Vous devriez avoir votre propre code HTML pour cette liste. Tout ce que vous avez à faire est d’ajouter un attribut de données et une classe commune aux boutons. Cela peut être comme les déclarations ci-dessous.

<button data-id="YOUR_POST_ID" class="view-post"><?php _e('View More'); ?></button>
<button data-id="YOUR_POST_ID" class="view-post"><?php _e('View More'); ?></button>

L’utilisateur doit conserver un identifiant de publication respecté pour l’ data-idattribut. Le nom de classe que j’ai utilisé ici est ‘view-post’. Ensuite, vous devez ajouter un balisage de Bootstrap Modal dans votre fichier modèle ou dans le pied de page.

<!-- Modal -->
<div class="modal fade" id="postModal" tabindex="-1" role="dialog" aria-labelledby="postModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="postModalLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">×</span>
                </button>
              </div>
              <div class="modal-body">
                 
              </div>
        </div>
      </div>
</div>

Si vous le remarquez, j’ai laissé le titre modal et le corps du modèle vides que nous chargerons dynamiquement. J’ai attribué l’identifiant ‘postModal’ au modal.

Lorsque quelqu’un clique sur le bouton « Voir plus », nous devons envoyer un appel Ajax. Dans la réponse Ajax, nous envoyons le titre de la publication et le contenu de la publication qui s’ajoute ensuite dans Modal à l’aide de jQuery. Alors, écrivez le code jQuery ci-dessous dans le custom.jsfichier.

jQuery(function($) {
    $('body').on('click', '.view-post', function() {
        var data = {
            'action': 'load_post_by_ajax',
            'id': $(this).data('id'),
            'security': blog.security
        };
  
        $.post(blog.ajaxurl, data, function(response) {
            response = JSON.parse(response);
            $('#postModal h5#postModalLabel').text(response.title);
            $('#postModal .modal-body').html(response.content);
 
            $('#postModal').modal({show:true});
        });
    });
});

Appel Ajax dans WordPress

À partir du code jQuery écrit ci-dessus, il envoie un appel Ajax avec l’action ‘load_post_by_ajax’. Nous devons déclarer cette action et lui attacher une méthode de rappel. Dans la méthode de rappel, notre code réel sera écrit.

Écrivez le code ci-dessous dans le functions.phpfichier.

add_action('wp_ajax_load_post_by_ajax', 'load_post_by_ajax_callback');
add_action('wp_ajax_nopriv_load_post_by_ajax', 'load_post_by_ajax_callback');
 
function load_post_by_ajax_callback() {
    check_ajax_referer('view_post', 'security');
    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'p' => $_POST['id'],
    );
 
    $posts = new WP_Query( $args );
 
    $arr_response = array();
    if ($posts->have_posts()) {
 
        while($posts->have_posts()) {
 
            $posts->the_post();
 
            $arr_response = array(
                'title' => get_the_title(),
                'content' => get_the_content(),
            );
        }
        wp_reset_postdata();
    }
 
    echo json_encode($arr_response);
 
    wp_die();
}

C’est ça! Essayez cette solution et vous la verrez charger du contenu dynamique sur Bootstrap Modal. J’aimerais entendre vos pensées et suggestions dans la section des commentaires ci-dessous.

Articles Liés

Source d’enregistrement: artisansweb.net