Como poner imágenes con links en el header
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_html\bread\wp-content\themes\tutemaxyz\templates
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.