Personaliza tu wordpress: Primeras reglas sencillas

Aviso a navegantes! Este post es un básico nivel PRE-1 sobre html y CSS, así que si tienes un poco de experiencia, te recomiendo que no gastes tu tiempo 😉

 

Una de mis anteriores pasiones era la maquetación web: html y CSS.

Actualmente creo que las webs, entendiendo como web a todo el proceso creativo de diseñar, maquetar, programar, excepto raro caso de compañía muy fuerte que precisan algo muy concreto, han pasado a mejor vida. No le veo sentido a diseñar y maquetar una web de cero para una empresa pequeña que no tiene más de 2000€ de presupuesto (la gran mayoría de proyectos).

Los templates, y sobretodo el wordpress con sus miles de temas a precios realmente bajos (45-75€ por un tema, si contamos el trabajo que hay detrás, es una miseria) son una opción inmejorable para que estas pequeñas empresas pueden tener una web con un aspecto impecable y aun quede presupuesto para un poco de marketing online.

De todos modos, saber html y CSS no está de más, sobretodo cuando quieres personalizar un poco el aspecto de tu blog: Los temas habitualmente vienen con colores acertados, o algunos de ellos incluso tienen opciones dentro del panel de control para escogerlos. Pero siempre habrá alguna chorrada que no podrás modificar, y que es extremadamente sencillo si tienes cuatro nociones básicas de maquetación.

Así que abro nueva categoría en mi blog, donde iré contando cosas básicas para que cualquiera pueda modificar un poco su tema al gusto.

Personaliza tu wordpress

CC Flickr author:goossens

 

Qué necesito:

  1. No tener miedo al código. Si coges un código html y lo comparas con la web visual, eres muy muy capaz de entender “qué está pasando allí”. De acuerdo, entender un idioma no es lo mismo que hablarlo, pero sí es un 25% del proceso. 
  2. Un chrome o el addon firebug del firefox. De este modo podremos realizar cambios a nuestra web sin que “destrocemos nada”. Si estos cambios son de nuestro agrado, luego los modificaremos de verdad.
  3. Saber qué es html y qué es CSS, y por qué estos dos lenguajes van de la manita. Encontraréis información a toneladas. Y aquí os paso una lectura corta por si queréis entrar en materia “Qué es el css“.
  4. Saber que para cualquier cosa hay información en Google. ¿Cuál es la instrucción CSS para modificar la fuente del texto? Busco “cambiar fuente css” en Google, y la primera web que encuentro me dice que:
<div style=" font-family: Georgia, 'Times New Roman', serif;">Este texto estará escrito con un determinado tipo de letra.</div>

Quizás no entendamos que es <div> o por qué del “style”. Pero entendemos “font-family” y más cuando seguidamente tenemos una Georgia,  después una Times (suponemos que usará la segunda si no encuentra la primera). Fácil no? 😉 Al menos lo entendemos.

 

Cambiar el color a los títulos

Una de las cosas que no me gustaba de mi blog es que los títulos (como el de justo aquí arriba que ahora aparece en azul) aparecieran en negro. No marcaba bien los distintos párrafos y en el caso que terminara el anterior con negrita el contraste era nulo.

  • Una opción era entrar a cada una de las entradas y marcar el color que quería para cada uno de los títulos. Teniendo en cuenta que hay unas 60 entradas, me lo sacaba en 2 horitas.
  • Otra opción es hacerlo modificando el CSS tardando unos 10 minutos.

Yo sé que cada vez que pongo un título de párrafo uso la etiqueta “título2″ que en html es equivalente a escribir <h2>Título</h2>. Sabiendo eso, si yo modifico las instrucciones que tiene “h2” en el archivo CSS, se me modificará el color de TODOS los títulos de los artículos escritos hasta la fecha.

Esta es la gracia de los CSS, que si dentro de un año decido que el color de texto de mi blog es naranja, solo cambiando la instrucción de color de texto, tengo todo mi blog actualizado.

