(Ver Imagen)

/*Date Sprite */
.postdate {
position: relative;
width: 66px;
height: 60px;
float: left;
}
.month, .day, .year {
position: absolute;
text-indent: -1000em;
background-image: url(images/date_img.png);
background-repeat: no-repeat;
}
.month { top: 10px; left: 0; width: 33px; height: 30px;}
.day { top: 30px; left: 0; width: 33px; height: 30px;}
.year { bottom: 0; right: 13px; width: 20px; height: 60px;}

.m-01 { background-position: 0 0px;}
.m-02 { background-position: 0 -30px;}
.m-03 { background-position: 0 -62px;}
.m-04 { background-position: 0 -94px;}
.m-05 { background-position: 0 -125px;}
.m-06 { background-position: 0 -155px;}
.m-07 { background-position: 0 -185px;}
.m-08 { background-position: 0 -217px;}
.m-09 { background-position: 0 -248px;}
.m-10 { background-position: 0 -279px;}
.m-11 { background-position: 0 -310px;}
.m-12 { background-position: 0 -341px;}

.d-01 { background-position: -51px 0;}
.d-02 { background-position: -51px -27px;}
.d-03 { background-position: -51px -57px;}
.d-04 { background-position: -51px -91px;}
.d-05 { background-position: -51px -122px;}
.d-06 { background-position: -51px -151px;}
.d-07 { background-position: -51px -185px;}
.d-08 { background-position: -51px -214px;}
.d-09 { background-position: -51px -249px;}
.d-10 { background-position: -51px -275px;}
.d-11 { background-position: -51px -309px;}
.d-12 { background-position: -51px -338px;}
.d-13 { background-position: -51px -373px;}
.d-14 { background-position: -51px -404px;}
.d-15 { background-position: -51px -436px;}
.d-16 { background-position: -51px -462px;}
.d-17 { background-position: -100px -0px;}
.d-18 { background-position: -100px -27px;}
.d-19 { background-position: -100px -57px;}
.d-20 { background-position: -100px -91px;}
.d-21 { background-position: -100px -122px;}
.d-22 { background-position: -100px -151px;}
.d-23 { background-position: -100px -185px;}
.d-24 { background-position: -100px -214px;}
.d-25 { background-position: -100px -249px;}
.d-26 { background-position: -100px -275px;}
.d-27 { background-position: -100px -309px;}
.d-28 { background-position: -100px -338px;}
.d-29 { background-position: -100px -373px;}
.d-30 { background-position: -100px -404px;}
.d-31 { background-position: -100px -436;}

.y-2009 { background-position: -150px 0;}
.y-2010 { background-position: -150px -60px;}
.y-2011 { background-position: -150px -120px;}
.y-2012 { background-position: -150px -180;}
.y-2013 { background-position: -150px -240px;}
.y-2014 { background-position: -150px -300px;}

<div class="postdate">
<div class="month m-<?php the_time("m") ?>"><?php the_time("M") ?></div>
<div class="day d-<?php the_time("d") ?>"><?php the_time("d") ?></div>
<div class="year y-<?php the_time("Y") ?>"><?php the_time("Y") ?></div>
</div>

Artículos relacionados

• Como crear CSS sprites
• Bordes redondeados con CSS Sprites
• Mejoras el aspecto de tus fechas con CSS
• Fechas más elegantes con CSS
• Mostrar los últimos X posts separados por fechas

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 :D

¿Como lo engañamos?

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

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

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;

Sistema antispam de campo oculto más cómodo :D

// 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);
}

Modificar el theme

<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'"; ?> />

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

Resultado

Artículos relacionados

• TypePad AntiSpam, competencia para Akismet
• Los labels e inputs son pareja, no les van los trios
• w2c — WYSIWYG 2 COMMENTS
• Google Reader tiene truco
• Dos nuevos themes para WordPress

1) Permitir la funcionalidad

add_theme_support( 'post-thumbnails' );

(Ver Imagen) Allí podremos seleccionar una imagen que será asociada al post.

2) Usar la funcionalidad

the_post_image($size)

<?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; ?>

• thumbnail
• medium
• full

has_post_image()

<?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()

$image_id = get_post_image_id();

get_the_post_image( $id, $size )

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

3) Filtros y actions

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

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;

}

Artículos relacionados

• Nueva funcionalidad de WordPress 2.9 en la edición de imágenes
• WordPress 2.9 beta 2
• Envíate notificaciones cuando las imagenes no carguen
• Como usar los custom fields en WordPress
• Class.image, imagenes más fáciles con PHP

Artículos relacionados

• Los mejores sitios sobre WordPress
• Trucos y consejos para administrar tu WordPress 2.7
• Si no haces un theme es por que no quieres
• wpjeriko, un theme fresco para nuestro WordPress
• Los 8 mejores plugins para WordPress

(Ver Imagen)

Opciones y más opciones

(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

Artículos relacionados

• AjaxRegulus v0.1
• Sirve el theme por defecto de WordPress a Internet Explorer 6
• Plush Theme, azul elegante para tu WordPress
• wpjeriko, un theme fresco para nuestro WordPress
• Crea tu propio theme para Firefox

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

Artículos relacionados

• Lleva WordPress en tu bolsillo (literalmente)
• Twitter hace amigos
• Twitter ya tiene ranking de los más queridos
• Jaiku, la competencia de Twitter
• Cliente Twitter para Android

[...]
<?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: ?>
[...]

Artículos relacionados

• Un preview al HTML5
• HTML5 Glosary
• Chuleta HTML5
• HTML 5 Working Draft publicado
• El circo del HTML5, peligro para el estandar

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)

Artículos relacionados

• TinyBox, ventanas emergentes en solo 3.5kb
• Sandbox, el theme más personalizable del mundo
• Todo lo que necesitas saber sobre los frameworks de themes de WordPress
• Themes para desarrolladores
• Isolated Theme para WordPress

Artículos relacionados

• WordPress Mobile Edition, tu blog para móviles
• WordPress Mobile para WordPress 2.0
• aNieto2k ahora personalizada para iPhone e iTouch
• El contenido de tu WordPress debería ser móvil
• Adapta tu WordPress a la tecnología móvil

Artículos relacionados

• WordPress Theme Frameworks, SandBox fué solo el principio
• Todo lo que necesitas saber sobre los formularios HTML5
• Todo lo que necesitas saber sobre los tags, galerías, generadores,…
• Traduciendo themes
• jQuery.animate, todo lo que siempre quisiste saber