Como poner imágenes con links en el header

By infoc2830  |  febrero 15, 2013  |  Programacion  |  No Comments

Si estás buscando la manera de poner imágenes con ligas o links, tales como los botónes de facebook y twitter en tu header de wordpress: aquí te explicamos como hacerlo.

1.- Crea un archivo en el notepad parecido a este:
header-links.php
<div class=”the-header-links link-facebook” style=”cursor: pointer;” onclick=”location.href=’http://www.facebook.com/BREADPanaderosArtesanales’;”>
<div class=”the-header-links link-twitter” style=”cursor: pointer;” onclick=”location.href=’http://www.twitter.com/BREADmty’;”>

[Sustituye BREADPanaderosArtesanales y BREADmty con la información de tus Páginas].

2.- Crea una nueva carpeta que se llame templates en el siguiente directorio:
public_htmlbreadwp-contentthemestutemaxyztemplates

Y pon ahí el archivo header-links.php que acabas de crear.

3.- Agrega el siguiente código en el archivo styles.css

/*–> header links */
.the-header-links {
position: absolute;
display: block;
z-index: 100;
border: 1px solid black;
}
.link-facebook {
width: 50px;
height: 50px;
left: 775px;
top: 0px;
}
.link-twitter {
width: 50px;
height: 50px;
left: 836px;
top: 0px;
}

[Tendrás que ajustar el width, height, left y top a las posiciones correctas de acuerdo a dónde están tus imágenes clickeables. Obtendrás un borde color negro como guía, que te permitirá ver en dónde estas ubicando el tamaño y posición de tus areas clickeables, que después podrás quitar.
Esta página te puede ayudar a ubicar la posición de tus imágenes visualmente http://www.image-maps.com.]

4.- Agrega el siguiente código en el archivo header.php

Busca el código parecido a cualquiera de estos dos renglones:
<div class=”art-header”>

Y justo abajo de este código agrega el siguiente renglón:
<!–?php get_template_part(‘templates/header-links’,’links’); ?–>

5.- Una vez que a prueba y error ubicaste el area clickeable sobre las imágenes de facebook, twitter, etc., puedes comentarizar el borde negro para que no se vea de la siguiente manera:

/* border: 1px solid black; */

6.-Listo! Ya tienes dos o más botones sobre la imagen del header de wordpress. Recuerda que las imágenes que tendrán liga / link ya deben de estár en la imagen de header.

La siguiente página: www.image-maps.com, te permite crear un código para visualmente crear el tamaño y coordenadas de tus imagenes de forma visual. Esto te permitirá ubicar más facil la información que debes poner en el style.css

Aquí hay un ejemplo de como quedaría:
http://www.BREADPanaderosArtesanales.com

Espero que esto te sea de utilidad, y deja un comentario si te funcionó o tienes alguna duda.