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:
- Si lo que vais a estilizar son elementos que no forman parte del theme sino de un plugin (por ejemplo woocommerce) recomiendo utilizar el segundo método, ya que si cambiamos de theme (pero mantenemos el woocommerce) seguiremos teniendo nuestros estilos personalizados para ese plugin.
- Si vais a estilizar elementos que forman parte del theme podéis usar el primer o el tercer método, teniendo en cuenta que la ventaja del primer método es que permite ver los cambios en tiempo real.
- El tercer método se recomienda para usuarios más avanzados, que usan una plantilla a medida o un childtheme para no perder los cambios tras la actualización, o mejor dicho para la gente que sabe lo que hace 😀
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
