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

Eduardo Sada, me avisa de que ya tiene lista una versión estable de Sexy Forms. Se trata de un script desarrollado como plugin de MooTools (está trabajando en la versión jQuery) con el que nos permite hacer formularios más estéticos sin perder la funcionalidad de los elementos del mismo.

(Ver Imagen)

Entre las ventajas que ofrece frente a scripts similares, nos encontramos mejoras estéticas como la posibilidad de usar templates y una integración perfecta en los principales navegadores.

Y quizás lo más importante de todo, sin perder la accesibilidad necesaria para que nuestro formulario pueda ser usado por cualquiera y como quiera.

Demo

Eduardo, nos deja una página de ejemplo para que veamos el resultado y descargar el script directamente desde allí.

¿Estás pensando en añadir una funcionalidad a WordPress y no sabes por donde empezar a extenderlo? ¿te gustaría hacer las tareas más comunes de tu día a día con el blog sean más fáciles? Pues solo necesitas conocer, como actuar frente a esta pregunta.

¿Como y donde puedo extender WordPress?

WordPress, por defecto, nos presenta 3 formas de extender las funcionalidades de WordPress:

1. Mediante actions.
2. Mediante filters.
3. Mediante declaración de funciones.

Todas ellas sin necesidad de tocar el código propio del núcleo de WordPress, evitando así tener que hacer modificaciones cada vez que actualicemos nuestro Wordpres.

Extender WordPress mediante Actions

Uno de los métodos que podemos usar y que están disponibles el la API de WordPress es el uso de actions. Como su nombre indica, actions son las acciones definidas por el equipo de WordPress en las que podremos añadir nuestras propias funcionalidades.

<?php add_action($tag, $function_to_add, $priority = 10, $accepted_args = 1); ?>

Esta función que tanto hemos visto en plugins o código que hemos mostrado para extender WordPress, hace una función muy importante y cada parámetro aporta un grado más de personalización.

• $tag: Nombre del action (ahora los veremos).
• $function_to_add: Nombre de la función que ejecutaremos al activarse el action ($tag).
• $priority: Prioridad de ejecución, de menor a mayor.
• $accepted_args: Aceptamos (o no) el paso de parámetros a nuestra función.

Ejemplo:

<?php
define("TWITTER_USER", 'username');
define("TWITTER_PASS", 'password');
define("TWITTER_MESSAGE", '[Post] %name%: %link% <-- %title%');

function update_twitter($post_ID = '')  {
	$curl_handle = curl_init();

	// Nombre del blog
	$message = str_replace("%name%", get_bloginfo('name'), TWITTER_MESSAGE);

	// Cargamos el post
	$post = get_post($post_ID);

	// Enlace y título
	$message = str_replace("%link%", $post->guid, $message);
	$message = str_replace("%title%", $post->post_title, $message);

	// Enviamos el Tweet
	curl_setopt($curl_handle, CURLOPT_URL, 'http://twitter.com/statuses/update.xml');
	curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
	curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($curl_handle, CURLOPT_POST, 1);
	curl_setopt($curl_handle, CURLOPT_POSTFIELDS, "status=$message";
	curl_setopt($curl_handle, CURLOPT_USERPWD, TWITTER_USER.":"TWITTER_PASS);
	$buffer = curl_exec($curl_handle);
	curl_close($curl_handle);
  return $post_ID;
}
// Añadimos funcionalidad a publish_post
add_action('wp_insert_post', 'update_twitter');
?>

No le hagais mucho caso al código, es ilustrativo y puede producir un funcionamiento erroneo en WordPress

En este código, vemos lo sencillo que es añadir una funcionalidad a nuestro WordPress. En este caso, estamos añadiendo al action wp_insert_post la función update_twitter(). En este caso, una vez hayamos pulsado el botón de publicar en nuestro WordPress, este ejecutará la función update_twitter() y esta enviará a Twitter un aviso de un nuevo artículo.

¿Donde se extienden los actions?

Este ejemplo solo debe servir para hacernos una idea de como añadir funcionalidades a nuestro WordPress, lo interesante es que debemos conocer los actions disponibles para extender nuestro WordPress.

La API nos muestra un listado bastante detallado de los action disponibles. Pero si tenemos alguna duda lo mejor es siempre revisar el código.

En el fichero post.php del directorio wp-includes/ podemos encontrar en la línea 1534 la llamada do_action() que lanzará las acciones asociadas al nombre wp_insert_post.

[...]
	wp_transition_post_status($post_status, $previous_status, $post);

	if ( $update)
		do_action('edit_post', $post_ID, $post);

	do_action('save_post', $post_ID, $post);
	do_action('wp_insert_post', $post_ID, $post);

	return $post_ID;
}
[...]

