CSS para WordPress.

¿Sabías que en WordPress puedes editar y crear tus propios estilos CSS?.

CSS para WordPress

Si aun no sabes de que se trata, CSS (Cascade Style Sheet) u hojas de estilo en cascada, es un lenguaje informático (que no de programación) para  maquetar y dar estilo a las páginas web.

Con él puedes hacer cosas tan sencillas como cambiar el color del texto o poner una imagen de fondo, pero también tan sofisticadas como definir esquinas redondeadas en un contenedor de texto, o crear un reflejo con degradado.

Si quieres aprender una forma fácil y rápida de utilizarlo, sigue leyendo. En este post prometo ir directo al grano.

Como seguramente sabrás, HTML es el sencillo lenguaje en que se crean las páginas web. Aunque originalmente, este incluía una serie de etiquetas y atributos básicos para definir el diseño que iba a tener cada página, pronto se vio que esto resultaba sumamente ineficiente y que lo más adecuado era separar al máximo el contenido y el aspecto que este iba a mostrar.

Así, actualmente HTML se utiliza básicamente para organizar la información (párrafos, saltos de linea, secciones, listas, elementos de formulario…) y CSS, para definir como se visualizarán finalmente esos elementos.

El código CSS puede añadirse de diferentes maneras en una web pero, como he prometido ir al grano, no me voy a detener en explicar cada una de estas formas, ya que WordPress ofrece un sistema muy fácil y rápido de escribir clases CSS que luego podamos utilizar en cualquier post o página.

Ejemplo práctico CSS

Desde el menú de administración de WordPress accedemos a Apariencia -> Editar CSS.

Se abrirá un sencillo editor donde escribiremos esto:

.colorRojo{color:red}

¡Enhorabuena!. Acabas de crear tu primera clase CSS. Fácil, ¿verdad?. Las clases se definen siempre comenzando con un punto y el nombre que queremos dar a la clase, en este caso .colorRojo. Como no se pueden poner espacios en los nombres de las clases recurrimos a poner en mayúscula la primera letra de cada palabra a partir de la segunda (un convencionalismo que puedes seguir o no).

Si, muy bien pero, ¿qué es una clase? y lo más importante, ¿cómo se utiliza?.

Una clase es un estilo CSS que guardamos con un nombre determinado, en este caso .colorRojo. La idea es que podamos aplicar este estilo a cualquier elemento HTML tantas veces como queramos utilizando el atributo class=”nombreClase”.

Verás: guarda la hoja de estilo utilizando el botón que hay a la derecha del editor y crea un nuevo post.

Cuando estás escribiendo un post te habrás fijado que el editor dispone de dos pestañas “Visual” y “Texto”. Es esta segunda pestaña la que muestra el código HTML y donde deberemos aplicar nuestro estilo.

En HTML cada párrafo se define con la etiqueta <p> al comienzo y </p> para finalizarlo. Vamos a aplicar el estilo .color Rojo a un párrafo cualquiera de nuestro post editando la etiqueta <p> para que sea <p class=”colorRojo”>. Fíjate que en este caso no ponemos el punto delante del nombre de la clase.

Ahora previsualiza tu post. Si todo ha ido bien, el texto del párrafo en cuestión aparecerá de color rojo.

Pero esto es sólo el principio. En una clase CSS podemos definir muchas cosas más. Prueba a añadir esta clase tras la anterior y aplicársela a otro párrafo:

.textoResaltado{
color:red;
font-weight:bold;
text-decoration:underline;
}

En este caso el texto aparecerá en rojo, negrita y subrayado.

Generadores automáticos de CSS

Si, vale, todo esto está muy bien, pero hay que aprender CSS y eso es un montón de trabajo y estudio.
No necesariamente. Aunque desde luego sería muy recomendable conocer algo de HTML y CSS (cosa que te animo a aprender), con lo que te acabo de contar es suficiente para que puedas aprovechar alguno de los muchos y excelentes generadores de CSS visuales que podemos encontrar online.

Con este, por ejemplo, podrás diseñar tus propios botones. Tan fácil como utilizar los controladores del lado derecho hasta conseguir el aspecto que quieras. Una vez estés satisfecho, pulsa en el botón que acabas de diseñar y te facilitará el código CSS necesario para generar otros igualitos en tu web. Copialo y pégalo en el editor de CSS de WordPress.
La clase que crea, llamada .button puedes aplicarla después a cualquier enlace (que se definen con la etiqueta <a> en HTML) que automáticamente tomará la forma del botón.

Ejemplo de botón CSS

¿Verdad que es fácil?. Lo bueno es que una vez creado un estilo puedes utilizarlo cuantas veces quieras y estará disponible en cualquier post o página y, si necesitas cambiarlo, basta con modificarlo en el editor CSS de WordPress. Cambiará el aspecto de todos las etiquetas donde lo hayas utilizado sin necesidad de modificar cada post por separado.

Y con este otro, aplicándoselo a un párrafo como hemos hecho en el ejemplo, conseguirás que éste adquiera efectos de color, borde, esquinas redondeadas y hasta que proyecte sombra como si estuviera en relieve. El párrafo que estás leyendo ahora lleva un CSS generado allí :-).

¿Habías utilizado anteriormente CSS?. ¿Te gustaría saber más?. Déjame tu opinión en los comentarios y no olvides suscribirte al blog para seguir aprendiendo SinLios.