{"id":28272,"date":"2021-06-06T17:28:00","date_gmt":"2021-06-06T14:28:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28272"},"modified":"2021-10-18T04:04:06","modified_gmt":"2021-10-18T01:04:06","slug":"carregar-conteudo-dinamico-no-bootstrap-modal-no-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/carregar-conteudo-dinamico-no-bootstrap-modal-no-wordpress\/","title":{"rendered":"Carregar Conte\u00fado Din\u00e2mico no Bootstrap Modal no WordPress"},"content":{"rendered":"

O Bootstrap Modal \u00e9 usado para adicionar di\u00e1logo ao seu site. Voc\u00ea pode usar o Bootstrap Modal para lightboxes, notifica\u00e7\u00f5es e conte\u00fado personalizado. Recentemente, trabalhei em um projeto WordPress em que quer\u00edamos carregar conte\u00fado personalizado dinamicamente no Bootstrap Modal. Neste artigo, estudamos como carregar conte\u00fado din\u00e2mico no Bootstrap Modal usando Ajax no WordPress.<\/p>\n

Existem muitos cen\u00e1rios em que voc\u00ea pode querer um modal Bootstrap com conte\u00fado din\u00e2mico. Vamos dar o exemplo das postagens do WordPress.<\/p>\n

O WordPress depende principalmente dos tipos de postagem para gerenciar o conte\u00fado. Normalmente, no WordPress, mantemos uma p\u00e1gina detalhada para visualizar o post. Mas, em alguns casos, voc\u00ea pode n\u00e3o ter conte\u00fado suficiente para a postagem. Portanto, em vez de mostrar o conte\u00fado da postagem em uma p\u00e1gina diferente, voc\u00ea prefere mostr\u00e1-lo em um pop-up. Voc\u00ea pode ter algumas postagens e, portanto, o conte\u00fado de cada postagem deve carregar dinamicamente no pop-up.<\/p>\n

A\u00ed vem o Bootstrap Modal que voc\u00ea pode usar para mostrar o conte\u00fado por postagem aos usu\u00e1rios finais. Requer que voc\u00ea siga algumas etapas b\u00e1sicas, conforme mostrado na pr\u00f3xima parte de um tutorial.<\/p>\n

Enqueue Bootstrap Style e JS<\/h3>\n

Para come\u00e7ar, voc\u00ea deve ter inclu\u00eddo o arquivo CSS e JS do Bootstrap em seu projeto WordPress. Vou usar o padr\u00e3o WordPress para incluir os arquivos JS e CSS necess\u00e1rios. Al\u00e9m dos arquivos Bootstrap, tamb\u00e9m estou adicionando custom.js<\/code>onde escreveremos a l\u00f3gica do JavaScript.<\/p>\n

Abra seu functions.php<\/code>arquivo e adicione o c\u00f3digo abaixo nele.<\/p>\n

function artisansweb_scripts() {\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_style( 'bootstrapcss', 'https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css', array(), false, 'all' );\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_register_script('bootstrapjs', 'https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js', array('jquery'), false, true);\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script('bootstrapjs');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_register_script('custom-script', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), false, true);\n\u00a0\u00a0\u00a0\u00a0\/\/ Localize the script with new data\n\u00a0\u00a0\u00a0\u00a0$script_data_array = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'ajaxurl' => admin_url( 'admin-ajax.php' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security' => wp_create_nonce( 'view_post' ),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'custom-script', 'blog', $script_data_array );\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script('custom-script');\n}\nadd_action( 'wp_enqueue_scripts', 'artisansweb_scripts' );<\/code><\/pre>\n
Aqui, estou incluindo arquivos Bootstrap diretamente do CDN. Voc\u00ea pode querer adicion\u00e1-lo localmente. Ajuste o caminho de acordo se estiver fazendo isso localmente. Ao custom.js<\/code>arquivo, atribu\u00ed a URL Ajax padr\u00e3o do WordPress e um nonce.<\/p>\n
Carregar Conte\u00fado Din\u00e2mico no Bootstrap Modal no WordPress<\/h3>\n
Como disse, vou carregar um conte\u00fado do post dinamicamente no Bootstrap Modal. Vamos supor que voc\u00ea criou um modelo no qual est\u00e1 listando as postagens. Cada postagem possui um bot\u00e3o ‘Ver mais’. Ao clicar neste bot\u00e3o, o Bootstrap Modal deve abrir com o conte\u00fado.<\/p>\n
Voc\u00ea deve ter seu pr\u00f3prio HTML para esta lista. Tudo o que voc\u00ea precisa fazer \u00e9 adicionar um atributo de dados e uma classe comum aos bot\u00f5es. Pode ser como as declara\u00e7\u00f5es abaixo.<\/p>\n
<button data-id=\"YOUR_POST_ID\" class=\"view-post\"><?php _e('View More'); ?><\/button>\n<button data-id=\"YOUR_POST_ID\" class=\"view-post\"><?php _e('View More'); ?><\/button><\/code><\/pre>\n
O usu\u00e1rio deve manter um id de postagem respeitado para o data-id<\/code>atributo. O nome da classe que usei aqui \u00e9 ‘view-post’. Em seguida, voc\u00ea precisa adicionar uma marca\u00e7\u00e3o do Bootstrap Modal em seu arquivo de modelo ou no rodap\u00e9.<\/p>\n
<!-- Modal -->\n<div class=\"modal fade\" id=\"postModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"postModalLabel\" aria-hidden=\"true\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"modal-dialog\" role=\"document\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"modal-content\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"modal-header\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h5 class=\"modal-title\" id=\"postModalLabel\"><\/h5>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span aria-hidden=\"true\">\u00d7<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"modal-body\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div><\/code><\/pre>\n
Se voc\u00ea notar, mantive o t\u00edtulo modal e o corpo do modelo vazios, que carregaremos dinamicamente. Atribu\u00ed o id ‘postModal’ ao Modal.<\/p>\n
Quando algu\u00e9m clica no bot\u00e3o ‘Ver mais’, precisamos enviar uma chamada Ajax. Na resposta do Ajax, enviamos o t\u00edtulo da postagem e o conte\u00fado da postagem que, em seguida, s\u00e3o anexados no Modal usando jQuery. Ent\u00e3o, escreva o c\u00f3digo jQuery abaixo no custom.js<\/code>arquivo.<\/p>\n
jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('click', '.view-post', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'action': 'load_post_by_ajax',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'id': $(this).data('id'),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security': blog.security\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.post(blog.ajaxurl, data, function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0response = JSON.parse(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#postModal h5#postModalLabel').text(response.title);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#postModal .modal-body').html(response.content);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#postModal').modal({show:true});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n
Chamada Ajax no WordPress<\/h4>\n
Do c\u00f3digo jQuery escrito acima, ele envia uma chamada Ajax com a a\u00e7\u00e3o ‘load_post_by_ajax’. Temos que declarar esta a\u00e7\u00e3o e anexar um m\u00e9todo de retorno de chamada a ela. No m\u00e9todo de retorno de chamada, nosso c\u00f3digo real ser\u00e1 escrito.<\/p>\n
Escreva o c\u00f3digo abaixo no functions.php<\/code>arquivo.<\/p>\n
add_action('wp_ajax_load_post_by_ajax', 'load_post_by_ajax_callback');\nadd_action('wp_ajax_nopriv_load_post_by_ajax', 'load_post_by_ajax_callback');\n\u00a0\nfunction load_post_by_ajax_callback() {\n\u00a0\u00a0\u00a0\u00a0check_ajax_referer('view_post', 'security');\n\u00a0\u00a0\u00a0\u00a0$args = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'post_type' => 'post',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'post_status' => 'publish',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'p' => $_POST['id'],\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$posts = new WP_Query( $args );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$arr_response = array();\n\u00a0\u00a0\u00a0\u00a0if ($posts->have_posts()) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0while($posts->have_posts()) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$posts->the_post();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$arr_response = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'title' => get_the_title(),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'content' => get_the_content(),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wp_reset_postdata();\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0echo json_encode($arr_response);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
\u00c9 isso! Experimente esta solu\u00e7\u00e3o e voc\u00ea a ver\u00e1 carregar conte\u00fado din\u00e2mico no Bootstrap Modal. Eu gostaria de ouvir seus pensamentos e sugest\u00f5es na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n