Cómo ocultar el menú en una página concreta en WordPress

¡Buenos días! En este artículo veremos cómo esconder el menú de WordPress en páginas en las que no nos interese que se muestre.  ¡Vamos allá!

YouTube video

Antes de todo, puede ser que os interese este articulo que escribí sobre cómo crear ubicaciones de menú en WordPress, para que podáis crear vuestras propias ubicaciones sin depender de los menús del theme.

En este ejemplo haré que un menú de navegación se muestre sólo en la página del blog y en ninguna más. Sin más preámbulos, empecemos.

Paso 1: Identificar las clases y los IDs de páginas y menús

Para poder apuntar a ciertas páginas y menús por CSS necesitamos saber su clase o ID. Para conocerlo podemos utilizar el inspector del navegador que estemos utilizando, apretando el botón derecho dándole a Inspeccionar (en Chrome).

En mi caso, como voy a mostrar el menú sólo en el blog, busco la clase del body de la página de las entradas (que es .blog) y la del menú que me interesa mostrar (#blog-menu):

Una vez identificados, pasamos al CSS

Paso 2: Modificar el CSS para mostrar y ocultar el menú

Hay muchas formas de ocultar contenido con CSS. Aquí veremos la más sencilla.

Puedes revisar aquí diferentes métodos de cómo añadir y modificar el CSS en WordPress.

Una vez que accedas a tu forma favorita de añadir CSS, tenemos dos opciones:

  1. Por un lado, si el menú se va a mostrar en menos páginas que en las que no se va a mostrar (como es mi caso, que sólo se mostrará en el blog) lo que podemos hacer es hacer que no se muestre en ninguna página (excluir todas las páginas) y luego indicar que sólo se muestre en el blog (incluir ciertas páginas)
  2. Por otro lado, si si el menú se va a mostrar en más páginas que en las que no se va a mostrar simplemente excluiríamos las páginas en las que no se mostraría.

No te asustes, ahora veremos cada caso por separado.

Primer caso

En el caso del ejemplo que pongo, sólo quiero que mi menú se muestre el la página del blog y no se muestre en ninguna más. Así que lo más lógico sería decirle a WordPress que lo esconda de todas las páginas y luego decirle que lo incluya en las que nos interesa. Así que el CSS sería éste:

#blog-menu {
display:none;
}

.blog #blog-menu {
display:block;
}

De esta manera el menú sólo se muestra en la página que contenga la clase .blog.

Segundo caso

Si por ejemplo tenemos nuestro menú de toda la vida pero no queremos que sólo se muestre en una o unas pocas páginas concretas, simplemente aplicaríamos un display:none a la clase de esas páginas.

Primero deberíamos averiguar la clase de la página y lo podemos hacer con el mismo inspector:

De esta manera, para no mostrar el menú sólo en esta página, el código CSS sería el siguiente:

.page-id-608 #blog-menu { 
display:none;
}

Advertencia: a veces hay confusión con el tema de la clase page-id. Aunque sea un page-id, sigue tratándose de una clase así que en el CSS se debería poner con un punto y no con el símbolo de hashtag como sería en el caso de un ID.

Y ya estamos! Si quieres aprender más truquillos de CSS que pueden facilitarte la vida, échale un vistazo a esta guía: Sencillos cambios y ajustes de CSS.

¿Eres una agencia o diseñador y necesitas un servicio profesional de maquetación web?
Tu web maquetada pixel-perfect en tiempo record con las mejores prácticas de desarrollo y optimización de velocidad
Servicio maquetación web