Una de las mayores ventajas de WordPress es que permite crear un sitio web atractivo y convincente con pocos o ningún conocimiento de programación. Con cientos de temas profesionales y el flexible editor de bloques de arrastrar y soltar, es una solución excelente para quienes crean su propio sitio web.
Pero ¿qué ocurre si quieres ir un paso más allá y realizar personalizaciones visuales más profundas? CSS es una de las formas más rápidas de cambiar el aspecto de tu sitio web.
¿Qué es CSS?
CSS (hojas de estilo en cascada) determina el diseño y el aspecto visual de tu sitio web: colores, fuentes, márgenes, tamaños, etc. Con unos conocimientos básicos de CSS, puedes cambiar el aspecto de todas tus páginas y entradas o centrarte en elementos concretos y realizar cambios puntuales.
La sintaxis básica de CSS tiene este aspecto:
| selector { property: value; } |
El selector es el elemento al que quieres aplicar un estilo: un encabezado, un párrafo, una página, una imagen, un enlace, etc.
La propiedad es la categoría que quieres cambiar: por ejemplo, el color o el tamaño de la fuente, el borde o el fondo. Puedes aplicar varias propiedades a cada selector.
El valor define la propiedad: el color concreto, un tamaño de fuente determinado, la anchura exacta del borde, etc.
Fíjate en el formato: la propiedad y el valor están separados por dos puntos y se incluyen entre llaves. Después de cada valor se añade un punto y coma.
En la práctica, para cambiar de negro a naranja el color del encabezado anterior, que es una etiqueta <h1>, usarías lo siguiente:
- Selector: h1
- Propiedad: color
- Valor: orange
| h1 { color: orange; } |
Cómo aplicar CSS a tu sitio
Si tienes poca experiencia con CSS, o ninguna, no pasa nada. Puedes conseguir mucho con una comprensión básica de los fundamentos. Además, con la función CSS personalizado de Jetpack, no tendrás que preocuparte por modificar los archivos del tema ni por estropear tu sitio web.
Para activar el CSS personalizado, ve a Jetpack → Ajustes → Escritura en el panel de administración de tu sitio. Desplázate hacia abajo hasta la sección «Mejoras del tema» y activa la opción «Mejorar el panel de personalización de CSS».
Para añadir CSS, ve a Apariencia → Personalizar → CSS adicional. Aquí es donde escribirás el CSS que quieras añadir. Para ayudarte, el editor de CSS de Jetpack utiliza colores para que sea más fácil diferenciar los selectores, las propiedades y los valores.
Al añadir o editar CSS, puedes obtener una vista previa de los cambios antes de guardarlos, para saber exactamente qué aspecto tendrán antes de aplicarlos a tu sitio web público. Además, Jetpack almacena las últimas 25 revisiones del CSS, por lo que puedes volver a un diseño anterior si no te convence el nuevo aspecto. Obtén más información sobre cómo usar CSS personalizado.
Cinco formas de personalizar tu sitio con CSS
Cada elemento de tu sitio web tiene un selector, por lo que puedes utilizar CSS para cambiar prácticamente cualquier cosa. Si quieres aprender a encontrar selectores, este tutorial es excelente, pero aquí tienes cinco cambios que puedes hacer ahora mismo con el código CSS ya preparado.
Tipografía
Uno de los usos más habituales de CSS es aplicar estilos a la tipografía o las fuentes del sitio. Para cambiar tanto el color como el tamaño de los títulos (Encabezado 1, Encabezado 2, etc.) de todo tu sitio, utiliza este código y modifica los valores como quieras:
| h1 { color: #FF5733; font-size: 36px; } |
El ejemplo anterior solo modifica el Encabezado 1. Si quieres cambiar el color y el tamaño de fuente de otro encabezado, como el Encabezado 3, sustituye el selector h1 por h3 y ajusta el tamaño y el color según corresponda:
| h3 { color: #FF5733; font-size: 25px; } |
Para cambiar el color de varios encabezados, separa los selectores con comas:
| h1, h2, h3, h4, h5, h6 { color: #FF5733; } |
Y para que todos los encabezados aparezcan en mayúsculas y destaquen más, utiliza esto:
| h1, h2, h3, h4, h5, h6 { text-transform: uppercase; } |
Enlaces
Los hipervínculos deben destacar del texto normal para que los visitantes sepan de inmediato en qué texto pueden hacer clic. Haz que tus enlaces destaquen cambiando su color y añadiendo un subrayado:
(¿No quieres subrayar los enlaces? Elimina «text-decoration: underline;» del código siguiente).
| a { color: #63B892; text-decoration: underline; } |
Si quieres que el enlace cambie de color cuando alguien pase el cursor por encima, añade «:hover» al selector:
| a:hover { color: #FF5733; } |
Listas
Si utilizas muchas listas con viñetas en tus entradas y páginas, prueba un poco de CSS para que destaquen aún más del resto del contenido.
Para que la viñeta sea un círculo y cambiar el grosor, el color y el tamaño de la fuente, utiliza este código:
| ul { list-style-type: disc; color: #9663B8 ; font-size: 25px; font-weight: bold; } |
Si solo quieres cambiar una de estas propiedades, incluye únicamente la línea correspondiente a lo que quieras modificar.
¿Quieres aún más opciones? CSS-Tricks.com explica todas las opciones de estilo para las listas, como utilizar cuadrados o imágenes como viñetas, y ofrece más consejos y atajos.
Elementos del menú
Muchos temas ofrecen varias opciones de menú principal para que puedas elegir la que mejor se adapte a tu sitio. Pero ¿qué ocurre si quieres personalizar aún más el estilo del menú?
En el ejemplo anterior, utilizamos CSS para añadir un fondo verde personalizado a los elementos del menú y cambiar el color del texto cuando el usuario pasa el cursor por encima:
| .site-header .menu li:hover { background: #eff3ec; } .site-header .menu li:hover a { color: #fff; } |
Widgets de la barra lateral
Los widgets de la barra lateral son una forma excelente de mostrar contenido útil, por lo que quizá quieras que destaquen del resto del sitio. Utiliza el código siguiente para añadir un fondo detrás de estos widgets y relleno (espacio adicional) alrededor del texto:
| .widget { background: #e8f2fd; padding: 25px; } |
Aplicar CSS a páginas concretas en lugar de a todo el sitio:
Todos los fragmentos de CSS anteriores se aplican a todo el sitio: modifican esos elementos en cada página y en todos los lugares donde aparecen. ¿Y si solo quieres aplicar CSS a una página o entrada concreta?
WordPress asigna a cada página y entrada un ID único que puedes encontrar en el escritorio de WordPress:
- Ve a la página o entrada que quieras personalizar y haz clic en Editar página en la barra negra de la parte superior del escritorio.
- En la barra de URL, busca algo parecido a “?post=74.” El número
“74” cambiará, ya que corresponde al ID específico de tu entrada o página.
Para aplicar CSS a la página o entrada concreta, añade el número a «.page-id-» en tu código CSS. Para cambiar el color de la fuente del Encabezado 1 solo en esta página, utilizarías lo siguiente:
| .page-id-74 h1 { color: #FF5733; font-size: 36px; } |
Recuerda: la vista previa es tu aliada
Si no tienes mucha experiencia con CSS, quizá te preocupe realizar cambios que puedan estropear tu sitio. No te preocupes. Mientras editas, aparecerá una vista previa de los cambios en tiempo real.
Experimenta con el código y realiza los cambios que quieras. Haz clic en Guardar y publicar cuando estés conforme con el aspecto del CSS actualizado.
También hay una función de historial de CSS que registra cada vez que guardas los cambios. Esto significa que, si cambias de opinión, puedes volver rápidamente a una versión anterior. Para hacerlo, haz clic en Ver historial completo en la parte inferior del Personalizador. Elige la fecha y la hora a las que quieras volver y pulsa Restaurar esta revisión para aplicarla.
Recursos adicionales sobre CSS
- Un código hexadecimal especifica el color que quieres utilizar al modificar fuentes o fondos. Si no sabes cuál elegir, HTML Color Codes ofrece una solución excelente. Explora su selector de colores para encontrar el tono perfecto y, después, copia y pega el código hexadecimal que genera.
- CSS-Tricks.com ofrece fragmentos de código CSS con niveles de dificultad que van desde principiante hasta experto. También encontrarás tutoriales, vídeos y guías para seguir aprendiendo.
- W3Schools es un recurso práctico con ejemplos y guías paso a paso de CSS.
- WordPress.com ofrece información sobre los conceptos básicos de CSS y sobre cómo utilizar consultas de medios para establecer CSS según el dispositivo.
- Upwork.com es un socio de WordPress que ofrece especialistas autónomos capaces de ayudarte con proyectos de CSS.
Empieza a personalizar tu sitio de WordPress
La mejor forma de aprender CSS básico es empezar a experimentar. Puedes personalizar o ajustar todo el código anterior para adaptarlo a tus necesidades: utilízalo como base y empieza a cambiar colores, modificar tamaños de fuente o realizar cualquier otro cambio que quieras.
Con el editor personalizado de Jetpack para CSS, puedes sumergirte de lleno en la personalización sin preocuparte por estropear tu sitio, gracias a las herramientas de vista previa y las funciones para deshacer cambios. Para obtener una protección adicional, activa Jetpack Backup, que crea copias de seguridad automáticas de tu trabajo en tiempo real e incluye restauraciones con un solo clic.
Descubre más sobre otras funciones de diseño de Jetpack y empieza a usar el CSS personalizado de Jetpack.
Jetpack 