Para realizar este cambio, real, he grabado en vídeo el proceso. Menos de 5 minutos para realizar una prueba sin ningún temor, comprobar que el blog está tal como queremos, y luego aplicarlo. Sin herramientas web, solamente con nuestro navegador y el wordpress.

Espero que os haya servido de ayuda. Iré publicando cosas para personalizar nuestro blog, algunas más complejas que otras, pero en definitiva, cosas que todo el mundo pueda hacer.

Si alguien tiene alguna necesidad de modificar su blog, puede comentármelo y intento explicar cómo hacerlo.





Un enamorado de la comunicación, absorbido por la comunicación On-Line. Si tienes una web y no la estás rentabilizando, es que algo falla! ;) Chris en Google+

7 Responses to “Personaliza tu wordpress: Primeras reglas sencillas”

  1. Iñigo

    Ago 07. 2013

    Enhorabuena por el post. Una excelente forma de personalizar mi web sin conocimientos de css. Personalmente me ha sido de gran ayuda!

    Reply to this comment
    • Chris

      Ago 08. 2013

      Me alegra que te haya servido.
      Quería lanzar más tutoriales para ir cambiando cosas de un wordpress, pero la verdad es que me da miedo convertir esto en un curso de CSS y HTML como tantos otros.

      Si te gusta perder el tiempo, en un par de meses podrás cambiar todo lo que quieras… la maquetación web es sencilla 😉

      Un saludo y si te puedo ayudar en algo no dudes en pedírmelo.

      Reply to this comment
  2. Jonathan

    Ago 15. 2013

    Muy buen Articulo, wordpress simplifica mucho las cosas pero el meterle mano al codigo es fundamental para personalizar completamente tu sitio web.

    Reply to this comment
  3. Rosa

    May 16. 2014

    Buenas tardes, en que carpeta esta el CSS para poder añadir más texto. Cuando entro como admin en mi wp sale el editor css sin nada y la web ya esta diseñada. Gracias y un saludo.

    Reply to this comment
    • Chris

      May 16. 2014

      Normalmente desde el editor de wordpress podrás, lo que alguna vez me he encontrado con temas que no tienen este archivo editable a través del editor. No me preguntes el motivo porque nunca lo he buscado, sé que sucede.
      En estos casos siempre puedes tirar de ftp y modificar el archivo css directamente con tu editor (notepad++, dreamweaver o cualquiera que tengas a mano).
      En el fondo es lo mismo, e incluso más seguro ya que tienes “control + z”.
      Si tienes dudas sobre qué archivo css es el que usa el tema haz un “inspeccionar elemento” con el chrome y mira el archivo de donde coge todas las instrucciones.

      Espero haberte ayudado 😉

      Reply to this comment
  4. Nieves

    Jun 11. 2014

    Hola. De los pocos tutoriales que he encontrado muy bien explicado. Lo que has contado es justo lo que me pasaba que no podía hacer y ya sí. Lo que pasa es que yo tengo las entradas para que se vea solo el título y luego hay que pinchar en Leer mas para seguir. Y es antes de pinchar cuando no se me cambia el color del título con tu método. Podrías darme alguna idea? Gracias.

    Reply to this comment
    • Chris

      Jun 12. 2014

      Eso es porque el título no es un texto, es un vínculo y estos actúan de distinta forma.
      Debes mirar dentro de que clase se encuentra este “leer más”. Pongamos que es dentro de un grupo que se llama “link”.

      Tendrías un código parecido a:

      .link a:link {color:#4f5555; text-decoration:none;}
      .link a:visited {color:#4f5555; text-decoration:none;}
      .link a:hover {color:#4f5555; text-decoration:underline;}
      .link a:text {color:#4f5555; text-decoration:none;}

      Con esto le decimos que el link sea del color #4f555 y que no lo subraye.
      Que el link visitado sea del mismo color y no lo subraye
      Que cuando estemos por encima del link sea del mismo color y que lo subraye.
      Que el texto del link sea de ese color y no lo subraye.

      Espero haberte ayudado. Si necesitas algo más siempre me puedes decir la web y lo miro cuando tenga un segundo 😉

      Reply to this comment

Leave a Reply

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies