, ,

Crear un Tumblelog con WordPress

Hace meses apareci√ɬ≥ Tumblr, y de repente los tumbelogs se hicieron “famosos”; a pesar de que algunos lo creen as√ɬ≠, es incorrecto pensar que nacieron en ese momento, puesto que al menos desde 2005 el concepto era conocido —Jason Kottke, en una anotaci√ɬ≥n de octubre de ese a√ɬĪo los describe as√ɬ≠:

Un tumblelog es un flujo de consciencia r√ɬ°pido y sucio [quick and dirty, tambi√ɬ©n “improvisado”], un poco como una lista de enlaces pero con m√ɬ°s que s√ɬ≥lo links […] m√ɬ≠nimos comentarios, poca charla entre blogs, el m√ɬ≠nimo suspiro de un trabajo final, casi pura edici√ɬ≥n… en realidad, es s√ɬ≥lo una manera de publicar r√ɬ°pidamente las “cosas” que te encuentras todos los d√ɬ≠as en la web

Hoy podr√ɬ≠amos decir: algo entre Twitter y un blog, mezclado con Flickr, del.icio.us y YouTube… m√ɬ°s una pizca de IM

Tumblr es realmente una herramienta fant√ɬ°stica: gratis, sin publicidad, con un buen dise√ɬĪo, bien enfocada a lo que pretende lograr, muy f√ɬ°cil de usar, personalizable… sin embargo, como rezaba la presentaci√ɬ≥n de proyecto de software web de por ah√ɬ≠ (no recuerdo cual), “tambi√ɬ©n pagamos una buena cuenta de web host”, y si me gustara simplemente utilizar las cosas que ya est√ɬ°n hechas probablemente no necesitar√ɬ≠a pagarla.

Hace un rato, pecesama anunci√ɬ≥ que estaba desarrollando gelato, un CMS instalable y de c√ɬ≥digo abierto orientado a la gesti√ɬ≥n de tumblelogs que a√ɬļn est√ɬ° en fase de desarrollo, pero desde algo antes hab√ɬ≠a estado deseando poder ocupar WordPress para crear y gestionar un tumblelog. Claramente, esto tiene tanto de desaf√ɬ≠o como de obstinaci√ɬ≥n: WordPress est√ɬ° dise√ɬĪado esencialmente para gestionar weblogs, pero su sistema de themes es lo bastante flexible y la disponibilidad de plugins suficientemente extensa como para poder llegar a funcionar como un gestor de contenidos “gen√ɬ©rico”.

Por ello, hace tiempo decid√ɬ≠ intentar crear mi propio tumblelog con WordPress, y a esta fecha ya podr√ɬ≠a decir que tengo una instalaci√ɬ≥n que de manera medio artesanal y con m√ɬ°s de alguna ma√ɬĪa… funciona… pero que al mismo tiempo me permitir√ɬ≠a seguir molde√ɬ°ndola a mis necesidades (por ejemplo, agregando m√ɬ°s tipos de contenido que videos, conversaciones, citas, posts e im√ɬ°genes, para incluir documentos, descargas, etc.)

Bueno, y √ā¬Ņc√ɬ≥mo?

Actualizaci√ɬ≥n: he creado un tema para WordPress que se encarga de la mayor√ɬ≠a de estas tareas, lo que permite mantener un sitio tipo-tumblelog con este CMS. Puedes revisarlo ac√ɬ°: Typographic √ʬĬĒ yukei.net

Preliminares

En primer lugar, he de decir que esto lo intent√ɬ© en un weblog (casi)nuevo, con lo que me he ahorrado el posible trabajo de tener que ajustar los contenidos anteriores al nuevo formato. Por lo tanto, primera cosa necesaria: una instalaci√ɬ≥n nueva de WordPress… tambi√ɬ©n se podr√ɬ≠a hacer con una con m√ɬ°s tiempo, pero necesitar√ɬ≠a m√ɬ°s trabajo.

A partir de ahí, sólo hubo tres cosas que fueron realmente necesarias para hacerla funcionar como un tumblelog:

  • Un sistema ordenado de categor√ɬ≠as
  • Un tema (o theme) especialmente dise√ɬĪado para contenidos tipo tumblelog
  • Un par de funciones en PHP para controlar algunos tipos especiales de contenido: citas y conversaciones

Poniéndolo a funcionar

Las categorías

√ā¬ŅPorqu√ɬ© es necesario un sistema ordenado de categor√ɬ≠as? B√ɬ°sicamente, porque va a ser la forma en que podemos dar a cada post un estilo especial, marcando cada post seg√ɬļn su tipo m√ɬ°s que por su contenido; de acuerdo con esto, defin√ɬ≠ las siguientes categor√ɬ≠as:

  1. Audio
  2. Cita
  3. Conversación
  4. Documento
  5. Enlace
  6. Foto
  7. Post Normal
  8. Video

Luego, en el theme creo un contenedor para cada post con el atributo class="post... más esta función como valor: <?php $cat = get_the_category(); $cat = $cat[0]; echo $cat->category_nicename; ?>, de modo que cada entrada tiene una clase de la siguiente forma: class="post video".

