Blog

Home/Herramientas/Cómo darle un aspecto genial a tu blog

Cómo darle un aspecto genial a tu blog

¿Te gustaría dar un toque diferente a tu blog? Pues mi blogger invitado,  Javier López, ha querido compartir con nosotros un método menos conocido pero muy efectivo para lograr un aspecto diferente ¿quieres descubrir cómo? Quédate, que te contamos todos los detalles.

Probablemente ya sabes que un theme o plantilla son el conjunto de archivos que componen el diseño de tu sitio web en WordPress.

Pero me gustaría presentarte un nuevo término que tal vez no conozcas tanto, los Frameworks. ¿En qué se diferencia de una plantilla común?.

Vamos a verlo, pero antes debes tener claro que para controlar como se ve tu sitio web en WordPress tienes dos opciones:

  • Usar una plantilla de WordPress convencional.
  • Usar un Framework de WordPress más un child theme.

Las plantillas convencionales son aquellas como las que puedes encontrar en las webs de Themeforest o Elegant Themes. En ellas todos los componentes del diseño y la programación forman parte del mismo paquete.

Esto significa que cualquier cambio que hagas tanto en diseño como en la programación de la plantilla se perderá si algún día esta la actualizas.

grafico 1

Un framework funciona de forma diferente ya que se encarga de separar el diseño del sitio de su programación. Todos los archivos que se encargan de que el sitio funcione se encuentran en el framework y sus plugins. Mientras que el diseño gráfico del mismo se encuentra en su child theme o plantilla hijo.

grafico 2

Esto te permite que se pueda actualizar fácilmente sin dañar ningún cambio que se le haya hecho al diseño.

Por lo tanto lo que te aconsejo es que utilices un framework más un child theme para tu blog de WordPress. Te recomiendo que le eches un vistazo a Genesis Framework de StudioPress porque es el que yo tengo instalado y me va muy bien.

¿Cómo instalar un child theme?

Primero debes instalar el framework como si fuera un tema normal.

Ve a Apariencia -> Temas, le das a instalar nuevo tema y subes los archivos. Te aparecerá como un tema normal que peudes activar pero no lo hagas. Debes activar sólo el child theme.

temas wp

Instalar un child theme es igual de sencillo, sigue los mismos pasos que con el framework. Cuando lo tengas instalado simplemente actívalo y ya tendrás en funcionamiento el Framework + child theme.

Y ahora es el momento de aprender a modificar el diseño de tu child theme, porque lo más normal es que no te convenza plenamente su diseño, sino que quieras hacer pequeños cambios en él, como por ejemplo:

  • Color
  • Menú
  • Imagen del encabezado
  • Texto del footer

¿Cómo puedo modificar el child theme?

Debes dirigirte dentro del submenú apariencia a la opción editor.

grafico 4

Como puedes ver la pantalla se compone de dos zonas. La primera es la zona izquierda o zona del editor, donde puedes modificar o añadir el código que quieras como si fuera un editor de texto.

La segunda zona es la de la derecha, donde se listan todos los archivos html, css y php que componen el tema. Para abrir uno de ellos simplemente selecciónalo y se abrirá su contenido en el editor.

Los cambios en la apariencia del child theme se realizan en el archivo de estilos, que es el style.css. Lo puedes seleccionar en la parte derecha.

Los cambios que implementes debes escribirlos en lenguaje css, que es el lenguaje de la hoja de estilos. Pero tranquilo, si no quieres aprender un lenguaje de programación no lo hagas porque no es necesario, yo no sé de programación y lo he hecho (este es mi blog sobre marketing online) gracias a un maravilloso plugin de Firefox como es Firebug.

Firebug

Recomiendo Firebug para editar tu sitio WordPress por dos motivos:

  • Puedes probar cambios en el diseño antes de realizarlos. Es una forma sencilla y segura.
  • Puedes localizar fácilmente la línea del archivo style.css donde tienes que realizar los cambios.

Una vez instalado Firebug en Firefox haz clic en el icono con forma de insecto en tu barra de herramientas para activarlo. Cuando esta desactivado sale en blanco y negro, y activado en color.

grafico 5

Cuando lo activas se abre una ventana en la parte inferior de la pantalla donde se muestra a la izquierda el código html de la web, y a la derecha el estilo CSS que se está aplicando.

grafico 6

Aquí tienes la ventana del código html ampliada, esta no nos interesa tanto:

grafico 7

 

Para modificar el aspecto ésta es la más interesante, la del código css:

grafico 8

Para poder acceder al estilo aplicado a una parte concreta de tu blog lo que debes hacer es seleccionar el botón inspeccionar elemento . Una vez activado pon el puntero del ratón sobre la parte que quieras de tu web y te saldrá el estilo css que está aplicado.

En este ejemplo he seleccionado el botón “Quiero el plan” de mi blog javierlopezdiaz.com. Si quieres cambiar su color ve a la zona de estilo css (abajo a la derecha) y cambia el parámetro “background-color“.

En cuanto haces los cambios la página se actualiza automáticamente. Es una buena forma de ver cómo van a quedar los cambios antes de realizarlos. Pero esto es sólo una vista previa.

grafico 9

Si te ha gustado el cambio que has hecho y lo quieres hacer permanente en tu web debes ir en tu panel de administración de WordPress a Apariencia -> Editor y en style.css buscar la porción de texto correspondiente, la misma que cambiaste con firebug. Ahora edita lo que quieras y guarda los cambios cuando hayas acabado.

grafico 10

Ahora sí se guardarán los cambios.

Como ves es un proceso sencillo pero que necesita bastante práctica.

Si quieres profundizar en este tema más aún o necesitas ayuda sobre la creación de un blog personal te remito a mi cursoCómo crear un blog desde cero con WordPress“, donde explico de forma detallada y paso a paso con video tutoriales a crear un blog o un negocio online con la plataforma WordPress.

Tienes disponible el curso en tres modalidades:

  • Pack Básico
  • Pack Premium
  • Pack Profesional

Te invito a que los descubras tu mismo y veas cual es el más adecuado para ti.

Written by

Periodista, especializada en Comunicación Corporativa y Protocolo y RRII. Ahora oriento mi carrera profesional al mundo del Social Media y el Community Management.

4 Responses to “Cómo darle un aspecto genial a tu blog”

By Manuel - 12 junio 2014 Responder

Eres muy grande, Nuria.

By Nuria García Castro - 16 junio 2014 Responder

Muchas gracias Manuel por tus amables palabras! 😉

By Santi García - 15 junio 2014 Responder

Nuria,
Acabo de descubrir tu blog, muy bueno, sinceramente y Javier López un fenómeno.
Saludos.

By Nuria García Castro - 16 junio 2014 Responder

Hola Santi! Es un placer recibirte en mi humilde bitácora. Me alegro un montón de que te guste mi trabajo, espero volver a verte pronto.
Desde luego, Javi se lleva todo el mérito de este post porque se ha dado un curro enorme y al final se trata de un artículo super interesante y útil!

Un saludo y feliz tarde 😉

Leave a Comment