Cargar contenido dinámico en Bootstrap Modal en WordPress

Last updated Oct 17, 2021

Enqueue Bootstrap Style y JS

Para comenzar, debería haber incluido el archivo CSS y JS de Bootstrap en su proyecto de WordPress. Voy a utilizar el estándar de WordPress para incluir los archivos JS y CSS necesarios. Además de los archivos Bootstrap, también estoy agregando custom.jsdónde escribiremos la lógica de JavaScript.

Abra su functions.phparchivo y agregue el código a continuación.

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

Aquí, incluyo archivos Bootstrap directamente desde CDN. Es posible que desee agregarlo localmente. Ajuste la ruta en consecuencia si lo está haciendo localmente. Al custom.jsarchivo, le asigné la URL Ajax predeterminada de WordPress y un nonce.

Cargar contenido dinámico en Bootstrap Modal en WordPress

Como dije, voy a cargar el contenido de una publicación de forma dinámica en Bootstrap Modal. Supongamos que ha creado una plantilla en la que enumera las publicaciones. Cada publicación tiene un botón ‘Ver más’. Al hacer clic en este botón, Bootstrap Modal debería abrirse con el contenido.

Debe tener su propio HTML para este listado. Todo lo que necesita hacer es agregar un atributo de datos y una clase común a los botones. Puede ser como las siguientes declaraciones.

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

El usuario debe mantener una identificación de publicación respetada para el data-idatributo. El nombre de la clase que utilicé aquí es ‘view-post’. A continuación, debe agregar un marcado de Bootstrap Modal en su archivo de plantilla o en el pie de página.

<!-- 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 se da cuenta, mantuve el título modal y el cuerpo del modelo vacíos, que cargaremos dinámicamente. Asigné el id ‘postModal’ al Modal.

Cuando alguien hace clic en el botón ‘Ver más’, debemos enviar una llamada Ajax. En la respuesta de Ajax, enviamos el título de la publicación y el contenido de la publicación que luego se agrega en modal usando jQuery. Por lo tanto, escriba el siguiente código jQuery en el custom.jsarchivo.

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

Llamada Ajax en WordPress

Desde el código jQuery escrito arriba, envía una llamada Ajax con la acción ‘load_post_by_ajax’. Tenemos que declarar esta acción y adjuntarle un método de devolución de llamada. En el método de devolución de llamada, se escribirá nuestro código real.

Escriba el siguiente código en el functions.phparchivo.

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

¡Eso es! Pruebe esta solución y verá que carga contenido dinámico en Bootstrap Modal. Me gustaría escuchar sus pensamientos y sugerencias en la sección de comentarios a continuación.

Cargar contenido dinámico en Bootstrap Modal en WordPress

Enqueue Bootstrap Style y JS

Cargar contenido dinámico en Bootstrap Modal en WordPress

Llamada Ajax en WordPress

Artículos relacionados