Y con eso es básicamente suficiente para diferenciar los posts por tipo. Sin embargo, una de las cosas más cool de Tumblr son los estilos automáticos que se aplican a dos tipos de contenidos: las citas y las conversaciones.

Como de todos modos quer√ɬ≠a aplicar alg√ɬļn descriptor de acuerdo al contenido, simplemente instal√ɬ© Ultimate Tag Warrior para aplicar etiquetas.

Las funciones

En mi caso, preferí controlar todo esto mediante el theme. Mi loop tiene esta forma:

<div id="contenido">

	<?php if (have_posts()) : while (have_posts()) : the_post() ?>
	
	<?php if(in_category(12)) /*si es una cita*/ { ?>
	<div class="post cita <?php measure_quote()?>">
		<h2><a href="<?php the_permalink()?>" title="Enlace directo a este post"><?php the_ID()?></a></h2>
		<?php the_content()?>
	</div>
	
	<?php } elseif(in_category(14)) /*si es una conversacion*/ { ?>
	<div class="post conversacion">
		<h2><a href="<?php the_permalink()?>" title="Enlace directo a este post"><?php the_ID()?></a></h2>
		<?php dialog_styling()?>
	</div>
	
	<?php } else { ?>
	<div class="post <?php $cat = get_the_category(); $cat = $cat[0]; echo $cat->category_nicename; ?>">
		<h2><a href="<?php the_permalink()?>" title="Enlace directo a este post"><?php the_ID()?></a></h2>
		<?php the_content()?>
	</div>
	<?php } ?>
	<?php endwhile; endif; ?>
	
</div>

En palabras: si el post es una cita, su clase ser√ɬ° class="post cita... m√ɬ°s una tercera clase que se define en relaci√ɬ≥n al largo del post; si es una conversaci√ɬ≥n, en vez de devolver el post, lo procesa a trav√ɬ©s de una funci√ɬ≥n, y si no es de ninguno de los tipos anteriores, lo devuelve “normalmente”.

Seguramente esto se puede hacer mediante plugins (o, m√ɬ°s bien, alguien podr√ɬ≠a darse el trabajo de transformar esto en un plugin… √ā¬Ņalguien dijo yo?)… y de paso, podr√ɬ≠an revisar si esto tiene alguna deficiencia de seguridad u otra forma m√ɬ°s efectiva de hacerlo, pero tal como est√ɬ° me ha funcionado sin problemas.

Calcular el largo de la cita

En el archivo functions.php, defino la siguiente función:

function measure_quote() {
    global $wpdb, $id;
	$post = $wpdb->get_var("SELECT post_content FROM $wpdb->posts WHERE ID = $id");

	$post_content = apply_filters ('the_content', $post);
	$words = trim ( strip_tags($post_content) );
	
	$word_count = count( explode(" ", $words) );
	
	if ( $word_count > 120 ) {
		print 'extra-large';
		}
	elseif ( $word_count > 80 ) {
		print 'large';
		}
	elseif ( $word_count > 40 ) {
		print 'medium';
		}
	else {
		print 'short';
		}
}

Y así tenemos, por ejemplo, una cita corta, mediana, larga o extra-larga. Teniendo el largo de la cita como clase, el resto es puro CSS

Dar estilo a las conversaciones

Nuevamente, en functions.php:

function dialog_styling() {
	/* Gracias GelatoCMS... 
	http://www.gelatcocms.com
	http://code.google.com/p/gelatocms/
	
	bajo licencia GNU GPL 2
	*/
	
	global $wpdb, $id;
	$post = $wpdb->get_var("SELECT post_content FROM $wpdb->posts WHERE ID = $id");
	
	$formatedText = "";
	$odd=true;
	
	$lines = explode("\n", $post);
		
		$formatedText .= "<dl>\n";
		foreach ($lines as $line) {
			$pos = strpos($line, ":") + 1;
			
			$label = substr($line, 0, $pos);
			$desc = substr($line, $pos, strlen($line));
			
			if ($odd) { 
				$cssClass = "odd"; 
			} else {
				$cssClass = "even"; 
			}
			$odd=!$odd;
			
			$formatedText .= " <dt class=\"".$cssClass."\">".$label."</dt>";
			$formatedText .= "	<dd class=\"".$cssClass."\">".$desc."</dd>\n";
	
		}
		$formatedText .= "</dl>\n";
		echo $formatedText;
}

Como pone el c√ɬ≥digo, he adaptado esta funci√ɬ≥n del proyecto gelato, aprovechando su licencia GNU GPL 2 —que por cierto, tambi√ɬ©n aplica a estos ejemplos.

Y… listo, tenemos nuestra conversaci√ɬ≥n con estilo (o m√ɬ°s bien, los estilos para nuestra conversaci√ɬ≥n).

El gran final

