Hoy te voy a mostrar cómo crear menu WordPress para que al pasar el ratón sobre los elementos del menú veas como se despliegan todas las páginas que pertenecen a una categoría.
Es más fácil de lo que te puedes imaginar y compatible con cualquier plantilla que estés utilizando, pero lo dicho, lleva bastante trabajo manual porque no hay forma “automática” (por lo menos no una chula) de ir agregando las páginas y post -en orden- que se vayan creando al menú.
También te enseñaré cómo hacer que los enlaces del menú se abran en una pestaña nueva por si deseas dejar algún tipo de afiliación en el menú de tu web.
Y para los AdSenseros que les mola el blackhateo les dejo una forma sencilla de ocultar el menú en WordPress sin perder su utilidad a nivel de SEO.
¿Cómo hacer un menu desplegable en WordPress?
Para crear un menú en WordPress basta con hacer posar el ratón sobre Apariencia y luego hacer clic en Menús.
![buscando la opción para crear menús en WordPress apariencia menus wordpress](https://1.bp.blogspot.com/-grswhxm1ejQ/Xs-snbF2M_I/AAAAAAAALEU/L_ru9BwqtHYUmn2pwedu1FYWv7rraSi0QCK4BGAsYHg/d/apariencia-menus-wordpress.jpeg)
Una vez dentro del apartado de “Menús” debes hacer clic en crea un nuevo menú.
![Crear nuevo menú Crear nuevo menú](https://1.bp.blogspot.com/-GZMv2y1-ENw/Xs-yxbg_edI/AAAAAAAALE0/fs8mPkvwozMf3UwGbnUxykgtkiopuy21QCK4BGAsYHg/d/crear-nuevo-menu-wordpress.jpeg)
El siguiente paso será darle nombre al menú y clicar en Crear menú.
![Nombre del menú y botón de crear Nombre del menú y botón de crear](https://1.bp.blogspot.com/-Z5fvhguolD4/Xs-zv_obPFI/AAAAAAAALFM/GQuQNFgN72U-XsVpLar5IzByX0VnOktnwCK4BGAsYHg/d/nuevo-menu-wordpress.jpeg)
Ya con el menú creado puedes elegir entre:
- Páginas
- Entradas
- Enlaces Personalizados
- Categorías
Para agregar al menú, también puedes seleccionar su ubicación. Recuerda que la posible ubicación vendrá determinada por tu plantilla.
![Opciones disponibles para los menús de WordPress Opciones disponibles para los menús de WordPress](https://1.bp.blogspot.com/-lnuWIs4goIE/Xs-1Mtnr57I/AAAAAAAALFs/MCCtL-EokrU9_pMgo54wqAzbA-48XAKfQCK4BGAsYHg/d/sleccionar-paginas-y-entradas-menu-wordpress.jpeg)
Selecciona las páginas y/o entradas que quieras añadir al menú y presiona el botón Añadir al menú.
![Seleccionando páginas que necesitamos aparezcan en el menú de WordPress Seleccionando páginas que necesitamos aparezcan en el menú de WordPress](https://1.bp.blogspot.com/-L94BzI6XWlo/Xs-1st-71YI/AAAAAAAALGA/30clTqBUZZIT0-tnXlNFsOdlmET1h8VJQCK4BGAsYHg/d/agregar-paginas-y-entradas-menu-wordpress.jpeg)
Las páginas y/o entradas que has agregado van a lucir de esta manera:
![Versión preliminar del menú Versión preliminar del menú](https://1.bp.blogspot.com/-A3dNj00GTgM/Xs-2Hf9M8SI/AAAAAAAALGU/fuilqQKuS14ecIoLBFe4Tfpa1P5guHKuwCK4BGAsYHg/d/paginas-y-entradas-menu-wordpress.jpeg)
Para agrupar las entradas dentro de una opción desplegable hay que crear una suerte de “página” padre que va a juntar todas estas dentro de una sola opción del menú.
![Crear enlace personalizado en un menú de WordPress Crear enlace personalizado en un menú de WordPress](https://1.bp.blogspot.com/-XmXAPkF7GCw/Xs-2lyoCLFI/AAAAAAAALGs/RjzzXzrcBPsELXfQJWBE2EETFI0GQ2SDQCK4BGAsYHg/d/paginas-y-entradas-anidadas-menu-wordpress.jpeg)
Una vez creado el “padre” de las entradas -para que se vuelvan hijos desplegables en el menú- debes agruparlas debajo de donde las quieres desplegar quedando algo como:
![Crear menú desplegable en WordPress Crear menú desplegable en WordPress](https://1.bp.blogspot.com/-GiIr9pQXgw0/Xs-2_YSKWrI/AAAAAAAALHE/TSQ9NZApOCcDTk_FM_TK9naUrGDKhIB1QCK4BGAsYHg/d/desplegar-menu-wordpress.jpeg)
El efecto conseguido es el de un menú que al posar el mouse encima se despliegan todos los hijos que posee:
![Visualizando el menú desplegable que hemos creado en WordPress Visualizando el menú desplegable que hemos creado en WordPress](https://1.bp.blogspot.com/-RchP3gPGfLU/Xs-3lhgoBvI/AAAAAAAALHc/uERwI2TClu8IMKiMAFbMXEPJKIXjduvzwCK4BGAsYHg/d/menu-desplegable-wordpress.jpeg)
Para agregar nuevos elementos debes hacerlo a mano, siguiendo este mismo procedimiento, cada vez que publiques una entrada en esa categoría.
Crear menú WordPress ¿Se puede abrir en una nueva pestaña los elementos?
Para abrir los elementos del menú en una nueva pestaña debes ubicar en la esquina superior derecha el botón Opciones de pantalla ? y marcar la casilla ✅ Destino del enlace tal que así:
![Habilitando la opción para abrir enlaces en una nueva pestaña desde el menú en WordPress Habilitando la opción para abrir enlaces en una nueva pestaña desde el menú en WordPress](https://1.bp.blogspot.com/-eAsBnOFnKo4/Xs-413g4wVI/AAAAAAAALH8/sKXWMWWyBpsDhzrpLC6m0Bfg4dqW1TsNwCK4BGAsYHg/d/menu-destino-del-enlace-wordpress.jpeg)
Una vez hecho eso te va aparecer, en los elementos del menú, una nueva casilla que podrás marcar para que se abran los links en una nueva pestaña:
![Activando la opción para abrir en una nueva pestaña Activando la opción para abrir en una nueva pestaña](https://1.bp.blogspot.com/-4bmNIEbiSDw/Xs-5Jut2OHI/AAAAAAAALIU/Iurf30t5Q2AWRMOrcD8bGXEgyMFL404TACK4BGAsYHg/d/menu-wordpress-abrir-en-una-pestana-nueva.jpeg)
¿Cómo ocultar el menú en una página WordPress?
Para ocultar el menú en WordPRess usa el modo inspeccionar de tu navegador y verifica el nombre de la clase que le está dando los estilos CSS al div que contiene el menú:
![Buscando los estilos CSS que gobiernan el div que contiene el menú en WordPress Buscando los estilos CSS que gobiernan el div que contiene el menú en WordPress](https://1.bp.blogspot.com/-9KLY_2owsSg/Xs-5eCWsqlI/AAAAAAAALIo/nNGP5fo2Aygii6tOgsYy7Dpk1ntGNZyIwCK4BGAsYHg/d/css-div-menu-wordpress.jpeg)
![Seleccionando el estilo CSS que va ocultar el menú en WordPress Seleccionando el estilo CSS que va ocultar el menú en WordPress](https://1.bp.blogspot.com/-_ow27OYdMT8/Xs-5gSkvw9I/AAAAAAAALI0/141DvA-NmO86MsDBRaX9Gl7Qbn5A7rX1ACK4BGAsYHg/d/css-div-menu-wordpress-codigo.jpeg)
Luego es necesario que te ubiques en Apariencia >> Personalizar y vayas a CSS adicional.
![Agregando CSS adicional en WordPress Agregando CSS adicional en WordPress](https://1.bp.blogspot.com/-C6kwFVIlCaQ/Xs-6bADMnZI/AAAAAAAALJw/IrDqwzQjUkgNn84LYFsowYo2ZoL4kXSzgCK4BGAsYHg/d/ocultar-menu-wordpress-truco-adsense-css.jpeg)
Una vez aquí puedes dejar instrucciones CSS que van a sobreescribir las que tiene tu theme (plugins) para dejar todo a tu gusto (o necesidad).
Para que desaparezca el menú basta con agregar la propiedad “display:none”, en mi caso el código sería algo como esto:
.regular_header #secondary-navigation{ display:none; }
Lo dejo en el CSS adicional:
![Ocultar menú en WordPress Ocultar menú en WordPress](https://1.bp.blogspot.com/-H4-nwAJEvKk/Xs-7SbsMMJI/AAAAAAAALKM/Lb3Ms2DIm3gD4322BT03jQsOT34icjmKwCK4BGAsYHg/d/ocultar-menu-wordpress-truco-adsense-css-codigo.jpeg)
Con esto “desaparece” el menú y lo digo entre comillas porque a ojos del usuario no está, pero a ojos de san gluglu sigue ahí, por ende, se puede seguir usando con fines de SEO. ?
Este truco es bastante guapo para webs CTA de AdSense donde quieres que el usuario use tu banner de links en lugar del menú de la web.
Eso es todo por esta entrada, si tienes dudas sobre alguna parte del proceso las puedes dejar en los comentarios y te respondo, de momento, me despido. ?