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-

Figura 2-

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‘ () 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-

Figura 4-

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‘ () 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-
Figura 6-

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-

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-

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-

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.

Escrito por Marcelo Avero el 29 de Mayo de 2008 con 5 comentarios.
Enviar a un amigo por E-Mail
Lee más artículos sobre Diseño Web y Tutoriales

Artículos relacionados

• Temas breves de CSS - Foro de Zonamasters (30 de Octubre de 2008)
• Nuevo Blog de Diseño en Archivados (7 de Julio de 2008)
• Font Tester, comparador de fuente online (2 de Febrero de 2008)
• Todo lo que necesita tu web (16 de Noviembre de 2007)
• Libros gratuitos sobre desarrollo web (15 de Noviembre de 2007)