Puede que pienses que editar código CSS no es necesario si utilizas WordPress y un editor visual, y en parte es cierto, pero desde MANTPress te recomendamos que si tienes la posibilidad aprendas a usarlo para poder editar los estilos de tu WordPress.
Editar código CSS en WordPress es un añadido y un plus a la hora de diseñar una web, ya que siempre habrá partes donde la plantilla o el editor no lleguen y te veas en la necesidad de acudir a este lenguaje para editar mejor los estilos.
Hoy por hoy, con todas las herramientas de edición que tienes a tu alcance, prácticamente no necesitas usar nada de CSS si no quieres, pero las ventajas de editar estilos con CSS son tantas que te aseguramos que merece la pena. ¡Veamos cómo puedes editar estilos CSS desde WordPress!
¿Qué son los estilos CSS?
En WordPress, son los códigos HTML los encargados de dar la estructura al sitio web. Es más, estas líneas que estás leyendo, contienen códigos HTML que le dan forma a todo. ¿Cómo? Pues diferenciando titulares de texto común, colocando enlaces, dejando los espacios necesarios entre párrafos, colocando imágenes… prácticamente en todo.
Así, las hojas CSS son las que se encargan de darle a esa estructura HTML estilos visualmente más atractivos. Un ejemplo con el que lo verás muy claro: si realizas una foto con tu teléfono y antes de subirla a tu red social le aplicas un filtro, la imagen en sí sería el HTML y el filtro el CSS: lo que se hace con esto es mostrar una imagen inalterada (HTML) pero con una imagen distinta según el filtro (CSS) que utilices.
Concretamente, CSS es un lenguaje de hojas de estilo con el que puedes aplicar estilos de manera selectiva a determinados elementos en documentos HTML, añadiendo así color y tamaño al texto a un párrafo, precisando la alineación de una imagen, cambiando el grosor de una línea, etc.
La estructura de las hojas de estilo CSS
Para empezar a escribir las primeras líneas, es importante entender su estructura, formada por:
- Selector: define a qué elemento HTML se le dará estilo. Puede ser una etiqueta, un ID, una clase, un atributo, etc.
- Propiedades: donde se define qué es lo que quieres cambiar (tamaño, color, etc.)
- Valor de la propiedad: para finalizar se da el valor a la propiedad. Por ejemplo, en caso de que la propiedad sea color, su valor podría ser azul.
Un ejemplo sencillo es el siguiente, en el cual le damos estilo a un título H1:
h1 { color: green; }
En este caso esttamos fijando que todos los títulos H1, serán de color verde. Pero si quisieras que los H2 y H3 también mostrasen ese color, deberías hacer lo siguiente:
h1,h2,h3 { color: green; }
Así de sencillo, solo estás creando una regla con diferentes selectores.
¿Cuáles son los tipos de selectores?
Los selectores pueden ser de diferentes tipos, pero cada uno se llama desde el CSS de distinta forma:
- Selector de etiqueta: selecciona los elementos que se encuentran dentro de una etiqueta. Ejemplo:
p { color: green; }
Dicho código selecciona la etiqueta <p>.
- Selector de identificación (ID): selecciona todos los elementos que están bajo el ID en cuestión. Ejemplo:
#id-one { background: #FFF; }
- Selector de clase: selecciona los elementos según la clase especificada. Ejemplo:
.class-one { font-size: 25px; }
Este CSS modifica todos los elementos clasificados con la clase .clase-one (<p class=”class-one”>)
- Selector de atributo: selecciona todo elemento con el atributo especificado.
img[src] { padding: 65px 0 65px 0; }
- Selector de Pseudo-clase: Los elementos especificados, pero solo cuando esté en el estado especificado. Ejemplo:
a:hover { color: #000; }
Al pasar el cursor sobre un elemento <a> el mismo tomará el color negro (#000). Muy útil para dar dinámica y resaltar un elemento en tu sitio web de WordPress.
- Combinación de selectores: los selectores pueden combinarse, permitiendo así ser más específicos con la selección. Ejemplo:
<div class=”class-one”> <h2>Título cualquiera</h2> <p>párrafo cualquiera</p> </div> <div class=”class-two”> <h2>Otro título</h2> <p>otro párrafo</p> </div>
Cómo editar estilos con CSS en WordPress
Si hay algo por lo que se conoce WordPress, es porque tus conocimientos en HTML y CSS pueden ser nulos, pero de igual manera es posible que gestiones una web tú mismo.
Pero en algo se equivocan muchos: editar estilos con CSS en WordPress no es tan difícil, y en este apartado te lo contaremos de diferentes maneras:
- Desde el editor de WordPress
La edición desde el propio panel era algo que se le exigía a WordPress desde hace ya tiempo, y fue en su versión 4.7 cuando este lo integró. Ahora, con solo hacer clic en Apariencia> Personalizar >CSS adicional, tienes acceso a un panel de edición CSS muy completo.
Cierto es que en sus primeras versiones el editor era demasiado básico, casi como escribir en un txt. Pero ahora cuenta con funciones que permiten una escritura más fácil y rápida, como por ejemplo:
- Resaltado de código identificando clases y valores.
- Autocompletado de texto.
- Detector de errores de escritura.
Queda claro que este es el método más sencillo de editar las hojas de estilo de tu sitio web de WordPress, pero veamos algunas más.
- Utilizando plugins
Antes de la versión 4.7 de WordPress, el usar plugins para editar el CSS en WordPress era el primer método al que acudía cualquier inexperto en la materia.
El uso de plugins aún está muy vigente, y algunos de los más populares para editar estilos con CSS son:
- Creando un tema hijo
¿Y si queremos hacerlo sin plugins o sin utilizar el editor de WordPress? Aún nos queda una tercera vía: si quisiéramos cambiar o añadir estilos CSS, podríamos dirigirnos al archivo style.css del tema que estemos usando. De las tres opciones que te mostramos en este artículo, esta puede ser la más complicada si eres demasiado principiante: el principal motivo es porque cada vez que tu tema reciba una actualización, el CSS que hayas añadido se perderá. Por eso, debes estar muy atento a cada actualización para añadir otra vez tus modificaciones CSS.
Para solucionar problemas como este, existen los temas hijos o child themes. Un tema hijo es un tema que hereda las funcionalidades de otro, el cual se conoce como “tema padre”. Permitiendo de esta manera modificar o añadir funcionalidades al tema padre, sin alterar directamente los archivos del mismo. En definitiva, esta es una forma segura de editar una plantilla en WordPress.
Volviendo a la edición de estilos con CSS, el usar un tema hijo hará que los cambios en tu tema de WordPress no se pierdan con las actualizaciones del tema padre. La creación de un tema hijo permite editar todos los archivos del tema padre, incluido el function.php.
¿Tienes dudas sobre cómo editar los estilos de tu sitio web con CSS? ¿Necesitas a expertos para que se encarguen de ello sin poner en peligro tu página y negocio? ¡Contacta con nosotros para que podamos ayudarte!
