Programación de Plugins WordPress: Crear un sub-menú en un menú existente

En el anterior tutorial ( Plugins WordPress: Crear un menu y sub-menú en el pane de administración) vimos cómo crear un nuevo menú personalizado en el backend de WordPress y además, también creamos 2 sub-menús. Para ello utilizamos las funciones:

  • add_menu_page()
  • add_submenu_page()

Esto lo ejecutábamos en el hook ‘admin_menu‘.

Pues bien, como ya hemos visto esto, me gustaría explicar cómo crear un sub-menú de un menú existente. Pero no de un menú como el que creamos en el tutorial anterior puesto que eso ya lo vimos. Lo único que tienes que hacer es utilizar la función add_submenu_page() e indicar el menú padre del que descenderá tu sub-menú.

Ahora lo que vamos a hacer es crear un sub-menú bajo los menús que ya existen en WordPress por defecto ya que cada uno tiene su función específica. No te preocupes porque es muy sencillo.

Para dejar claro de a qué me estoy refiriendo cuando digo crear un sub-menú de un menú existente, me refiero a crear sub-menú de los menús que vienen por defecto en la instalación de WordPress. Aprovecho la lista que pongo a continuación para indicar qué función corresponde a cada uno de los menús:

  • Escritorio  –>  add_dashboard_page()
  • Entradas  –>  add_posts_page()
  • Medios  –>  add_media_page()
  • Páginas  –>  add_pages_page()
  • Comentarios  –>  add_comments_page()
  • Apariencia  –>  add_theme_page()
  • Plugins  –>  add_plugins_page()
  • Usuarios  –>  add_users_page()
  • Herramientas  –>  add_management_page()
  • Ajustes  –>  add_options_page()

A continuación crearé el directorio y el fichero para este plugin. En este caso le voy a llamar «OAF Create Sub-menu«. Y tanto el directorio como el fichero php tendrán el nombre de: «oaf-create-submenu«.

El código fuente inicial para el fichero «oaf-create-submenu.php» es el siguiente:

<?php
/*
Plugin Name: OAF Create Sub-menu
Plugin URI: https://oscarabadfolgueira.com/programacion-de-plugins-wordpress-crear-un-sub-menu-en-un-menu-existente
Description: This plugin creates an admin sub-menu in existing menu
Version: 1.0
Author: Oscar Abad Folgueira
Author URI: https://oscarabadfolgueira.com
License: GPLv2
License URL: http://www.gnu.org/licenses/gpl-2.0.html
*/
add_action( 'admin_menu', 'oaf_create_submenu');
function oaf_create_submenu() {
	add_dashboard_page ( 'OAF Settings', 'OAF Settings', 'manage_options', 'oaf_create_submenu_plugin', 'oaf_create_submenu_function' );
}
function oaf_create_submenu_function () {
}
?>

En primer lugar observamos que hemos creado el add_action en el hook «admin_menu» com en el ejemplo del anterior tutorial. Hasta aquí bien porque también le estamos diciendo que ejecute la función «oaf_create_submenu«.

Ahora bien, la función que utilizamos en «add_dashboard_page()» que nos permitirá añadir elementos de sub-menú en el menú «Escritorio» del panel de administración de WordPress.

Ya veis que en este caso, a diferencia de la función que ya habíamos utilizado de «add_submenu_page()«, no debemos indicarle el menú «padre» puesto que ya está en la función en sí misma.

Y ¿Qué es lo que hace esto?

Pues no hace otra cosa que crear un plugin:

programacion-plugins-wordpress-crear-submenu-01

Que al activarlo nos crea un sub-menú que desciende directamente del menú «Escritorio» como se puede ser a continuación:

programacion-plugins-wordpress-crear-submenu-03
programacion-plugins-wordpress-crear-submenu-02

Interesante, ¿verdad?

Supongo que ya estaréis pensando la cantidad de cosas que se pueden hacer con esto. Y eso que no es nada del otro mundo porque todavía no hemos creado las páginas de opciones que crearemos en otro tutorial.

Para utilizar el resto de funciones que he indicado anteriormente, os pongo el código fuente y algunas capturas con el plugin completo:

<?php
/*
Plugin Name: OAF Create Sub-menu
Plugin URI: https://oscarabadfolgueira.com/
Description: This plugin creates an admin sub-menu in existing menu
Version: 1.0
Author: Oscar Abad Folgueira
Author URI: https://oscarabadfolgueira.com
License: GPLv2
License URL: http://www.gnu.org/licenses/gpl-2.0.html
*/
add_action( 'admin_menu', 'oaf_create_submenu');
function oaf_create_submenu() {
	add_dashboard_page ( 'OAF Settings', 'OAF Settings', 'manage_options', 'oaf_create_submenu_plugin', 'oaf_create_submenu_function' );
	add_posts_page ( 'OAF Settings', 'OAF Settings', 'manage_options', 'oaf_create_submenu_plugin', 'oaf_create_submenu_function' );
	add_media_page ( 'OAF Settings', 'OAF Settings', 'manage_options', 'oaf_create_submenu_plugin', 'oaf_create_submenu_function' );
	add_pages_page ( 'OAF Settings', 'OAF Settings', 'manage_options', 'oaf_create_submenu_plugin', 'oaf_create_submenu_function' );
	add_comments_page ( 'OAF Settings', 'OAF Settings', 'manage_options', 'oaf_create_submenu_plugin', 'oaf_create_submenu_function' );
	add_theme_page ( 'OAF Settings', 'OAF Settings', 'manage_options', 'oaf_create_submenu_plugin', 'oaf_create_submenu_function' );
	add_users_page ( 'OAF Settings', 'OAF Settings', 'manage_options', 'oaf_create_submenu_plugin', 'oaf_create_submenu_function' );
	add_management_page ( 'OAF Settings', 'OAF Settings', 'manage_options', 'oaf_create_submenu_plugin', 'oaf_create_submenu_function' );
	add_options_page ( 'OAF Settings', 'OAF Settings', 'manage_options', 'oaf_create_submenu_plugin', 'oaf_create_submenu_function' );
}
function oaf_create_submenu_function () {
}
?>

También os dejo el enlace al plugin en Github para que lo descarguéis si queréis.

Pues bien, ya veis que esto es muy sencillo. Lo único que hay que saber de momento es algunas funciones y cómo usarlas. Fácil, ¿verdad?

Espero que estos tutoriales os ayuden a cogerle el gusanillo a la programación para WordPress.

Por cierto, podéis desactivar el plugin, ok?

Saludos y hasta la próxima!

Plugins WordPress: Crear menú y submenú en la administración

Una de las primera cosas que debemos saber cuando creamos plugins para WordPress, es crear un menú en el panel de administración donde se recojan las diferentes opciones de nuestro plugin o que simplemente se muestre información relevante sobre el mismo.

En este primer tutorial sobre esto, voy a hacer algo sencillo para que todos los que estáis empezando con el desarrollo de Plugins en WordPress os sea más sencillo comprenderlo.

Bueno, y ya puestos, una captura para saber a lo que me refiero cuando digo un menú de administración:

Wordpress crear plugin menu administracion

Antes de nada, comento que el plugin que voy a crear lo voy a llamar «OAF Crear Admin Menu«. Creo que es bastante aclaratorio, ¿verdad?

Ahora creamos la carpeta «oaf-create-admin-menu» y dentro de esta carpeta creamos el fichero «oaf-create-admin-menu.php«.

Bien, ahora rellenamos los campos de descripción del plugin:

<?php
/*
Plugin Name: OAF Create Admin Menu
Plugin URI: https://oscarabadfolgueira.com/plugins-wordpress-crear-menu-y-submenu-en-la-administracion
Description: This plugin creates an admin menu and a submenu
Version: 1.0
Author: Oscar Abad Folgueira
Author URI: https://oscarabadfolgueira.com
License: GPLv2
License URL: http://www.gnu.org/licenses/gpl-2.0.html
*/
?>

Perfecto, ahora vamos a lo que nos interesa.

La función que nos interesa en este caso es:

add_menu_page()

Pero así sin más no nos ofrece mucho, ¿verdad?

Aquí tienes en enlace al Codex para la función add_menu_page().

Vemos la función con los parámetros:

add_menu_page ( page_title, menu_title, capability, menu_slug, function, icon_url, position)

Veamos qué son los parámetros de esta función:

page_title: Es el texto para el título de la página HTML. Lo que va entre las etiquetas <title> y </title>

menu_title: El texto que se utilizará como nombre del menú en el panel de administración. Vamos, el texto que vemos…

capability: Indicamos el nivel de usuario necesario par ver este menú.

menu_slug: El slug, sin más.

function: La función que mostrará el contenido en la página de opciones o ajustes del menú.

icon_url: Si disponemos de un icono personalizado, podemos indicar la ruta. Si no es así, podemos indicar un dashicon.

position: La posición que ocuparé nuestro nuevo menú en el panel de administración. Aquí indicaremos un valor numérico.

Ahora, antes de escribir código, voy a indicar algunas aclaraciones:

capability: En este enlace dispones de todas las que puedes utilizar.

Dashicons: En este enlace tienes todos los dashicons.

Capability: Aquí también tienes información al respecto.

Ahora si:

add_action( 'admin_menu', 'oaf_create_admin_menu');
function oaf_create_admin_menu() {
 add_menu_page ( 'OAF Plugin', 'OAF Plugin', 'manage_options', 'oaf_create_admin_menu_plugin', 'oaf_create_admin_menu_function', 'dashicons-megaphone' );
}
function oaf_create_admin_menu_function() {
}

¿Qué hemos hecho?

Si os fijáis en las opciones que he puesto anteriormente, os quedará claro. Lo único que igual es lo referente a ‘manage_options’ que es una capability de tal forma que sólo los administradores puedan ver este menú y el ‘dashicons-megaphone que es un icon de un megáfono.

