Contenido

Wp-Answers, crea una comunidad de preguntas y respuestas con Wordpress

7 Nov

+ 63

Hace unos meses empecé a montar este plugin que permite crear comunidades basadas en preguntas y respuestas, al estilo StackOverFlow y/o Yahoo! Answers. La idea es generar, sin modificar para nada el núcleo de Wordpress, un sistema basado en votaciones de comentarios y ordenarlos por este número de votaciones.

De esta forma, podremos disponer de un sistema que nos permita lanzar preguntas y que mediante las contestaciones de los usuarios y sus votos, podamos obtener una respuesta lo más acertada posible.

Wp-Answers

El plugin se encarga de añadir un formulario a cada comentario permitiendo que los usuarios puedan votar positiva o negativamente dicho comentario. Posteriormente y dependiendo del número de comentarios de este comentario y los demás, lo ordenará de forma que el comentario con más votos quede primero, el segundo mejor votado segundo y así sucesivamente.

wp-answers
(Ver Imagen)

Nuestro theme

El plugin, está pensado para no depender de ningún theme y que pueda funcionar en cualquiera, por ello todo el estilo CSS y el Javascript (para realizar las llamadas con Ajax) se puede añadir fácilmente adaptándolo a cada Wordpress.

Dándole estilos

El formulario, por defecto no tiene estilos aunque puede personalizarse como más nos guste incluyendo los estilos a nuestro style.css de nuestro theme. Os dejo un ejemplo del que he usado para las pruebas:

.wp_answers_votes {
 float:right;
 background-color:#F1F1F1;
 margin-bottom:10px;
 padding:10px
 text-align:center;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
}
.wp_answers_total_votes{
 font-size:2em;
}

Opciones

Disponemos de una serie de opciones, muy sencillas que nos permiten configurar el nivel de Karma que aporta o resta la votación de comentarios. Además de poder indicar si necesitamos que el usuario este registrado en el blog o no.

wp-answers-options
(Ver Imagen)

Widget

He creado un pequeño Widget que nos permitirá mostrar un top N usuarios, ordenados por karma acumulado en nuestro sidebar, simplemente tendremos que indicar las opciones del Widget y añadirlo al sidebar que deseemos.

wp-answers-widget
(Ver Imagen)

Descargar

Aquí teneis el enlace, también podeis verlo en funcionamiento con el theme P2 (de Wordpress)

Actualización

Por sugerencia de Cristian Eslava añado la opción de seleccionar una categoría a la que asociar este sistema de mostrar los comentarios. De esta forma, es posible asociarlo a una parte de tu Wordpress y no a todo.

Introducción a los W3C Widgets

22 Abr

+ 3

Hace 3 años que vimos las primeras noticias sobre el borraror de la W3C sobre los Widgets. Y ya entonces vimos que el tema prometía. QuirksBlog nos muestra una introducción sobre como usar estos Widgets.

¿Que es un widget?

Esencialmente un Widget es un conjunto de HTML/CSS/Javascript locales. Decimos locales, por que una vez que, por ejemplo, un movil descarga un widget debe ser capaz de usarlo localmente, al quedar instalado en él.

Aunque actualmente la utilización de widgets es muy límitada, lectores de RSS, relojes,… no hay razones teóricas de que no puedan ser capaces de crear aplicaciones basadas en Javascript realmente complejas, por ejemplo una Hoja de Cálculo.

La belleza de este modelo, es que aunque una aplicación requisiera 200kb de Javascript, más una serie de librerías, el usuario únicamente tendrá que descargarlo una sola vez. Después de la descarga, la aplicación se instala y las próximas veces se ejecutará en local sin necesidad de descargar nada.

En caso de requerir cualquier dato externo al widget, dispone de una interface que nos permite realizar peticiones Ajax y cargar el contenido en el momento que lo necesitamos.

Los W3C Widgets nacen como estandarización a los ya existentes creados para dispositivos como el iPhone, móviles Android, … que usan sistemas propietarios y únicamente adaptables a sus dispositivos. Con W3C Widgets se intenta crear un sistema que permita la interoperatividad de estos widgets en diferentes dispositivos sin necesidad de tener que modificar una sola línea de código del widget. Y todo ello aprovechando las técnicas HTML/CSS/Javascript que los desarrolladores conocemos.

