Cómo modificar CSS WordPress para cambiar el estilo del blog

Vemos en este tutorial como modificar el estilo CSS de un blog configurado con WordPress.

Tabla de Contenidos

¿Qué es CSS?

CSS es el acrónimo inglés de Cascading Style Sheets, es decir, hojas de estilo en cascada o secuenciales. Cuando hablamos de CSS nos estamos refiriendo al código que se utiliza para definir el estilo y la apariencia de las páginas web programadas con el lenguaje HTML, el que utilizan la mayoría de los sitios web, incluidos los que incorporan WordPress como gestor de contenidos. CSS permite realizar cambios de estilo de modo selectivo, aplicado a cada una de los elementos del código HTML

El CSS generalmente se encuentra predefinido en una hoja que se llama style.css

Vemos un ejemplo muy sencillo. La estructura de las reglas CSS es esta que ves aquí:

https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/CSS_basics

El selector se refiere al elemento del HTML que queremos modificar. En este caso, >p hace referencia a los párrafos de texto. Después del selector, los corchetes recogen la declaración con las propiedades que queremos que muestre el texto. Aquí vemos la propiedad ‘color’, establecida con el color rojo, ‘red’. Así que si queremos que los párrafos muestren otro color, por ejemplo, verde, debemos cambiar la instrucción:

p [
color: green;
]

Además del color, puedes modificar cualquier otra propiedad, como el ancho, el color del fondo, su posición, o incluso que sea visible o se mantenga oculta.

Con esta regla que definimos ahora, puedes cambiar el color del fondo de la página

html {
background-color: #00539F;
}

¿Por qué modificar CSS WordPress y cambiar el estilo del blog?

Cuando hablamos de modificar CSS WordPress nos referimos a pequeños retoques que consideras visualmente interesantes, pero que mantienes integrados en el estilo y la apariencia global de la plantilla del tema que estás utilizando. Hablamos, por ejemplo, de cambiar el color de un encabezado, ocultar una fecha o modificar el tipo de letra que muestras los posts.

Te mostramos un ejemplo con nuestro blog. Vemos que el logotipo está demasiado cerca de la parte superior de la página, cuando accedes al blog desde el ordenador (en la versión móvil la configuración es diferente y no necesitamos corregir esa posición). También nos gustaría que hubiese menos espacio entre el logo y el menú inferior. Actualmente, sin tocar el CSS, se ve así:

Después de modificar el elemento html que incluye el logo, el aspecto visual es este de aquí:

Si te fijas en la image, hemos conseguido solucionar los dos problemas, simplemente cambiando las propiedades CSS. El código inicial era:

.ast-site-identity {
padding-top: 1em;
padding-bottom: 1em;
}

Tanto en la parte superior, como en la inferior, la distancia marcada era 1em. Sin embargo, al añadir 2em arriba y dejar en 0 el valor del padding inferior, el resultado es el que ves en la imagen. El nuevo código es:

.ast-site-identity {
padding-top: 2em;
padding-bottom: 0;
}

¿Qué necesito para modificar CSS WordPress?

Hay varias alternativas para modificar las horas de estilo CSS de tu blog. Las dos más habituales son

  • Modificar la hoja style.css del tema WordPress que tengamos instalado. Podemos realizar los cambios desde el escritorio del panel de administrador, accediendo a >Apariencia >Editor y aquí seleccionando >style.css
  • Utilizar el módulo >Apariencia >Personalizar, que da acceso al módulo CSS adicional integrado en la plantilla del tema que estés utilizando.

Te recomendamos la segunda opción porque evitas modificar el código original, y permite que el tema se actualice sin perder los cambios que hayas introducido en el estilo.

Para modificar el CSS tienes que poder acceder a las herramientas para desarrolladores en tu navegador Chrome. Tienes que dirigirte arriba a la derecha, y hacer clic en los 3 puntos verticales, Después hay que pulsar sobre la opción ‘Más herramientas’ y hacer clic en >Herramientas para desarrolladores.

Cambiando las reglas CSS

Una vez tenemos activada la consola que incluye funciones avanzadas, entre ellas, el acceso a las reglas CSS.

El siguiente paso es abrir tu blog en el navegador, y buscar el punto exacto que te interesa cambiar, sea un titular, una etiqueta, un logotipo o un texto específico. Una vez localizado ese elemento, haces clic en el botón derecho y eliges >Inspeccionar.

Por ejemplo, en nuestro caso, el logo que queríamos «desplazar», hacemos clic en el botón derecho, elegimos inspeccionar y automáticamente nos remite al código CSS, resaltado en la consola de herramientas para desarrolladores.

CSS en una secuencia de instrucciones que se despliegan en capas, desde las superiores, que engloban todo el blog, a las inferiores, para cada elemento individual. Esto significa que si a priori no está disponible la regla que quieres modificar, en la consola para desarrolladores debes desplazarte hacia la parte superior, verificando

Cuando lo tengas localizado, copia ese código y pégalo en el módulo >Apariencia >Personalizar, en la sección CSS adicional.

Ahora solo que tienes que cambiar el valor de la propiedad que quieres modificar (por ejemplo, el color), o añadir una propiedad nueva (por ejemplo, la propiedad display, con el valor ‘none’, para ocultar ese elemento. Los cambios que realizas los puedes ver al instante a la derecha, en tu blog.

Definir instrucciones para cada modificación CSS

Para no confundirte, es importante que antes de cada código añadas un comentario indicando cuál es su funcionalidad, para que tengas registrada las instrucciones y sepas qué elemento está modificando cada una. Estos comentarios debe ir siempre precedidos de /*, y finalizan con */ como cierre

Por último, cuando esté todo listo guarda los cambios y haz clic en >Publicar para que se actualice el estilo y sea visible para los visitantes del blog.

Recuerda que estos cambios se realizan en la pestaña de personalización y que, por lo tanto, no modifican el código original CSS. Esto significa que si no te gusta el resultado, simplemente borrando el código que has añadido, el elemento volverá a su aspecto inicial.

Reglas y atributos CSS

Hay infinidad de reglas y atributos que puedes usar para modificar CSS WordPress, así que también puedes consultar en Google ejemplos de modificaciones en elementos concretos, que te servirán para localizar ese código en la consola de desarrolladores. Aquí tienes una lista actualizada de propiedades CSS estables, admitidas por los navegadores más utilizados.

Para saber más sobre modificar CSS WordPress

Si quieres saber más, en este post de Mozilla tienes un tutorial interesante para aprender reglas básicas CSS, aplicándolas a tu propio archivo html. Verás el selector, con la propiedad activada y solo tendrás que copiarlo y pegarlo en tu escritorio, en el módulo >Apariencia >Personalizar. En ese menú hay una pestaña CSS Personalizar en la que debes pegar el código CSS.

También es muy interesante este artículo de Kinsta, un servicio de hosting especializado en WordPress

Esto es todo. Recuerda que visitando nuestro blog tienes acceso a tutoriales para sacar todo el partido a tu presencia en internet. Y si prefieres los vídeos, no dejes de dar una vuelta por nuestro canal de YouTube, donde compartimos videos explicativos todas las semanas.

%%footer%%