{"id":29030,"date":"2021-06-06T17:35:00","date_gmt":"2021-06-06T14:35:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29030"},"modified":"2021-10-17T16:26:24","modified_gmt":"2021-10-17T13:26:24","slug":"cargar-contenido-dinamico-en-bootstrap-modal-en-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/cargar-contenido-dinamico-en-bootstrap-modal-en-wordpress\/","title":{"rendered":"Cargar contenido din\u00e1mico en Bootstrap Modal en WordPress"},"content":{"rendered":"

Bootstrap Modal se utiliza para agregar di\u00e1logos a su sitio web. Puede usar Bootstrap Modal para cajas de luz, notificaciones y contenido personalizado. Recientemente trabaj\u00e9 en un proyecto de WordPress donde quer\u00edamos cargar contenido personalizado din\u00e1micamente en Bootstrap Modal. En este art\u00edculo, estudiamos c\u00f3mo cargar contenido din\u00e1mico en Bootstrap Modal usando Ajax en WordPress.<\/p>\n

Hay muchos escenarios en los que es posible que desee un modal de Bootstrap con contenido din\u00e1mico. Tomemos el ejemplo de las publicaciones de WordPress.<\/p>\n

WordPress depende principalmente de los tipos de publicaciones para administrar el contenido. En WordPress, por lo general, mantenemos una p\u00e1gina detallada para ver la publicaci\u00f3n. Pero en algunos casos, es posible que no tenga suficiente contenido para la publicaci\u00f3n. Entonces, en lugar de mostrar el contenido de la publicaci\u00f3n en una p\u00e1gina diferente, prefiere mostrarlo en una ventana emergente. Es posible que tenga un par de publicaciones, por lo que el contenido de cada publicaci\u00f3n debe cargarse din\u00e1micamente en la ventana emergente.<\/p>\n

Aqu\u00ed viene el Bootstrap Modal que puede usar para mostrar contenido por publicaci\u00f3n a los usuarios finales. Requiere que siga algunos pasos b\u00e1sicos como se muestra en la siguiente parte de un tutorial.<\/p>\n

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

Para comenzar, deber\u00eda haber incluido el archivo CSS y JS de Bootstrap en su proyecto de WordPress. Voy a utilizar el est\u00e1ndar de WordPress para incluir los archivos JS y CSS necesarios. Adem\u00e1s de los archivos Bootstrap, tambi\u00e9n estoy agregando custom.js<\/code>d\u00f3nde escribiremos la l\u00f3gica de JavaScript.<\/p>\n

Abra su functions.php<\/code>archivo y agregue el c\u00f3digo a continuaci\u00f3n.<\/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
Aqu\u00ed, incluyo archivos Bootstrap directamente desde CDN. Es posible que desee agregarlo localmente. Ajuste la ruta en consecuencia si lo est\u00e1 haciendo localmente. Al custom.js<\/code>archivo, le asign\u00e9 la URL Ajax predeterminada de WordPress y un nonce.<\/p>\n
Cargar contenido din\u00e1mico en Bootstrap Modal en WordPress<\/h3>\n
Como dije, voy a cargar el contenido de una publicaci\u00f3n de forma din\u00e1mica en Bootstrap Modal. Supongamos que ha creado una plantilla en la que enumera las publicaciones. Cada publicaci\u00f3n tiene un bot\u00f3n ‘Ver m\u00e1s’. Al hacer clic en este bot\u00f3n, Bootstrap Modal deber\u00eda abrirse con el contenido.<\/p>\n
Debe tener su propio HTML para este listado. Todo lo que necesita hacer es agregar un atributo de datos y una clase com\u00fan a los botones. Puede ser como las siguientes declaraciones.<\/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
El usuario debe mantener una identificaci\u00f3n de publicaci\u00f3n respetada para el data-id<\/code>atributo. El nombre de la clase que utilic\u00e9 aqu\u00ed es ‘view-post’. A continuaci\u00f3n, debe agregar un marcado de Bootstrap Modal en su archivo de plantilla o en el pie de p\u00e1gina.<\/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
Si se da cuenta, mantuve el t\u00edtulo modal y el cuerpo del modelo vac\u00edos, que cargaremos din\u00e1micamente. Asign\u00e9 el id ‘postModal’ al Modal.<\/p>\n
Cuando alguien hace clic en el bot\u00f3n ‘Ver m\u00e1s’, debemos enviar una llamada Ajax. En la respuesta de Ajax, enviamos el t\u00edtulo de la publicaci\u00f3n y el contenido de la publicaci\u00f3n que luego se agrega en modal usando jQuery. Por lo tanto, escriba el siguiente c\u00f3digo jQuery en el custom.js<\/code>archivo.<\/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
Llamada Ajax en WordPress<\/h4>\n
Desde el c\u00f3digo jQuery escrito arriba, env\u00eda una llamada Ajax con la acci\u00f3n ‘load_post_by_ajax’. Tenemos que declarar esta acci\u00f3n y adjuntarle un m\u00e9todo de devoluci\u00f3n de llamada. En el m\u00e9todo de devoluci\u00f3n de llamada, se escribir\u00e1 nuestro c\u00f3digo real.<\/p>\n
Escriba el siguiente c\u00f3digo en el functions.php<\/code>archivo.<\/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
\u00a1Eso es! Pruebe esta soluci\u00f3n y ver\u00e1 que carga contenido din\u00e1mico en Bootstrap Modal. Me gustar\u00eda escuchar sus pensamientos y sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n