Diferenciar miniposts en nuestro diseño

Hay ocaciones en el que nuestros post no necesitan de muchas palabras, puede ser un pensamiento, o un pequeño comentario sobre una noticia que no necesita de más eco, para esto tenemos los miniposts y es así que con este mini-tutorial aprenderemos a hacer un diseño diferente en nuestro theme para diferenciar los miniposts.

Para ello descargaremos este archivo cuyo código lo agregaremos a nuestro functions.php y nos permitirá relacionar el minipost con la imagen que queremos que represente. Este paso es opcional.

Luego ubicaremos en nuestro index.php la siguiente línea

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

Justo debajo de esa linea estará todo el código de la apariencia de los posts, lo que debemos de hacer es añadir una condicional para que cambie el diseño cada vez que se publique un minipost.

El nuevo código lucirá de la siguiente manera:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php if ( in_category('10') ) { ?>
<div class="minipost">
<!-- LA IMAGEN FUNCIONARÁ SOLO SI INSTALASTE EL CÓDIGO EN
EL FUNCTIONS.PHP DE LO CONTRARIO BORRALA-->
 <div class="imagen">
 <?php $files = get_children("post_parent=$id&post_type=attachment&post_mime_type=image");
 if($files){ $keys = array_keys($files); $num=$keys[0];$thumb=wp_get_attachment_thumb_url($num);
 print "<img src='$thumb' width='50' height='50' alt='".get_the_title()."' />";
 }else{
 print "<img src='SIN-IMAGEN' width='50' height='50' alt='".get_the_title()."' />";
 }?>
 </div>
<!-- FIN DE IMAGEN-->
 <div class="texto">
 <?php the_excerpt(''); ?>
 </div>
 <div class="clear"></div>
</div>
<div class="espacio"></div>
<?php } else { ?>
<!-- A CONTINUACIÓN COLOCAR EL CÓDIGO DE TUS POSTS NORMALES --->
<!-- IMPORTANTE COLOCAR ANTES DEL ENDWHILE-->
<?php } ?>
<?php endwhile; ?>
<!-- continúa el código de tu index.php -->

Lo que hace este codigo es buscar los posts de la categoria miniposts y cambiarles el estilo, para que funcione debes de escribir el ID de categoría en la siguiente línea del código: if ( in_category(‘ID‘) )

Luego agregamos a nuestra hoja de estilos el siguiente código:

.minipost { padding: 5px 18px 5px 18px; border: 3px solid #f3f3f3; margin: 0 0 28px;}
div.imagen { display: block; float: left; height:50px; width:50px; border: 1px solid #cfcfcf; margin:10px 20px 10px 0;padding:5px;background-color:#fff;}
.texto {font-size: 0.75em; font-family:Tahoma, sans-serif;text-align:justify; color:333;}
.texto{padding:10px 0 10px 0;overflow:hidden}
.texto a{text-decoration: none; font-weight:bold; color:#5d721f;}
.texto a:hover{text-decoration:underline; font-weight:bold; color:#A11111;}
.clear {clear: both; margin: 0; padding: 0;}
.espacio {border-bottom:1px solid #e4e4e4; margin:5px 0 10px 0; display:block;}

Finalmente procederemos a publicar, si es que no lo hemos hecho antes, nuestro minipost, cuyo resultado final – luego de aplicar los cambios en la hoja de estilos – es el siguiente:

Ejemplo de minipost

Espero que te sirva este pequeño tip, si tienes dudas te invito a formular tus preguntas en el foro.

Comentarios
  1. Darío Ferrer

    Según entiendo efectúas un query a wpbd->posts sólo para encontrar una imagen, a la cual le aplicas una función (image_downsize) y al final rematas con un else (si no existe) entonces viene la otra por defecto… Demasiado php para una tarea tan simple. Es preferible redimensionar la miniatura vía CSS, pues es mejor “desperdiciar” unos pocos bytes (en la miniatura redimensionada) que agregar carga innecesaria al CPU. Mi opinión nomás.

    Por cierto, en tu query de la base de datos mencionas “$thumb->ID” pero no construyes el bucle. Debes encerrarlo en un bucle (por ejemplo foreach) para que funcione correctamente.

    Escrito el20/12/2009
  2. Romina

    Hay posibilidades de volver a subir el functions.php? está roto el enlace, muchas gracias!

    Escrito el14/09/2011

DEJA TU COMENTARIO