Pese a que hay mucha información en Internet relacionada a este tema, recibo muchos mails y peticiones en el foro de como implementar los «miniposts» (o asides) en nuestro blog. Así que he pensado en hacer un post «explicativo-recopilatorio» en el que veamos como implementar este tipo de posts de una forma fácil.
Actualmente tenemos 2 formas de hacerlo, una que es la que he estado usando hasta hace 1 año y la siguiente que es la que uso actualmente (y creo que en el theme anterior).
1) Miniposts en listado (Asides)
El sistema más usado para crear miniposts, se encarga de generar un listado de artículos usando un elemento <ul></ul> o <ol></ol>. Como es el sistema más usado e implementado me limitaré a ofrecer un listado de tutoriales:
- Adding Asides
- Como implementar asides en tu blog
- Asides o Miniblog con WordPress
- Mejorando tus asides(Miniposts)
2) Miniposts con CSS
La opción que uso actualmente y creo que es la más correcta, es la de cambiar el aspecto mediante el CSS. Si nos fijamos en la estructura del HTML del blog, vemos como todos los posts son exactamente iguales en todos los elementos.
<div class="hentry first entry" id="post-ID">
<h3 class="entry-title">
<a href="LINK" rel="bookmark" title="TITLE">TITLE</a>
</h3>
<p class="published">
<a href="LINK" rel="bookmark" title="Permalink">
<abbr title="DATE">
<span class="published-day">DAY</span>
<span class="published-month">MONTH</span>
</abbr>
</a>
</p>
<p class="entry-info">
<a class="vcard author" href="AUTHOR_LINK" title="author">AUTHOR</a> hace X días en: <a href="CATEGORY_LINK" title="Ver todas las entradas en CATEGORY" rel="category tag">CATEGORY</a>
</p>
<p class="post-comments">
<a class="comments-participate" href="LINK#respond-form" title="participa"><span>+</span></a>
<a class="comments-count" href="LINK#comments" title="Comentarios de TITLE">Y</a>
</p>
<div class="entry-content">
CONTENIDO
</div>
<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
CONTENIDO RDF
</rdf:RDF>-->
</div>
Como podemos ver es una estructura basada en el microformato hAtom, no hace falta decir que es una implementación propia intentando acogerme a las opciones que hAtrom ofrece.
Con la estructura HTML ya definida, únicamente nos queda diferenciar un tipo de posts u otros. Para ello, usaremos unas condicionales de WordPress que nos ayudarán a detectar que un post es un mini post o no.
En mi caso, uso una categoría que llamo asides, por lo tanto uso el condicional in_category(); al que le paso el ID de dicha categoría.
<?php if (have_posts()) :
while (have_posts()) : the_post();
$class = ' entry';
if (!is_single() && in_category(12))
$class = ' aside'; // Mini posts
?>
<div class="hentry <?=$class?>" id="post-<?php the_ID(); ?>">
Como podemos ver se trata de 4 líneas las que gestionan la class que he de incluir al post para luego aplicarle estilos. Vemos que se encuentra dentro de Loop y que esto lo hará por cada uno de los posts que hayamos solicitado.
En mi caso uso is_single() para evitar que me aplique el estilo en la vista de post individual, así mantengo la estructura visual en todos los posts. De todas formas se puede eliminar y funcionará exactamente igual en la vista de página principal y la de posts individual, es cuestión de gustos.
Si seguimos la raza de ejecución de el código anterior, obtenemos un resultado similar a esto.
//POST NORMAL
<div class="hentry entry" id="post-XXXX">
//MINI POST
<div class="hentry aside" id="post-XXXX">
Aplicando estilos
Una vez ya terminado la estructura, lo tenemos todo preparado para empezar a trabajar con el CSS y cambiar el aspecto de nuestros posts.
Usando la class extra que le añadimos a cada elemento <div /> encargado de englobar el post, podemos condicionar la salida por pantalla.
//Ejemplo POST NORMAL
.hentry {
color:#666;
background-color:#fff;
border-top:2px #999 solid;
}
.hentry a {
background-color:#eee;
text-decoration:none;
}
// ENTRY
.hentry .entry {
color:#333;
}
.hentry .entry a{
background-color:#fff;
text-decoration:underline;
}
// MINIPOSTS
.hentry .aside {
color:red;
}
.hentry .aside h3, .hentry .aside .comments, [...]{ //Ocultamos lo que no necesitamos mostrar.
display:none;
}
...
Si nos fijamos la estructura CSS sigue un patrón secuencial al que el procesador de CSS comenzará a ejecutar y aplicar de arriba hacia abajo. Aplicando los primero estilos antes y los últimos sobrescribirán los anteriores. Aprovechándonos de esta propiedad del CSS podemos darle estilos al mini post y este, únicamente sobrescribirá las opciones que nosotros le indiquemos en el CSS.
En mi caso, para ser mini posts, he optado por ocultar porciones del post para darle el aspecto de «mini». Al ocultarse por CSS estos siguen estando disponibles en el HTML y visibles para los navegadores sin posibilidad de ejecutar CSS, y evitando problemas con SEO al mantener el texto completo de la entrada.
Con un poco de imaginación podemos hacer un uso bastante interesante de este sistema.
Ejemplo de mini-posts
Muchos me han solicitado que explique de que se tratan los mini-posts o asides:
¿Que es un minipost?
Llamamos minipost o aside, a aquellos posts que por su pequeño tamaño preferimos que tenga un aspecto diferente más acorde con el tamaño del contenido. En este blog, podeis ver los miniposts con la pestaña verde en la página de inicio del blog.
16 comentarios, 8 referencias
+
#