Carregar Conteúdo Dinâmico no Bootstrap Modal no WordPress

Last updated Out 18, 2021

Enqueue Bootstrap Style e JS

Para começar, você deve ter incluído o arquivo CSS e JS do Bootstrap em seu projeto WordPress. Vou usar o padrão WordPress para incluir os arquivos JS e CSS necessários. Além dos arquivos Bootstrap, também estou adicionando custom.jsonde escreveremos a lógica do JavaScript.

Abra seu functions.phparquivo e adicione o código abaixo nele.

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

Aqui, estou incluindo arquivos Bootstrap diretamente do CDN. Você pode querer adicioná-lo localmente. Ajuste o caminho de acordo se estiver fazendo isso localmente. Ao custom.jsarquivo, atribuí a URL Ajax padrão do WordPress e um nonce.

Carregar Conteúdo Dinâmico no Bootstrap Modal no WordPress

Como disse, vou carregar um conteúdo do post dinamicamente no Bootstrap Modal. Vamos supor que você criou um modelo no qual está listando as postagens. Cada postagem possui um botão ‘Ver mais’. Ao clicar neste botão, o Bootstrap Modal deve abrir com o conteúdo.

Você deve ter seu próprio HTML para esta lista. Tudo o que você precisa fazer é adicionar um atributo de dados e uma classe comum aos botões. Pode ser como as declarações abaixo.

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

O usuário deve manter um id de postagem respeitado para o data-idatributo. O nome da classe que usei aqui é ‘view-post’. Em seguida, você precisa adicionar uma marcação do Bootstrap Modal em seu arquivo de modelo ou no rodapé.

<!-- 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 você notar, mantive o título modal e o corpo do modelo vazios, que carregaremos dinamicamente. Atribuí o id ‘postModal’ ao Modal.

Quando alguém clica no botão ‘Ver mais’, precisamos enviar uma chamada Ajax. Na resposta do Ajax, enviamos o título da postagem e o conteúdo da postagem que, em seguida, são anexados no Modal usando jQuery. Então, escreva o código jQuery abaixo no custom.jsarquivo.

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

Chamada Ajax no WordPress

Do código jQuery escrito acima, ele envia uma chamada Ajax com a ação ‘load_post_by_ajax’. Temos que declarar esta ação e anexar um método de retorno de chamada a ela. No método de retorno de chamada, nosso código real será escrito.

Escreva o código abaixo no functions.phparquivo.

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

É isso! Experimente esta solução e você a verá carregar conteúdo dinâmico no Bootstrap Modal. Eu gostaria de ouvir seus pensamentos e sugestões na seção de comentários abaixo.

Carregar Conteúdo Dinâmico no Bootstrap Modal no WordPress

Enqueue Bootstrap Style e JS

Carregar Conteúdo Dinâmico no Bootstrap Modal no WordPress

Chamada Ajax no WordPress

Artigos relacionados