Bienvenidos a una nueva entrega de “Creación de mi Blog (WordPress)”.

En esta tercera entrega intentaré mostraros como configuré el diseño de este blog.

Para ello tuve que modificar 2 elementos básicamente, uno es el Tema y otro es el código adicional CSS.

A continuación os mostraré en detalle cada uno de estos elementos:

El tema

Para mi sin duda la parte más difícil del entramado que supone montar un blog en WordPress.

Decantarse por un diseño es tedioso y más si te pasa como a mi, que cada día me gusta algo distinto .

La elección de un tema es algo personal y requiere de tiempo. Ya que tendrás que ver lo que compagina con tu web y las funcionales que ofrece.

La instalación por el contrario es un proceso rápido, simplemente tienes que ir al panel de administración de WordPress.

En apartado Apariencia > Temas podrás añadir un tema nuevo sin mucho esfuerzo:

Añadir un tema en WordPress
Añadir un tema en WordPress

Tras probar más de 7 temas distintos con diseños para Blog, me decanté por el de XooBlog, aunque no estoy del todo contento con el diseño general, es el que menos me disgustaba.

Hay varios aspectos a tener en cuenta a la hora de elegir un tema y uno de ellos (para mi) es la capacidad de modificar el tema sin tener que estar trasteando en el código.

Este tema en este aspecto es algo “limitado”, pero las opciones que trae me sirven de sobra para lo que tengo pensado.

Editar página del Tema XooBlog
Editar página del Tema XooBlog

Una vez elegido el tema pasaremos a la parte más complicada, se trata de modificar el código CSS.

Modificando el código CSS

Quizás deba aclarar para que sirve el código CSS, se trata de un lenguaje de “marcado” que sirve para modificar el diseño de nuestra web.

Todos los temas traen consigo un archivo CSS que se encarga de decir donde se encuentran los menús, los encabezados de las entradas, el logo de la pagina, el color de los botones y un largo etcétera.

Este se suele encontrar en el siguiente directorio: “/wp-content/themes/nombre del tema” style.css.

Hay muchas formas de editar este archivo:

  • Con un simple editor de texto, Notepad o Notepad++ mi preferido por que se ven las dependencias de cada objeto.
  • Con el editor de temas en el panel de administración de WordPress (Apariencia>Editor de Temas)
  • Con el editor de CSS en la pagina principal (CSS Adicional)

Hay que tener cuidado, puesto que al editar este archivo mediante las dos primeras opciones, cuando el tema se actualice se sobrescribirán los archivos, perdiendo todas nuestras ediciones.

Como consecuencia elegimos la tercera opción para que nuestros cambios permanezcan después de actualizarse los temas.

Modificando el CSS del blog
Modificando el CSS del blog

Se puede observar que los comentarios aparecen entre /* */ y marcados en naranja.

Las clases que modifico “.clases” las obtengo examinando elementos con Chrome (f12) para entenderlo mejor pongo un video sacado de YouTube:

Agregar CSS en WordPress de manera correcta

Conclusión

Instalar un tema es una acción que no requiere de mucho tiempo para llevarla acabo pero si para elegir el correcto.

Probablemente te lleve más tiempo modificar el tema a tu gusto (con código CSS) que todos los pasos previamente realizados (instalación y modificaciones del WordPress).

Por último aconsejaría modificar el código CSS desde el personalizador por dos cosas:

  • Los cambios permanecen tras las actualizaciones del tema
  • Los cambios son visibles mientras los vas modificando sin necesidad de guardarlos

Con esto termino el tercer artículo de creación de mi Blog (WordPress), os dejo la entrada anterior y el tiempo estimado a continuación:

Creación de mi Blog (WordPress) parte 2

Tiempo estimado de instalación y configuración: 1 hora y 30 minutos.