Si te fijas, verás que he creado la función oaf_create_admin_menu_function(){} sin nada. Esto lo hago porque sino, nos podría dar un error ya que estamos invocando a una función que no existe.

Guardamos el fichero que hemos creado y subimos el plugin a nuestro WordPress. Bien sea directamente por FTP o mediante un Zip a través de la sección de plugins de nuestra instalación de WordPress.

Yo ya lo he subido para que podáis ver como va quedando:

oaf plugin menu admin

Interesante, ¿verdad?

Ya veis el nombre del menú y el icono del megáfono de la izquierda.

Esto no hace nada, por supuesto. Por lo menos por el momento… Bueno sí, si que hace algo. Si pulsamos sobre el enlace del menú, se abrirá una página en la que no muestra nada. Si no añadimos la función que estamos llamando, no dará un error. La función en cuestión será la que «pinta» o muestra el contenido de la pagina de opciones de este menú. Pero esto ya lo veremos en otro tutorial.

Lo que si vamos a hacer antes de terminar este tutorial es crear un sub-menú. Ya sabrás que en algunos plugins es habitual que dispongan de varias opciones como por ejemplo: «opciones» y «configuración».

Pues bien, vamos a crear esos dos sub-menús.

La función en este caso es:

add_submenu_page()

Casi era de esperar…

Y la función con los parámetros permitidos:

add_submenu_page( parent, page_title, menu_title, capability, menu_slug, [function])

Ya vemos que es similar a la función add_menu_page() pero en este caso debemos indicarle el «padre», es decir, el menú del que desciende.

Para el ejemplo voy a crear dos sub-menús: «opciones» y «configuración». bueno, ya que nos tenemos que acostumbrar a escribir los plugins en Inglés, vamos a optar por «Options» y «Settings». En otro tutorial ya explicará como internacionalizar los plugins.

De la misma manera que antes, creo un par de funciones vacías para que no nos dé error al llamar a funciones que no existen:

function oaf_create_admin_menu() {
	add_menu_page ( 'OAF Plugin', 'OAF Plugin', 'manage_options', 'oaf_create_admin_menu_plugin', 'oaf_create_admin_menu_function', 'dashicons-megaphone' );
	add_submenu_page ( 'oaf_create_admin_menu_plugin', 'OAF Options', 'Options', 'manage_options', 'oaf_options_submenu1', 'oaf_options_function' );
	add_submenu_page ( 'oaf_create_admin_menu_plugin', 'OAF Settings', 'Settings', 'manage_options', 'oaf_options_submenu2', 'oaf_settings_function');
}
function oaf_create_admin_menu_function() {
}
function oaf_options_function() {
}
function oaf_settings_function() {
}

Si nos fijamos, vemos que la función es similar  a la de «add_menu_page» pero en este caso debemos indicarle el «padre» que es: «oaf_create_admin_menu_plugin».

Con esto que acabamos de hacer deberías obtener algo parecido a lo siguiente:

oaf-plugin-menu-admin-02

Y esto:

oaf-plugin-menu-admin-03

Como veis, hemos creado un menú en la zona de administración de nuestro WordPress. Estoy seguro que a muchos de vosotros que es la primera vez que creáis un plugin para WordPress, esto os hará mucho ilusión.

Para terminar, pongo el código completo del plugin:

<?php
/*
Plugin Name: OAF Create Admin Menu
Plugin URI: https://oscarabadfolgueira.com/plugins-wordpress-crear-menu-y-submenu-en-la-administracion
Description: This plugin creates an admin menu and a submenu
Version: 1.0
Author: Oscar Abad Folgueira
Author URI: https://oscarabadfolgueira.com
License: GPLv2
License URL: http://www.gnu.org/licenses/gpl-2.0.html
*/
add_action( 'admin_menu', 'oaf_create_admin_menu');
function oaf_create_admin_menu() {
	add_menu_page ( 'OAF Plugin', 'OAF Plugin', 'manage_options', 'oaf_create_admin_menu_plugin', 'oaf_create_admin_menu_function', 'dashicons-megaphone' );
	add_submenu_page ( 'oaf_create_admin_menu_plugin', 'OAF Options', 'Options', 'manage_options', 'oaf_options_submenu1', 'oaf_options_function' );
	add_submenu_page ( 'oaf_create_admin_menu_plugin', 'OAF Settings', 'Settings', 'manage_options', 'oaf_options_submenu2', 'oaf_settings_function');
}
function oaf_create_admin_menu_function() {
}
function oaf_options_function() {
}
function oaf_settings_function() {
}
?>

Pues como ya podréis imaginar, esto no es nada, todavía no hemos empezado ni siquiera a ver la punta del iceberg de todo lo que podemos hacer programando para WordPress.

En posteriores tutoriales seguiremos viendo cosas básicas sobre la creación de plugins para WordPress y poco a poco os introduciré en este maravilloso mundo de la programación.

Dejo el código del plugin en Github por si queréis descargarlo y echarle un vistazo más en detalle pero ya veis que no tiene nada, es de lo más sencillo y además, no hace nada!

Saludos y hasta la próxima.

Ir al contenido