do_action(), es la función encargada de lanzar el array de acciones asociadas a la key definida por el primer parámetro. En este caso wp_insert_post, lanzará nuestra función que recibirá por parámetro $post_ID que estamos pasando con el do_action(). Suplementaríamente estamos paando un segundo parámetro con $post, que contiene el objeto con los valores que componen el post que acabamos de insertar en la BD.

Revisando el código de WordPress encontraremos una infinidad de do_action() que permiten extender WordPress en casi todos los puntos en los que queramos añadir una nueva funcionalidad.

Mediante filters

Los filters, están mucho más extendidos por el núcleo de WordPress. Como su nombre indica, sirven para filtrar variables que nos podemos encontrar en cualquier funcionalidad de WordPress.

Al igual que los actions, podemos extender la funcionalidad de nuestro WordPress en ellos.

Ejemplo

<?php
	function noShowIPs($IP = '') {
		// Mostramos solo los primeros 7 carácteres
		return substr($IP, 0, 7);
	}
	// Aplicamos el filtro
	add_filter('get_comment_author_IP', 'noShowIPs');
?>

En este pequeño ejemplo, indicamos que no queremos mostrar la IP completa del usuario que comenta en nuestro WordPress cuando se usa la función get_comment_author_IP(). Mediante un substr() devolvemos los 7 primeros dígitos de $IP.

¿Donde se extienden los filters?

Al igual que los actions, los filters están en los ficheros que componen WordPress. En el ejemplo que hemos montado previamente hemos hecho uso de get_comment_author_IP() que se encuentra en el fichero comment-template.php del directorio wp-includes/. Si nos dirigimos a la línea 173 veremos el siguiente código.

[...]
function get_comment_author_IP() {
	global $comment;
	return apply_filters('get_comment_author_IP', $comment->comment_author_IP);
}
[...]

apply_filters() es el do_action() de los filters, ya que se encarga de recorrer el array de filtros definidos para la key establecida y los va aplicando uno trás otro. En nuestro caso, recibimos la IP del comentarista para posteriormente devolver una IP recortada.

Mediante declaración de funciones

Esta forma, es quizas la más obvia, pero no por ello deja de ser potente.

En muchos casos, usamos plugins por que son más fáciles de instalar, pero bien bien, podrían ser sustituidos por funciones alojadas en ficheros concretos de WordPress. Obtendríamos el mismo resultado.

Ejemplo