Ok, quiz√ɬ°s “el gran final” es mucho decir… en realidad, eso es todo. Como pueden ver a trav√ɬ©s de los ejemplos, aun me faltan muchos detalles (por ejemplo, arreglar algunas cosas que fallan en MSIE 6) para que mi WordPress-powered-tumblelog est√ɬ© totalmente terminado, pero como pueden ver, con un poco de ingenio y ganas es posible hacerlo.

De todos modos, dejo disponible este archivo con lo que estoy utilizando hasta ahora — con licencia GNU General Public License, version 2.

Typographic – esbozo de un tema tipo tumblelog para WordPress

Aseg√ɬļrense de cambiar todo lo necesario para que funcione en su propia instalaci√ɬ≥n. No es necesario mantener un enlace de atribuci√ɬ≥n, pero se apreciar√ɬ° y agradecer√ɬ°; y si publican cualquier cosa basado en esto recuerden que debe ser bajo la misma licencia.

21 responses to “Crear un Tumblelog con WordPress”

  1. ffuentes says:

    que buena! desde hace unos dias he estado posteando varios temas sobre los tumblelog en mi blog, ayer gelato sali√≥ disponible y a los que les gusta tumblr les va a acomodar gelato. Lo que me gusta de tumblr es el bookmarklet, eso es √ļnico, sino fuera por ese boton, me habr√≠a aburrido a los tres dias.
    ¬ŅC√≥mo haces un boton as√≠ para wordpress si es que quieres tener tu tumblelog ah√≠.??
    De tumblelogs tengo algunos datillos en mi blog y mi tumblelog es bip.tumblr.com

  2. […] Felipe Lav√≠n Z. – Yukei […]

  3. En realidad no existe algo así, a menos que alguien se de el gran trabajo de crear un par de plugins para ello.

    Como pon√≠a en el post, esto genera un tumblelog que funciona de manera algo artesanal ya que hay que hacer varias cosas “a mano”, como tener que seleccionar la categor√≠a de acuerdo al tipo de entrada que quieras publicar.

    Eso sí, en WordPress existe un bookmarklet que se puede encontrar al final de la página para escribir un post, pero es poco más que un enlace directo a esa página.

  4. […] WordPress Como Tumblelog […]

  5. Eze says:

    tublr no ofrece la posibilidad de comentarios cierto??

    de esta forma, con wordpress podriamos?

  6. ffuentes says:

    no ofrece directamente es cierto pero con una linea de código se lo puedes agregar.

    En mi blog tengo los tutoriales para agregar comentarios con HaloScan y AJAX

    en el link de mi nick est√° el link, es que estoy tratando de crear un blog con material exclusivo para tumblelogs porque no hay material en espa√Īol

  7. Eze: s√≠, con WordPress se podr√≠a… tal como est√°, este “esbozo de tema” no tiene opciones para comentarios, pero es totalmente posible agregarlo

  8. Ezequiel says:

    buenisimo, podrias agregar yukei la forma de habilitar los comentarios, en este tutorial?, me parece buenisimo lo que has hecho

    saludos!

  9. Ezequiel says:

    por cierto ffuentes, te han destruido el blog jaja ūüėõ

  10. ffuentes says:

    no te preocupes por eso, el pastel que me paso el dominio, subbio el cms sin preguntar.

    mi blog esta sano pey salvo pero offline

  11. Ezequiel says:

    entonces como se haria ?

  12. Ezequiel says:

    pero ffuentes, yo busco la forma de agregarlo con wordpress

  13. Como pon√≠a en el post, esto es solamente un “esbozo”, lo que implica que muchas cosas no est√°n totalmente listas, y en verdad no podr√≠a poner una fecha para un release definitivo, a pesar de que estoy trabajando en ello.

    La licencia GNU GPL 2 permite que cualquier persona tome el código, lo adapte a sus necesidades y lo pueda distribuir (bajo los mismos términos); quizás alguien quiera darse el trabajo de integrar los comentarios (se puede tomar como base el archivo comments.php de Kubrick) y publique algo más completo que esto.

  14. […] hace alg√ļn tiempo ven√≠a d√°ndole algunas vueltas a la idea de crear un tumblelog con WordPress, pero reci√©n ayer termin√© de hacer los √ļltimos retoques necesarios para lanzar una versi√≥n beta […]

  15. […] un post sea lo m√°s comodo posible. Felipe Lav√≠n comentaba en su blog hace unos meses como crear un Tumblelog con WordPress actualizandolo a los pocos d√≠as con un bonito theme tipo tumblelog para WordPress llamado […]

  16. […] Hoy encuentro TDO MiniForms en Ayuda WordPress un plugin que no integra un foro sino que convierte el blog en un foro. Se trata pues de una plantilla, del estilo de otras que consiguen transformar la estructura y est√©tica de blog en otra distinta, por ejemplo en un tumblelog. […]

  17. Me ha gustado mucho tu post, ya tienes una fans mas, felicidades

  18. […] especialmente pensados para este tipo de blogs. Y el otro d√≠a, en Yukei.net, nos ofrec√≠an un tutorial para crear un tumblelog con WordPress y otro theme tipo-tumblelog para √©se sistema de publicaci√≥n. As√≠ que, para los que nos gusta […]