El CSS es un lenguaje que se usa para definir el aspecto y la presentación de los elementos de una página web, como los colores, las fuentes, los márgenes, el tamaño, etc. ¿Quieres aplicar CSS en WordPress del modo correcto? En este artículo te explicamos cómo hacerlo.
El CSS se puede aplicar a cualquier tipo de página web, pero en este artículo nos vamos a centrar en cómo usarlo en WordPress, el sistema de gestión de contenidos más popular del mundo. WordPress te permite crear y administrar fácilmente tu propio sitio web, sin necesidad de saber programar. Sin embargo, si quieres personalizar el diseño de tu web, es posible que necesites usar un poco de CSS. Si quieres conocer más, aquí te explicamos qué es el CSS y en qué puede ayudarte.
¿Cómo añadir o modificar CSS en WordPress?
Hay varias formas de añadir o modificar CSS en WordPress, dependiendo de tus necesidades y preferencias. Algunas te permiten hacerlo desde el propio panel de WordPress, otras requieren navegar y editar los ficheros de configuración, y con algunas modificar solo algunas páginas en especifico. También hay métodos más avanzados, pero hoy nos centraremos en las más sencillas y comunes.
Usar el Personalizador de WordPress
El personalizador de WordPress es una herramienta que te permite modificar el aspecto de tu web en tiempo real, viendo los cambios antes de guardarlos. Para acceder al personalizador, tienes que ir al menú Apariencia > Personalizar de tu panel de administración de WordPress. Dentro del personalizador, hay una sección llamada CSS adicional, donde puedes escribir o pegar el código CSS que quieras aplicar a tu web. Esta opción es la más sencilla y recomendable para los principiantes, ya que no afecta al código original de tu tema o plantilla de WordPress.
Con un plugin de edición de CSS en WordPress
Otra forma de añadir o modificar CSS en WordPress es usar un plugin específico para ello. Un plugin es un complemento que amplía las funcionalidades de WordPress. Hay muchos plugins de WordPress que te permiten editar el CSS de tu web, como por ejemplo:
- Simple Custom CSS: Uno de los más populares y recomendados, ya que es tan simple de utilizar y pocas configuraciones que para lo que buscamos en este artículo es ideal. Además no repercutirá en el rendimiento de tu web, pues es muy ligero.
- CSS and JS: Similar al anterior pero con algunos añadidos más, ya por su titulo verás que también permite trabajar con Javascript (JS). Pero tiene otras cosas interesantes como escoger si queremos ese código en el header o en el footer por ejemplo, entre otras cosas.
- WP Add Custom CSS: El más avanzado de los tres que te proponemos. Con este podrás tener tu propia área de edición CSS dentro de las páginas, post y custom post types que quieras.
Estos plugins suelen tener una interfaz donde puedes escribir o pegar el código CSS que quieras, y aplicarlo a todo el sitio web o a páginas específicas. Esta opción es más avanzada que la anterior, y te da más flexibilidad y control sobre el CSS de tu web.
Editar el famoso style.css de WordPress
La forma más directa de añadir o modificar CSS en WordPress es editar el archivo style.css de tu tema o plantilla de WordPress. El archivo style.css es el que contiene el código CSS que define el estilo de tu web.
Para editar este archivo, puedes buscarlo en el directorio de carpetas de WordPress. Deberías encontrarlo en wp-content > themes > tu-tema > style.css. Para navegar hasta aquí será vía el explorador de archivos si lo tienes en tu ordenador.
Si quieres hacer lo mismo pero cuando la web ya está en tu hosting, deberás buscarlo en la misma ruta pero para acceder te recomendamos entrar vía FTP. Hay modos más avanzados y seguros como el SSH, pero se escapan del foto de este artículo.
La última de las opciones es editarlo directamente desde el editor de archivos de WordPress, que se encuentra en el menú Apariencia > Editor de temas. Allí puedes seleccionar el archivo style.css de tu tema y modificarlo a tu gusto. Pero trabajar desde allí puede traer consecuencias no deseadas. No lo recomendamos, podrías provocar errores o conflictos en tu web.
Crear tu propio child-theme
Uno de los problemas que tiene el método anterior, es que si modificas directamente el archivo style.css del tema de WordPress que estás usando, si por alguna razón este tema se actualiza, se perderán los cambios que habías hecho. Quedarán sobrescritos por el nuevo archivo que traiga el tema.
Por esa razón, es mejor opción crear un child-theme del tema original que estás usando. De este modo, los temas quedan enlazados y las personalizaciones de código que hagas en tu child-theme sobre el tema original sin correr el riesgo que pierdas tus cambios al actualizarse.
Ejemplo de código CSS en WordPress
Para que veas cómo funciona el CSS, te vamos a mostrar un ejemplo sencillo de código CSS que puedes usar para cambiar el color y el tamaño del título de tu web. El código es el siguiente:
.site-title {
color: blue;
font-size: 36px;
}Este código significa que el elemento con la clase .site-title (que suele ser el título de tu web) tendrá el color azul y el tamaño de fuente de 36 píxeles. Puedes cambiar estos valores por los que quieras, o añadir más propiedades CSS para personalizar más el estilo.
Para aplicar este código a tu web, puedes usar cualquiera de las opciones que te hemos explicado antes: el personalizador de WordPress, un plugin de WordPress o el archivo style.css de tu tema. El resultado será el mismo, solo cambia la forma de hacerlo.
Conclusión
Como has visto, el CSS es un lenguaje muy útil para personalizar el aspecto de tu web en WordPress. Hay varias formas de añadir o modificar CSS en WordPress, desde la más sencilla hasta la más avanzada. Te recomendamos que empieces por la más sencilla, el personalizador de WordPress, y que vayas experimentando con el código CSS hasta conseguir el diseño que te guste.
