Carica contenuto dinamico su Bootstrap Modal in WordPress

Last updated Ott 18, 2021

Accoda stile Bootstrap e JS

Per iniziare, dovresti aver incluso il file CSS e JS di Bootstrap nel tuo progetto WordPress. Userò lo standard WordPress per includere i file JS e CSS richiesti. Oltre ai file Bootstrap, sto anche aggiungendo custom.jsdove scriveremo la logica JavaScript.

Apri il tuo functions.phpfile e aggiungi il codice qui sotto.

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

Qui, includo i file Bootstrap direttamente da CDN. Potresti volerlo aggiungere localmente. Regola il percorso di conseguenza se lo stai facendo localmente. Al custom.jsfile, ho assegnato l’URL Ajax predefinito di WordPress e un nonce.

Carica contenuto dinamico su Bootstrap Modal in WordPress

Come detto, caricherò dinamicamente il contenuto di un post in Bootstrap Modal. Supponiamo che tu abbia creato un modello in cui stai elencando i post. Ogni post ha un pulsante "Visualizza altro". Facendo clic su questo pulsante, Bootstrap Modal dovrebbe aprirsi con il contenuto.

Dovresti avere il tuo codice HTML per questo elenco. Tutto quello che devi fare è aggiungere un attributo di dati e una classe comune ai pulsanti. Potrebbe essere come le seguenti affermazioni.

<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’utente deve mantenere un ID post rispettato per l’ data-idattributo. Il nome della classe che ho usato qui è ‘view-post’. Successivamente, è necessario aggiungere un markup di Bootstrap Modal nel file modello o nel piè di pagina.

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

Se noti, ho mantenuto vuoto il titolo modale e il corpo del modello che caricheremo dinamicamente. Ho assegnato l’id ‘postModal’ al Modal.

Quando qualcuno fa clic sul pulsante "Visualizza altro", dobbiamo inviare una chiamata Ajax. Nella risposta Ajax, inviamo il titolo del post e il contenuto del post che poi viene aggiunto in Modal utilizzando jQuery. Quindi, scrivi il codice jQuery sottostante nel custom.jsfile.

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

Chiamata Ajax in WordPress

Dal codice jQuery scritto sopra, invia una chiamata Ajax con l’azione ‘load_post_by_ajax’. Dobbiamo dichiarare questa azione e allegare ad essa un metodo di callback. Nel metodo di callback, verrà scritto il nostro codice effettivo.

Scrivi il codice sottostante nel functions.phpfile.

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

Questo è tutto! Prova questa soluzione e vedrai che carica contenuti dinamici su Bootstrap Modal. Mi piacerebbe sentire i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.

Carica contenuto dinamico su Bootstrap Modal in WordPress

Accoda stile Bootstrap e JS

Carica contenuto dinamico su Bootstrap Modal in WordPress

Chiamata Ajax in WordPress

articoli Correlati