Con esto haremos cambios en el aspecto de una página especifica en wordpress, es muy útil para hacer cambios rápidamente sin tener que crear plantillas determinadas para cada cambio que queramos realizar en una página. Cuando quieres por ejemplo quitar algún elemento de tu sitio en determinadas páginas, a veces en las landing page queremos quitar el menú de navegación principal, en alguna sección de nuestro sitio podemos querer cambiar el fondo de nuestra página web…
Yo lo utilizo a menudo para en algunas landing pages quitar los menus de navegación y que se centren en el contenido de esa página y no se vayan del objetivo.
Lo primero: Saber el ID de nuestra página a cambiar
Es necesario saber que ID tiene nuestra página, post u otro objeto que queramos modificar el css, para saberlo tenemos que ir dentro del escritorio de wordpress a la pagina o entrada que queremos editar, y en la URL podremos ver su ID:
Y por último: Cambios en nuestro css
Nos vamos a nuestro archivo de estilos CSS y añadimos lo siguiente:
.page-id-236 navigation-menu{display:none;}
Tenemos que poner el id según nuestra página a modificar y a continuación los estilos css que queramos modificar.
De esta forma rápidamente podremos hacer cambios en una página especifica sin tener que realizar plantillas nuevas, ya que estos cambios tan pequeños no merece la pena tener que hacer una plantilla especifica para cambiar el fondo, o quitar el menu de navegación.
Muchas gracias no sabia de esto , yo lo hacia mediante php pero esto es mucho mejor ya que no sobrecargo el servidor ni la BD . saludos.
Hola Miguel Ángel. ¿Se puede modificar el CSS para cada categoría de producto? Es que dices en tu artículo que hay que saber el ID de la página a modificar, pero no consigo averiguar el ID de cada una de las cuatro categorías de producto.
Gracias. Saludo.
Juan Manuel Alcaide
Hola,
Perdon por el tiempo en contestar.
Hay una forma que no he probado pero he leido que si funciona sería la siguiente sintaxis:
.category-15 #content .entry-title { font-size: 20px; } <-- category-XX este número lo puedes sacar viendo el codigo fuente de la categoría en tu navegador (CTRL + U). Hay otra forma que si que he probado pero es un poco más tostón: Puedes crear una plantilla para cada categoría y asignarle una clase distinta a cada categoría y despues modificarla con CSS. Un saludo!
hola todos tengo un problema necesito modificar el css de un album especifico http://ls.ideas.technology/kci/?owlabgal_album=album1 solo tengo que cambiar una letras que dicen Browser album pero no se por hacer para hacerlo, es decir intente usando
.owlabgal_album-album1page-side, title, second-part{
display: none !important;
}
pero no me funciono
Hola Alex,
En este caso tendrías que escribir lo siguiente:
.term-30 .page-side .title .second-part{ display:none;}
con el term-30 haces que se dirija exactamente a ese album en concreto.
Si lo quieres quitar de todos los álbum lo mejor sería que editaras la plantilla de la taxonomía album y quitaras esa parte.
Hola buenas!
trucazo, es bestial para atacar sólo a los elementos de páginas en concreto!
Lo he usado pero tengo un problema:
En algunos navegadores se ve, y en otros no… y en movil igual. En el chrome de ordenador desaparece, pero en el de movil aparece… no se si hay reglas especiçificas del hide para distintos navegadores.
Gracias!
Buenas,
No hay reglas especificas por navegador, lo que tendrías que mirar es si tu theme cambia los nombres de las clases o similar según el navegador, es algo extraño pero no se me ocurre otra cosa. Hay themes que por ejemplo para versiones de mobile cargan una clase adicional y a lo mejor esa es la que hace que no te active la regla del CSS.
Espero que puedas dar con la solución, intenta utilizar el inspector de elementos con varios navegadores y para la versión mobile puedes usar Responsinator.com
Saludos!
Muy buen post. Un recurso totalmente práctico para nuestros WordPress
Muchas gracias
Gracias a ti por comentar!
Genial esta solución que nos das para no «cargarme» toda la web.
Lo que necesito es ocultar el Preguntas frecuentes (FAQ) de una página de membresía. Esta no tiene ID en la URL.
¿Como lo hago?
Gracias
Rosa
Buenas, las páginas también tienen una ID .page-id-XXXX
Muchiiiiiiiisisisisisimas gracias, llevo todo el día buscando la solución, estaba pensando crear platillas por cada pagina :v
Me alegro de que te haya ayudado, así mejor y más rápido 😉
Hola Miguel Ángel.
Mira que es un tema útil, práctico y de necesidad y solo tú lo explicas de manera fácil y funcional. Muchas gracias.
Yo quería preguntarte qué selector se utiliza para una página concreta de producto en woocommerce.
Saludos!
Gracias ricardo.
Pues sería algo así .postid-(IDDELPRODUCTO) mira en el editor del producto en la URL la ID que tiene tu producto y lo sacas, si la ID es por ejemplo 124 el selector sería .postid-124
Un saludo
Hola, buenas Miguel Ángel, como estas? Trate de usar este atajo pero no tuve exito, no se que fallo, simplemente no carga la instruccion css.
Buenas, si es un post, un producto o una categoría cambia la clase del css, tienes que inspeccionar el elemento y ver la clase con la que carga el body y modificarla. Pero que funciona 100% es cuestión de que algo está fallandote. No se el qué.
Todo esto está guay, mi problema es que quiero aplicar estilos diferentes a mi página de entradas y no consigo obtener un id único. Hay alguna manera?
Revisa la clase del body, suele ser body.blog body.main body.home… depende de la configuración de tu web. WordPress siempre añade una clase o un id al body. Con el inspector de elementos del navegador podrás verlo.
capooo 2018 y me has ayudado fullll. Gracias
Wow sorprendente!, Miguel Angel me gustaria eliminar la imagen principal de todas las páginas de productos
.not-body #div-noticia-img {
display: none;
}
de esta URL:http://contamos.com.co/producto/camiseta-prueba-2-no-comprar/
Me podrias ayudar?
Muchas gracias por compartir
Buenas, no se por que tu theme no tiene el marcado de clases de WordPress para las taxonomías o custom post type, es bastante raro.
Por lo que lo que yo haría sería modificar el archivo php de la cabecera de tu theme y modificarlo usando la condicional de woocommerce «IS_PRODUCT».
Si no sabes bien hacer o tienes problemas contactando con algún programador te lo hará en 5 segundos.
Aquí tienes más info sobre los condicionales de Woocommerce: https://docs.woocommerce.com/document/conditional-tags/
Miguel Angel buenos dias!, el tema fue creado por otra persona hace años y a mi me encargaron la funcion de instalar la página y las membresias, por lo que voy a usar la condicional de woocommerce “IS_PRODUCT” que me mencionas, pero no se en que archivo modificarlo, estas son las paginas que se encuentran en la plantilla creada, (style.css)
Funciones del tema
(functions.php)
css carpeta
style2.css
icetex.html
js carpeta
articulos-rel.php
barra-inferior.php
barra-lateral.php
Plantilla de categoría
(category.php)
Comentarios
(comments.php)
Pie de página del tema
(footer.php)
front-page-150916.php
front-page-z.php
Página de inicio
(front-page.php)
header-int.php
Cabecera del tema
(header.php)
Página de entradas
(home.php)
Plantilla de la página principal
(index.php)
Página simple
(page.php)
Resultados de la búsqueda
(search.php)
Barra lateral
(sidebar.php)
Entrada individual
(single.php)
social-share.php
woocommerce.php
fonts
*la de woocommerce.php la cree yo, pero no la reconoce.
De nuevo muchas pero muchas gracias por tu ayuda!!
Hola Miguel buenas tardes, ya logre solucionarlo, era necesario modificar el funtions.php del tema, añadirle esta linea
add_action( ‘after_setup_theme’, ‘woocommerce_support’ );
function woocommerce_support() {
add_theme_support( ‘woocommerce’ );
}
Luego de esto ya reconocio la pagina woocommerce.php que ya habia creado.
Muchas gracias, aprecio mucho tu ayuda.
Muy buen post, me ayudo mucho, buscar en el default.css aparte del style.css . Asi Hice yo y me funciono.
buenos dias
Una preguntilla, que a lo mejor es muy sencilla; necesito hacer una pagina en blanco, sin nada, ni menus ni imagenes de fondo del tema que tengo en wordpress; estoy intentando hacer eliminando todos los parametros, pero no me deja bien, por el tema de donde aparecen las publicaciones (margenes y demás)
Probe con el .page-id-1184 {display:none;} y claro no se ve nada….
Vamos resumiendo, solo quiero que me salga en la pagina, en fondo blanco, un codigo (es un reproductor soutcast) para reproducir una emisora de radio
hay alguna manera de poder hacerlo???
Lo mejor es crear una plantilla de página. Pero si no sabes hacerlo con CSS puedes, el problema es que una vez que selecciones el page-id-1184 tendrás que elegir que elementos no mostrar. por ejemplo:
.page-id-1184 .header, .page-id-1184 .footer {display:none;}
Esto tienes que comprobarlo con las clases y el código de tu página.
Meu amigo muito obrigado, dormi pensando como ajustar, gracas a Deus vc me ajudou a encontrar a solução!
Deus te abençoe
Muy buen aporte, si señor! mis dieses!!
Gracias Borja!
No mames, gracias!! Me sirvió muchísimo!!!
Buen día amigo como podría ocultar el rango de precios variables en un producto en especifico?
Tendrías que ver la clase del body de ese producto. Es parecido a lo que se explica en el artículo.
Hola el articulo me sirvio para modificar el inicio de mi pagina. Estoy trabajando con woocommerce y quise modificar solo la pagina de tienda, consigue el id de la pagina pero no pasa nada, sera que al convertirse en la pagina de la tienda cambia su id? en todo caso es algo genérico o es diferente para cada sitio? gracias
Grande Miguel!!! me salvaste la tarde, jajajjaja, venia renegando con un trabajo y aqui la solucion, merciiii
Amigo, muchas gracias. Busqué algo que me ayudara en innumerables páginas hasta que llegué aquí. Me funcionó perfectamente.
Muchas gracias, me fue de ayuda.
excelente, me sirvio super!!!! gracias!!!!
Buenas tardes, alguien podria orientarme por favor. Estoy trabajando en un woocommerce WCFM. Y me gustaria poder cambiar una pagina de tienda de vendedor, vamos un diseno distinto al que ofrece por defecto. Pretendo cambiarlo todo por un listado de platos, similar a la carta menu de un restaurante, pero sin fotos. Seria posible hacerlo? Como?
Gracias. Una luz en la oscuridad. Gracias a tu post encontré la solucion para un problema.