Supongamos que queremos modificar un elemento muy concreto de nuestro diseño: el tamaño de los H1, la gama de colores o simplemente la tonalidad de los botones sociales…estas modificaciones requieren en la mayoría de los casos de un poco de CSS. Pero no hay que alarmarse, existen varios métodos para hacerlo de forma segura y sin necesidad de tocar apenas código.

El otro escenario es que directamente tengas un extracto de CSS que quieras añadir a tu tema. WordPress por defecto no trae ningún editor ni campo para introducir estas reglas de estilos. Debemos por tanto modificar la plantilla o recurrir a algunos de los métodos alternativos (y recomendables) que te contamos:

Los temas WordPress se encargan del CSS

Salvo que un plugin en particular tenga un estilo propio y traiga consigo una hoja de estilos CSS propia, lo cierto es que toda la carga del diseño de nuestro WordPress pertenece exclusivamente a nuestra plantilla. Por tanto, ¿Porque no editamos directamente la plantilla? Error!

Las plantillas de WordPress son, al igual que los plugins, elementos que se actualizan, se mejoran y se sobreescriben sobre la versiones anteriores. Y además sin contemplaciones, no se guardan los cambios que se hayan realizado en dicha plantilla. Por tanto, eso quiere decir que si actualizas tu tema a una nueva versión, perderás todos los cambios que hayas realizado (en los archivos CSS o php claro está, el contenido no tiene nada que ver…)

Comentados los antecedentes, enumeremos cuales son los métodos más recomendables y su dificultad, para añadir o modificar vía CSS algún elemento de diseño.

1. Módulo JetPack CSS personalizado.

Sin duda el método más sencillo y bastante eficiente. Consiste en descargar el plugin Jetpack (desde WordPress.com o también puedes usar el plugin gratuito Slim JetPack) y activar el módulo de CSS personalizado.

jetpack

 

Los pasos son sencillos:

1.Instalar plugin.
2. Activar el plugin. (posiblemente te pedirá que conectes con tu cuenta de WordPress.com)
3. Ir a JetPack (justo encima de Entradas en el menú lateral del panel de WordPress) y buscar el módulo de CSS personalizado.
4. Una vez activado, tendremos una nueva pestaña en el menú Apariencia > CSS personalizado. Voilá, un completo editor CSS de tu tema a tu alcance.

Nota: si optas por Slim JetPack, no es necesario que realices la activación en el paso 2, y en el paso 3, deberás acudir a Ajustes > Slim JetPack. El resto todo es igual.

Listo, ya tenemos activado nuestro editor donde pegar o escribir las reglas CSS que modificarán nuestro diseño o tema. Lo fantástico de este método, es que JetPack va a incluir los estilos CSS que definamos en este editor justo detrás en la carga de los que el tema trae por defecto (style.css), por lo que podemos sobreescribirlos sin problemas, sin miedo a perder los cambios en futuras actualizaciones.

2. Crear un Child Theme (o Tema Hijo)

Un método más complejo pero igual de eficaz. Consiste en crear un tema hijo, que modifica los estilos del tema padre. Básicamente vamos a realizar la misma tarea que con el método anterior: cargar una hoja de estilos propia justo después de la hoja de estilos del tema padre. Sobreescribimos y añadimos nuevas reglas sin tocar el tema original. Fantástico.

jetpack-(1)

Sin embargo, para algunos usuarios, este método puede resultar algo tedioso. Necesitarás un editor de CSS (notepad puede servir, pero no es lo más recomendable, mejor sublime text), y acceso a tu FTP o empaquetar tu child theme e instalarlo via Apariencia > Temas.

Sea cual sea la forma que decidas, aquí tienes más información sobre como crear un tema hijo en el codex de WordPress.

Este método es personalmente mi favorito, aunque es entendible que sólo se utilice cuando las modificaciones tienen una cierta entidad. Para una pequeña modificación, el método vía Editor CSS de JetPack es más sencillo y rápido.

Por otro lado, si no tienes problemas en crear themas hijos, te recomiendo que esta sea siempre tu primera opción. El motivo principal es que es escalable: si necesitas incluir alguna funcionalidad o template extra, lo puedes hacer en el fuctions.php de tu tema hijo.

Con Jetpack no puedes modificar y añadir nuevas funciones. Solo es hojas de estilo. Y por otro lado, solo estás incluyendo una llamada más a un solo archivo CSS (style.css de tu child theme) mientras que para la primera opción, de partida ya estar cargando un plugin más la llamada al servidor del nuevo CSS. Pero lo dicho, ambas son muy buenas.

Infographer-wordpress-theme

3. Editar directamente el style.css de tu tema

Pasamos a la zona gris de la edición de CSS en WordPress. Editar directamente el CSS de tu tema (style.css) no es la solución más limpia. Tanto si es un tema premium como un tema gratuito, vas a perder dichos cambios cuando el tema se actualice.

Además, si no tienes conocimiento de CSS, ten mucho cuidado con las puntuaciones y los cierres de reglas. Dejarte una llave abierta, u olvidar un punto y coma puede hacer de tu hoja de estilos ilegible para algunos navegadores.

Si aún así estás convencido de que este es tu método, veamos como podemos realizarlo directamente a través del panel de Administración de WordPress. Los pasos son:

1. Ir a Apariencia > Editor
2. Buscar el archivo style.css (comprobar que está seleccionado el tema actual)
3. Editar con sumo cuidado.

Además de los inconvenientes citados anteriormente, este método no te dará acceso a todo el CSS en algunos temas. Un ejemplo claro: si el autor del tema ha decidido dividir los estilos en varios CSS, puede que alguno de ellos esté inaccesible desde dicho editor, al encontrarse dentro de una carpeta tipo library, assets o css.