Cambiar el Header de un tema WordPress

Tener un blog no necesariamente quiere decir que seamos WebMasters y estemos inundados de conocimientos de PHP o HTML, por lo tanto no todos pueden crear sus propios temas para Blogs. Es por esto que existen temas prontos para la descarga y así hacernos la vida más fácil al momento de crear un Blog.

Temas para WordPress hay cientos, se pueden descargar todos desde esta página. Pero no siempre los temas de adecuan a nuestros intereses, ya sea por el nombre o los colores.

En este sencillo pero efectivo tutorial vamos a modificar el Header de nuestro blog para que sea acorde a la idea que tengamos en mente para el mismo.

Para este ejemplo, utilicé el tema “Activate“, creado por Brian Gardner para WordPress.

Lo primero que deberemos hacer es descargar el tema desde aquí. Una vez hecho esto descomprimimos la carpeta dentro del directorio ‘wordpress/wp-content/themes’ dentro de nuestro servidor. Luego activaremos dicho tema yendo al panel del blog y seleccionando ‘Presentación‘ (Presentation), aparecerá una lista de los temas habilitados, entre los que figura el que acabamos de descargar. Con sólo hacer un clic sobre él ya estará activado.

En este caso haremos un header para ZonaMasters.Com, lo que nos obligará a cambiar el nombre Activate por el de nuestro Blog:

  1. Dentro de la página principal del blog, le damos clic derecho sobre la imagen (header) y seleccionamos “ver imagen“, se nos abrirá otra ventana con sólo la imagen que queremos cambiar.
  2. La misma imagen la guardaremos, mediante clic derecho y seleccionando ‘Guardar Imagen como…’ en el disco duro de nuestro PC, sin cambiarle el nombre ni el formato, esto es muy importante para que luego el PHP reconozca la nueva imagen como el Header original. Puede pasar que el formato de la imagen sea Gif, lo que no nos permitirá agregarle capas en la edición con Photoshop, si este es el caso, cambiaremos el modo de la imagen (Imagen/Modo/Color RGB), pero deberemos recordar volver al formato original cuando hayamos terminado la edición, guardándola como archivo Gif.
Figura 1-Seleccionar imagen

Figura 2-Guardar imagen

Ya está lista la imagen para editarla en nuestro Photoshop. Yo utilizaré la versión CS3, pero los pasos que verán están también disponibles en todas las versiones Photoshop.

  1. Una vez abierta la imagen en el Photoshop, procederemos a rellenar su contenido con el color de nuestro agrado, en este caso utilizaré el color del Header original de ZonaMasters (082334) y presionando ‘Alt+Supr‘ o seleccionando la herramienta ‘Bote de Pintura‘ (Herramienta bote de pintura) y haciendo clic sobre la imagen.
  2. Luego añadiremos algunos efectos al fondo para que no se vea tan plano. Vamos a la ventana ‘Capas’ y le damos doble clic a la capa ‘Fondo‘, pulsamos Ok a la ventana que aparece y volvemos a darle doble clic a la capa (que ahora se llama ‘Capa 0‘). Se nos abrirá la ventana ‘Estilo de Capa‘.
  3. Le añadimos el efecto ‘Resplandor Exterior‘ donde seleccionaremos un color un poco más claro que el del fondo y configuraremos de la siguiente manera:

Modo de fusión = Normal
Opacidad = 95%
Ruido = 0%
Color de Resplandor = 40a0b8
Técnica = Más Suavizado
Origen = Borde
Retraer = 0%
Tamaño = 10 Px

Figura 3-Estilo de capa para el fondo

Figura 4-Resultado del fondo

Ahora seleccionaremos una fuente de nuestro agrado para colocar el nombre de nuestro Blog en el Header.

  1. Luego de seleccionada nuestra fuente, seleccionamos la herramienta ‘Texto‘ (Herramienta texto) y posicionaremos el cursor en el centro de la imagen. Escribimos el nombre. Si el texto no se ve, es porque está del mismo color del fondo. Lo que deberemos hacer es ir a la ventana ‘Carácter‘ (Ventana/Carácter) y, con el texto seleccionado, cambiamos el color y lo posicionamos donde más nos agrade.
  2. Ahora llega el momento de agregarle algunos efectos al texto. Doble clic a la capa del texto y se nos abrira otra vez la ventana ‘Estilo de Capa‘ y seleccionaremos el efecto ‘Resplandor Exterior‘ con esta configuración:

