WordPress: Diferentes métodos de añadir y modificar el CSS

¡Buenos días! En el artículo de hoy vamos a ver tres formas diferentes para añadir CSS a nuestra página web hecha en WordPress, y también las ventajas y desventajas de cada método. ¡Vamos allá!

Método 1: campo de personalización de CSS proporcionado por el theme

La mayoría de los themes, por no decir todos, permiten añadir CSS personalizado en sus opciones. Normalmente, en los themes ligeros esta opción se encuentra en el menú de personalización del theme, en Apariencia > Personalizar. Ahí debe aparecer una pestaña tipo Custom CSS o CSS adicional, como es mi caso. Ahí podemos meter nuestros estilos CSS y funcionará de maravilla.

Ventaja: usando este método podemos ver los cambios que realizamos en tiempo real, sin tener que guardar y recargar la página.

Desventaja: si cambiamos de theme nuestros estilos personalizados también desaparecerán así que deberemos importarlos o escribirlos de nuevo.

Método 2: añadir CSS a través de un plugin

Existe una variedad de plugins que nos permite añadir nuestro propio CSS al WordPress. Sin embargo mi favorito es Simple Custom CSS por lo simple y ligero que es, pero sois libres de probar cualquier otro.

Ventaja: al usar un plugin nuestros estilos permanecerán aunque cambiemos de theme.

Desventaja: no podemos ver los cambios en tiempo real. Para combatirlo es recomendable usar el inspector de Chrome o Mozilla para ver los cambios y luego pegarlos al plugin.

Método 3: añadir CSS modificando los archivos css

Todos los themes vienen con archivos css que se pueden modificar. El archivo de css principal es el style.css pero pueden haber más dependiendo de la complejidad del theme. Si se va a modificar el archivo siempre es mejor modificar el style.css directamente. Se encuentra en el directorio de nuestro tema, en wp-content/themes/mitema.

Ventaja: si tenemos todos los estilos en un mismo documento significa que el navegador sólo cargará un recurso css lo cual mejora la velocidad de la carga.

Desventajas: no podemos ver los cambios en tiempo real y los cambios desaparecerán si cambiamos de theme. Además, si el theme se actualiza los cambios se perderán también.

Para no perder los cambios al actualizar el theme, se debe modificar el style.css del tema hijo y no del tema padre. Aquí puedes consultar cómo crear childthemes para aprender a hacerlo de manera correcta.

¿Qué método me recomiendas utilizar?

Esta es fácil:

También te puede interesar

Cómo añadir código PHP en WordPress
WordPress: Cómo personalizar la página del error 404
WordPress: Cómo crear una galería elegante con Fluidbox
WordPress: Cómo añadir un widget area