Menús y submenús en el panel admin de WordPress

WordPress   |   10 Comentarios

Menús y submenús en el panel admin de WordPress, En muchos de nuestros plugins se hace necesario un menú de enlaces a las diferentes secciones que componen dicho plugin. Hoy os explicamos paso a paso cómo modificar menús y submenús del panel de administración de WordPress.

Como siempre, lo más aconsejable es mirar la documentación de WordPress. En el Codex encontraréis mucha más información acerca de este tema. Para seguir con nuestro tutorial, ¡Sigue leyendo!

Los menús de WordPress son algo complejos de administrar y establecer tan funcionales como nos gustaría. Esto es algo que debemos aprender ya, antes de entrar en materia.

En primer lugar, las funciones básicas de gestión de menús:

• add_menu_page: Añade una página de menú superior (a la que se le pueden colgar «submenús»).
• add_submenu_page: Añade un submenú a un menú superior.
• remove_menu_page: Elimina una página de menú superior.
• remove_submenu_page: Elimina un submenú.

Por supuesto, estamos hablando de menús independientes. En el caso de que lo que queramos sea añadir menús a otros menús ya existentes, tenemos funciones específicas para ello: add_dashboard_page() (Añade a «Escritorio»), add_options_page() (Añade a «Ajustes»), etc. que podemos consultar en el Codex.

Normalmente, las páginas que vamos a usar en nuestro plugin serán llamadas a través de wp-admin/admin.php?page=<pagina>, ya que de esta forma se incluyen en el sistema WordPress. De otro modo, la página se ejecutaría sin usar la funcionalidad de WordPress. Este es uno de los problemas que nos tocará solventar más adelante, a la hora de ver qué página depende de quién. Debemos tener en cuenta que los archivos  .php referenciados deben existir para que los menús enlacen correctamente.

La especificación de add_menu_page es la siguiente:

<?php add_menu_page( $page_title, $menu_title,
$capability, $menu_slug, $function, $icon_url, $position ); ?>

• page_title: Título de la página en el navegador.
• menu_title: Texto que aparecerá en el menú.
• capability: permiso mínimo que debe tener un usuario para acceder a esta sección (¿Dudas sobre permisos? Consulta nuestra entrada sobre roles y permisos de hace unos días).
• menu_slug: cadena a la cual se dirige el enlace del menú, en caso de no existir valor para el siguiente parámetro (function).
• function (opcional): Función que se realizará al pulsar en el enlace. También puede ser una ruta a un archivo. De ser nulo, enlazará a la cadena escrita en «menu_slug«.
• icon_url (opcional): url del pequeño icono (20×20) de la sección.
• position (opcional): número que determina la posición en el menú. Si se establece una posición ya en uso, se sobreescribirá.

Para add_submenu_page tenemos la siguiente especificación:

<?php add_submenu_page( $parent_slug, $page_title,
$menu_title, $capability, $menu_slug, $function ); ?>

• parent_slug: aquí debemos escribir el menu_slug del menú superior del que cuelga este submenú.
• page_title: Título de la página en el navegador.
• menu_title: Texto que aparecerá en el menú.
• capability: permiso mínimo que debe tener un usuario para acceder a esta sección.
  
• menu_slug: cadena a la cual se dirige el enlace del menú, en caso de no existir valor para el siguiente parámetro (function).
  
• function: Función que se realizará al pulsar en el enlace. También puede ser una ruta a un archivo. De ser nulo, enlazará a la cadena escrita en «menu_slug«.

Pongamos un ejemplo simple: vamos a crear un menú «Colores» y tres submenús «Rojo«, «Azul» y «Amarillo«.

<?php function my_custom_menu() {
add_menu_page ( 'Colores', 'Colores', 'read', 'colores.php', '', '', 101);
add_submenu_page( 'colores.php', 'Rojo', 'Rojo', 'read', 'rojo.php', '');
add_submenu_page( 'colores.php', 'Azul', 'Azul', 'upload_files', 'azul.php', '');
add_submenu_page( 'colores.php', 'Amarillo', 'Amarillo', 'read', 'amarillo.php', '');
}
add_action( 'admin_menu', 'my_custom_menu'); ?>

Es importante englobar estas funciones dentro de una función, que luego pasaremos con add_action en el momento en que WordPress ejecuta el hook ‘admin_menu‘.

Así, veríamos algo como esto en nuestro menú:

Como vemos, se nos ha repetido «Colores«. Es algo que el menú de WordPress hace por defecto si encuentra submenús.

Nuestras dos soluciones son:

1. Agregar un submenú justo después de agregar el menú, cuyo menu_slug sea el mismo que el parent_slug, y controlemos de esta forma el texto que aparece. Esto no elimina el enlace.
2. Eliminar el enlace con la función remove_submenu_page.

Así que ya que estamos, os presento las funciones de eliminar menus y submenús:

<?php remove_menu_page( $menu_slug ); ?>

Esta función elimina un menú superior. En nuestro caso, remove_menu_page( ‘colores.php’ ); eliminaría todo el menú «Colores«.

Si queremos eliminar un submenú:

<?php remove_submenu_page( $menu_slug, $submenu_slug ); ?>

Para seguir con el ejemplo, remove_submenu_page( ‘colores.php’, ‘rojo.php’ ); eliminaría sólo el submenú «Rojo«.

Por lo tanto, si queremos eliminar el submenú «Colores» que nos ha salido duplicado, bastaría con añadir a nuestra función:

remove_submenu_page( 'colores.php', 'colores.php' );

Ahora sí, nuestro menú queda como esperabamos:

El código final sería:

<?php
/*
Plugin Name: Colores
Plugin URI: https://www.codigonexo.com/
Description: Menu de prueba.
Version: 1.0
Author: Juan Viñas
Author URI: https://www.codigonexo.com/
*/
function my_custom_menu() {
add_menu_page ( 'Colores', 'Colores', 'read', 'colores.php', '', '', 101);
add_submenu_page( 'colores.php', 'Rojo', 'Rojo', 'read', 'rojo.php', '');
add_submenu_page( 'colores.php', 'Azul', 'Azul', 'upload_files', 'azul.php', '');
add_submenu_page( 'colores.php', 'Amarillo', 'Amarillo', 'read', 'amarillo.php', '');
remove_submenu_page( 'colores.php','colores.php' );
}
add_action( 'admin_menu', 'my_custom_menu');
?>


Deberías tener en cuenta que, de esta forma, al pulsar en uno de los enlaces (si el archivo existe), nuestro menú lo redigirá a través de /wp-admin/admin.php?page=<menu_slug>, sobre todo a la hora de trabajar y navegar con rutas. Estás en la carpeta wp-admin, no en la carpeta de tu plugin.

¡Creo que por hoy ha sido suficiente! En la próxima entrada acerca de los menús del panel de administración de WordPress hablaremos sobre la reordenación de menús y submenús, algo que seguro que querrás poner en práctica para que cada cosa esté en su sitio.

¿Te ha gustado el artículo?

(6 votos, promedio: 4,67 sobre 5)

Loading...

Suscríbete. Déjanos tu email y recibe contenido genial cada mes