Ladda dynamiskt innehåll på Bootstrap Modal i WordPress

Senaste uppdateringen okt 17, 2021

Bootstrap Modal används för att lägga till dialog på din webbplats. Du kan använda Bootstrap Modal för ljuslådor, aviseringar och anpassat innehåll. Nyligen arbetade jag med ett WordPress-projekt där vi ville ladda anpassat innehåll dynamiskt på Bootstrap Modal. I den här artikeln studerar vi hur man laddar dynamiskt innehåll i Bootstrap Modal med Ajax i WordPress.

Det finns många scenarier där du kanske vill ha ett Bootstrap-modal med dynamiskt innehåll. Låt oss ta exemplet på WordPress-inlägg.

WordPress beror mest på inläggstyper för hantering av innehållet. I WordPress brukar vi hålla en detaljerad sida för att se inlägget. Men i vissa fall kanske du inte har tillräckligt med innehåll för inlägget. Så istället för att visa inläggsinnehåll på en annan sida, föredrar du att visa det i en popup. Du kan ha ett par inlägg och varje inläggs innehåll bör laddas dynamiskt i popup-fönstret.

Här kommer Bootstrap Modal som du kan använda för att visa innehåll per inlägg för slutanvändarna. Det kräver att du följer några grundläggande steg som visas i nästa del av en självstudie.

Enqueue Bootstrap Style och JS

För att komma igång borde du ha inkluderat CSS- och JS-filen för Bootstrap i ditt WordPress-projekt. Jag ska använda WordPress-standarden för att inkludera nödvändiga JS- och CSS-filer. Förutom Bootstrap-filer lägger jag också till custom.jsvar vi skriver JavaScript-logiken.

Öppna din functions.phpfil och lägg till koden nedan i den.

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' );

Här inkluderar jag Bootstrap-filer direkt från CDN. Du kanske vill lägga till det lokalt. Justera banan därefter om du gör det lokalt. Till custom.jsfilen tilldelade jag standard Ajax-webbadressen för WordPress och en nonce.

Ladda dynamiskt innehåll på Bootstrap Modal i WordPress

Som sagt ska jag ladda ett inläggsinnehåll dynamiskt i Bootstrap Modal. Låt oss anta att du har skapat en mall där du listar inlägg. Varje inlägg har knappen "Visa mer". När du klickar på den här knappen bör Bootstrap Modal öppnas med innehållet.

Du bör ha din egen HTML för den här listan. Allt du behöver göra är att lägga till ett dataattribut och en gemensam klass till knapparna. Det kan vara som nedanstående uttalanden.

<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>

Användaren måste behålla ett respekterat inläggs-id för data-idattributet. Klassnamnet jag använde här är "view-post". Därefter måste du lägga till en markering av Bootstrap Modal antingen i din mallfil eller i sidfoten.

<!-- 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>

Om du märker höll jag modaltiteln och modellkroppen tom som vi laddar dynamiskt. Jag tilldelade id: t ‘postModal’ till Modal.

När någon klickar på knappen "Visa mer" måste vi skicka ett Ajax-samtal. I Ajax-svaret skickar vi inläggstitel och inläggsinnehåll som sedan läggs till i Modal med jQuery. Så skriv nedanstående jQuery-kod i custom.jsfilen.

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});
        });
    });
});

Ajax Call i WordPress

Från jQuery-koden skriven ovan skickar den ett Ajax-samtal med åtgärden ‘load_post_by_ajax’. Vi måste förklara denna åtgärd och bifoga en återuppringningsmetod till den. I återuppringningsmetoden kommer vår faktiska kod att skrivas.

Skriv koden nedan i functions.phpfilen.

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();
}

Det är allt! Testa den här lösningen så ser du den ladda dynamiskt innehåll på Bootstrap Modal. Jag skulle vilja höra dina tankar och förslag i kommentarsektionen nedan.

relaterade artiklar

Inspelningskälla: artisansweb.net