En fin, los W3C Widgets apuntan como el futuro de la web movil. Son fáciles de crear, usan estándares abiertos y se ajustan al mínimo consumo de la red.

Información técnica

Los Widgets no son más que sitios web comprimidos. Creamos un fichero HTML, le añadimos los estilos necesarios en ficheros CSS y la funcionalidad viene dada en ficheros Javascript. Todo ello comprimir en un fichero zip, al que le cambiaremos la extensión a .wgt y listo. ¿Sencillo verdad?

Actualmente la especificación está continua como Working Draft (Borrador) modificado últimamente el día 5 de Febrero de 2009. Aunque el proceso está siendo tan lento como la W3C ya están las bases muy bien definidas.
Continua —>

iCal Archive para Wordpress

17 Feb

+ 13

Ya podemos descargar iCal Archive para Wordpress. Se trata de de una adaptación sobre Wordpress del script que vimos hace unos días con el que podiamos crear un calendario al estilo iCal (del iPhone) con jQuery.

ical_archive_wordpress

Ver Demo

Instalación

  1. Descargamos el ficheros
  2. Descomprimimos y colocamos el directorio completo en la raiz de Wordpress.
  3. Modificamos el HTML si queremos adaptarlo al diseño del blog.

Descargar

Versión 0.1

Ejecutar PHP en tus posts con shortcodes

4 Feb

+ 8

Hace unos minutos he publicado una entrada sobre los ShortCodes y la importante labor que pueden llegar a desempeñar en nuestros Wordpress. Usando la API de ShortCodes he montado un pequeño script basado en execPHP que permite ejecutar PHP en nuestros posts mediante un sencillo shortcode.

Código

function eval_php($atts, $content=null) {
        ob_start();
        eval($content);
        $output = ob_get_contents();
        ob_end_clean();
        return "Entro".$output;
}

add_shortcode("php", "eval_php");
// Forzamos el do_shortcode al principio
add_filter('the_content', 'do_shortcode', 1);

Modo de empleo

[php]Código PHP[/php]

Sin los tags de php <?php ni ?>.

Ejemplo

[php]
	$str = "Hello {xx}";
	echo str_replace('{xx}', 'World!', $str);
[/php]

¿Donde pongo este código?

Puedes ponerlo en el fichero functions.php de tu theme o crear un plugin con el código.

¿Precauciones?

Hay que pensar que se está ejecutando código PHP desde los posts, si no eres el único usuario que postea debes tener esto en cuenta y quizas modificar el script. He montado 2 ejemplos para los más vagos :D

1. Limitando por ID de usuario

// ID's de usuarios permitidos
$users_avail = array(1,2,3,4);

function noPHP($data = null){
	global $current_user, $users_avail;
  	 get_currentuserinfo();

	if (in_array($current_user->ID, $users_avail)) return $data;
	$data["post_content"] = str_replace("[php]", "", str_replace("[/php]", "", $data["post_content"]));
	$data["post_content_filtered"] = str_replace("[php]", "", str_replace("[/php]", "", $data["post_content_filtered"]));
	return $data;
}

add_filter('wp_insert_post_data', 'noPHP');

function eval_php($atts, $content=null) {
	ob_start();
	eval($content);
	$output = ob_get_contents();
	ob_end_clean();
	return $output;
}

add_shortcode("php", "eval_php");

// Forzamos el do_shortcode al principio
add_filter('the_content', 'do_shortcode', 1);

2. Limitando por level mínimo

// Level mínimo
$minlevel = 5;

function noPHP($data = null){
	global $current_user, $minlevel;
      get_currentuserinfo();

	if ($current_user->user_level > $minlevel)
		return $data;

	$data["post_content"] = str_replace("[php]", "", str_replace("[/php]", "", $data["post_content"]));
	$data["post_content_filtered"] = str_replace("[php]", "", str_replace("[/php]", "", $data["post_content_filtered"]));
	return $data;
}

add_filter('wp_insert_post_data', 'noPHP');

function eval_php($atts, $content=null) {
	ob_start();
	eval($content);
	$output = ob_get_contents();
	ob_end_clean();
	return $output;
}

add_shortcode("php", "eval_php");

// Forzamos el do_shortcode al principio
add_filter('the_content', 'do_shortcode', 1);