►Modo de Fusión = Color más Claro
►Opacidad = 75%
►Ruido = 0%
►Color de Resplandor = befff4
►Técnica = Más Suavizado
►Extender = 0%
►Tamaño = 10 Px
Figura 5-Estilo de capa para el texto
Figura 6-Resultado del texto

Ahora sólo resta agregarle algunos “adornos” para hacer nuestro Header más vistoso. Lo que recomiendo a partir de ahora es investigar sin miedo todas las posibilidades que nos da esta poderosa herramienta llamada Photoshop, que son infinitas y muy sencillas de utilizar. Otra cosa que recomiendo es que no toméis este tutorial al pie de la letra, ya que es sólo una sencilla guía de las cosas que podréis hacer en poco tiempo.

Figura 7-Banner terminado

Luego que tengamos pronto nuestro nuevo Header, deberemos optimizarlo para la Web, de manera que no quede muy pesado y haga demorar la carga de nuestro Blog. Para eso presionaremos las teclas Ctrl+Shift+Alt+S y se nos abrirá la ventana ‘Guardar para Web y Dispositivos‘ donde configuraremos las siguientes opciones:

Figura 8-

Configuracion para la exportacion

De más está decir que deberemos guardar el archivo resultante con el mismo nombre y formato del original (en este caso es header.gif)

Ya tenemos pronto nuestro Header, ahora sólo falta subirlo a nuestro servidor y reemplazar el existente. Para eso deberemos ir a la ruta del tema (wordpress/wp-content/themes/carpeta del tema/images) y reemplazar la imagen.
Figura 9-Banner ya cambiado

Como siempre decimos, si tenéis alguna duda, sólo hace falta explayarla en los comentarios y a la brevedad os ayudaremos.

Más adelante volveremos con más tutoriales para seguir personalizando nuestros temas WordPress.

You may also like...

8 Responses

  1. dago dice:

    He modificado el header de mi tema, la cuestión es que desde el administrador de mi blog me sigue apareciendo el tema con el nombre original …¿cómo se lo puedo cambiar?

  2. Abel dice:

    Aquí os dejo un tema que he traducido y modificado ampliamente, perfecto para integrar Adsense. Lo tengo funcionando muy bien en 4 blogs.

    http://www.natureduca.com/blog/?p=235

    En esa dirección lo podéis descargar libremente.

    Espero que mi pequeña aportación os sea útil. Podéis contactar conmigo en abel arroba natureduca.com para cualquier cuestión relacionada con su funcionamiento

    Un saludo y suerte.

  3. Nessa dice:

    Buenas¡¡ Tengo una pregunta, resulta que en mi servidor, puse un weblog, y me pone que va por wordpress, pero al meterme en el FTP no me sale la carpeta “wordpress/wp-content/themes”.
    Sólo tengo la cgi-bin y cgi-data, dentro de cgi-data sale “weblog”, pero al meterme en esta lo unico que sale es un archivo que se llama “data”… ¿Sabrias ayudarme? ^.^
    Asias¡¡

  4. Carlos dice:

    hla, tenia una pregunta para hacer respecto a este tema de modificar la cabecera…Se puede poner un flash (.swf) en ves del .gif? donde hay q modificar el codigo y que codigo es el q se coloca, estaria muyuy agradecido si me ayudas en este tema gracias

  5. Noes dice:

    Se que el post es un poco viejo, pero podrias actualizar la penultima imagen para saber que debo poner en el photoshop?

  1. 29 mayo 2008

    […] ello me ha parecido interesante el post que he encontrado en Zonamasters y que nos guiará paso a paso durante todo este […]

  2. 30 mayo 2008

    […] Cambiar el header de un tema de WordPress: un blog se supone que es, entre otras cosas, una forma de facilitar a cualquier persona sin […]

  3. 24 junio 2009

    […] Cambiar el header de un tema WordPress […]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>