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

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?
Sé el primero en calificar esta publicación.
1 Star2 Stars3 Stars4 Stars5 Stars
Loading...
Artículo escrito por

¡Exprésate! Dejanos tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

10 Comentarios

Sergio

Buenas Tardes,   Tengo un pequeño problema siguiendo tu ejemplo me dice que las páginas no existe y no entiendo porque si las he creado. Soy nuevo en esto y no me entero muy bien. Saludos.

Carlos Andrés

Una Pregunta: Estoy tratando de eliminar un submenu de un ITEM llamado productos el cual depende o se genero del plugin woocommerce, actualmente ya elimine algunos submenus de woocommerce sin problemas pero no he podido eliminar los submenus del Item principal "productos" alguien sabe como les dejo el link del submenu que quiero eliminar: http://grupocdt.hol.es/wp-admin/edit.php?post_type=product&page=product_attributes

DavidC

Excelente publicación, funciono perfectamente. Queria saber si tienes alguna entrada donde expliques como crear un rol nuevo el cual solo tuviera acceso a "Colores", es decir, que cuando se loguee el usuario docente solo vea el menu "Colores". Muchas gracias por tu aporte y ojala me puedas guiar en esta inquietud. Saludos

Andrey

Primero muchas gracias por el tutorial, ya que me sirvió de mucho. Segundo, hice los pasos para eliminar la opción del sub menu duplicada, y bien funciono, pero el enlace principal perdió la url que le defini y por defecto toma el valor de la primer opción del sub menu. ¿Que podría ser? Muchas gracias.

Esteban

Muchas gracias. Uma guia fantástica, muy clara y super útil. Un saludo

Miguel

Una pregunta: Por qué me sale el customize theme en rojo y no me deja modificar el diseño de mi página. Me podrías ayudar como volver activarlo por favor. Gracias y buen tutorial para la duplicidad. Saludos.

Juan

Saludos muy bien explicado, pero quisiera saber como puedo generar un menu y submenu de forma automatica, mediante una funcion que este en otra pagina.php donde se escriban los "menus, submenus" y activarlos desde la pagina principal con add_action. Espero su opinion..

Juan Viñas

¡De nada! Es algo de WordPress que en realidad no entiendo, por qué hace esos duplicados tan, a veces, "inútiles", pero que por suerte tiene fácil solución :)

Rubén Muñoz Autor

Gracias Carlos :D. Agradeceríamos igualmente un retweet en twitter o enlace en facebook y demás xD

Carlos Sánchez

Muchas gracias, llevaba un par de días dándole vueltas a la eliminación del menú duplicado y no hallaba la solución. Saludos cordiales, Carlos Sánchez.