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.

  • 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

  • Pingback: WordPress y Tumblelog — paranoias()

  • 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.

  • Pingback: naitcorp Tumblelog()

  • Eze

    tublr no ofrece la posibilidad de comentarios cierto??

    de esta forma, con wordpress podriamos?

  • 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

  • Eze: sí, con WordPress se podría… tal como está, este “esbozo de tema” no tiene opciones para comentarios, pero es totalmente posible agregarlo

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

    saludos!

  • por cierto ffuentes, te han destruido el blog jaja :P

  • 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

  • entonces como se haria ?

  • pero ffuentes, yo busco la forma de agregarlo con wordpress

  • 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.

  • Pingback: Typographic: un tema tipo-tumblelog para WordPress — yukei.net()

  • Pingback: Convierte WordPress en un Tumblelog en rubendomfer()

  • Pingback: despuesdegoogle » » Añade un foro a tu WordPress (o crea un foro con WordPress)()

  • Pingback: Ideas de negocio: convierte WordPress en… en rubendomfer()

  • Pingback: Otros usos que se le pueden dar a WordPress()

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

  • Pingback: Los tumblelogs, otra pieza más del engranaje - Blogpocket()