Sindicación
Montando Mini Posts en nuestro Blog
Jue, 10/07/2008 - 08:28
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 
Compártelo
<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)
<div class="hentry first entry">
<h3>
<a href="LINK" rel="bookmark" title="TITLE">TITLE</a>
</h3>
<p>
<a href="LINK" rel="bookmark" title="Permalink">
<abbr title="DATE">
<span>DAY</span>
<span>MONTH</span>
</abbr>
</a>
</p>
<p>
<a 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>
<a href="LINK#respond-form" title="participa"><span>+</span></a>
<a href="LINK#comments" title="Comentarios de TITLE">Y</a>
</p>
<div>
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"hentry <?=$class?>">
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>
//MINI POST
<div>
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.
Artículos relacionados
- Encripta el contenidos de tus posts
- Mejorando tus asides (mini posts)
- Imagen para blog UTF-8 (2)
- Performancing para Firefox, Blogear más facil
- Modificación de la modificación de I HAEV STYLE
You have already tagged this post. Your tags:
Noticia original: www.anieto2k.com