Como crear un menú para Plugins de WordPress

El post Como crear un menú para Plugins de WordPress es un texto original en Experto en Informática

Vota esta post

Seguimos con el segundo tutorial sobre cómo crear Plugins para WordPress, en el que pretendemos ayudar a crear y personalizar un Plugins para nuestro CMS.

Ya hace un tiempo comenzamos a crear una guía para WordPress en el que pretendíamos enseñar de una forma básica y rápida como crear un Plugins para este CMS. No pretendemos realizar una guía exhaustiva de cómo hacerlo, si no de ofrecer esas nociones básicas para poder realizar los primeros pasos para poder llevar a ejecución esa tarea.

Bueno pues vamos a ponernos manos a la obra con este segundo artículo de esta guía, e intentaremos explicar de forma fácil como podemos realizar esta tarea cuando diseñamos un Plugins para WordPress.

Si no leíste el primer articulo, puedes hacerlo pulsando el siguiente enlace que te llevará directamente a el, «Como crear un plugins en WordPress»

Todas las explicaciones que escribamos irán acompañadas en caso de ser necesario de su código para que podamos dar uso en nuestros trabajos, siempre cambiando y personalizando la parte que dejemos abierta.

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

Los menús son una parte fundamental de todo diseño web o blog, pues nos sirve para movernos por la sección de nuestro Plugins rápidamente y poder acceder rápidamente a los contenidos de este.

Cuanto mayor sea el diseño del menú y mejor esté estructurado, más satisfactoria será la navegación para los administradores de tu panel en tu sitio web.

A la hora de configurar el menú de tu Plugins en WordPress recuerda poner las cosas sencillas para que sepan que opción pulsar.

Bueno pues tras explicar para que sirve un menú, vamos a empezar a crear nuestro propio menú dentro de nuestro Plugins.

Lo primero que tenemos que hacer es abrir Filezilla o nuestro programa para acceder a los archivos de nuestro WordPress, nos vamos a wp-content -> Plugins y aquí dentro buscamos la carpeta de nuestro Plugins.

Una vez que ya tenemos abierto la carpeta de nuestro Plugins vamos a abrir el fichero principal de este, aquel que tiene el mismo nombre que la carpeta y que hace de fichero principal de nuestro Plugins.

Notepad ++ es un programa que nos facilita el trabajo a la hora de realizar trabajos de diseño web u otro tipo de programación

Filezilla y Notepad ++ son dos programas que recomiendo para aquellas personas que programan en HTML, PHP o cualquier otro lenguaje de programación y necesitan subir sus documentos al Servidor o Hosting con el que trabajen.

Puedes descargarte Filezilla o Notepad ++ pulsando sobre sus nombre que te llevaran a su pagina web oficial.

¿Fácil por ahora no? Pues sigamos manos a la obra, con el fichero ya abierto en nuestro programa para escribir código, yo uso actualmente Notepad ++, vamos a empezar a construir nuestro Plugins, es conveniente que preste atención a cada una de las cosas que vamos a escribir ahora, ya que cualquier fallo puede hacer que nuestro menú no se muestre como deseamos o directamente no se muestre.

La función principal que vamos a utilizar para crear un menú en nuestro Plugins de WordPress es la siguiente “add_menu_page ()”. Esta función tiene una serie de parámetros que usara WordPress para darle forma a la hora de ejecutarla en el administrador de WordPress.

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>. Úsalo correctamente para indicarle a los usuarios para que sirve cada opción.

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 para ver este menú. Podemos indicar si tienen que ser administradores, o con otro tipo de perfil pueden usarlo o incluso darle un nombre propio para personalizarlo.

Menu_slug: El slug, así de simple y siempre abierto al texto que tú quieras poner para personalizarlo.

Function: La función que mostrará el contenido en la página de opciones o ajustes del menú. Cada una de las opciones del menú, usara una función diferente la cual realizara la acción para lo que estaba destinado esta opción del menú.

Icon_url: Si disponemos de un icono personalizado, podemos indicar la ruta. Si no es así, podemos indicar un dashicon. Si no queremos poner ningún icono, dejamos vacío este campo del menú.

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.

Bueno ahora que ya hemos dados unas primeras nociones de cuál es la función que debemos utilizar para crear un menú dentro de nuestro Plugins, ahora vamos a ofrecer a mostrar una demostración haciendo uso de lo anterior de cómo puede ser un menú ya personalizado.

function expertoeninformatica_menu () {
add_menu_page (‘InfoExperto Menu', 'InfoExperto Menu', ‘manage_options ', 'info_menu', 'expertoinfo_function', 'dashicons-megaphone');
add_action ('admin_menu', expertoeninformatica_menu);
function expertoinfo_function () {}

Aquí dentro escribimos lo que debe de hacer esta opción de nuestro menú cuando pulsa en ella

¿Aprovechamos y explicamos un poco lo que hemos hecho?

Pues como puedes ver hemos usado la función add_menu_page dentro de una función que se llama expertoeninformatica_menu, esta última es la que se encargara de llamar al menú cuando tiene que mostrarlo como viene reflejado en la línea que dice add_action.

Dentro de la función menú ya deben de sonarte los campos que hemos usado, nombre… 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.

Guardamos el fichero que hemos editado y subimos el Plugins a nuestra instalación de WordPress directamente por FTP gracias a Filezilla y finalmente una vez hayamos hecho esto podemos irnos al administrador de WordPress y ver el resultado final.

En el menú de administración de WordPress aparecerá una nueva opción con el nombre del menú que le hayamos dado, fijaros bien que en el caso de haber usado el mismo icono que yo, os saldrá a la izquierda un icono de un megáfono.

Si pulsamos esta opción, nos daremos cuenta de que por ahora nuestro menú no hará nada, esto es debido a que la función a la que llama se encuentra en blanco, así que manos a la obra, empieza a añadir código HTML, CSS o PHP si necesitamos que realice alguna interacción para que empiece a funcionar nuestro menú.

¿Podemos crear submenús dentro de este menú?

Pues claro, es por ello que antes de terminar este tutorial, vamos a explicar cómo configurar un submenú dentro de nuestro menú principal.

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 ()”

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: Ajustes y Ayuda. 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 expertoeninformatica_menu () {
add_menu_page (‘InfoExperto Menu', 'InfoExperto Menu', ‘manage_options ', 'info_menu', 'expertoinfo_function', 'dashicons-megaphone');
add_submenu_page (‘info_menu', '', 'Ajuste', 'manage_options', 'expertomenu_ajuste', 'experto_ajustes_function’);
add_submenu_page (‘info_menu', '', 'Ayuda', 'manage_options', expertomenu_ayuda', 'experto_ayuda_function’);
}   
add_action ('admin_menu', expertoeninformatica_menu);
function experto_ajuste_function () {}
function experto_ayuda_function () {}
function expertoinfo_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: «info_menu».

Ahora que ya hemos escrito nuestro submenú, pues vamos a guardarlo como hicimos antes al realizar el menú. Una vez que el fichero se encuentre guardado dentro de nuestro Plugins podremos ir a ver el resultado final en el administrador de WordPress de nuestra página web.

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 Plugins para WordPress, esto os hará mucha ilusión.

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.

Saludos y hasta el próximo artículo.

El post Como crear un menú para Plugins de WordPress es un texto original en Experto en Informática