Así y todo yo tendría cuidado con esto ya que mediante la ejecución de PHP en los posts, los autores, editores, … pueden hacer desastres de magnitudes impredecibles…

Limitaciones

No he podido hacer muchas pruebas, así que es posible que surjan errores y quizas haya limitaciones en el código que ponemos, podríamos comentarlas.

Divide formularios en pasos con jQuery

28 Ene

+ 10

Revisando los posts del foro, en un rato que he tenido, me he encontrado babySteps, un plugin que hans me muestra y que se encarga de dividir formularios en partes. Un componente ideal para formularios rápidos y complicados.

Revisando el plugin he visto que tu defines los puntos de corte y eso no me acaba de gustar, el tener que poner elementos que no tendrían ningún sentido si no fuera por el plugin no me ha gustado mucho. Así que me montado un pequeño script, que usando jQuery, nos permite obtener lo mismo siguiendo un poco más la semántica del HTML.

stepForm()

Simplemente es una función que se encarga de convertir todos los formularios cuyo atributo class sea stepMe. Únicamente se encarga de cortar el formulario por elementos <fieldset /> haciendo que un formulario largo aparente ser varios de menor tamaño.

Veamos un ejemplo que he montado.

<form action="" method="post" class="stepMe">
	<fieldset>
		<label for="name">Nombre:</label>
		<input name="nombre" id="name" value="" />
		<label for="surname">Apellidos:</label>
		<input name="apellidos" id="surname" value="" />
		<label for="birthday">Fecha de Nacimiento:</label>
		<input name="fnac" id="birthday" value="" />
	</fieldset>
	<fieldset>
		<label for="text1">Text1:</label>
		<select id="text1">
			<option>1</option>
			<option>1</option>
			<option>1</option>
			<option>1</option>
			<option>1</option>
		</select>
		<label for="text2">Text2: </label>
			<input type="radio" id="text2" />
	</fieldset>
	<fieldset>
		<label for="submit">Submitar datos </label>
		<input type="submit" id="submit" value="Enviar" />
	</fieldset>
</form>

Este ejemplo nos divide la página en 3 pasos. Para permitir al usuario moverse entre los pasos he añadido un enlace “Volver” y otro “Seguir“, pero no descarto añadir una pequeña paginación esta noche :D

Personalización

Podemos definir nuestro propio estilo para los enlaces que se añaden mediante el uso CSS de las clases .nextStep y .backStep.

Además, podemos definir el texto que queremos mostrar en ambos enlaces pasándolo como parámetro. Disponemos de 3 parámetros:

  1. Texto Back. (por defecto Volver)
  2. Texto Next. (por defecto Seguir)
  3. Contenedor. (por defecto fieldset)
$.stepForm();
// Volver / Seguir [fieldset] 

$.stepForm('Back','Next');
// Back / Next [fieldset]

$.stepForm('<-','->', 'p');
// Volver / Seguir [p]

Si somos reacios a usar <fieldset /> podemos pasar como 3er parámetro el tag que vamos a usar como contenedor.

Código

jQuery.extend({
    stepForm: function(txtBack, txtNext, token){
    	var fieldsets = $((token || 'fieldset'), $("form.stepMe"));
        var total = $(fieldsets).length;
	$(fieldsets).each(function(x,el){
			    if (x > 0) {
			      $(el).hide();
			      $(el).append('<a class="backStep" href="#x_' + (x-1) + '">'+ (txtBack || 'Volver') +'</a>');
			      $(".backStep", $(el)).bind("click", function(){
			                $("#x_" + (x - 1)).show();
			                $(el).hide();
			       });
			    }

			    if ((x+1)< total) {
			        $(el).append('<a class="nextStep" href="#_' + (x+1) + '">'+(txtNext || 'Seguir')+'</a>');
			        $(".nextStep", $(el)).bind("click", function(){
			                $("#x_" + (x + 1)).show();
			                $(el).hide();
			        });
			    }
			    $(el).attr("id", "x_" + x);
	});
    }
});

Actualización

Marco Neumann  ha portado el script a MooTools para los usuarios de este framework. La verdad es que la claridad del código no tiene comparación.

@webdev2k, el microblog del desarrollo web

26 Ene

+ 8

Usando Twitter y este artículo de ThinkVitamin, no ha sido muy complicado montar un microplanet de microposts sobre desarrollo web. Por ese motivo ha nacido @webdev2k, un lugar donde encontrar las últimas herramientas, artículos y/o publicaciones sobre desarrollo web en tiempo real.

¿Como funciona?

webdev2k1

Simplemente hay que añadir @webdev2k en tu tweet (micropost) en Twitter y automáticamente aparecerá en la aplicación. Como podemos ver en la imagen.

¿Para que sirve?

Principalmente para agrupar todo lo relacionado con el desarrollo web y promocionar tus aplicaciones, posts o artículos relacionados con el mundo web.

Visita @webdev2k

Para los que quieran seguirlo desde Twitter, podeis seguirlo como a otro usuario más.

@webdev2k en Twitter

jsCron, portando Cron a Javascript

5 Ene

+ 31

En un momento de aburrimiento he estado implementado una versión de Cron para Javascript. Para los que no lo sepan, Cron es una utilidad del sistema Unix que permite programar tareas a lo largo del tiempo. Una de las utilidades más usadas para tareas como copias de seguridad, envío de mails, …

Para Javascript he pensado que sería interesante usar la misma estructura cron usa en el fichero crontab, donde se almacena la lista de tareas programadas.

35 17 * * * hola()

Hagamos un pequeño repaso a los parámetros de Cron (por orden):

  1. minuto [0-59]
  2. hora [0-23]
  3. dia del mes [0-31]
  4. mes [0-12]
  5. dia semana [0-7]
  6. ejecutable

Los * indican cualquier, por lo tanto en el ejemplo anterior indicamos que cada día a las 17:35 se ejecutará el script hola().

La hora especificada será la del navegador del usuario

Veamos unos ejemplos más:

* 16 * * * hola()

Cada día desde las 16:00 a las 16:59 se ejecutará hola().

30 6 1 * * showHola()

Ejecutamos showHola() el día 1 de cada mes a las 6:30 de la mañana.

Se trata de un sistema bastante rudimentario, pero funciona y aunque operadores como (/2) no están contemplados, dan mucho juego.

Codigo

var jsCron = {
		items:[],
		interval: null,
		parse: function(strUnix) {
				return strUnix.match(/^(\d+|\*) (\d+|\*) (\d+|\*) (\d+|\*) (\d|\*) +(\w+)/);
		},
		check: function() {
				var hoy = new Date();
				var test = [new Date(), hoy.getMinutes(), hoy.getHours(), hoy.getDate(), hoy.getMonth(), hoy.getDay()];

				for (var i in this.items) {
					var exec = 0;
					var t = this.parse(this.items[i][1]);
					for (var x in t)
				    if (t[x] && (t[x] == test[x] || t[x] == "*"))exec++;
					if (exec == 5 && this.items[i][0] == 0) {
							eval(t[6]).call();
							this.items[i][0] = 1;
					} else if (exec < 5 && this.items[i][0] == 1) {
						this.items[i][0] = 0;
					}
				}
		},
		set: function(strUnix) {
			if (!/^(\d+|\*) (\d+|\*) (\d+|\*) (\d+|\*) (\d|\*) +(\w+)/.test(strUnix)) return new Error("Formato invalido");
			this.items.push([0, strUnix]);
		},
		init: function(seg) {
			var seg = seg || 1000;
			this.interval = setInterval("jsCron.check()", seg);
		}
};
jsCron.init();

Modo de uso

Al igual que de un crontab debemos especificar un listado de tareas a programar, para ello usaremos el método set() e introduciremos la sentencia en el formato explicado anteriormente.

// Función hola();
function hola() {
   alert("Hola");
}

// Tarea programada
jsCron.set("35 17 * * * hola()");

Descargar Fichero JS (jscron)

Actualización

Un comentario de Ajaxian, me ha dado una solución al usar un eval() para ejecutar el código. Así podemos usarlo de una forma más cómoda sin perder la legibilidad de la función.

// Tarea programada
jsCron.set("35 17 * * *", hola())
// de forma inline
jsCron.set("35 17 * * *", function() {
   alert("Hola");
});

Adapta tus comentarios a Wordpress 2.7 sin problemas

26 Dic

+ 35

Bueno, me he alargado y lo he dejado mucho tiempo, pero más vale tarde que nunca. Entre turrones y garrapiñadas he pensado que sería interesante hacer digestión haciendo algo constructivo, así que vamos al lio.

Introducción

Como es dificil hacer un artículo que abarque a todos los themes disponibles vamos a usar Kubrick para ilustrar con ejemplos este tutorial. Al ser el theme por defecto de Wordpress todos disponemos de él para poder hacer las pruebas mientras seguimos el tutorial.

Para los menos experimentados, el Theme Kubrick es el que nos encontraremos en la carpeta wp-content/themes/default/, concretamente vamos a editar el fichero comments.php de este directorio.

Detectar Wordpress 2.7

Si estamos desarrollando un theme para Wordpress 2.7, este punto puede ser interesante, pero si por el contrario estás haciendo un theme para tu blog, el que ya está en Wordpress 2.7, puedes ahorrarte hacer la comprobación ya que siempre se va a cumplir.

if (function_exists('wp_list_comments')) :
// Wordpress 2.7
else :
// Wordpress 2.6-
endif;

Veamos como quedaría en el theme Kubrick.

<?php if ($comments) : ?>
	<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</h3>
	<ol class="commentlist">
	<?php if (function_exists('wp_list_comments')) : ?>
	<!-- Wordpress 2.7 -->
	<?php else : ?>
	<?php foreach ($comments as $comment) : ?>
		<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
			<?php echo get_avatar( $comment, 32 ); ?>
			<cite><?php comment_author_link() ?></cite> Says:
			<?php if ($comment->comment_approved == '0') : ?>
			<em>Your comment is awaiting moderation.</em>
			<?php endif; ?>
			<br />
			<small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('edit','&nbsp;&nbsp;',''); ?></small>
			<?php comment_text() ?>
		</li>
	<?php
		/* Changes every other comment to a different class */
		$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
	?>
	<?php endforeach; /* end for each comment */ ?>
	<!-- Wordpress 2.6- -->
	<?php endif;?>
	</ol>
 <?php else : // this is displayed if there are no comments so far ?>
	<?php if ('open' == $post->comment_status) : ?>
		<!-- If comments are open, but there are no comments. -->
	 <?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p class="nocomments">Comments are closed.</p>
	<?php endif; ?>
<?php endif; ?>

Como podemos ver, ya tenemos el sistema medio montado. Ahora si el Wordpress en el que está corriendo nuestro theme no tiene Wordpress 2.7 nos mostrará los comentarios como los estaba haciendo hasta ahora, en caso contrario y con Wordpress 2.7 disponible no mostraremos nada, por el momento.

wp_list_comments()

La clave de todo es esta función que se encarga de mostrarnos los comentarios de nuestros posts de una forma sencilla y rápida. Como la mayoría de funciones de Wordpress esta tiene una serie de parámetros para personalizar su salida.

  • walker, nos activa/desactiva los comentarios anidados (Por defecto Null)
  • max_depth, máxima profundidad de estos comentarios (Por defecto ”)
  • style, estilo con el que Wordpress nos permite mostrar los comentarios [ul, div] (Por defecto ul)
  • callback, función que nos permite personalizar completamente la salida de los comentarios, se lanzará en cada uno de los comentarios.
  • end-callback, función que se lanzará al terminar la iteración de los comentarios.
  • type, especifica el tipo de comentarios a mostrar [comment, pingback, all] (Por defecto all)
  • page, página en la que empezamos a mostrar los comentarios.
  • per_page, comentarios por página
  • avatar_size, tamaño del avatar de los usuarios que comentan (Por defecto 32)
  • reverse_top_level, nos muestra los comentarios en orden inverso al que se introdujeron (Por defecto Null)
  • reverse_children, orden inverso en los hijos de los comentarios anidados (Por defecto ”)

Bueno, ahora que conocemos las opciones disponibles en wp_list_comments() incorporémoslo en el código anterior.

<?php if ($comments) : ?>
	<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</h3>
	<ol class="commentlist">
	<?php if (function_exists('wp_list_comments')) : ?>
	<!-- Wordpress 2.7 -->
		<?php wp_list_comments(); ?>
	<?php else : ?>
	<?php foreach ($comments as $comment) : ?>
		<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
			<?php echo get_avatar( $comment, 32 ); ?>
			<cite><?php comment_author_link() ?></cite> Says:
			<?php if ($comment->comment_approved == '0') : ?>
			<em>Your comment is awaiting moderation.</em>
			<?php endif; ?>
			<br />
			<small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('edit','&nbsp;&nbsp;',''); ?></small>
			<?php comment_text() ?>
		</li>
	<?php
		/* Changes every other comment to a different class */
		$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
	?>
	<?php endforeach; /* end for each comment */ ?>
	<!-- Wordpress 2.6- -->
	<?php endif;?>
	</ol>
 <?php else : // this is displayed if there are no comments so far ?>
	<?php if ('open' == $post->comment_status) : ?>
		<!-- If comments are open, but there are no comments. -->
	 <?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p class="nocomments">Comments are closed.</p>
	<?php endif; ?>
<?php endif; ?>

De esta forma estaremos obteniendo los comentario con los parámetros por defecto, pero ¿que pasa si queremos adaptar a nuestro gusto los comentarios?

Parámetro callback

El parámetro callback representa el nombre de una función que será lanzada en cada comentario y a la que se le pasará el comentario por parámetro para disponer de todas las opciones dentro de ella. De esta forma podemos personalizar nuestros comentarios.

<?php if (function_exists('wp_list_comments')) : ?>
	<?php wp_list_comments('callback=MI_TEMPLATE_DE_COMENTARIOS'); ?>
	<div class="navigation">
	<div class="alignleft"><?php previous_comments_link() ?></div>
	<div class="alignright"><?php next_comments_link() ?></div>
<?php else : ?>
	<?php foreach ($comments as $comment) : ?>
		<?php MI_TEMPLATE_DE_COMENTARIOS($comment);?>
	<?php endforeach; ?>
<?php endif; ?>

Y la función MI_TEMPLATE_DE_COMENTARIOS() tendrá un aspecto similar a este:

