0

Imágenes según nuestras categorías

Puede llegar un momento en el que decidamos querer darle un toque más personal a nuestras categorías con tal de facilitar o idenfiticar mejor nuestras entradas a los navegantes, esto es mediante una imagen para nuestra categoría, para asociar rápidamente el contenido de dicha entrada a según que temática, ahora os copiaré y explicaré un código el cual os  facilitará este cometido:

 

En nuestro functions.php debemos pegar la siguiente función:

function category_identity($id)
{
$margin = 0;
foreach((get_the_category($id)) as $category)
{  $cat = $category->category_nicename;
$style = 'margin-right: ';
$style .= $margin;
$style .= 'px';
$ruta = 'nuestra ruta del tema/images/categories/' . $cat .'.png';
if (file_exists($ruta)) {
$ruta = get_bloginfo('template_url') . '/images/categories/' . $cat .'.png';
imprimir_logo($style,$ruta);
$margin = $margin + 52;
}

}

}
function imprimir_logo($style,$ruta) {
?>
<div style="<?php echo $style; ?>"><img src="<?php echo $ruta; ?>"/></div>
<?
}
foreach((get_the_category($id)) as $category)]

Recorremos las categorías asociadas al ID de nuestro post.

$cat = $category->category_nicename;

$style = 'margin-right: ';
$style .= $margin;
$style .= 'px';
$ruta = 'nuestra ruta del tema/images/categories/' . $cat .'.png';

Obtenemos el nombre de nuestra categoría y lo asociamos como el nombre del archivo de la imagen que debemos cargar, para cada categoría cargamos en $style nuestro margen para que no se superpongan las distintas imágenes que hayan asociadas a nuestra categoría, en ruta cargamos la ruta de nuestro directorio home, este paso es muy importante  ya que la función file_exist no funciona con servidores externos, esto quiere decir que no sólo funcionaría poniendo nuestra url de nuestro dominio y el path hacia nuestro archivo, hay que poner el derectorio home completo vinculado a nuestro plan de alojamiento.

if (file_exists($ruta)) {
$ruta = get_bloginfo('template_url') . '/images/categories/' . $cat .'.png';
imprimir_logo($style,$ruta);
$margin = $margin + 52;

Miramos si existe esa imagen referida a nuestra categoría y de ser así cargamos nuestra ruta y la pasamos a imprimir logo pasándole el estilo y la ruta e incrementamos el margen.

function imprimir_logo($style,$ruta) {
?>
<div id=logo style="<?php echo $style; ?>"><img src="<?php echo $ruta; ?>"/></div>
<?
}

Ahora cargamos nuestro div pasándole la imagen en cuestión.

Por último sólo quedaría estilar nuestro logo:

#logo {float: right;}

Y ya en nuestro index.php, single.php, search.php y archive.php tenemos que copiar dentro de nuestro “post” el siguiente código:

<?php echo the_category_unlinked(' '); ?>

La posición de nuestras imágenes ya va a gusto de cada uno así como su estilo, espero que os sea de ayuda este código a más de uno.

Saludos.

Tone

Ingeniero del Software y procrastinador sin remedio, interesado en todo lo que tenga que ver con el mundo del desarrollo web y la inteligencia artificial, no sé si seré el responsable de la creación de Skynet algún día pero se intenta.

ESCRIBIR UN COMENTARIO
  • (will not be published)

XHTML: Puedes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>