Todo usuario de WordPress se ha encontrado con la necesidad de cambiar algún aspecto visual de la plantilla que esté usando, ya sea el color de algún texto, el espaciado de elementos, ancho de imágenes para que se adapten a pantallas más pequeñas, etc.

Con un poco de conocimiento de HTML y CSS podemos cambiar estas características fácilmente en WordPress. Para ello, tenemos varias opciones, veamos cada uno de los métodos para añadir CSS adicional a WordPress.

Personalizador WordPress (CSS adicional)

CSS Adicional del Personalizador de WordPress


Desde la versión de WordPress 4.7, el CMS ofrece la opción de editar el CSS desde el panel del personalizador. Para ello, accedemos desde el menú a “Apariencia” > “Personalizar“, y elegimos “CSS adicional“. Desde este panel podemos personalizar de una forma sencilla y directa el contenido de nuestra web WordPress.

Ventajas de usar el CSS adicional del personalizador de WordPress

La ventaja que presenta añadir código CSS desde el personalizador de WordPress es que los cambios que vayamos aplicando se irán aplicando en tiempo real en nuestra página, aparte de tener el editor a la mano con un par de clics. Es un buen método -y cómodo- para pequeños cambios. Además, tiene las opciones de visualización para tablets y móviles, por lo que puedes ir comprobando si el diseño se adapta correctamente.

El código que añadimos al CSS adicional de WordPress se guarda en base de datos, lo que puede ser un arma de doble filo, pero muy útil a la hora de cambiar de tema o plantilla. El CSS del personalizar solo afecta al tema actual, por lo que desparecerá cuando este se cambie, quedando guardado en caso que decidamos volver al tema anterior. Es decir, no tenemos que preocuparnos de eliminar o restaurar nuestras personalizaciones al cambiar el “Theme”.

Desventajas de usar el CSS adicional del personalizador de WordPress

Las desventajas es que, por una parte, la pantalla del editor es estrecha, situada en el lateral izquierdo de la pantalla, por lo que se nos puede hacer incómodo aplicar estilos personalizados un poco más completos, con más cantidad de código.

Y por otra parte -la cual considero más importante-, si necesitamos mucho código a la hora de personalizar y, como hemos dicho, se guarda en la base de datos de WordPress, estamos generando accesos extras a base de datos para leer nuestras personalizaciones y, por tanto, influyendo en el rendimiento y velocidad de carga.

Por sus ventajas, puede ser una buena opción para probar código en tu página antes de añadirlo por otro método que consideres óptimo. Es decir, un uso similar al que se le puede dar al inspector de elementos de Chrome o cualquier otro navegador que lo incorpore.

Plugins para editar el CSS de WordPress

Al igual que el personalizador, también hay opciones de plugins para editar CSS en WordPress que funcionan de manera similar. Hay multitud de ellos, algunos de los más populares pueden ser:

Simple Custom CSS

Uno de los plugins más populares para este fin.

WordPress Plugin Simple Custom CSS
Plugin de WordPress WP Add Custom CSS


WP Add Custom CSS
Podrás aplicar estilos en todo tu sitio web o CSS para entradas específicas.

SiteOrigin CSS

SiteOrigin CSS Plugin WordPres

Este plugin añade, además de la opción de añadir CSS, una interfaz visual que facilita personalizar elementos de nuestra página si no se tiene mucho conocimiento de este lenguaje.

Simple Custom CSS and JS

Simple Custom CSS and JS WordPress Plugin

Si además necesitas personalizar opciones de JavaScript, este plugin será tu aliado.

Simple CSS

Simple CSS WordPress Plugin

Similar a WP Add Custom CSS, una opción sencilla y eficaz.

La elección de uno u otro dependerá de tu gusto, si está actualizado, si es ligero, etc. y, por supuesto, de las necesidades que tengas. Por regla general, todos ofrecen la posibilidad de añadir CSS que prevalece sobre el que posee tu tema actual. Si necesitas algo más específico, como CSS para páginas individuales, edición de JS o un editor visual, puedes decidirte por el que más se adapte a ti.

Una de las desventajas principales de usar un plugin es, precisamente, que es un plugin. Es decir, estás haciendo usos de recursos extras para realizar esta función, que en este caso puede realizarse de forma sencilla sin recurrir a ello.

Siempre que se pueda evitar el uso de un plugin, vamos a intentarlo.

Una última nota respecto a plugins: con Gutenberg, tendremos un editor con opciones de personalización más avanzadas, aunque tendremos que tener cuidado dónde aplicamos los estilos y, si compartimos web o se desarrolla para un cliente, los colores y estilos que añadan. No queremos una página psicodélica llena de colores, tamaños y fuentes, pero claro, esto es cuestión de gustos. No os preocupéis, hablaremos del nuevo editor de WordPress que tanto revuelo está creando más adelante.

Editar el CSS de WordPress a través de un Tema Hijo o Child Theme

Crear un tema hijo (o child theme) siempre será recomendable, sin importar el tema con el que trabajes (yo diría obligatorio). Clic para tuitear

Otra opción para modificar el CSS sería editando directamente el archivo style.css del tema que estés usando. Pero claro, esto puede suponer un problema a la hora de actualizar el mismo, ya que la actualización podría machacar lo que has editado y perder los cambios. De ahí, que se cree un tema hijo, cuyo archivo style.css, así como el resto de los que creemos, van a estar a salvo en todo momento, y tendrán mayor prioridad que los mismos archivos del tema padre. Esto nos sirve también para añadir HTML o PHP, por lo que podemos modificar o añadir elementos, estructuras o funcionalidades.

Si no sabes cómo crearlo, no te preocupes, tienes un pequeño manual para crear temas hijos en la documentación oficial de WordPress y algunos plugins que también pueden ayudarte con esto. Además, algunos temas ya incorporan el hijo para hacértelo más fácil. También hablaremos de los temas hijos o child themes en unas de nuestras entradas más adelante, ¡ya que modificar el CSS a través del tema hijo sería nuestra opción preferida!

Para editar el CSS en este casi se puede usar el editor de WordPress (“Apariencia” > “Editor“) o bien haciendo uso de FTP, para acceder al archivo y poder editar el style.css del tema hijo más cómodamente con tu editor preferido.

Editar el CSS de WordPress a través de un Tema Hijo o Child Theme

Y si no tienes mucha idea de CSS, siempre estamos a tiempo de aprender algo nuevo, y con mucha más razón si tenemos una o varias webs que queremos personalizar. Te recomendamos el tutorial CSS de w3schools, aunque tienes muchos otros.

Y, como siempre, si necesitas ayuda, ¡no dudes en contactar con nosotros! No nos consideramos los mejores del mundo, pero sí bastante profesionales, y a un precio bastante competente 🙂

1
¡Hola! ¿En qué podemos ayudarte hoy?
Powered by