En algunas ocasiones, por la razón que sea, me han pedido que en determinada página de la web, quedara oculto alguno de los elementos del menú principal.
Aunque existen formas de hacerlo mediante programación, a veces, muchas veces, es más sencillo recurrir al CSS en lugar de complicarnos con funciones condicionales en PHP.
En este caso sólo necesitamos saber dos cosas, el atributo «id» del elemento del menú que queremos ocultar, y el id de la página donde ocultarlo.
Sabiendo esto, con una sola linea de CSS tendremos la solución para que no se muestre.
1- Para saber el ID de la página tenemos dos opciones,
- Editar la página desde el administrador y fijarnos en la url:
El ID de la página es el número que se muestra después de «post=»
- Inspeccionar el código html de la página y ver la clase asociada a la etiqueta body:
WordPress asigna automáticamente una clase a cada una de las páginas y posts de la web según su ID
2- Para saber el ID del elemento de menú:
Utilizaremos también el inspector de código, ya que WordPress también asigna a cada elemento, un atributo ID y una clase que contienen
Una vez sabemos el id de menú y la clase específica asociada a esa página, sólo tenemos que indicar en CSS que queremos ocultarlo:
.page-id-9377 #menu-item-8420 {
display : none;
}De esta forma, se ocultará ese elemento de menú solamente en esa página.
Aunque en este caso hemos visto un ejemplo muy concreto, lo cierto es que los atributos y clases específicas de página que WordPress asigna nos pueden ser muy útiles para poder aplicar estilos y modificar elementos mediante CSS en páginas concretas de una web.
¿Eres implementador o desarrollador WordPress?
En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:
ACCEDER AHORA
Comentarios
11 respuestas a «Ocultar un elemento de menu en una pagina en concreto»
|
hola Esther, quisiera saber como puedo saber el ID de la home. gracias
|
Hola! Puedes saberlo desde el admin de WordPress, editando la página y mirando en la url el parámetro post. Por ejemplo, si la url es /wp-admin/post.php?post=493&action=edit&classic-editor, el ID de la página es 493.
Saludos!
|
Buenos días, yo tengo que hacer algo parecido pero con código php, ¿me podrías explicar cómo hacerlo? Gracias.
|
Ya está conseguido, gracias de todos modos.
|
Genial! Me alegra que lo hayas conseguido.
|
Hola Esther, espero que estés bien, quisiera saber si me puedes ayudar por favor, sucede que requiero de ocultar o eliminar la opción de registrarse en mi web, no logro eliminar el botón del menú inicio de la pagina, agradecería a montones tu ayuda, gracias!!
|
Hola Natalia,
El elemento de menú deberías poder eliminarlo desde Apariencia > Menús, pero la opción de registrarse en la web, puedes desactivarla desde Ajustes > General > desactivando la opción de «Miembros: Cualquiera puede registrarse».
Saludos!
|
Hola Ester, genial post. No había visto hasta hora nada que me dijera que también tengo que indicar el id del item en wordpress. El problema es que no encuentro ese ID en Inspect por ninguna parte. Lo único parecido que encontrado con la etiqueta li es esto. menu-item-has-children:after
Estoy usando storefront y woocommerce y me gustaría eliminar header y footer de algunas páginas.
La id de la página la localizo bien. Creo que es el código que no funciona ya que no consigo ocultar nada. He probado a ocultar las migas de pan en un página en concreto y tampoco. Llevo ya dos días desquiciado. Te agredecería mucho la ayuda.
.page-id-109 #menu-item-has-children:after {
display: none;
}
Un saludo enorme!
|
Hola Álvaro!
Es complicado poder ayudarte porque cada caso es mundo, de todas formas, fíjate que en el código que indicas pones # que es para los ids, no se si en tu caso ha de ser .menu-item-has-children.
También ten en cuenta que estás ocultando el contenido del :after, no el del menú en sí.
No se si con eso te daré alguna pista, como digo es complicado sin conocer la maquetación concreta de la web.
Saludos!
|
Hola Esther! Si, ya me ha quedado claro que para «apuntar» a los ids es con el símbolo «#» y el punto se utiliza para las clases. ¿Es correcto? Al final lo conseguí quitando el header completamente. Te dejo el código por si le sirve a alguién. Igualmente, muchas gracias por tu reactividad. 🙂
.page-id-109 #masthead {
display:none;
}
¡Nos leemos sabandijer! 😛
|
Genial Álvaro!
Hay muchas formas de llegar al mismo sitio, lo importante es ir aprendiendo por el camino 😉
Nos leemos! 🙂