La Dashboard Widgets API hace muy fácil gestionar los widgets del tablero de administración de inicio del back-end de WordPress. Para hacerlo, necesitaremos conocimientos de PHP y de la Plugin API de WordPress, pero los desarrolladores de plugins o temas, familiarizados con los ganchos de acciones y filtros, sólo precisarán unos pocos minutos para su comprensión y será una gran manera de hacer sus plugins más útiles.
Indice
El hook de la Dashboard Widgets API
Para ejecutar tu script, necesitas enganchar en la acción wp_dashboard_setup a través de add_action(). En el caso de utilizar un WordPress multi-usuario, deberás utilizar el hook wp_network_dashboard_setup.
Las funciones de la Dashboard Widgets API
wp_add_dashboard_widget
Emplearemos esta función para añadir nuevos widgets a nuestro panel inicial de administración del back-end de WordPress. Encontraréis más información de esta función clicando en este enlace.
|
1 2 3 4 5 6 |
wp_add_dashboard_widget( $identificador_widget, // El slug por el que se identifica al widget $nombre_widget, // El nombre que se verá como título del widget $funcion_callback, // La función que creará el contenido del widget $control_callback = null // Opcional ); |
El identificador del widget servirá para generar una clase CSS con la que podremos formatear nuestro widget.
Ejemplo
Vamos a ver un ejemplo de cómo se emplea esta función
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/* * Vamos a añadir un widget personal a nuestro dashboard */ // Creamos primero la función principal function ejemplo_nuevo_widget_dashboard() { wp_add_dashboard_widget( 'mi_primer_widget_dashboard', 'Mi primer Widget del Dashboard', 'mi_funcion_creacion_widget' ); } // Ahora tenemos que enganchar la función add_action( 'wp_dashboard_setup', 'ejemplo_nuevo_widget_dashboard' ); // Finalmente, la función que añade el contenido al widget function mi_funcion_creacion_widget() { // Aquí podemos añadir todo el contenido que deseemos echo "Hola Mundo"; } |
remove_meta_box
Si queremos aclarar nuestro dashboard de widgets que no nos resultan útiles, emplearemos la función remove_meta_box(). Para más información sobre esta función, clica en este enlace al corex de WordPress.
|
1 2 3 4 5 |
remove_meta_box( $id_meta_box, // Id del metabox que queremos eliminar $pagina, // Página dónde se encuentra, ahora es 'dashboard' $contexto // Valor 'normal','advanced' o 'side' ); |
La página variará según dónde deseemos eliminar el meta box, pero en el caso que nos incumbe ahora, es ‘dashboard’.
El contexto es el lugar en el que se encuentra dentro de la página.
¿Cómo sabemos el $id_meta_box? Fácil, desde el mismo explorador, clicamos encima con el botón derecho del ratón y en ‘Inspeccionar’:
Notas
En cuanto a qué hook debemos utilizar para eliminar los meta boxes, dependerá en función de la página en la que se encuentren. Además, para que surja efecto la función, el meta box debe estar previamente creado. Así, en el dashboard las hooks más probables son wp_dashboard_setup y admin_init.
Ejemplo
Este ejemplo está sacado directamente del codex de WordPress y resulta interesante, ya que nos dejará el dashboard totalmente en blanco.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function remove_dashboard_widgets() { remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' ); // Right Now remove_meta_box( 'dashboard_recent_comments', 'dashboard', 'normal' ); // Recent Comments remove_meta_box( 'dashboard_incoming_links', 'dashboard', 'normal' ); // Incoming Links remove_meta_box( 'dashboard_plugins', 'dashboard', 'normal' ); // Plugins remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' ); // Quick Press remove_meta_box( 'dashboard_recent_drafts', 'dashboard', 'side' ); // Recent Drafts remove_meta_box( 'dashboard_primary', 'dashboard', 'side' ); // WordPress blog remove_meta_box( 'dashboard_secondary', 'dashboard', 'side' ); // Other WordPress News // use 'dashboard-network' as the second parameter to remove widgets from a network dashboard. } add_action( 'wp_dashboard_setup', 'remove_dashboard_widgets' ); |
Mover nuestro dashboard widget arriba
El siguiente es un truco para conseguir ubicar nuestro widget por encima del resto de widgets del dashboard. Para ello, modificaremos manualmente la matriz de los metaboxes del dashboard.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
function ejemplo_nuevo_widget() { wp_add_dashboard_widget( 'mi_nuevo_widget', 'Mi nuevo widget', 'funcion_creacion_widget' ); // Ahora, globalizamos la matrix de metaboxes del dashboard global $wp_meta_boxes; // De la matriz, cogemos los widgets del dashboard, en los cuales figura // el nuestro, pero al final, por ser el último creado $normal_dashboard = $wp_meta_boxes['dahboard']['normal']['core']; // Guardamos y borramos nuestro nuevo widget del final de la matriz $ejemplo_backup_widget = array( 'mi_nuevo_widget' => $normal_dashboard['mi_nuevo_widget'] ); unset( $normal_dashboard['mi_nuevo_widget'] ); // Hacemos un merge con las dos matrices, colocando nuestro widget al inicio $dashboard_ordenado = array_merge( $ejemplo_backup_widget, $normal_dashboard ); // Finalmente restauramos la matriz de los widgets $wp_meta_boxes['dashboard']['normal']['core'] = $dashboard_ordenado; } add_action( 'wp_dashboard_setup', 'ejemplo_nuevo_widget' ); |
Algo similar podemos utilizar si queremos colocar el widget a la derecha del dashboard, ya que por defecto WordPress lo colocará en posición ‘normal’:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Globalizamos la matriz $wp_meta_boxes global $wp_meta_boxes; // Realizamos el backup de nuestro widget $mi_widget = $wp_meta_boxes['dashboard']['normal']['core']['ejemplo_nuevo_widget']; // Lo sacamos de la matriz unset( $wp_meta_boxes[['dashboard']['normal']['core']['ejemplo_nuevo_widget']); // Lo añadimos al final de la matriz con la ubicación 'side' $wp_meta_boxes['dashboard']['side']['core']['ejemplo_nuevo_widget'] = $mi_widget; |
Finalmente, si queremos modificar los parámetros de los widgets, deberemos utilizar get_option(‘dashboard_widget_options’). Encontraréis más información, y funciones para la modificación de dichos parámetros, en el codex de WordPress.
Ejemplo
Para hacer el ejemplo de este artículo, vamos a compilarlo todo en un plugin. Al ejecutar el plugin, conseguiremos un resultado muy similar al de la imagen de cabecera de este artículo.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<?php /* Plugin Name: Administracion Hola Mundo Plugin URI: https://sergiotoca.com Description: Borra todos widgets del panel de administración y crea uno de bienvenida Version: 0.1.0 Author: Sergio TOCA MORENO Author URI: https://sergiotoca.com */ //Creamos primero la función principal de creación del nuevo dashboard widget function articulo_api_crear_widget(){ wp_add_dashboard_widget( 'mi_primer_widget_dashboard', 'Mi Primer Widget Dashboard', 'mi_funcion_creacion_widget' ); } // Ahora, la función que crea el contenido del widget function mi_funcion_creacion_widget(){ // Si no entendéis algo, acudid a los manuales correspondientes, ;-) echo "<h1>Hola Mundo</h1>"; } // Vamos a borrar todos los widgets del dashboard function articulo_api_eliminar_widgets() { remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' ); // Right Now remove_meta_box( 'dashboard_recent_comments', 'dashboard', 'normal' ); // Recent Comments remove_meta_box( 'dashboard_incoming_links', 'dashboard', 'normal' ); // Incoming Links remove_meta_box( 'dashboard_plugins', 'dashboard', 'normal' ); // Plugins remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' ); // Quick Press remove_meta_box( 'dashboard_recent_drafts', 'dashboard', 'side' ); // Recent Drafts remove_meta_box( 'dashboard_primary', 'dashboard', 'side' ); // WordPress blog remove_meta_box( 'dashboard_secondary', 'dashboard', 'side' ); // Other WordPress News remove_meta_box( 'dashboard_activity', 'dashboard', 'side'); remove_meta_box( 'welcome-panel', 'dashboard', 'advanced'); } // Finalmente, procedemos con los hooks, para que enganchen nuestras funciones // Primero, borramos los widgets existentes add_action( 'wp_dashboard_setup', 'articulo_api_eliminar_widgets'); // En segundo lugar, creamos el widget solitario add_action( 'wp_dashboard_setup', 'articulo_api_crear_widget'); ?> |
Si queréis saber más acerca de la programación de plugins, encontraréis mis artículos del Manual de Plugins WP.
