danielmd
1
Eta
Programador
Suscripción a IA
Ayer estaba leyendo un tema donde querían colocar un slider con imágenes de las categorías y se me ocurrio hacer esto, que por el momento solo es para asignar una imagen a cualquier categoría.
Acá pueden ver como funciona lo de las imágenes aleatorias.
http://forobeta.com/wordpress/2146-colocar-imagenes-aleatorias-blog-php.html
El código de arriba dice que si la categoría es Celulares pondrá una de las 8 imágenes aleatorias contenidas en la carpeta CELULARES
Si no quieren tener tantas carpetas sueltas pueden hacer otra que se llame
imgcategorias y ahí meter las subcarpetas de cada categoría, tan solo tendrán que reemplazar el código y agregar algo así
imgcategorias/CELULARES
imgcategorias/Tecnologia
Otra cosa que pueden hacer es que al momento de hacer el random establezcan los limites, 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 modificarían y pondrían algo así
Ahora que si lo quieren poner en un slide lo pueden hacer con CSS y utilizando DIVs.
Ejemplo(pueden guardarlo como ejemplo.html y ver como funciona en su PC:
El ejemplo se ve algo así(le falta una imagen 😛)
Para hacerlo funcionar en Wordpress para lo de las categorías simplemente tienen que reemplazar la imagen que puse por el codigo de las categorías dentro de cada div
No se olviden de reemplazar href="URL DE LA CATEGORÍA", así al darle click los mandara a la categoría que escogieron.
Ya les tocara a ustedes jugar con los números y colores en el STYLE 🙂
P.D. Hagan pruebas para ajustar los tamaños y colores utilizando el archivo que les deje en HTML, una ves superadas las pruebas copien el código del style a su ARCHIVO STYLE de su theme y hagan las modificaciones para agregar esto en su theme WP.
Insertar CODE, HTML o PHP:
<?php if(is_category('CELULARES')) { ?>
<img src="<?php bloginfo('template_url'); ?>/CELULARES/<?php $num=rand(1, 8); echo ''.$num; ?>.png" tag="Se asignara 1 de 8 imagenes posibles a la categoría de celulares" border="0">
<?php }?>http://forobeta.com/wordpress/2146-colocar-imagenes-aleatorias-blog-php.html
El código de arriba dice que si la categoría es Celulares pondrá una de las 8 imágenes aleatorias contenidas en la carpeta CELULARES
Si no quieren tener tantas carpetas sueltas pueden hacer otra que se llame
imgcategorias y ahí meter las subcarpetas de cada categoría, tan solo tendrán que reemplazar el código y agregar algo así
imgcategorias/CELULARES
imgcategorias/Tecnologia
Otra cosa que pueden hacer es que al momento de hacer el random establezcan los limites, 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 modificarían y pondrían algo así
Insertar CODE, HTML o PHP:
<?php if(is_category('CELULARES')) { ?>
<img src="<?php bloginfo('template_url'); ?>/CELULARES/<?php $num=rand([B]1, 4[/B]); echo ''.$num; ?>.png" tag="se colocara una imagen aleatoria entre 1 y 4" border="0">
<?php }?>
<?php if(is_category('tecnologia')) { ?>
<img src="<?php bloginfo('template_url'); ?>/CELULARES/<?php $num=rand([B]5, 8[/B]); echo ''.$num; ?>.png" tag=" se colocara una imagen aleatoria entre 4 y 8" border="0">
<?php }?>Ahora que si lo quieren poner en un slide lo pueden hacer con CSS y utilizando DIVs.
Ejemplo(pueden guardarlo como ejemplo.html y ver como funciona en su PC:
Insertar CODE, HTML o PHP:
<HTML>
<HEAD>
<TITLE>Slide Imagenes</TITLE>
</HEAD>
<style>
.slide
{
position: relative;
overflow-x: scroll;
overflow-y: scroll;
width: 972px;
height: 165px;
margin-top: 0px;
margin-right: 14px;
margin-bottom: 0px;
margin-left: 14px;
background-color: #D0D0D0;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
}
.slide .panel
{
float: left;
overflow-x: hidden;
overflow-y: hidden;
margin-top: 10px;
margin-right: 17px;
margin-bottom: 10px;
margin-left: 17px;
width: 220px;
background-color: #FF8080;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
height: 140px;
}
</style>
<BODY>
<div class="slide">
<div style="float: none; position: absolute; left: 0px;" class="panel">
<img src="http://i32.tinypic.com/2a6vw2w.jpg" tag=" se colocara una imagen aleatoria entre 4 y 8" border="0">
</div>
<div style="float: none; position: absolute; left: 239px;" class="panel">
<img src="http://i32.tinypic.com/2a6vw2w.jpg" tag=" se colocara una imagen aleatoria entre 4 y 8" border="0">
</div>
<div style="float: none; position: absolute; left: 478px;" class="panel">
<img src="http://i32.tinypic.com/2a6vw2w.jpg" tag=" se colocara una imagen aleatoria entre 4 y 8" border="0">
</div>
<div style="float: none; position: absolute; left: 717px;" class="panel">
<img src="http://i32.tinypic.com/2a6vw2w.jpg" tag=" se colocara una imagen aleatoria entre 4 y 8" border="0">
</div>
</div>
</BODY>
</HTML>Para hacerlo funcionar en Wordpress para lo de las categorías simplemente tienen que reemplazar la imagen que puse por el codigo de las categorías dentro de cada div
Insertar CODE, HTML o PHP:
<div style="float: none; position: absolute; left: 717px;" class="panel">
<?php if(is_category('tecnologia')) { ?>
<a href="URL DE LA CATEGORIA">
<img src="<?php bloginfo('template_url'); ?>/CELULARES/<?php $num=rand([B]5, 8[/B]); echo ''.$num; ?>.png" tag=" se colocara una imagen aleatoria entre 4 y 8" border="0">
</a>
<?php }?>
</div>No se olviden de reemplazar href="URL DE LA CATEGORÍA", así al darle click los mandara a la categoría que escogieron.
Ya les tocara a ustedes jugar con los números y colores en el STYLE 🙂
P.D. Hagan pruebas para ajustar los tamaños y colores utilizando el archivo que les deje en HTML, una ves superadas las pruebas copien el código del style a su ARCHIVO STYLE de su theme y hagan las modificaciones para agregar esto en su theme WP.
Última edición:
