Hace un par de semanas escribí un tutorial en forobeta donde mostraba como colocar una imagen con un link para entrar a determinada categoría de un blog en wordpress en ves de mostrar solo un link de texto.
Para hacer esto es muy sencillo, tan solo deben colocar este pedazo de código donde quieren que aparezca la imagen.
<?php if(is_category('CELULARES')) { ?> <a href="http://rutadelacategoria.com/CELULARES"><img src="http://rutadelaimagen.com/img.png" tag="Siempre llenen este campo con un texto alterno" border="0"></a> <?php }?> |
En la primer linea preguntamos if/si la categoría es CELULARES, si lo es entonces coloca la imagen de la ruta que colocamos, si no es igual a esa categoría no hace nada. Si ustedes quieren cambiar la categoría solo deben reemplazar la palabra CELULARES por la categoría deseada.
Ahora un poco mas avanzado y combinado con mi tutorial de Colocar Imágenes Aleatorias
<?php if(is_category('CELULARES')) { ?> <a href="http://rutadelacategoria.com/CELULARES"><img src="<?php bloginfo('template_url'); ?>/CELULARES/<?php $num=rand(1, 8); echo ''.$num; ?>.png" tag="Se asignara 1 de 8 imágenes posibles a la categoría de celulares" border="0"></a> <?php }?> |
El código de arriba dice que si la categoría es CELULARES pondrá una de entre 8 imágenes aleatorias contenidas en la carpeta CELULARES
bloginfo(‘template_url’) <---Nos lanza la ruta del blog hasta el theme que usamos ejemplo: miblog.com/wp-content/freshtheme y se agrega /CELULARES/ porque es una subcarpeta dentro de la carpeta del theme y quedaría así.
miblog.com/wp-content/freshtheme/CELULARES
$num=rand(1, 8 ) es el que se encarga de generar un número aleatorio desde el 1 hasta el 8 (obvio las imágenes se llamaran 1.png,2.png…. 8.png y debe haber 8, si no están las 8 puede marcar error)
Otra cosa que pueden hacer es que al momento de hacer el random establezcan limites para mostrar varias categorías con imagen, por ejemplo, si solo crean una carpeta de imágenes pueden decir que de la 1 a la 4 son imágenes de celulares, de la 5 a la 8 imágenes de tecnología, así al momento del random modifican por algo así.
<?php if(is_category('CELULARES')) { ?> <a href="http://google.com"><img src="<?php bloginfo('template_url'); ?>/IMAGENES/<?php $num=rand(1, 4); echo ''.$num; ?>.png" tag="se colocara una imagen aleatoria entre 1 y 4" border="0"></a> <?php }?> <?php if(is_category('tecnologia')) { ?> <a href="http://google.com"><img src="<?php bloginfo('template_url'); ?>/IMAGENES/<?php $num=rand(5, 8); echo ''.$num; ?>.png" tag=" se colocara una imagen aleatoria entre 4 y 8" border="0"></a> <?php }?> |
Ahora que si quieren poner todas las categorías con imagen sin que se vea feo su theme pueden hacer algo como esto.
Tan solo copien este código y lo guardan en un archivo html para que vean como funciona, luego de eso reemplazan el contenido de cada div por el código necesario para colocar una imagen con link para cada categoría como se hizo arriba.
<HTML>
<HEAD>
<TITLE>Slide Imagenes by Daniel de soycachanilla.com</TITLE>
</HEAD>
<style>
.divslide
{
float: center;
position: relative;
overflow-x: scroll;
width: 720px;
height: 120px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 10px;
background-color: #000000;
}
.divslide .imagenes
{
float: left;
overflow-x: hidden;
overflow-y: hidden;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
width: 100px;
background-color: #0000FF;
height: 80px;
}
</style>
<BODY>
<div class="divslide">
<div style="float: none; position: absolute; left: 0px;" class="imagenes">
<img src="http://i32.tinypic.com/2a6vw2w.jpg" tag=" TEXTO ALTERNATIVO A IMAGEN" border="0" height="80" width="100">
</div>
<div style="float: none; position: absolute; left: 120px;" class="imagenes">
<img src="http://i32.tinypic.com/2a6vw2w.jpg" tag=" TEXTO ALTERNATIVO A IMAGEN" border="0" height="80" width="100">
</div>
<div style="float: none; position: absolute; left: 240px;" class="imagenes">
<img src="http://i32.tinypic.com/2a6vw2w.jpg" tag=" TEXTO ALTERNATIVO A IMAGEN" border="0" height="80" width="100">
</div>
<div style="float: none; position: absolute; left: 360px;" class="imagenes">
<img src="http://i32.tinypic.com/2a6vw2w.jpg" tag=" TEXTO ALTERNATIVO A IMAGEN" border="0" height="80" width="100">
</div>
<div style="float: none; position: absolute; left: 480px;" class="imagenes">
<img src="http://i32.tinypic.com/2a6vw2w.jpg" tag=" TEXTO ALTERNATIVO A IMAGEN" border="0" height="80" width="100">
</div>
<div style="float: none; position: absolute; left: 600px;" class="imagenes">
<img src="http://i32.tinypic.com/2a6vw2w.jpg" tag=" TEXTO ALTERNATIVO A IMAGEN" border="0" height="80" width="100">
</div>
<div style="float: none; position: absolute; left: 720px;" class="imagenes">
<img src="http://i32.tinypic.com/2a6vw2w.jpg" tag=" TEXTO ALTERNATIVO A IMAGEN" border="0" height="80" width="100">
</div>
</div>
</BODY>
</HTML> |
Así es como lo van a ver una ves implementado de esta manera.
Para usarlo en wordpress copian el contenido de < style > < / style> y lo guardan en el archivo style.css de su theme, y así ya pueden colocar los DIV del slide en cualquier parte de su blog y modificarlo a su gusto 😉
Si algo no entendieron o quieren complementar algo me dicen, si me equivoque en algo también 😛