<?php
function ult_comments($cuantos = 5) {
    global $wpdb;
    $comentarios = $wpdb->get_results($wpdb->prepare("
                            SELECT  wc.comment_date, wc.comment_author, wp.post_title, wp.guid, wp.comment_count
                            FROM ".$wpdb->comments." as wc, ".$wpdb->posts." as wp
                            WHERE wc.comment_post_ID = wp.ID
                            AND  wc.comment_approved = '1'
                            AND wc.comment_type = ''
                            ORDER BY wc.comment_date DESC LIMIT 0,%d;",$cuantos ));
    foreach ($comentarios as $comentario) {
			echo '<li>
				<a href="'.$comentario->guid.'" title="'.$comentario->post_title.'">'.$comentario->post_title.'
				  <small>'.$comentario->comment_count.'</small>
                                </a>
        			<small>Por '.$comentario->comment_author.' hace '.since_date($comentario->comment_date).'</small>
                              </li>';
    }
}
?>

Uno de los puntos recomendados para alojar este tipo de funciones, es el fichero functions.php de nuestro theme. Todas las funciones definidas en él serán visibles desde nuestro themes, plugins, …

En este caso, definimos esta función que nos devolverá los últimos 5 comentarios del blog en el fichero functions.php. Una vez definida, podremos usarla en nuestro theme, donde más rábia nos dé, simplementa llamándola.

<ul>
<?php ult_comments(10); // 10 últimos comentarios ?>
</ul>

¿Que podemos hacer con todo esto?

Pues lo que queramos, podemos hacer que WordPress se transforme a nuestra voluntad. Nos permite desde añadir funcionalidades que nos ayudan en el día a día, hasta cambiar el concepto de blog por el de CMS, Miniblog, …

Edito:

NUNCA SE DEBE TOCAR EL CÓDIGO DE WORDPRESS

Este artículo intenta mostrar las diferentes formas de extender WordPress, sin necesidad de tocar los ficheros que componen el núcleo de WordPress, osea la raíz y wp-includes/ y wp-admin/. Para poder extenderlo puedes hacer uso de los fichero functions.php de tu theme o generar un plugin con dichas funcionalidades dentro.

La limitación, está en nuestra cabeza

Hoy se ha publicado una nueva versión de Google Chrome, la 2.0 estable, que se está presentando a la red como una versión 30% más rápida que su versión anterior.

(Ver Imagen)

Hay que decir, que ese incremento de velocidad es en el motor javascript llamado V8. Lo que hace que este incremento en páginas muy cargadas de Javascript sea muy significativo.

(Ver Imagen)

Además, se ha añadido el autocompletado de formularios, algo que hasta el momento no estaba disponible y unas mejoras en el módulo de pestaña nueva, posibilidad de poner a pantalla completa y se han corregido cerca de 300 bugs detectados.

Progresivamente debería ir actualizandose, aunque los más ansiosos podrán descargarla directamente desde aquí.

Con la llegada de Internet Explorer 8, nos llevamos la sorpresa de que Developer Toolbar no estaba tan mal como creíamos, incluso hay gente que se atreve a compararlo al todopoderoso Firebug. En esta comparativa, nos encontramos una tabla que nos testéa de todos los Firebug de los diferentes navegadores una buena serie de factores a tener en cuenta y que muestran que Developer Toolbar es una herramienta genial para los desarrolladores web.

Feature	IE8	FireBug + FireFox	Opera	Safari	Chrome	Usefulness
HTML
Syntax Highlighting	Yes	Yes	Yes	Yes	Yes
Code Folding	Yes	Yes	Yes	Yes	Yes
Html Editing	Yes	Yes	No	No	No
HTML Validator	Yes*	No	No	No	No
Clear Cache	Yes	No**	No**	No**	No**
Select and Highlight	Yes	Yes	Yes	Yes	Yes
Layout	Yes	Yes	Yes	Yes	Yes
CSS
Css Viewer/Editor	Yes	Yes	Yes	Yes	Yes
Css Syntax Highlight	Yes	Yes	No	No	No
Disable CSS Styles	Yes	Yes	No	No	No
Create New Styles	Yes	Yes	No	No	No
Validate CSS	Yes*	No	No	No	No
JavaScipt
Javascript Highlight	Yes	No	Yes	Yes	No
JavaScript Debug	Yes	Yes	Yes	Yes	No***
Breakpoints	Yes	Yes	Yes	Yes	No***
Step Over/In/Out	Yes	Yes	Yes	Yes	No***
JavaScript Profiler	Yes	Yes	No	Yes	No
Execute JavaScript	Yes	Yes	Yes	Yes	Yes
Call Stack	Yes	Yes	Yes	Yes	No
Local Variables	Yes	Yes	No	Yes	No
Watch Variables	Yes	Yes	Yes	No	No
Web Service Viewer	No	Yes	No	No	No
Intangibles
YSlow	No	Yes	No	No	No
Browser Mode Switch	Yes	No	No	No	No
Dockable	Yes	Yes	Yes	Yes	Yes
Color Picker	Yes	No	No	No	No
Net Tab	No	Yes	No	No	No

(Tabla de elegantcode.com)

Personalmente me parece un maravilla poder hacer, casi lo mismo que con Firebug, en Internet Explorer (aunque solo en el 8.0). Esto me ayuda bastante a la hora de desarrollar para este navegador y me ahorra mucho tiempo de modificar en el fichero real, grabar y recargar el navegador.

¿Que opinas? ¿Le has dado una oportunidad?

Llamamos acordeón a aquellos elementos dinámicos de nuestras páginas web que muestran un elemento al pasar con el ratón (o hacer click sobre él) ocultando los demás elementos que lo componen. Esta técnica muy cómoda para mostrar grandes cantidades de información en poco espacio suele darnos algún dolor de cabeza para cuadrar toda la información.

(Ver Imagen)

Con BySlideMenu, nunca más tendremos problemas. Se trata de un plugin para MooTools que nos permite hacer una gran variedad de acordeones con muy pocas líneas de código.

HTML

El código HTMl que usaremos para generar nuestro acordeón se basará en una lista de elementos:

<ul id="pinclickmenu">
    <li><img src="creditcards.jpg" /></li>
    <li><img src="games.jpg" /></li>
    <li><img src="computer.jpg" /></li>
    <li><img src="eiffeltower.jpg" /></li>
    <li><img src="electronic.jpg" /></li>
</ul>

Cada <li /> será uno de los elementos que compondrán el Acordeón.

Javascript

var pinclickmenu = new BySlideMenu('pinclickmenu', {pinMode: 'click'});

Como podemos ver menos líneas es imposible

Demos y Descarga

Podeis ver más demos y descargar el plugin desde la página del proyecto.