Hemos visto aquí mismo en el blog montones de ejemplos de cambios de CSS con los que modificar estilos en nuestra web o tienda online, pero siempre han sido modificaciones de CSS que se aplicaban a todo el sitio web, o como mucho a elementos del sitio, pero en todo el sitio, por ejemplo, a los enlaces de toda la web, a los H1 o lo que sea.
Pero en ocasiones nos surge la necesidad de aplicar cambios de estilo mediante CSS que afecten únicamente a páginas, productos o entradas específicas, en vez de a toda la web ¿y eso cómo se hace?
Identifica la publicación
Para poder aplicar cambios de CSS, o lo que sea, a una publicación específica primero tenemos que saber cómo referirnos a esa página, entrada o producto, cómo hacer referencia a qué publicación afectará el cambio que apliquemos ¿no?
Pues bien, tienes básicamente 2 maneras sencillas de identificar la publicación:
- En la URL de la publicación al editarla.
- En el código fuente de la publicación.
Editando la publicación
Si optas por la primera opción, por ver la URL de la publicación (entrada, producto, etc.) al editarla, simplemente tienes que fijarte en el número que aparece en la dirección, a continuación de post=, que será el ID único de la publicación.
Ahora bien ¿cuál será el ID de cada una?, ¿vale con poner el número? En realidad no.
Si usamos los ejemplos anteriores, los IDs de las publicaciones serían estos:
- Página:
page-id-701 - Producto:
postid-7604
La regla es la siguiente:
- Si es una página el ID es
page-id-123, siendo 123 el ID de la página al editarla, - Si es una entrada o un producto, o cualquier otro tipo de contenido, el ID es
postid-123, siendo 123 el ID del producto o entrada al editarla.
Inspeccionando el código fuente
El método anterior está bien, pero yo personalmente prefiero localizar el identificador inspeccionando el código fuente de la publicación.
Solo tienes que hacer clic derecho y, a continuación, hacer clic en la opción de «Ver código fuente de la página» del menú emergente.
Se abrirá una pestaña nueva del navegador, donde tienes que buscar el ID de la publicación que estabas viendo, y nada más fácil. Si dudas en si es una página o entrada, o producto, busca (Control + F en Windows o Comando + F en Mac) la apertura ‘<body‘ y en esa misma línea encontrarás la clase y el ID de la publicación.
Por ejemplo, si estás en la portada de la web, la clase será normalmente home, y con eso ya te vale, aunque puedes buscar también, casi siempre en la misma primera línea de apertura del cuerpo, el ID, y las reglas son las mismas que antes:
- Si es una página el ID será así:
page-id-123. - Si es una entrada, un producto o cualquier otro tipo de contenido el ID será así:
postid-123.
Por ejemplo, el ID de esta entrada de blog que estás leyendo es postid-152417, y puedo verlo tanto en el editor mientras la estoy publicando, como en el código fuente una vez haya hecho un primer guardado.
Aplica el CSS condicional específico
Ahora que ya sabemos a qué ID o clase aplicar un CSS específico solo nos queda hacerlo, añadir los estilos que queramos que solo afecten a publicaciones concretas.
Aquí da igual el método que prefieras, editar la hoja de estilos del tema hijo, usar la sección de CSS adicional del personalizador o del editor de WordPress, o incluso un plugin, el método es el mismo.
CSS para una página, producto o entrada específica usando el ID
Lo siguiente sería un ejemplo de CSS que se aplicará únicamente a un producto, con el ID 2065:
/* Quitar descripcion corta solo al producto 2065 */
.postid-2065 .woocommerce-product-details__short-description {
display: none
}
Una vez guardes los cambios, se ocultará la descripción corta solo en el producto con el ID 2065.
CSS para una página específica usando la clase
Otro caso de uso sería aplicando la clase, en cuyo caso nos valdría un ejemplo como este:
/* No mostrar estrellitas en los archivos de categorías de productos */
.archive.tax-product_cat .star-rating {
display: none
}
En el ejemplo anterior quitamos las valoraciones con estrellas (.star-rating) de las páginas de archivo de categorías (.archive.tax-product_cat), dejándolas en el resto de páginas de archivo, como la tienda, por ejemplo.
CSS para varias páginas, productos o entradas específicas
Para finalizar, este sería un ejemplo de aplicar un mismo CSS específico a varias páginas o publicaciones, en este caso usando los IDs:
/* Quitar descripcion corta a los productos 2065 y 2071 */
.postid-2065 .woocommerce-product-details__short-description,
.postid-2071 .woocommerce-product-details__short-description {
display: none
}
Solo hay que separar la lista de publicaciones con una coma, y luego ya aplicamos el CSS a todas las listadas.
Y nada más por hoy, espero haberte ayudado a aplicar CSS a páginas, productos o entradas específicas, y sobre todo a comprender cómo hacerlo. Cualquier duda que te quede hazla en la sección de comentarios de abajo.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Hola Fernando, soy el propietario de un resort y estoy renovando nuestra página web, me pregunto si podrías proporcionarme más contenido sobre esto de CSS, yo uso plantillas de wordpress pero a veces si que se requiere cierta personalización que la plantilla no proporciona. me pregunto si hay algún libro y/o blog post que indague más en esto.
Gracias, de parte de Daniel.
Excelente articulo.