Ventana modal desde el panel de administración de WordPress
¿Cómo puedo hacer funcionar una ventana modal desde el panel de administración de WordPress?
Quiero crear una ventana modal que funcione desde una meta box dentro del wp-admin.
¿Alguna idea?
Hay varias formas de implementar una ventana modal en el panel de administración de WordPress:
1. Usando Thickbox (incluido en WordPress):
// En tu función para agregar scripts al admin
function my_admin_scripts() {
wp_enqueue_script('thickbox');
wp_enqueue_style('thickbox');
}
add_action('admin_enqueue_scripts', 'my_admin_scripts');
// En tu meta box HTML
echo '<a href="#TB_inline?width=600&height=400&inlineId=my-modal-content" class="thickbox">Abrir Modal</a>';
echo '<div id="my-modal-content" style="display:none;">
<h2>Mi Contenido Modal</h2>
<p>Contenido de la ventana modal aquí...</p>
</div>';
2. Usando la API de modales de WordPress:
// En tu archivo JavaScript
jQuery(document).ready(function($) {
$('#open-modal-button').click(function(e) {
e.preventDefault();
wp.media.editor.open(null, {
frame: 'modal',
title: 'Mi Ventana Modal',
button: {
text: 'Aceptar'
},
multiple: false
});
});
});
3. Usando el componente Modal de WordPress Components:
// Si estás usando Gutenberg o React en WordPress
import { Modal } from '@wordpress/components';
function MyModal() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<button onClick={() => setIsOpen(true)}>Abrir Modal</button>
{isOpen && (
<Modal
title="Mi Modal"
onRequestClose={() => setIsOpen(false)}
>
<p>Contenido del modal aquí</p>
</Modal>
)}
</>
);
}
Estas son las formas más comunes y recomendadas para implementar modales en el panel de administración de WordPress, manteniendo la consistencia con la interfaz de usuario nativa de WordPress.
Para usar Thickbox para ventanas modales en línea puedes utilizar el siguiente código.
<?php add_thickbox(); ?>
<a href="#TB_inline?width=600&height=550&inlineId=modal-window-id" class="thickbox">Mostrar Modal</a>
<div id="modal-window-id" style="display:none;">
<p>Lorem Ipsum sit dolla amet.</p>
</div>

Asigna al ancla una clase de thickbox y asegúrate de que el script thickbox esté encolado en tu página de administración usando add_thickbox
add_thickbox();
y
<a href="tu url" class="thickbox">haz clic aquí</a>
Puedes ver lo que hace add_thickbox
aquí:

Creo que podría no ser necesario encolar thickbox: se encola automáticamente (al menos en algunos casos) en la página de edición de entradas. Mira también add_thickbox()
.
