En WordPress, muchas veces queremos personalizar el diseño de una página, una entrada o un producto en WooCommerce sin afectar el resto del sitio. Esto puede ser útil si deseamos aplicar estilos únicos a una sección en particular, como resaltar un producto destacado, cambiar el diseño de una entrada específica del blog o modificar el aspecto de una página clave sin alterar otras.
Afortunadamente, WordPress asigna clases e identificadores únicos a cada tipo de contenido, lo que nos permite dirigirnos a ellos mediante CSS personalizado. En este artículo, aprenderás cómo encontrar estos identificadores y aplicar estilos específicos a una página, entrada o producto en WooCommerce, sin afectar el diseño general de tu sitio.
1. ¿Por qué editar el CSS de un contenido específico?
Algunas situaciones en las que podrías necesitar personalizar el CSS incluyen:
- Modificar el diseño de una página en particular sin afectar las demás.
- Resaltar una entrada de blog específica con un fondo diferente.
- Personalizar un producto en WooCommerce para que se vea diferente al resto.
- Ajustar elementos individuales en función del contenido.
WordPress asigna clases y/o IDs únicos a cada tipo de contenido. Podemos aprovechar esto para aplicar estilos específicos.
2. Cómo encontrar la clase o ID de una página, entrada o producto
Para poder aplicar CSS personalizado, primero necesitamos identificar el ID o clase del contenido específico. Para hacerlo:
- Abre la página, entrada o producto en el navegador.
- Haz clic derecho en cualquier parte de la pantalla y selecciona «Inspeccionar«.
- En las herramientas de desarrollador, busca la etiqueta
<body>. - Verás clases como:
.page-id-123(Para una página específica).post-456(Para una entrada de blog).product-789(Para un producto de WooCommerce)
El número de id- corresponde al ID del contenido en la base de datos.
3. Aplicar CSS a una Página Específica en WordPress
Si queremos modificar solo una página en particular (por ejemplo, cambiar el fondo de una landing page), usaremos .page-id-XX.
Ejemplo: Cambiar el fondo de una página específica
.page-id-123 {
background-color: #f4f4f4;
color: #333;
}
Lenguaje del código: CSS (css)Este código cambiará el color de fondo y el color del texto solo en la página con ID 123.
4. Aplicar CSS a una Entrada de Blog Específica
Para modificar una entrada en particular, usaremos .post-XX.
Ejemplo: Aumentar el tamaño del título en una entrada específica
.post-456 h1 {
font-size: 40px;
color: #ff6600;
}
Lenguaje del código: CSS (css)Este código aumentará el tamaño y cambiará el color del título <h1> solo en la entrada con ID 456.
5. Aplicar CSS a un Producto Específico en WooCommerce
En WooCommerce, los productos no usan post-XX, sino .product-XX.
Ejemplo: Resaltar un producto en WooCommerce
.product-789 .product_title {
font-size: 28px;
color: #d10000;
text-transform: uppercase;
}
Lenguaje del código: CSS (css)Este código hace que el título del producto se muestre en color rojo, con letras en mayúscula y un tamaño mayor. Solo afecta al producto con ID 789.
6. Dónde Colocar el Código CSS
Para agregar el CSS personalizado en WordPress, puedes hacerlo de varias maneras:
Opción 1: Usando el Personalizador de WordPress
- Ve a Apariencia > Personalizar.
- Haz clic en CSS Adicional.
- Pega el código CSS y guarda los cambios.
Opción 2: Usando un Plugin de CSS Personalizado
Si prefieres una solución más organizada, puedes instalar un plugin como:
Opción 3: Editando el archivo style.css del Tema Hijo
Si tienes un tema hijo, puedes agregar el CSS en el archivo:
/wp-content/themes/tu-tema-hijo/style.css
No edites el archivo style.css del tema principal, ya que perderás los cambios con futuras actualizaciones.
7. Consejos Finales y Buenas Prácticas
- Usa
!importantsolo cuando sea necesario. - Verifica la compatibilidad con dispositivos móviles.
- Mantén el código limpio y organizado con comentarios.
- No edites directamente archivos del tema principal, usa un tema hijo o el personalizador de WordPress.
Conclusión
Personalizar el diseño de páginas, entradas o productos en WordPress mediante CSS es una excelente manera de mejorar la apariencia sin modificar el código del tema. Con los métodos explicados, puedes modificar solo el contenido que necesites sin afectar el resto del sitio.
Prueba estas técnicas y dale un estilo único a tu sitio web.
Nos vemos en el siguiente tutorial. Un saludo.
¿Te ha resultado útil?