Como incluir Miniposts o Asides en tu blog

by Agustin Garassino on Marzo 24, 2009

¿Miniposts y Asides?

La idea de miniposts o asides es bien simple: son  pequeñas piezas de información que no merecerían una entrada completa pero igual se desea publicar. Como un comentario al pasar, o algo por el estilo. Vamos a ver un mini-tutorial para incluirlos en nuestro blog sin mucho esfuerzo.

Paso 1:  Crear la categoría para los miniposts o asides

Estos miniposts deberán tener una categoría donde ser guardados (que luego nos servirá para traer todas las entradas de esa categoría). Para este tutorial vamos a crear una nueva categoría llamada “Breves“. Una vez creada, vamos al listado de categorías y dejamos el puntero de mouse arriba de la nueva categoría: anotamos lo que viene luego de “cat_ID=” en el link, ese es el ID único de la categoría (en nuestro caso el 27).

Paso 2: Insertar el código para mostrar los Asides

Una vez creada la categoría vamos al editor del theme y abrimos el index.php (o el fichero de la página principal si es distinto). Luego de el inicio de Loop:

[sourcecode language='php']
;

[/sourcecode]

Agregamos:
[sourcecode language='php']
echo is_single();
if (!is_single() && in_category('27'))
/*si no es la vista individual de un post y
la categoría es la 27, le cambiamos la clase*/
$clase = ' minipost'; //clase para los miniposts
?>
[/sourcecode] Y el codigo para añadir la clase “minipost” al título del post:
[sourcecode language='php']

” rel=”bookmark” href=”“>

[/sourcecode]
O sea, si el post está en la categoría Breves (id 27), le añadimos una case css extra, que luego nos servirá para diferenciar la entrada.

Paso 3: Un poco de Estilo

Por último, el truco clave es diferenciar estos posts de los post regulares. Para eso abrimos el archivo style.css de nuestro theme y añadimos el siguiente código:
[sourcecode language='css'].minipost {
background:#EFF8FB none repeat scroll 0 0;
border-bottom:1px solid #CCCCCC;
border-top:1px solid #CCCCCC;
color:#333333;
font-size:120%;
margin:10px 0 28px;
padding:10px;
}[/sourcecode]
Espero que les sirva y nos cuenten qué tal les ha ido con este tutorial.

Comparte:
  • TwitThis
  • Facebook
  • Meneame
  • Bitacoras.com
  • Digg
  • del.icio.us
  • Google
  • Technorati

Leave a Comment

Previous post:

Next post: