aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Este artículo hace ya más de un año que comencé a escribirlo y hoy que he tenido unos minutos para repasarlo y modificar un poco el código lo termino.

Hace ya mucho tiempo, Jose Ramón (Manz) publicó en Emezeta un sistema bastante ingenioso para capear el problema del SPAM en nuestros blogs.

El sistema

(Ver Imagen)

El sistema, se basa en pensar de forma dual a la hora de implementar el formulario de comentarios de tu blog (que apartir de este momento, va a ser WordPress), y barajar la idea de que un robot pueda rellenar los campos automáticamente haciendo que sus comentarios entraran como un comentario normal. Akismet, y demás plugins antispam, tienen una gran lista de URL’s, agentes de usuarios, emails e IP’s que comprueban para comprobar que un robot es malicioso o no, pero estos sistemas, como ya bien sabemos, no son del todo eficaces. Por eso, hemos de engañar al robot 😀

¿Como lo engañamos?

La propuesta de Manz, es la de añadir un campo oculto (mediante CSS) con el nombre del elemento destinado para el nombre del usuario, en el caso de WordPress usaremos author, con un valor X predefinido.

<input type="text" name="author" value="X" class="oculto" />
// CSS
input.oculto {display:none;}

Este campo, será el señuelo que los robots editarán automáticamente al procesar la página, principalmente por que es un <input /> y además se llama author, lo que hace complicado saber si esa página lo tiene implementado o es una trampa.

Para los usuarios, incluiremos un nuevo elemento <input /> con un nombre a nuestra elección.

<input name="nombrebueno" type="text" class="author" />

El usuario, verá este campo y será en el que introducirá su nombre de usuario. A simple vista podemos ver el problema que nos encontramos al realizar este cambio, el nombre del usuario siempre será X, ya que WordPress está preparado para leer author como nombre de usuario, y evidentemente no conoce el campo nombrebueno que hemos creado nosotros.

Por este motivo hemos de modificar el código de WordPress para añadir unas pocas líneas (voy a explicar como lo tenía yo antes de implementar la funcionalidad que veremos abajo):

wp-config.php
define("SPAM_CONTROL", "kaminitos"); // No sé por que puse eso...

wp-comment-post.php
$comment_author       = ( isset($_POST['author']) )  ? trim(strip_tags($_POST['author'])) : null;
$comment_author_email = ( isset($_POST['email']) )   ? trim($_POST['email']) : null;
$comment_author_url   = ( isset($_POST['url']) )     ? trim($_POST['url']) : null;
$comment_content      = ( isset($_POST['comment']) ) ? trim($_POST['comment']) : null;

// Añadimos el control del campo nuevo
if ($_POST["author"] != SPAM_CONTROL) die("SPAM");
$comment_author       = ( isset($_POST['secure']) )  ? trim(strip_tags($_POST['secure'])) : null;

Se puede hacer más sencillo, editando únicamente el fichero wp-comment-post.php, pero de esta forma tengo control sobre lo que aparece en el campo oculto.

Evidentemente, este sistema, me obliga a añadir esas dos líneas de código cada vez que actualizo WordPress, lo que se convierte en algo, que aunque no es laborioso, es muy pesado. Para evitar tener que modificar el código de WordPress en cada actualización, yo propongo este código.

Sistema antispam de campo oculto más cómodo 😀

// Mensaje que mostramos a los SPAM
define('MESSAGE', 'SPAM!!!');
// Nombre del campo que usaremos para alojar el verdadero nombre del usuario
define('NOMBRE_CAMPO', 'secure');
// Clave única que será modificada por el bot
define('WP_ANTI_SPAM', 'kko');

add_filter('pre_comment_author_name', '_pre_comment_author_name');
function _pre_comment_author_name($comment_author_name = ''){
 // Devolvemos el nombre del autor sinó estamos pasando los campos necesarios
 if (!isset($_POST['author'], $_POST[NOMBRE_CAMPO])) return $comment_author_name;

 // Matamos el proceso
 if (isset($_POST['author']) && $_POST['author'] != WP_ANTI_SPAM) die(MESSAGE);

 // Cambiamos el nombre del author
 global $wpdb;
 return $wpdb->escape(trim(strip_tags($_POST[NOMBRE_CAMPO])));
}

function get_anti_spam_input($comment_author){
 return '<input type="hidden" name="'.NOMBRE_CAMPO.'" value="'.esc_attr($comment_author).'" />';
}

function anti_spam_input($comment_author){
 echo get_anti_spam_input($comment_author);
}

function get_author_input($comment_author){
 return '<input type="hidden" name="author" value="'.WP_ANTI_SPAM.'" />';
}

function author_input($comment_author){
 echo get_author_input($comment_author);
}

Este código, lo incluimos en el fichero functions.php de nuestro theme. Como vemos en la parte superior, tenemos 3 define() que nos permiten declarar 3 variablesconstantes que nos hará nuestro sistema más personalizable. Después, vemos una función que se aplica al filtro pre_comment_author_name en la que comprobamos que el campo oculto no ha sido modificado. En caso de detectar el cambio, matamos el proceso en ese mismo momento, mostrando el mensaje que hayamos definido previamente.

En caso de que el campo oculto no haya sido modificado, entonces reemplazaremos el nombre de usuario por el del campo visible para el usuario. Este sistema nos permite intercalar este proceso y hacer que en caso comentario válido, continúe sin ningún problema.

Modificar el theme

Después para facilitar el trabajo de modificación del theme, he añadido unos métodos para pintar (o devolver como cadena) los elementos <input /> que intervienen en este sistema. Usaremos, como siempre, el theme default de WordPress, y usaremos únicamente el fichero comment.php del mismo.

Básicamente, el único cambio que tendremos que realizar es el cambio de esta línea:

<input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />

Por estas dos

<?php
 author_input($comment_author);
 anti_spam_input($comment_author);
?>

Estos dos funciones se encargarán de pintar los elementos <input /> que vamos a necesitar. Evidentemente, si tu theme tiene estilos o clases aplicados a estos elemento tendrás que modificarlos en las funciones get_anti_spam_input() get_author_input() del fichero functions.php que hemos incluido antes.

Sencillo, ¿verdad? 😀

Resultado

El resultado, os puedo garántizar que es 100% satisfactorio y que junto a Akismet el SPAM (por el momento) deja de ser un problema.

Una de las nuevas funcionalidades que nos encontraremos en WordPress 2.9 es el llamado post-image, que como ya hemos explicado previamente se trata de un sistema que nos permite asociar a un post una imagen y poder usarla en un theme.

Justin Tadlock muestra un completo artículo mostrando como hacer uso de esta funcionalidad.

1) Permitir la funcionalidad

Como vimos en el post de las nuevas funcionalidades de WordPress 2.9, el theme iba a coger algo de relevancia permitiendo activar/desactivar funcionalidades de WordPress desde el fichero functions.php.

Esta capacidad nos permitirá activar esta funcionalidad añadiendo un simple línea a nuestro theme:

add_theme_support( 'post-thumbnails' );

Esta línea, nos activará la funcionalidad de post-image en nuestro WordPress, permitiendo que podamos ver un box más en nuestra página de «Nueva Entrada».

(Ver Imagen)

Allí podremos seleccionar una imagen que será asociada al post.

2) Usar la funcionalidad

Una vez asociada la imagen, ya solo nos queda hacer que nuestro theme muestre la imagen donde queramos. Para ello tenemos una serie de funciones que debemos conocer:

the_post_image($size)

Esta función nos permite mostrar la imagen en el punto en el que la llamamos, requiere estar incluida dentro del Loop para funcionar.

<?php while( have_posts() ) : the_post(); ?>
 <div>
 <h1><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h1>
 <?php the_post_image() ?>
 <?php the_content() ?>
</div>
<?php endif; ?>

Podemos usarla con un parámetro para especificar el tamaño de la imagen que queremos mostrar:

• thumbnail
• medium
• full

Todas hacen referencia a la configuración de imagenes del apartado Opciones > Media de nuestro panel de control.

has_post_image()

Para comprobar si un post tiene asociada una imagen deberemos usar has_post_image() que nos devolverá true o false.

<?php
	if ( has_post_image() )
		the_post_image( 'thumbnail' );
	else
		echo '<img src="default-image.png" alt="Example Image" title="Example" />';
?>

get_post_image_id()

Si necesitamos obtener el ID de la imagen podremos hacer uso de esta función que nos devolverá el ID.

$image_id = get_post_image_id();

get_the_post_image( $id, $size )

Si necesitamos obtener la imagen de un post fuera del Loop podemos acceder directamente a ella indicándole el ID del post y el tamaño de la imagen que necesitamos.

$image = get_the_post_image( $post->ID, 'thumbnail' );

3) Filtros y actions

Además de las funciones que nos permiten trabajar cómodamente con la imágen asociada, tenemos una serie de filtros que nos permiten personalizar más aún la funcionalidad y obtener resultados de lo más dispares.

//Filters
 - post_image_size
 - post_image_html
// Actions
 - begin_fetch_post_image_html
 - end_fetch_post_image_html

Veamos un ejemplo de Justin nos muestra con el que podemos cambiar el HTML de salida de la imagen que vamos a mostrar.

add_filter( 'post_image_html', 'my_post_image_html', 10, 3 );
function my_post_image_html( $html, $post_id, $post_image_id );
	$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '">' . $html . '</a>';
	return $html;

}

Se trata de una gran funcionalidad, que muchos desarrolladores de themes estarán deseando usar en sus creaciones.

Jose Luis Antunez, me avisa por email de la publicación de YouAre Theme, un theme que han desarrollado con la idea de ofrecer la misma cantidad de opciones de configuración que los themes de pago.

(Ver Imagen)

Opciones y más opciones

Entre las opciones que nos podemos encontrar vale la pena destacar, la integración con Twitter, Flickr, Google Analytics o FeedBurner, además de la posibilidad de cambiar fácilmente los colores del theme.

(Ver Imagen)

A nivel técnico nos encontramos con:

• Basado en el Framework CSS 960.gs concretamente en el model de 24 colúmnas.
• Valida según los estándares XHTML.
• Optimizado para SEO
• Multi-Lenguaje (dependiendo del idioma especificado en wp-config.php).
• Gravatar integrado
• Comentarios anidados
• Microformatos
• Mejoras de accesibilidad

Demo y Descarga

Demo y Descarga

@nnatali, me envia un mail informándome de que se ha iniciado en el apasionante mundo de la creación de themes para WordPress y lo ha hecho aprovechando el rediseño de Twitter para crear un theme que se asemeja a la página inicial de esta red social y que nos permite conseguir un aspecto muy fresco y conocido.

(Ver Imagen)

El theme se visualiza perfectamente en resoluciones desde 800×600. Además permite conectarlo fácilmente con Twitter para mostrar el último tweet en el header del theme. Podeis ver un ejemplo aquí.

WP-Basics es un theme para WordPress que propone una estructura básica de ficheros y de ficheros para generar themes más facilmente intentado conseguir una estandarización en la creación de themes.

Existe un proyecto en Google Code en el que se puede descargar el código para echarle un vistazo.  Basicamente se trata de un theme completo que podemos personalizar fácilmente mediante CSS, sin llegar a ser un framework de themes.

Aprovechando este proyecto, Frank de WP-Engineer.com ha creado un proyecto paralelo en el que está adaptando el theme al nuevo estandar HTML5. Simplemente está añadiendo los tags <article />, <section /> y demás atributos integrados en el estandar.

[...]
<?php while ( have_posts() ) : the_post(); ?>
  <article <?php if ( function_exists('post_class') ) { post_class(); } else { _e( 'class="post"'); } ?> id="post-<?php the_ID(); ?>">
  <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
  <section class="story">
  <?php if ( is_archive() || is_search() ) { ?>
     <?php the_excerpt() ?>
     <p class="textright"><a href="<?php the_permalink() ?>" rel="bookmark"><?php _e( '... weiterlesen &raquo;', FB_BASIS_TEXTDOMAIN ); ?></a></p>
     <section class="info">
       <p><?php _e( 'Aktualisiert am', FB_BASIS_TEXTDOMAIN ); ?> <time datetime="<?php the_modified_date('Y-m-d'); ?>"><?php the_modified_date(); ?></time> <?php edit_post_link( __( 'Editieren', FB_BASIS_TEXTDOMAIN ),' &middot; ', ''); ?></p>
     </section>
     <?php } else { ?>
     <?php the_content( the_title( '', '', false ) . ' ' . __( 'weiterlesen &raquo;', FB_BASIS_TEXTDOMAIN ) ); ?>
     <section>
        <?php wp_link_pages(); ?>
     </section>
  <?php } ?>
  </section>
</article>
<?php endwhile; else: ?>
[...]

Basta con echarle un pequeño vistazo al código para ver la mejoría semántica con respecto a lo que estabamos usando hasta ahora. Y eso, teniendo en cuenta que es de lo primero que sale al respecto, ya que aún se podrá mejorar más.

Hace ya tiempo vimos que se había desarrollado una serie de themes que permiten ser personalizados usando una misma base. A estos themes los llaman WordPress Theme Frameworks y es que con ellos podrás crear themes nuevos de una forma sencilla.

Sandbox, fué el primero y el que ofreció esta idea que muchos más han desarrollado y extendido. Aquí tienes una lista de 20 de estos frameworks que puedes usar para desarrollar tus propios themes.

1. ThemeHybrid
2. Carrington
3. Thematic
4. Imagination
5. WP Framework
6. Buffet
7. Whiteboard
8. WordPress Starter Theme
9. Ashford
10. Sandbox
11. OnePress
12. Blank WordPress Themes
13. WordPress Naked
14. Starkers
15. Vanilla
16. WordPress Basis
17. WordPreciousss
18. WP Constructor
19. Brave New World
20. Thesis (Comercial)