<?php
function MI_TEMPLATE_DE_COMENTARIOS($comment, $args, $depth) {
// Comentario actual
   $GLOBALS['comment'] = $comment; ?>
   /*
   		comment_class() --> Nos permite hacer comentarios tipo zabra.
   		comment_ID() --> ID del comentario actual
   */
   <li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
     <div id="div-comment-<?php comment_ID(); ?>
      <div class="comment-author vcard">
/* Mostramos el avatar del usuario */
         <?php echo get_avatar(); ?>

/* Enlace a la URL del autor del comentario */
         <?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
      </div>

/* Controlamos que el comentario esté aprovado */
      <?php if ($comment->comment_approved == '0') : ?>
         <em><?php _e('Your comment is awaiting moderation.') ?></em>
         <br />
      <?php endif; ?>
/* Datos extra de los comentarios */
      <div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>
/* Texto del comentario */
      <?php comment_text() ?>
/*Botón de reply, con él podremos responder a un comentario.*/
      <div class="reply">
         <?php comment_reply_link(array_merge( $args, array('add_below' => 'div-comment', 'depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
      </div>
     </div>
   </li>
<?php } ?>

Exactamente lo que hará Wordpress, será hacer pasar la variable $comment por esta función en cada comentario, haciendo que esta sea la encargada de pintar la salida por pantalla.

Responder comentarios

La posibilidad de responder a comentarios sin tener que montarlo tu mismo, es un aliciente más que Wordpress 2.7 nos ofrece, pero para entender como funciona debemos conocer comment_reply_link().

comment_reply_link();

Se trata de generar el enlace necesario para poder responder a un comentario, en el código anterior, vemos como lo insertamos despues de comment_text(). Por defecto esta función recibe 3 parámetros:

  • $args, argumentos que condicionarán la salida
  • $comment, comentario que vamos a responder
  • $post, post en el que se encuentra en comentario que hemos de responder.

Los argumentos disponibles que condicionarán la salida nos darán una cierta flexibilidad a la hora de generar el enlace:

  • add_below, patrón al que se le añadirá el ID del comentario que indicará a que comentario hará referencia la respuesta (Por defecto comment-XXX)
  • respond_id, lugar en el que se insertará el comentario recien comentado (Por defecto respond)
  • reply_text, etiqueta que informará al usuario de la acción del enlace (Por defecto “Reply”)
  • login_text, etiqueta que mostrará en caso de que el usuario no esté logueado y sea necesario (Por defecto “Log in to Reply”)
  • depth, profundida del comentario, para comentarios anidados (Por defecto 0)
  • before, HTML que se insertará delante del enlace
  • after, HTML que se inseratá despues del enlace.

Esto nos generará el enlace necesario para responder a comentarios, pero aún nos queda adaptar el theme para poder recibir la respuesta.

La magia del javascript

La respuesta de comentarios necesitará de unas funciones de Javascript para hacer más dinámica la tarea de responder a los comentarios, para ello tendremos que añadir en el <head></head> de nuestro theme la siguiente línea:

if ( is_singular() ) wp_enqueue_script( 'comment-reply' );

Se encargará de cargar los Javascript necesarios para disfrutar de esta funcionalidad.

Modificando el formulario

Wordpress por si solo no puede detectar los nombres de los elementos de nuestros formularios y como necesitan ciertos campos que hasta ahora no existían nos obliga a añadir esta línea en nuestro formulario para generar los campos necesarios para la respuesta.

<?php comment_id_fields(); ?>

Si nuestro theme tiene un elemento <input /> llamado comment_post_ID, podemos borrarlo ya que esta función se encargará de generarlo automáticamente.

Para indicarle el lugar en el que se encuentran los elementos necesarios para responder, debemos insertar un enlace en forma de ancla en el formulario, simplemente nos servirá para llevar el foco al formulario de envio:

<a id="respond"></a>

Para terminar, tenemos la función comment_form_title(), que se encargará de cambiar el famoso texto de “Leave a comment” por un “Leave a reply for XXX” en caso de estar respondiendo un comentario, para ello deberemos reemplazar el texto:

<h3 id="respond">Leave a Reply</h3>

por este otro:

<h3><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h3>

Si el usuario decide cancelar la acción y desechar la respuesta al comentario debe tener un enlace que le permita hacer esto, por eso tendremos que añadirlo en nuestro formulario de comentarios con la siguiente función:

<div id="cancel-comment-reply">
   <small><?php cancel_comment_reply_link() ?></small>
</div>

¿Y la paginación?

Otra de las mejoras que los comentarios nos traen en esta nueva versión, es la paginación de los mismos, haciendo que los posts con centenares de comentarios queden un poco más legibles. Para ello tenemos un serie de funciones que nos permiten dotar nuestros themes de esta funcionalidad. Evidentemente estas funciones será usadas únicamente en el apartado que destinamos a Wordpress 2.7 ya que estas funciones no están disponibles para versiones previas.

next_comments_link();

Nos enlaza con la siguiente página de comentarios dentro de nuestro post. Esta función recibe 2 parámetros:

  • label, etiqueta que deseamos mostrar para informar al usuario del uso del enlace. (Por defecto “Newer Comments »”)
  • max_pages, máximo de páginas mostradas para enlazar. (Por defecto 0)

previous_comments_link();

Nos enlaza con los comentarios anteriores, si los hubiera. Por defecto dispone de un único parámetro:

  • label, etiqueta que deseamos mostrar (Por defecto “« Older Comments”)

Deploy, consigue una base para tus aplicaciones web

4 Dic

+ 10

Via Ajaxian, descubro Deploy*, una aplicación web que nos permite crear instalaciones base para iniciar nuestros proyectos. Mediante una pequeña selección de opciones disponibles, podemos crear un zip con la estructura de directorios, los ficheros Javascript y un index.php listo para iniciar el desarrollo de nuestra aplicación web.

proyect_deploy

Además, si nos gusta la idea, podemos descargar el código fuente y adaptarlo a nuestras necesidades.

iMeneame.net se lava la cara

26 Oct

+ 17

Hace más de un año que iMeneame vió la luz, la versión para el iPhone de Meneame.net (versión no oficial) ha tenido que aguantar con un diseño realmente horrible (evidentemente mio) hasta que me he topado con Lucas Savelli de WydStudio.

new_imeneamenew_meneame_single

Gracias a Lucas, iMeneame ha adquirido un aspecto más moderno y más eficiente para el dispositivo que fue creado. Debido a que el contenido lo saco del RSS de Meneame me veo condicionado a lo que este formato nos devuelve, las limitaciones del XSL tampoco han ayudado mucho, pero creo que el resultado es más que satisfactorio apesar de las salvedades encontradas.

Espero que os guste, y me comuniqueis todos los fallos e impresiones.