178 | Cómo mejorar (y aprovechar) los menús de WordPress
11 Sept 2019 · 28 min
Episodio 178 (Gonzalo Navarro) explica cómo sacar partido a los menús de WordPress, repasando opciones nativas poco conocidas (como enlaces personalizados, IDs para anclas, y propiedades avanzadas activables desde "Opciones de pantalla") y proponiendo plugins para ampliar funcionalidades: mega menús (Max Mega Menu), menús responsive (Responsive Menu, WP Responsive Menu), iconos en menús (Menu Icons) y soporte de shortcodes en menús (Shortcode in Menu). También menciona recursos propios relacionados: clase 8 (menús) y clase 10 (shortcodes) y vídeos de la "Zona Código".
Chapters
En el episodio 178 de WordPress semanal te hablo de cómo sacar partido de los menús de WordPress y qué puedes hacer para mejorarlos o cambiarlos. Vamos allá. Hola, hola, Soy Gonzalo de Gonzalonabarro. Es y bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress de principio a fin, porque ya sabes que no hay mejor inversión que la de crear y gestionar tu propia web con WordPress. Así que como siempre, te invito a que pases o a que inviertas los próximos minutitos de tu tiempo en aprender o mejorar tus habilidades con WordPress. Y en este caso lo quiero centrar en los menús, porque los menús de navegación es algo que damos por hecho dentro de WordPress, que ya sabemos que viene y que dependiendo del theme que tengamos tendremos unos espacios a nuestra disposición para colocar esos elementos del menú. Pero sin duda alguna hay cosas que podemos aprovechar avanzadas ya directamente con lo que trae WordPress. Y después si queremos, como siempre, ya sabemos que en WordPress existen los plugins para algo, y es para extender las funcionalidades de lo que podemos hacer con nuestras páginas web con WordPress, pues vamos a ver también formas interesantes y diría yo, las más comunes, las más demandadas para mejorar esos menús o para cambiarlos en el caso de que tengamos unos requerimientos concretos. Vamos a entrar de lleno ya en nada, en hacer apenas un par de minutitos, pero antes, como siempre, vamos a ver las novedades. ¿Qué está pasando en Gonzalo Navarro es esta semana? Bien, tenemos como cada semana, ya sabéis que todos los martes hay contenidos nuevos, concretamente vídeos de la zona código. Y la zona código pues es esa parte del área para suscriptores en la que aprendes a modificar tu web, ya sea en el aspecto o en el funcionamiento sin utilizar plugins. Y lo hacemos como siempre, con vídeos paso a paso en el que te enseño a hacer todo y debajo pues tienes el código que utilizo en el vídeo, donde te muestro dónde pegarlo si si hay que modificar alguna cosa, cómo modificarla y demás. Bien, básicamente es hacer cambios por código sin que necesariamente tengas que saber código. Y en este caso te enseño a redirigir a la home tras hacer login y además bloquear el acceso al área de administración. Y lo vamos a hacer para el rol de suscriptor, es decir, vamos a hacer que cuando un usuario que tenga el rol de suscriptor y quiera iniciar sesión en tu web, que no pueda ir a la parte de administración, porque por norma general no querrás que a tus suscriptores vayan ahí. De hecho hay muy poquito que puedan hacer los suscriptores por digamos, las limitaciones que tienen en cuanto al tipo de rol que son, pues lo único que pueden hacer en la parte de administración es cambiar sus detalles de perfil de usuario y poquito más. Entonces, ¿Para qué estar mandándoles ahí cuando hacen login si puedes directamente mandarles a la parte frontal, que seguramente es lo que te interesa? Pues eso es lo que hacemos en este vídeo, básicamente restringimos el acceso y por lo tanto van a ser redirigidos a la página principal de la web. Y si esto lo combinas, este es el vídeo 129 de la zona código, pero si lo combinas con el vídeo anterior que era el vídeo 128, ahí te enseño a desactivar la toolbar, la barrita negra que sale arriba cuando uno está logueado, pues también te enseño a desactivarla. De esta forma lo que consigues es que cuando un suscriptor entre con este vídeo último que te digo, pues que no pueda ir a la parte de administración, pero es que después si el suscriptor está viendo la barrita negra e intenta ir a la parte de administración pero no puede porque tú lo tienes bloqueado porque pues es una experiencia un tanto rara. Entonces la combinación de los vídeos 128 y 129 de la zona código pueden ser todo lo que necesites para personalizar un poquito la experiencia de los suscriptores cuando acceden a tu web, cuando inician sesión. ¿De acuerdo? Genial. Recuerda que tienes todos los enlaces a lo que voy comentando en el episodio 178 y desde hoy, desde este episodio, ya tengo implementado algo que me habéis pedido varios a lo largo de este tiempo y es que ponga un acceso rápido a los episodios del podcast. Entonces todos los episodios podéis ir a gonzalonaavarro es y el número del episodio y seréis redirigidos automáticamente a las notas del programa del episodio en concreto. Así que si en este vais a Gonzalonabarro es 178, pues iréis directamente a la parte de mi web, pues donde tengo todo esto que comento, todos los enlaces, el esquema del programa y demás. Bien, seguimos con las novedades y tenemos el curso del mes que estamos con el curso de HTML a WordPress, es decir, cómo pasar una web hecha en HTML, pasarla a un thing de WordPress y que de esa forma, pues todo aquello que debería de hacerse por código tú lo puedas controlar directamente desde el panel de administración, como por ejemplo los menús, que es del tema que vamos a hablar en este episodio de hoy. Y luego te quería hacer una recomendación o un par de ellas muy en la línea de lo que voy a comentar en este episodio. Me gustaría empezar a hacer esto de aquí en adelante porque tengo tantos contenidos que muchos complementan a otros y en este caso pues. Pues todo lo que voy a hablar en este episodio está muy relacionado con dos cosas que os voy a Una, la clase número 8 del curso de WordPress gratuito, donde ahí vemos cómo utilizar los menús de WordPress a fondo. Os recomiendo esta clase porque me he dado cuenta que los menús es algo como que damos un poco por hecho que sí, que podemos poner enlaces a nuestras páginas y demás, pero se pueden hacer muchas más cosas de las que pensamos y de las que voy a hablar en este episodio. Así que recomiendo mucho, aunque ya lleves tiempo con WordPress, echarle un vistazo a esta clase, la número 8 del curso de WordPress básico, que ya sabéis que es gratuito. Y luego también os voy a recomendar la clase número 10 del curso de WordPress avanzado, en la que os enseño a crear vuestros propios shortcodes. Y esto lo recomiendo porque veremos más adelante, cuando nos metamos de lleno en el tema central del programa, os hablaré de cómo podéis habilitar el uso de shortcodes en los menús. Entonces, si ya lo complementáis con esto, en el que os enseño a crear vuestros propios shortcodes sin usar plugins ni nada, pues puede ser muy interesante. Así que esas son Mis recomendaciones, clase 8 del curso de WordPress básico, los menús de WordPress a fondo y clase 10 del curso de WordPress avanzado, cómo crear tus propios shortcodes. Y por supuesto tenéis todo en la parte de enlaces. Genial, pues seguimos y nos vamos a ir ahora con el plugin de la semana, que es para subir imágenes en formato SVG, en formato SVG de forma segura. ¿Y por qué digo de forma segura? Bien, porque por defecto nosotros no podemos subir archivos que terminen en SVG en SVG porque hay cierto riesgo de que por la forma en la que se crean estos archivos, este formato de imagen especial, pues se le podría inyectar digamos código maligno, por eso por defecto se bloquea el uso de imágenes en este formato. Pero si utilizas el plugin Save SVG te va a permitir primero subir imágenes en formato SVG que no puedes hacerlo en WordPress y segundo, hacerlo de forma segura porque vas a evitar estas posibles vulnerabilidades relacionadas con el XML. ¿De acuerdo? Suena un poquito técnico, pero básicamente por cómo está hecho las imágenes o los archivos hay un cierto riesgo. Si tú instalas este plugin evitas ese riesgo y además puedes subir las imágenes en ese mismo formato a WordPress, cosa que no se puede hacer por defecto. ¿De acuerdo? Os lo dejo de nuevo en la parte del plugin de la semana, este es el episodio, recuerda 178. Y ahora ya sí nos vamos con el tema central cómo mejorar y aprovechar los menús de navegación de WordPress. Y antes de nada quiero atajar el tema que te comentaba antes, que es que lo primero es ver si conoces de verdad todas las opciones de los menús de WordPress, porque muchas veces me encuentro con que por un poco desconocimiento, porque también los menús es algo que configuramos al principio cuando creamos la web y luego no volvemos a ellos, pero se puede añadir prácticamente cualquier cosa o sin el prácticamente a los menús de navegación de tu web. Cada elemento que tú vayas añadiendo puedes añadir lo que quieras y casi todos están disponibles para que lo añadas directamente cuando vas a apariencia, menús, pues directamente desde ahí ya sabéis que una vez lleguéis a esa pantalla tenéis básicamente dos cosas que se pueden una, crear menús o bueno, gestionarlos, modificarlos y dos, decirles en qué lugar de vuestra web se va a mostrar ese menú, que es lo que se conoce como área de menú. Y cada thing pues trae unas áreas de menú y otras. Hay algunos pues que sólo traen el espacio arriba del todo para poner el menú principal, pero otros a lo mejor también te traen un área de menú abajo, que se suelen poner por ejemplo enlaces a redes sociales y te la ponen como una posibilidad de que añadas menús en el footer. Hay otros que en la parte de arriba, en la parte de la cabecera de la web, pues te dan varios espacios, te dan por ejemplo debajo del logo de forma centrada o también luego tienes un espacio para poner un menú secundario, quizás como a la derecha del menú o incluso arriba de la cabecera, esto también es muy típico para poner una segunda o lo que se conoce como una zona secundaria para menús, ahí también se pueden poner enlaces de contacto, botones de redes sociales. Es bastante típico. Estas son un poquito las disposiciones más típicas de los menús de navegación. Pero bien, después ¿Qué podemos nosotros ir incluyendo en eso? Bueno, podemos añadir cualquier tipo de contenido y cuando digo cualquiera, es cualquiera. Si tú tienes entradas y páginas, por supuesto puedes añadir entradas y páginas, pero si tienes productos de woocommerce también puedes añadirlos directamente o si tienes un Custom Post Type que has creado de forma personalizada también vas a poder añadirlo, lo que pasa que puede ser que no te aparezca directamente. Lo mismo ocurre con las taxonomías, no solo puedes añadir etiquetas y categorías, si tienes taxonomías personalizadas o taxonomías que te las han creado otros plugins, por ejemplo woocommerce te crea categorías de producto, pues tú puedes también añadir enlaces a categorías de producto directamente a los elementos del menú de WordPress, lo que pasa que de nuevo puede que no te aparezca como opción directamente para añadir. Entonces, ¿Cómo haces que o cómo ves qué opciones tienes para añadir si es que no te aparecen en la parte izquierda cuando estás como digo, en la pantalla de administración de de WordPress, en la parte de menús, pues arriba hay un botoncito que es súper útil que se llama Opciones de pantalla y eso te permite ver qué cosas estás mostrando para poder añadir y qué cosas puedes añadir y entonces simplemente vas marcando unas casillas y vas añadiendo las cosas que tú puedes digamos, utilizar para añadir como elemento de menú, entre ellas por ejemplo, todo lo que te decía, cualquier tipo de contenido personalizado que tengas aparte, cualquier tipo de taxonomía, lo que sea? Y luego tienes uno de mis elementos preferidos para añadir, como digo, como elemento de menú, que son los enlaces personalizados, que estos sí te van a venir abiertos de forma normal. Y esto es algo los enlaces personalizados le dedico un buen tiempo en la clase que te digo, la clase 8, el curso de WordPress básico, porque son súper útiles gracias a los enlaces personalizados puedes poner por ejemplo enlaces vacíos que te permitan crear un desplegable. No sé si habéis visto como tengo yo por ejemplo en mi menú de navegación uno de los elementos que tengo es Blog y Y cuando te pones encima de blog se despliega y aparece Podcast, tutoriales WordPress, plugins WordPress, themes WordPress. Y en este caso si tú haces clic en elemento principal, es decir en blog, sí que te lleva a la página de blog. Pero también podría haberlo hecho que ese enlace quede vacío, es decir, que cuando hagas clic en él no lleve a ningún lado, sino que simplemente despliegue otros elementos. Y esto lo hace si dejas el enlace digamos vacío, que lo puedes hacer poniendo una almohadilla, añadiendo un enlace personalizado, como digo, al elemento del menú, poniendo una almohadilla en lugar de la URL de destino y así el enlace va a funcionar, va a existir, pero no va a llevar a ningún lado. Y eso te permite por ejemplo después poner dentro de ese elemento del menú. Ya sabéis que podemos concatenar elementos, es decir, podemos hacer que de un elemento de menú después yo tenga un subelemento, cuando me pongo encima, cuando haga clic se desplieguen esos subelementos. Pues esta es una muy buena forma de hacerlo si es que quieres que el elemento principal quede vacío. Y ya que hablo de esto de poner una almohadilla en la parte de enlaces personalizados, esto de la almohadilla también nos permite dirigirnos hacia identificadores concretos, ID. Esto si tienes algo de idea, un poquito de CSS básico y demás, y si no te lo explico rápidamente. Nosotros a través o directamente en el HTML podemos especificar ids, identificadores concretos para elementos HTML de nuestra web. Entonces nosotros por ejemplo, imagínate la típica landing page o página de tu web donde cuando haces clic en los elementos del menú te va llevando a distintas zonas dentro de esa misma página. Esto se hace simplemente dándole un identificador a cada una de esas zonas de la página y luego convocando o escribiendo ese identificador en los elementos del menú. Por ejemplo, si yo tengo una zona de mi landing page ¿Donde es? Pues donde explico las características de un producto, yo puedo darle a esa zona en el código HTML, me meto y le digo que tenga el ID que se llame características. Después en la zona de ventajas, pues le pongo también a esa parte, le pongo el ID ventajas y en la zona de contacto o de CTA le pongo CTA. Pues luego yo en los menús de navegación lo que hago es añado un enlace personalizado, lo llamo características y le pongo almohadilla características, es decir, almohadilla más el nombre de del ID que tú le hayas asignado a esa zona concreta de tu página. Así que como ves los enlaces personalizados también te permiten hacer esto tan chulo de poder moverte o de enlazar a contenidos dentro de la misma página. Esto lo vemos en uno de los vídeos de la zona código, lo vemos en el curso, en el último curso que he sacado de cómo pasar de HTML a un thing de WordPress, como va a ser un thing de una sola página, justo hacemos eso ahí y lo que hacemos es ir pasando y además lo hacemos de forma chula para que pase, digamos que no lo haga de golpe, sino que lo haga suavemente. Pues todo eso lo vemos. Os voy a dejar enlaces a todo esto que comento y esto pues también es muy útil cuando quieres poner enlaces a redes sociales, porque puedes poner enlaces externos, cuando quieres crear iconos, que ahora te hablaré de otras propiedades avanzadas de los menús, que combinado con esto es fantástico, es decir, es algo muy interesante y que te recomiendo explorar si es que no lo conoces a fondo. Bien, esto es un poquito lo más básico de los menús, pero es que después tenemos propiedades más avanzadas de los menús que de forma normal nos vienen desactivadas, pero que las podemos activar ¿Desde dónde? Pues también desde opciones de pantalla, que como digo es cuando te vas al menú personalizar menús, pues arriba del todo tienes este desplegable, como digo, que pone opciones de pantalla y cuando se despliega, además de las opciones que te he comentado antes de poder añadir más contenidos, tienes una parte que pone propiedades avanzadas y esto lo que te permite es añadir a cada cajita, tú sabes que cuando añades, por ejemplo, imagínate que yo añado pues mi página de inicio, la añado a mi menú principal, pues cuando la añado me aparece una cajita y puedo cambiar el nombre que va a tener eso, por ejemplo si mi página de inicio es curso de WordPress gratis más cursos de WordPress avanzado, pero luego cuando yo lo paso lo pongo como elemento de menú, no voy a querer que se muestre todo el título de mi página, entonces simplemente le cambio el título y pongo inicio para que en el menú principal se muestre como inicio, pese a que el nombre de la página sea otro. Pues además de esa opción puedes editar más opciones y esas opciones extra las puedes poner o las puedes habilitar desde opciones de pantalla y una de las que puedes habilitar es destino de enlace y esto está muy bien porque te permite, al igual que podemos hacer con los enlaces cuando estamos editando cualquier contenido dentro de WordPress, ponemos un enlace, si le damos a la ruedecita a las opciones podemos decir si queremos que ese enlace se abra en una nueva pestaña, pero esto con los menús de forma normal no nos permite hacerlo, pero si activamos esta opción, que repito, viene con WordPress, lo que pasa que no viene activada, pues ya tenemos esa opción, tenemos la opción de que cuando alguien haga clic en uno de los elementos de nuestro menú se abra en una nueva pestaña. ¿Para qué es útil esto? Sobre todo Bueno, para mí, cuando pones enlaces a redes sociales o enlaces externos para enlaces que lleven a zonas de tu misma web, pues tampoco tendría mucho sentido, de hecho el usuario no está acostumbrado a que si se abre enlaces dentro de la misma web te lleve a otra página, sería un comportamiento un poco raro e incluso podría pensar que se está abriendo un anuncio o alguna cosa de esas. Sin embargo si es claramente un enlace externo como a redes sociales u otra cosa, sí tiene sentido que ese enlace se abra en una nueva pestaña. Y para esto no tienes que añadir nada extra, sino habilitar esta opción de destino de enlace y te va a crear una casillita nueva debajo de cada elemento de menú donde tú puedes marcarla en el caso que quieres que ese elemento como digo se abra en una nueva pestaña. Luego tienes la propiedad avanzada también de atributos de título, que esto te permite lo típico que por ejemplo hay veces que te pones encima de una imagen y ves que cuando estás un ratito encima como que sale un texto de la imagen o en un enlace lo mismo, se suele usar sobre todo para enlaces e imágenes. Pues esto te habilita esa opción para los menús de WordPress. Yo no le veo demasiado sentido esta opción dentro de los menús, pero puedes utilizarla. A veces los programas estos que son lectores de pantalla, que sobre todo lo utiliza gente con problemas de accesibilidad, pues algunos de ellos leen por ejemplo estos títulos, aunque otros no porque consideran que no es la mejor práctica. En cualquier caso tienes la opción de esto que te digo, que cuando pasas el ratón por encima de algo y lo dejas un rato quieto te aparece un texto que tú pongas, pues lo puedes hacer con los elementos del menú si habilitas esta parte de atributos del título. De nuevo, yo no es algo que recomendaría para los elementos del menú, pero que sepas que existe la opción. La siguiente propiedad avanzada que puedes habilitar son las clases CSS. Esto sí que es súper útil porque te va a permitir darle una clase CSS concreta a cada elemento de menú, con lo cual imagínate todo lo que te abre esto, porque tú después puedes ir y por CSS hacer las modificaciones que quieras, o incluso si por ejemplo usas iconos de font awesome o lo que sea, también puede ser una muy buena opción para añadirle ahí directamente las clases del elemento del CSS, pues el color, el tamaño, que ya sabéis que con font awesome os voy a dejar por ahí varios enlaces para ver cómo habilitar fonts awesome de forma manual y varios recursos que tengo para esto de esta librería de iconos. Después tienes otra propiedad avanzada que no se usa apenas, que es la relación con el enlace, y esto básicamente te permite poner qué relación existe entre tu web y el enlace a donde estás llevando. Esto se usa sobre todo para enlaces externos y las relaciones es literal, puedes poner si el enlace lleva a un amigo, a un contacto, a nadie, puedes poner nadie, si es un compañero de trabajo, incluso puedes poner en términos geográficos si es alguien que reside en el mismo sitio que tú, si es un vecino, puedes poner si es familia, en fin, como dar información de ese enlace a dónde lleva. Yo particularmente no lo he usado nunca, pero que sepáis que existe esta opción, a ver si no os lo había puesto la nota del enlace, pero a ver si me acuerdo y si no. De todas formas si buscáis Link relationships WordPress os va a salir en la primera página seguramente el codex de WordPress donde explica esto un poco más, pero bueno, como digo yo esto no lo uso nunca. Y por último tienes la opción de, dentro de las propiedades avanzadas, habilitar una descripción para cada elemento de menú. Esto de las descripciones es un poco como funciona con las categorías. Ya sabéis que las categorías cuando las creáis tenéis la posibilidad de rellenar una descripción y después dependiendo del theme de tu web puede que esa descripción se muestre o no. En el caso de los menús ocurre lo mismo, ya te digo yo que casi ningún thing te va a mostrar la descripción, pero bueno, quizás puede estar bien que la rellenes. Yo en este caso también te digo que no lo hago nunca, pero que sepas que existe la opción. Básicamente las propiedades avanzadas de los menús que yo utilizo y que te recomiendo que le eches un vistazo porque pueden ser interesantes, son Destino del enlace, por si quieres abrirlo en una nueva pestaña y Clases CSS, por si quieres añadir clases personalizadas o ya existentes a elementos concretos de tus menús, ¿De acuerdo? Bien, toda esta primera parte del episodio ha estado enfocada a cosas que ya existen en WordPress, como digamos sacar partido de lo que existe, que es mucho más de lo que seguramente algunos de vosotros pudierais estar pensando. Y por supuesto os animo a que os empapéis bien de todo esto, ¿De acuerdo? Pero ahora vamos a dar un pequeño salto, vamos a movernos un poco y vamos a hablar de cosas que podemos añadir de forma extra. Por supuesto, prácticamente todo se puede hacer por código, pero os voy a dar soluciones para extender las funcionalidades de los menús de WordPress utilizando plugins. Y la primera cosa de las que os quiero hablar es una de las más populares porque se utiliza mucho y son los mega menús, o en inglés Mega menús y no son más que tener menús en tu web. Normalmente se tiene en la parte superior, digamos, el menú de navegación principal, que se despliegan con muchas opciones y además se despliegan, digamos, no elemento a elemento, sino que se suele desplegar todo el menú en sí, ocupando gran parte de la pantalla. Hombre, depende de cuántos elementos tengas, pero por ejemplo, imagínate el de Amazon, cuando le das para abrir el menú y se abre, se despliega todo ese gran menú con todas esas categorías, todas las opciones. Y te digo Amazon porque realmente esto es ideal, o digamos se suele utilizar mucho para tiendas online que tienen muchos productos y muchas categorías. Hay veces que hablando con clientes, les gusta este efecto de que se despliegue un menú, un megamenú, pero realmente tienen pocos productos o apenas tienen categorizado su e commerce y yo siempre aconsejo, o bueno, explico que esto suele usarse para tiendas que tienen muy categorizada su oferta de productos. En caso contrario tampoco lo llego a recomendar porque creo que pierde un poquito de sencillez. A mí siempre me gusta cuanto más sencillo para el usuario mejor. En cualquier caso se puede utilizar para cualquier tipo de web, no tiene por qué ser ni una tienda online ni que tenga muchos productos. Y el plugin más utilizado para esto y que os recomiendo es Max Mega Menu. Os lo dejo en la parte de enlaces. ¿Recuerda que si vas a Gonzalo Navarro es 178, lo tienes? Y voy a abrirlo porque recuerdo que tiene muchas. Sí tiene más de 300.000 instalaciones activas y te recomiendo que veas el vídeo de presentación del plugin, cuando te voy a dejar enlace, digamos a la página de WordPress de plugins de Megamenu, pues te hacen como una presentación de lo que puedes hacer con su versión gratuita en un vídeo. Te recomiendo que le eches un vistazo porque vas a ver que puedes hacer cosas súper interesantes, no sólo convertir tu menú normal en un mega menú, sino que además puedes añadirle iconos, decidir cuánto quieres que ocupe cada elemento, si quieres que se despliegue todo de golpe o solo quieres que el comportamiento de Mega Menú sea para un elemento de menú concreto y sus hijos en lugar de para todo el menú concreto. Es bastante interesante y bastante completo, por eso es tan utilizado. Ya digo, más de 300.000 instalaciones activas, es un plugin muy popular dentro de WordPress. Esta es una funcionalidad que puedes extender con un plugin. Vamos a la siguiente funcionalidad que es crear un menú responsive. Y tú me dirás, bueno Gonzalo, seguramente si yo tengo un thing, pues ese menú o ese thing que he cogido, si es medianamente bueno tendrá su menú responsive. Sí, pero si no lo tuviera, que lo dudo, o si quieres mejorar el menú para dispositivos móviles, puedes crearlo desde cero. Podrías hacerlo por código por supuesto, pero puedes crearlo desde cero con algún que otro plugin. Hay varios plugins para esto, os voy a recomendar dos que son los que mejor están creo yo, y que son gratuitos y básicamente lo que hacen es que cuando tu web esté en dispositivo móvil o en un dispositivo más pequeño que X, que lo que tú elijas, pues que te aparezca este menú que tú vas a crear y puedes personalizarlo con muchísimas opciones, cambiar todo, el texto, el color de fondo, los bordes, todo sin usar código, simplemente con las opciones de esos plugins, poner la tipografía, los tamaños, la alineación que tú quieras hacer, que aparezca por la izquierda, que aparezca por la derecha, cuánto quieres que ocupe de ancho cuando ese menú responsive digamos para móviles se despliegue, en fin. Bueno las opciones son, ahora mismo estoy mirando uno de los plugins que os voy a recomendar y te dice que tiene 150 opciones de personalización, que combinando las pues puedes llegar a tener 22.500 opciones, bueno os voy a dejar el enlace. Este plugin se llama Responsive Menu y el segundo que tiene, A ver, tiene 100.000 instalaciones activas y el siguiente se llama WP Responsive Menu que tiene 70.000, no tiene tantas, pero este es más sencillo, no tiene tantas opciones como el otro y quizás dependiendo de lo que necesites pues sea más rápido de configurar. Aunque los dos funcionan de forma bastante similar, comprobarás que si ves las demos que te ponen comprobarás que son bastante similares. Esto es para si quieres crear tu menú independiente, tu menú responsive desde cero, el típico con la hamburguesita que pues aparece en toda la pantalla y con las opciones que tú quieras, los colores que quieras y demás. La siguiente opción también súper útil y muy demandada es añadir iconos al menú de WordPress y esto pues lo típico, si quieres añadir iconos para redes sociales, que se suele hacer o en el menú secundario arriba del todo o se suele hacer también en la parte del footer, si es que tienes menú de navegación en el footer pues es interesante. ¿Y otra forma en la que se suelen también añadir iconos al menú es acompañando al texto, por ejemplo que en el enlace que te lleva a la página de inicio pues salga una casita típica de home, de ir a inicio, en la de contacto pues que salga a lo mejor un dibujo de un correo, en la de blog pues que salga algo relacionado con lectura, esto también es bastante típico, se suele utilizar también combinado con megamenús, los menús estos que digo que se despliegan para las distintas categorías y el plugin que os voy a recomendar te permite usar una fuente de iconos, digamos tú la activas, no tienes todas las fuentes de iconos activas, sino que activas la que tú quieras, porque? Pues tienes todas las típicas Dash Icons, Font Awesome, las más típicas las tienes y otra cosa que te permite que es muy útil es subir imágenes, incluso además te da soporte para subir imágenes en SVG, que ya sabéis que es una de las más óptimas porque pesan muy muy muy poco, con lo cual vas a poder poner una imagen, un icono personalizado que tú quieras que te hayas descargado por ahí o que hayas creado tú mismo y el impacto de carga pues va a ser mínimo, con lo cual vas a tener un rendimiento muy bueno y el plugin te permite decidir si quieres que se muestre texto más icono como te decía o simplemente el icono solo. El plugin se llama Menu Icons, he hablado de él en otras ocasiones y es también tremendamente popular, más de 100.000 instalaciones activas. ¿Y por último vamos a hablar de cómo puedes habilitar soporte para shortcodes en los menús de navegación, que esto es algo también que se pide bastante y que te permite? Pues básicamente si tú utilizas algún plugin que mediante un short code puedes mostrar cierto contenido, pues lo típico, esto lo hacemos con los plugins de formulario muchas veces con algunos plugins de redes sociales que tú creas en su panel de administración digamos qué elementos de redes sociales o qué menús quieres, qué iconos quieres y luego con un shortcode los pones donde quieras o los típicos estos plugins que te ofrecen prácticamente hacer cualquier locura y después mediante un shortcode mostrarla donde quieras o como te he comentado en la clase 10 del curso de golpes avanzado te enseño a crear tus propios shortcodes. En definitiva si usas shortcodes y quieres mostrar el contenido de esos shortcodes en un elemento de menú, por defecto no puedes, así que el plugin Shortcode in Menu te permite hacerlo y uno de los ejemplos más claros que me he dejado ahora cuando te daba algunos ejemplos es cuando quieres poner una barra de búsqueda seguramente o en algún momento has podido pensar en añadir un plugin de búsqueda para mejorar la búsqueda que ya tienes o para crear una búsqueda nueva. Pues casi todos estos plugins te dan la opción de tú, mediante el shortcode, poner pues eso, la barra de búsqueda donde quieras, pero si la intentas poner en el menú de navegación no vas a poder, por lo que te digo que no permite shortcodes. Pero si activas este plugin que se llama shortcoating Menus y del que te dejo también enlace en esta parte, pues lo tendrás y ya podrás utilizar shortcodes en los menús. Básicamente cuando lo instalas te aparece una nueva opción cuando vas a Apariencia, menús, que te permite añadir shortcodes directamente. Es muy sencillo, no tiene más. Sí, Pues ahí tienes toda la información. Te animo de verdad a conocer todo lo que te ofrecen los menús de WordPress, que creo que tienen muchas más opciones de la que parece, sin tener que añadir plugins, sin tener que añadir absolutamente nada. Pero después si necesitas alguna de las cosas concretas de las que hemos hablado, pues has visto que siempre puedes extender sus posibilidades con algún plugin específico. Así que pásate por la parte de enlaces. Gonzalo Navarro es 178 y ahí tienes todo lo que he ido comentando, las notas del programa por si quieres revisar algo. Así que a por ello. Y. Y recuerda que si te ha gustado el episodio de hoy, si has aprendido algo y quieres aportar tu granito de arena, quieres agradecérmelo de alguna forma, pues puedes de forma muy sencilla, simplemente dejándome una valoración en Apple Podcast. Es muy fácil, vas a tu aplicación de podcast, buscas WordPress semanal, bajas hasta donde pongas reseñas y ya puedes dejar tus estrellitas, tu valoración escrita si así lo quieres. Y es un gesto que de verdad no te va a llevar nada de tiempo y que te agradezco muchísimo. Y para el resto de vosotros, que sois un montón, los de ivoox, los de Spotify, los de cualquier agregador de podcast, también ya sabéis que os agradezco mucho lo que podáis hacer y que os animo también a ello, a que aportéis vuestro granito de arena con un me gusta, con un comentario, lo que podáis hacer dependiendo de la plataforma en la que estéis, más allá de suscribiros y así recibiréis siempre el episodio más reciente. Nada más, por este episodio, nos seguimos escuchando. Adiós.
More from Gonzalo
518 | Redes sociales, precios personalizados, audios desde Drive y temas de bloques (Q&A)
513 | Por qué sigo usando estos plugins después de tantos años (y cuáles he abandonado)