266 | Los menús de navegación de WordPress [A fondo]

En el episodio 266 de WordPress semanal te explico en detalle qué son los menús de navegación en WordPress, cómo funcionan y cómo puedes usarlos aprovechando todo su potencial. Vamos allá. Hola, hola, Soy Gonzalo, de GonzaloNamarro. Es y bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress principio a fin. Porque ya lo sabes, no hay mejor inversión que la de aprender a crear y gestionar tus propias webs con WordPress. Y hoy vamos a hablar de qué son los menús de navegación, porque es un tema que aunque parezca sencillo, aunque parezca básico, sí que detecto que gente que ya lleva un tiempo haciendo webs tiene algunas lagunas de concepto con esto de los menús. Porque hay dos detallitos clave, de los que te voy a hablar más adelante en este episodio, que muchas veces no se tienen en cuenta, se pasan por alto y Y luego hay opciones dentro de la gestión de los menús de nuestras webs que muchas veces se pasan por alto, quizás porque a veces están medio escondidos. Así que vamos a hablar de todo ello, de qué son los menús, de los dos conceptos clave, qué elementos se pueden poner en un menú, cómo mejorar y aprovechar los menús de navegación. Y mencionaré soluciones que ya he cubierto en mi web a través de código, de preguntas frecuentes o de cosas que la gente me dice oye Gonzalo, me gustaría hacer esto en mi menú de navegación. Y que realmente, pues digamos, no se puede por defecto en WordPress. Y yo lo tengo cubierto en vídeos. Simplemente haré mención a ellos por si os interesa y queréis ir a ampliar información. Todo esto en un momentito, pero antes, como siempre, novedades. ¿Qué está pasando en Gonzalo Navarro es esta semana? Pues por un lado tenéis el vídeo 216 de la zona código, donde os enseño a crear enlaces para que la gente os pueda enviar emails, enviar mensajes SMS o incluso llamar. Lo hacemos todo por código, con código HTML, que es muy sencillito, ya veréis. Simplemente tenéis que copiar, pegar y luego sustituir, por ejemplo, el texto que queráis que salga, por ejemplo, llama, llámame. Os enseño cómo podéis adaptarlo a vuestro caso, poniendo el texto que queráis y el número de teléfono que correspondan, el formato adecuado que hay que ponerlo y demás. Lo mismo para enviar un SMS, os enseño incluso cómo dejar un texto ya predefinido si quieres, por ejemplo cuando alguien le da, imagínate que pones una sección en tu página de contacto de escríbenos, mándanos un mensaje o un sms, cuando la gente le dé desde su móvil, claro, se le abre o desde un dispositivo que pueda enviar mensajes como un iPad o lo que sea, pues se le abre y puedes que ya aparezca un mensaje ahí predefinido, por ejemplo, necesito ayuda para no sé qué o lo que sea, lo que queráis. Y lo mismo con los correos electrónicos, que cuando alguien le dé, se abra el programa, el cliente de correo que se esté utilizando en ese ordenador en concreto o en ese teléfono móvil y que ya venga con el asunto predefinido si quieres y con el cuerpo predefinido si quieres. Y por supuesto a qué emails va a enviar, en este caso sería el tuyo, el tuyo de soporte, de contacto o lo que sea. Todo eso lo vemos como digo en el vídeo 216 de la zona código, simplemente tenéis que ir a GonzaloNamarro, es si estáis suscritos pues vais a la parte de códigos y ahí lo tenéis, ¿De acuerdo? Si no tenéis un buscador, ponéis enlaces emails, enlaces sms y os va a salir sí, Eso en cuanto a los vídeos de la zona código. En cuanto a cursos, ya sabéis que el curso más reciente publicado es el curso de Google Tag Manager, ahí vemos cómo aplicar muchas de las cosas que te puede ofrecer este gestor de etiquetas a los que tenemos páginas webs con WordPress para poder medir mucho mejor las acciones que toman nuestros usuarios. Ya hablé de todo ello en profundidad con José Manuel en el episodio que dedicamos a Google Tag Manager, en el episodio 263, así que si queréis empaparos un poquito más, Gonzalo Navarro es 263. Pero bueno, ya sabéis que tenéis cursos de todo, este en concreto es de marketing, como también hay otros enfocados al SEO, enfocados a la analítica y luego por supuesto cursos puro y duro de WordPress, WordPress básico, intermedio, avanzado, cómo llevar el mantenimiento de webs, cómo crear contenidos, como por ejemplo cómo crear un podcast, productividad, cursos de temas de WordPress específicos, cursos de plugins de WordPress populares, en fin, todo lo necesario, ya sabéis para crear y gestionar webs de forma profesional. Ya sabéis que en Gonzalo Navarro ES tenéis toda la información. Esas son las novedades. Vamos ahora con el plugin de la semana, que es un plugin que un oyente me contactó y me dijo que le echara un vistazo a ver qué me parecía y que si parecía que estaba bien, pues que si por favor lo podía compartir con vosotros. Y si, es un plugin que no lleva mucho, que está activo en muy poquitas webs y que sirve para informar al cliente sobre el estado de un pedido o de un envío que se hace a través de una tienda con WooCommerce, con WordPress y WooCommerce, y te permite añadir a través de un shortcode una opción para mostrar un campo en el que el cliente puede poner su número de pedido y le muestra en qué estado está, por qué orden va, si ha salido ya para ser enviado, si está en tránsito, si se ha entregado. Lo típico como cuando compramos en Amazon o donde sea, o en otras tiendas que nos dan esa opción. Esta es una pequeña herramienta que ellos mismos lo dicen. Para facilitarte todo esto tenéis un vídeo donde os explican cómo funcionan y bueno, os dejo el enlace para que podáis echar un vistazo a la página y lo podáis probar. Fantástico. Ahora sí, nos vamos con el tema, los menús de navegación de WordPress a fondo y primero muy rápidamente, ¿Qué son los menús de navegación? Todos lo sabemos, pero ya sabéis que me gusta que estemos en la misma línea. A ver, los menús realmente no son más que enlaces que ponemos en un lugar específico de nuestra web y que permiten a los visitantes ir a distintas zonas, lo que pasa que suelen tener un formato específico, reconocible, donde la gente sabe que eso es un menú y que ahí pues eso se puede guiar, puede ir a las distintas partes que uno tiene en una web. Y estos enlaces, estos menús pueden estar en distintos lugares, pueden estar en la cabecera y en el pie de página de la web, pueden estar en una barra lateral. Lo más habitual es el menú de la cabecera, suele ser el menú principal, que suele estar al lado o en la misma zona donde está el logo o el nombre de la web. Eso desde el punto de vista visual, desde el punto de vista del que llega a nuestra web, desde el punto de vista nuestro como gestores, como webmasters, los que llevamos nuestra web los gestionamos desde el panel de administración de WordPress, concretamente desde el menú apariencia, digo menú dentro de la administración de WordPress, apariencia, menús y lo que nosotros vayamos gestionando ahí, pues por supuesto se ve reflejado después en la parte frontal. Bien, bueno, una explicación bastante básica de lo que son los menús de navegación. Ahora, hay dos conceptos clave, que esto es lo que yo creo que muchas veces se pasa por alto o no se entiende del todo bien, y es el concepto de ubicación de menú y luego el del menú de navegación en sí. Esto de ubicación de menú no es otra cosa que dependiendo del tema que tengamos instalado, vamos a tener unos espacios disponibles para colocar nuestros menús de navegación. Al principio te decía que los menús de navegación pueden estar en la cabecera, en el pie de página, en la barra lateral, sí, siempre y cuando tengamos un espacio habilitado o desarrollado por el thing que usamos para colocarlo. Un ejemplo típico, hay gente que me pregunta, oye Gonzalo, me gustaría poner el menú debajo del logo, sin embargo, puede ser que el tema que esté utilizando esa persona que me lo pregunta, no dé esa opción, sino que simplemente dé la opción de poner el menú al lado del logo. ¿Por qué? Porque sólo tiene esa ubicación de menú. Si uno quisiera ponerlo en otro lado, tendríamos que a través de código, desarrollar otra ubicación, crear otro espacio para poder colocar ese menú. Esto en el curso de WordPress avanzado y en la zona código y en otros vídeos lo explico, pero ya sería algo un poco más avanzado. Tenemos que tener en cuenta que muchas veces si no tenemos conocimientos de código, tenemos que elegir bien el tema que queremos utilizar. Por eso muchas veces yo digo, cuando elijáis un tema, pensad bien en si estructuralmente os vale, porque luego los contenidos de cada página y de cada entrada o lo que sea, se pueden cambiar, pero estructuralmente, salvo que tengas conocimientos de código o uses un constructor visual que te permita modificar todo eso, pues no vas a poder cambiarlo. Entonces, cuando elegimos un tema de WordPress, lo más importante, si te gusta estructuralmente, si ves que las áreas habilitadas para colocar menús de navegación son las que tú quieres, si las áreas habilitadas para colocar widgets, que esto también es un poco el mismo concepto, los widgets, por ejemplo, dentro de WordPress tenemos eso, los widgets, que son las cosas que podemos colocar en espacios y luego los espacios habilitados para colocar esos widgets, es un poco lo mismo, áreas de widget y luego widgets en sí. Pues lo mismo con los menús. Este es una de las cosas más importantes que hay que entender en cuanto a los menús, son para mí los dos conceptos clave. Ahora, una vez sabemos eso, que por un lado tenemos ubicaciones de menú, es decir, espacios donde podemos colocarlos y por otro ya tenemos los menús en sí, pues vamos a ver cómo podemos crear esos menús o qué podemos colocar en esos menús. Entonces, cuando nosotros nos vamos a donde yo te decía, dentro de apariencia menús, dentro del panel de administración de WordPress, ahí podemos primero crear un menú nuevo o editar uno que ya tengamos creado y decir dónde se va a mostrar, en qué espacio, en qué ubicación. Una vez lo hagamos vamos a poder añadir elementos a ese menú de navegación y los elementos no dejan de ser otra cosa que enlaces, así que podemos poner enlaces a cualquier sitio, a donde quieras, a contenidos de tu web, ya sea una página, una entrada, una imagen, incluso a páginas de categoría, páginas de archivo como la página del blog, o enlaces externos, enlaces hacia afuera. También se pueden poner enlaces que lleven a zonas concretas de una página. Ya os he explicado en algún otro vídeo, lo dejaré enlazado, cómo poder crear enlaces que lleven a una zona concreta dentro de una página. Por ejemplo, imagínate que en mi página de inicio tengo la presentación de un producto, después tengo las características, los beneficios y abajo tengo los precios, pues yo podría colocar un enlace directamente a esa zona de los precios. Esto se puede hacer y podemos poner ese enlace dentro de una página o lo podemos poner en un menú de navegación. En un menú de navegación también podemos crear desplegables, que los desplegables es muy sencillo crearlos, esto es, nos ponemos encima de un elemento del menú de navegación y aparecen otros debajo que comúnmente se conocen como submenús. Pues esto se puede hacer de forma sencilla también desde la parte de administración, simplemente poniendo uno de los elementos del menú debajo de otro. Y luego otras cosas habituales, pues se pueden crear también por ejemplo botones, que básicamente lo que hacemos es a uno de los elementos del menú que hayamos puesto, pues le damos estilos por CSS para que tenga aspecto de botón. A veces nuestros temas o el tema de WordPress que estés usando trae una clase por CSS que la puedes poner a ese menú de navegación específico y coge estilo de botón, coge aspecto de botón, pero bueno, en otras ocasiones lo tenemos que crear nosotros. Yo tengo vídeos explicando todo esto, ahora lo comentaré. Entonces, de esta forma nosotros podríamos tener por ejemplo un menú de navegación principal que normalmente va a ir en la cabecera de nuestra web, ya sea al lado del logo de la web o debajo, dependiendo de las ubicaciones, dependiendo de lo que nos permita el tema que estemos usando. Y luego también es habitual por ejemplo tener otro menú de navegación en el pie de página, en el footer, y ahí podemos poner a lo mejor algún enlace de contacto, podemos poner enlaces a nuestras políticas de privacidad, podemos poner enlaces a nuestras redes sociales. Dentro de todo esto, esto es un poco lo básico, qué son los menús, cómo funcionan y demás. Después hay opciones como más avanzadas dentro de los menús que ya vienen en las opciones de los menús de WordPress e incluso nosotros podemos extender lo que se pueden hacer con estos menús, con los plugins. Ya sabéis que Los plugins de WordPress nos permiten eso, extender las posibilidades de algo. En este caso podemos extender las posibilidades de lo que se pueden hacer con los menús de WordPress. Primero recomendarte el episodio del podcast 178 que se llama Cómo mejorar y aprovechar los menús de WordPress. Ahí os hablo exclusivamente de cómo ir más allá de las partes avanzadas y de los plugins que podéis utilizar para mejorarlos. Entre las partes avanzadas lo destaco rápidamente, si tú te vas a la esquina dentro del panel de administración, cuando estás editando o creando menús, si te vas a la esquina superior derecha, hay una parte que se llama opciones de pantalla, si haces clic en ella te van a aparecer opciones extra que puedes hacer que aparezcan para cada elemento de menú que tú estás editando, que tú estás poniendo en un menú de navegación. Por ejemplo, vas a poder habilitar opciones para que puedas decidir si un elemento de tu menú de navegación quieres que se abra cuando alguien haga clic, quieres que se abra en esa misma página o en una pestaña diferente. Puedes añadir la opción de poner una clase de CSS para esto que te decía yo, de por si tú quieres después por CSS editarlo para convertirlo en un botón, puedes añadirle a nivel de información meta más cosas como darle un atributo al título o incluso poner una descripción, algo parecido a los que podemos hacer con las imágenes por ejemplo, pues son estas opciones avanzadas que están ocultas por defecto normalmente, pero que tú desde esas opciones de pantalla puedes habilitar y si tuvieses algún plugin añadido también podrías tener opciones extras ahí, como por ejemplo añadir un icono al lado de un elemento del menú. Esto es muy habitual y se suele pedir mucho, esto lo puedes hacer con el plugin menu icons, pero como digo en el episodio 178 Gonzalo es 178, ahí hablo de todo esto, de estas propiedades avanzadas que te he dicho, de cómo crear mega menús, que son los menús estos que se suelen ver en tiendas online, que se despliegan como con muchísimas opciones, por ejemplo que te sale, imagínate que estás comprando en una tienda de ropa y te vas al menú, te pones encima de uno y de repente se despliega y te aparece ropa de hombre y debajo pues todas las categorías, ropa de mujer y debajo todas las categorías, deporte y todas las categorías. Y así ¿No? Pues esos son mega menús. En el episodio te explico qué puedes utilizar para también lo que te comento de añadir iconos al menú, de añadir soporte para shortcode, para que tú puedas poner un shortcode en la parte de los menús y mostrar algo especial, no lo sé, a lo mejor un botón que tú tengas creado previamente o incluso una caja para que la gente se suscriba o algo muy habitual, poner una barra de búsqueda o un icono de búsqueda. Esto si da soporte para que se puedan utilizar shortcodes, te va a permitir hacerlo de forma más sencilla, así que te recomiendo como digo, para ampliar, para ir un paso más allá que vayas a ese episodio. Y por último comentarte algunas soluciones por código a peticiones bastante populares sobre cosas que hacer con los menús de WordPress de tu web. Por ejemplo, me habían preguntado bastante cómo poder centrar el logo y el menú de navegación en un tema de WordPress, porque no todos los temas traen esa disposición, no todos los temas traen esa posibilidad, entonces te enseño a hacerlo por código. En el vídeo 167 te voy a dejar todos los enlaces. Otra petición popular es cómo personalizar un elemento de menú concreto cuando se está en esa página, es decir, imagínate que alguien navega por tu web y le da dentro de tu menú de navegación, le da a ir a contacto, pues que mientras esté en esa página de contacto, ese elemento del menú se destaque de alguna manera para indicar al usuario dónde está y que después si va, imagínate a sobre mí, pues lo mismo, o si va a inicio, lo mismo. Eso lo explico en el vídeo 117 de la zona código. En otro de los vídeos, en el 28, os explico cómo crear botones en los menús de navegación. Básicamente le damos aspecto por CSS o cambios por CSS para lograr el aspecto de botón en esta línea. En otro de los vídeos de la zona código, en el 45, os explico cómo crear botones de login y de cerrar sesión y que se muestren en el menú de navegación. Todo esto por código, sin plugins ni nada. Y otro de los vídeos, que es ya más avanzado incluso, os enseño cómo crear menús condicionales en función de si un usuario está conectado o no está conectado. Esto se puede hacer con plugins, pero en este caso yo os enseño a hacerlo por código, es decir, mostrar un menú de navegación u otro dependiendo de si el usuario o de si el visitante ha iniciado sesión o no lo ha hecho. Todo esto lo tenéis en la zona código y muchos vídeos más, ya sabéis, hay más de 200, o sea que tenéis un montón. Y todos estos os lo voy a dejar enlazados porque tienen mucha relación con con lo que hemos visto. Por último, recordad que en el curso de WordPress básico, en la clase 8, repaso a fondo todo lo que tiene que ver con los menús, todo lo que he comentado de esas partes avanzadas, de opciones de pantalla, todo eso lo tenéis ahí en vídeo, bien explicado paso a paso. Y ya sabéis que encima El curso de WordPress básico es gratuito, o sea que estéis suscritos o no, podéis ir y verlo. Dejaré la clase específica, la dejaré enlazada, que de nuevo, aunque ya llevéis tiempo con WordPress, muchas veces la gente se apunta y me Gonzalo, mi idea es hacer esto, esto y esto, ¿Qué cursos me recomiendas? Y yo siempre les digo, bueno, aunque ya veo que ya tienes una web y tal, te recomiendo primero que veas el curso de WordPress básico, sáltate si quieres las páginas, perdón, los vídeos de cómo contratar el dominio, cómo contratar el hosting, y tal, pero sí que recomiendo echar un vistazo al funcionamiento por dentro de verdad de WordPress, porque muchas veces como ya empezamos a hacer cosas más avanzadas, se nos olvidan lo básico o a lo mejor no lo hemos aprendido nunca incluso además podéis ver el vídeo a doble de velocidad, yo lo hago muchas veces, en el reproductor del vídeo tenéis una ruedecita y podéis cambiar la velocidad a la que va el vídeo. Si es algo que ya domináis o estáis viendo un vídeo por segunda vez, pues lo recomiendo. Sí nada más, por último deciros, estoy haciendo episodios a fondo sobre elementos concretos de WordPress, que veo que en general puede haber alguna laguna. Ya hablé del personalizador de WordPress hace bastante tiempo, también hablé de la librería multimedia, cómo mejorarla, ahora os he hablado de los menús de navegación, si hay algún aspecto concreto dentro de la administración de WordPress o dentro de vuestra gestión del día a día que queráis que trate en detalle, ya sabéis que me podéis proponer lo que queráis en Gonzalo es sugerencias. Y nada, si os ha gustado el episodio ya sabéis que os agradezco un montón, si podéis compartirlo con alguien a quien penséis que le va a gustar o si queréis dejar una valoración ya sea en iTunes o un comentario en Ivoox, o si me escucháis desde Spotify, compartirlo. Cualquier acción que toméis que ayude a que llegue este podcast a más gente, pues ya sabéis que os agradezco un montón. Nada más por este episodio, nos seguimos escuchando. Adiós.