Asides (o MiniBlog) para Wordpress

Publicado por Guill3m el 23 de Mayo de 2006 en Diseño Web, Tutorial

Como podreis haber comprobado en el final de la página, Q�?B�?LH�? está gestionado con Wordpress. Lo que quiero decir es que después de estar viendo durante un tiempo en webs como Pixel y Dixel unos posts más cortos y con un formato distinto a los demás (muy útiles si quieres escribir algo pero es muy corto para un post, así estas cosas no se quedan sin publicar). La cuestión es que el otro dia me decidí enviar un email a Pixel y Dixel para ver como se hacia y Pixel me contestó y me dijo que esto que yo buscaba se llamaba “asides” y me dijo la web oficial de esta función (en inglés), el blog de Matt (el principal desarrolador de Wordpress). A partir de esta información ya pude buscar un poco más i encontré dos tutoriales más: uno en La Maté por un Yogur, y el otro en el blog de Oscar Barber (en catalán), desde aquí pude aclararme un poco más y en poco tiempo lo tuve acabado.

En este post, voy a hacer un poco un resumen de estos tutoriales para aquellos que useis Wordpress y querais introducir esta función en vuestro blog (después del salto).

Actualizado [ 7/6/06 ]
Actualizado² [ 25/7/06 ]

————————————————————

En primer lugar crearemos una nueva categoria y nos fijaremos en el ID que se le asigna (en nuestro caso es el 17, fijaros bién de cambiarlo en el vuestro en la parte de código).

Después, en el archivo index.php de nuestro theme, justo después de <?php while (have_posts()) : the_post(); ?>, insertaremos el siguiente código (no os olvideis de canviar el 17 por el ID que responda a la categoria que habeis creado antes):

<?php if (in_category(17) && !is_single()) { ?> <ul class="asides"> <li id="p<?php the_ID(); ?>"> <?php echo wptexturize($post->post_content); ?> <?php comments_popup_link('(0)', '(1)', '(%)'); ?> <a xhref="<?php the_permalink() ?>" rel="bookmark" title="Enlace Permanente a: <?php the_title(); ?>">#</a> <?php edit_post_link('(e)'); ?> </li> </ul>

<?php } else { ?>

La almuadilla (#) es para mostrar el enlace permanente al post (se puede quitar), se puede quitar también la linia de los comentarios, pero ¿para que quitarlo?, lo demás no.

Lo siguiente que buscaremos será <?php endwhile; ?>, y lo sustituimos por:

<?php } endwhile; ?>

Con esto ya es suficiente para que funcione, ahora vamos a la parte visual de la función: la primera cosa que deberiais hacer es un estilo CSS nuevo para este tipo de posts, uno puede ser este, simple pero funcional:

ul.asides li { list-style-type: none; font: 9pt/11pt Tahoma, Verdana, Arial; background: url(images/aisides.gif) no-repeat; padding: 0 20px 0 20px; }

Ya por último, hay una función (que yo ne dejado puesta, no me acababa de gustar demasiado) que hace que si hay dos miniposts juntos es agrupen en la misma lista, si quereis hacer esto solo hay que pegar (en el archivo index.php de nuestro theme) antes del <?php get_header(); ?> el siguiente codigo y ya estará todo acabado:

<?php function stupid_hack($str) { return preg_replace('|</ul>\s*<ul class="asides">|', '', $str); } ob_start('stupid_hack'); ?>

Para cualquier duda no os olvideis de decirlo en los comentarios o enviarme un email.

Actualización (7/6/06): No me dí cuenta en ese momento, si quereis que en la navegación entre categorias, en el archivo de vuestro blog o en la búsqueda (si es que la teneis activada), también aparezcan con este estilo, hay que volver a hacer el mismo procedimiento en los archivos: archive.php y search.php.

Actualización (25/7/06): Se ve que el nuevo theme no deja poner a href, en vez de eso nos pone a xhref, así que tenedlo en cuenta si haceis copiar y pegar, o al escribir el código. (Grácias a Daniel Cáceres por avisar de que no te iba, si no ubiése sido así no me habria fijado).

Hay 19 Comentarios to “Asides (o MiniBlog) para Wordpress”

Feed para esta Entrada Haz un Trackback

1 Gina 24 de Mayo de 2006 a las 17:32

A ver… intenté hacer un blog y tu ya me complicas con wordpress?? XDD

Ademas no tengo un duro para un dominio ni tiempo para mantener un blog sin blogger…:( soy un desastre… dame tiempo en este mundillo ;)
2 Guill3m 24 de Mayo de 2006 a las 20:28

Bueno si no quieres ponerlo, no es preciso…
Pero yo lo necesitaba, ya habia dejado algunas cosas sin colgar por culpa de esto…
Bueno, seguiremos esperando que pases a wordpress :P (¿falta mucho?)…
3 kiko 26 de Mayo de 2006 a las 8:31

Gina, trankila que con adsense conseguirás pasta para un dominio y un host.
Ya estas cequita …
4 Azelath 30 de Mayo de 2006 a las 14:17

Otia! Muchas gracias por poner esta información, en unos minutos AdVerecundiam ofrecerá es mismo tipo de ports rápidos. ¡Una solución magnífica!

De nuevo, muchas gracias :P
5 Gina 31 de Mayo de 2006 a las 14:10

si beuno… llevo 6 euros y ya me decis que compre un dominio? Que no soy una blogstar como vosotros!!
6 Daniel Cáceres 25 de Julio de 2006 a las 16:42

He hecho TODO minuciosamente y no me funciona :-(
7 Guill3m 25 de Julio de 2006 a las 17:06

Daniel, como que no funciona????!!!
no se lo has revisado bién??
lo único que se me ocurre es que no hayas cambiado el ID de la categoria

vale vale vale ya sé que pasa me pasó lo mismo en el turorial del icono, en la linea:

<a xhref="<?php the_permalink() ?>" rel="bookmark" title="Enlace Permanente a: <?php the_title(); ?>">#</a>

no se porque pero con el nuevo theme pasa, al principio de todo hay un a href y no se porque pone a xhref no se, debe de hacerlo para evitar malas lecturas del código por parte del navegador o yoquesequé…

prueba ahora, si sigue sin funcionar me avisas.
8 Daniel Cáceres 26 de Julio de 2006 a las 8:23

Jejejeje! Muchas gracias entonces a ti por fijarte ;-)
9 Daniel Cáceres 26 de Julio de 2006 a las 8:35

Pues ya lo he revisado y he implementado tal cual lo pones y nada :-(
No se si es porque mi Wordpress es 2.0.3 o es por mi theme
10 Guill3m 26 de Julio de 2006 a las 9:24

El Wordpress que usamos nosotros también es el 2.03 :S
no se, esta tarde miraré esto un poco más a fondo (ahora estoy en clase)

¿usas un theme descargado?¿o basado en uno descargado?¿o es tuyo?
bueno, si me lo puedes pasar por el correo esta tarde me lo miro a ver que tal…
11 Daniel Cáceres 26 de Julio de 2006 a las 17:29

Uso un theme descargado de Template Monster. No es mío.
Te lo enviaré a ver si encuentras el error :-(
12 lautaro 29 de Noviembre de 2006 a las 3:46

Muchas gracias!
lo he podido configurar bastante bien! cosa que desde donde vos lo enlazás no está bien explicado (existen incongruencias ;)

Bueno, muchas gracias de nuevo.

Solo falta que mis lectores puedan usar etiquetas en los comments y ya estoy ;)

Suerte, y gracias

pd: sí, agradezco mucho :P
13 nacho 21 de Noviembre de 2007 a las 19:27

Hola, a mi no me funciona, lo único que he hecho distinto es poner esto:

ul#minientradas li { list-style-type: none; font: 9pt/11pt Tahoma, Verdana, Arial; background:#C1FFBA url(pix/bq.gif) left no-repeat; padding: 0 20px 0 20px; border:2px solid #14690A; }

He puesto el “#” en vez de el “.” porque en el resto de código del css, cuando ponen un ul, depués ponen un “#” en vez de el punto. Y sigue sin funcionar con punto o con almohadilla, también he puesto eso del color de fondo pero no creo que tenga nada que ver… y sigue sin funcionarme…
14 Guill3m 22 de Noviembre de 2007 a las 17:34

Nacho Se puede poner un “#” en vez del “.”, pero has de tener en cuenta que “#” hace referencia a una capa (un div) y el punto a una clase, por tanto también deberías cambiar en el html, en vez de tener un:
<ul class="asides"> </ul>
deberías hacer que la lista este dentro de una capa con id asides (o el nombre que le hayas puesto), es decir:
<div id="asides"><ul></ul></div>

Así deberia hacerte lo mismo, de todas maneras te recomiendo que lo hagas como está explicado en el tutorial (es decir, con una clase y no una capa), puesto que es más limpio y además, en el caso de querer usar lo de que te junte los miniposts que van seguidos en una misma lista no tienes que complicarte la vida para editar ese ‘hack’.
espero haberte solucionado tus dudas y si no ha sido así me avisas y a ver que podemos hacer
15 nacho 22 de Noviembre de 2007 a las 19:15

Muchísimas gracias, no sabes cuanto te lo agradezco… ya me va todo bien… te explicas mu bien, GRACIAS!
16 nacho 22 de Noviembre de 2007 a las 19:51

Esto… siento molestarte otra vez, pero se me estaba ocurriendo que si estas “cajas” de colores se podrían poner en medio de una entrada, en plan: “ATENCI�?N: esta entrada patatín patatán” con un fondo en amarillo (o el color que sea) en medio de la entrada indicando algo pero que queda mucho más remarcado, es que creo haberlo visto en algún sitio… como se haría…??

Gracias!
17 Guill3m 22 de Noviembre de 2007 a las 19:55

Esto te lo contesto ahora por email, así no lleno esto con explicaciones que no tienen que ver del todo con esto.