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

Un par de cosillas que he encontrado y que pueden interesantes tener presentes:

1. SMT (Simple Mouse Tracking): Sistema basado en Javascript para guardar el rastro del ratón del usuario al pasear por tus páginas.
2. <MyTableGrid />: Librería que usa Prototype + Script.aculo.us para conseguir unas tablas dinámicas muy interesantes.
3. Wordpress Configuration Tips: Trucos de optimización durante la configuración de Wordpress.
4. wordwrap en Javascript: James Padolsey crea una pequeña función que emula la función wordwrap() de php.
5. Trucos de Gmail: Conviertete en un Gmail Ninja!!
6. Haz Dra&Drop en tablas: Javascript para realizar drag & drop con el contenido de las tablas.
7. $fx: Librería Javascript especializada en animaciones.
8. jsAnim: Otra librería Javascript especializada en animaciones.
9. Gx: Y una más, otra librería Javascript para realizar animaciones (tan solo 10kb sin comprimir).

Hemos visto varias veces lo que son los shortcodes y la capacidad que tienen de extender nuestros posts. Mediante una nomenclatura sencilla y cómoda de usar podemo hacer que el trabajo de publicar en nuestro blog sea más sencillo, con estos 10 shortcodes que he encontrado en CatsWhoCode algo más sencillo seguro que lo será:

1) Artículos relacionados

function related_posts_shortcode( $atts ) {
	extract(shortcode_atts(array(
	    'limit' => '5',
	), $atts));

	global $wpdb, $post, $table_prefix;

	if ($post->ID) {
		$retval = '<ul>';
 		// Get tags
		$tags = wp_get_post_tags($post->ID);
		$tagsarray = array();
		foreach ($tags as $tag) {
			$tagsarray[] = $tag->term_id;
		}
		$tagslist = implode(',', $tagsarray);

		// Do the query
		$q = "SELECT p.*, count(tr.object_id) as count
			FROM $wpdb->term_taxonomy AS tt, $wpdb->term_relationships AS tr, $wpdb->posts AS p WHERE tt.taxonomy ='post_tag' AND tt.term_taxonomy_id = tr.term_taxonomy_id AND tr.object_id  = p.ID AND tt.term_id IN ($tagslist) AND p.ID != $post->ID
				AND p.post_status = 'publish'
				AND p.post_date_gmt < NOW()
 			GROUP BY tr.object_id
			ORDER BY count DESC, p.post_date_gmt DESC
			LIMIT $limit;";

		$related = $wpdb->get_results($q);
 		if ( $related ) {
			foreach($related as $r) {
				$retval .= '<li><a title="'.wptexturize($r->post_title).'" href="'.get_permalink($r->ID).'">'.wptexturize($r->post_title).'</a></li>';
			}
		} else {
			$retval .= '
	<li>No related posts found</li>';
		}
		$retval .= '</ul>';
		return $retval;
	}
	return;
}
add_shortcode('related_posts', 'related_posts_shortcode');

Con este shortcode, podemos añadir en nuestro post, un listado de artículos relacionados usando los tags del mismo para buscarlo los similares.

Modo de uso

[related_posts]

2) Mostrar una gráfica de Google Chart

function chart_shortcode( $atts ) {
	extract(shortcode_atts(array(
	    'data' => '',
	    'colors' => '',
	    'size' => '400x200',
	    'bg' => 'ffffff',
	    'title' => '',
	    'labels' => '',
	    'advanced' => '',
	    'type' => 'pie'
	), $atts));

	switch ($type) {
		case 'line' :
			$charttype = 'lc'; break;
		case 'xyline' :
			$charttype = 'lxy'; break;
		case 'sparkline' :
			$charttype = 'ls'; break;
		case 'meter' :
			$charttype = 'gom'; break;
		case 'scatter' :
			$charttype = 's'; break;
		case 'venn' :
			$charttype = 'v'; break;
		case 'pie' :
			$charttype = 'p3'; break;
		case 'pie2d' :
			$charttype = 'p'; break;
		default :
			$charttype = $type;
		break;
	}

	if ($title) $string .= '&chtt='.$title.'';
	if ($labels) $string .= '&chl='.$labels.'';
	if ($colors) $string .= '&chco='.$colors.'';
	$string .= '&chs='.$size.'';
	$string .= '&chd=t:'.$data.'';
	$string .= '&chf='.$bg.'';

	return '<img title="'.$title.'" src="http://chart.apis.google.com/chart?cht='.$charttype.''.$string.$advanced.'" alt="'.$title.'" />';
}
add_shortcode('chart', 'chart_shortcode');

El shortcode ideal para incrustar gráficas en nuestros posts. Mediante una nomenclatura con una serie de parámetros la personalización de la gráfica será más sencilla y cómoda.

Modo de uso

[chart data="41.52,37.79,20.67,0.03" bg="F7F9FA" labels="Reffering+sites|Search+Engines|Direct+traffic|Other" colors="058DC7,50B432,ED561B,EDEF00" size="488x200" title="Traffic Sources" type="pie"]

3) Muestra tu publicidad Adsense

function showads() {
    return '<script type="text/javascript"><!--
google_ad_client = "pub-3637220125174754";
google_ad_slot = "4668915978";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
';
}

add_shortcode('adsense', 'showads');

Sencillo shortcode que nos permite insertar adsense allá donde queramos dentro e nuestro post.

Modo de uso

[adsense]

4) Mostrar contenido en relación a las capacidades del usuario

function access_check_shortcode( $attr, $content = null ) {
    extract( shortcode_atts( array( 'capability' => 'read' ), $attr ) );
    if ( current_user_can( $capability ) && !is_null( $content ) && !is_feed() )
        return $content;

    return 'Sorry, only registered members can see this text.';
}

add_shortcode( 'access', 'access_check_shortcode' );

Si quieres mostrar contenido de tu post, pero quieres que todos los usuarios lo puedan ver, este shortcode es el tuyo. Con el puedes ocultar el contenido según las capacidades del usuario que lo lee.

Modo de uso

[access capability="switch_themes"]

5) Incrusta un RSS en tu post

/This file is needed to be able to use the wp_rss() function.
include_once(ABSPATH.WPINC.'/rss.php');

function readRss($atts) {
    extract(shortcode_atts(array(
	"feed" => 'http://',
      "num" => '1',
    ), $atts));

    return wp_rss($feed, $num);
}

add_shortcode('rss', 'readRss');

Sencillo sistema para insertar un RSS en tu post.

Modo de uso

[rss feed="http://feeds2.feedburner.com/Catswhocode" num="5"]

6) Crea automáticamente una mini url para Twitter

function subzane_shorturl($atts) {
	extract(shortcode_atts(array(
		'url' => '',
		'name' => '',
), $atts));
$request = 'http://u.nu/unu-api-simple?url=' . urlencode($url);
$short_url = file_get_contents($request);
	if (substr($short_url, 0, 4) == 'http')    {
		$name = empty($name)?$short_url:$name;
		return '<a href="'.$short_url.'">'.$name.'</a>';
	} else {
		$name = empty($name)?$url:$name;
		return '<a href="'.$url.'">'.$name.'</a>';
	}
}
add_shortcode('shorturl', 'subzane_shorturl');

Shortcode al que le pasamos una url y nos devuelve la url minimzada.

Modo de uso

[shorturl name="shortcode" url="http://codex.wordpress.org/Shortcode_API"]

7)  Mostrar la última imagen asociada al post

function sc_postimage($atts, $content = null) {
	extract(shortcode_atts(array(
		"size" => 'thumbnail',
		"float" => 'none'
	), $atts));
	$images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() );
	foreach( $images as $imageID => $imagePost )
	$fullimage = wp_get_attachment_image($imageID, $size, false);
	$imagedata = wp_get_attachment_image_src($imageID, $size, false);
	$width = ($imagedata[1]+2);
	$height = ($imagedata[2]+2);
	return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>';
}
add_shortcode("postimage", "sc_postimage");

Nos mostrará la última imagen asociada al artículo.

Modo de uso

[postimage]

Deja notas para administradores en los posts

add_shortcode( 'note', 'sc_note' );

function sc_note( $atts, $content = null ) {
	 if ( current_user_can( 'publish_posts' ) )
		return '<div class="note">'.$content.'</div>';
	return '';
}

Genial idea que nos permite dejar notas, únicamente visibles para los administradores, en nuestro posts.

Modo de uso

[note]This is a personal note that only admins can see![/note]

9) Quitando el autoformato de Wordpress

function my_formatter($content) {
	$new_content = '';
	$pattern_full = '{(\[raw\].*?\[/raw\])}is';
	$pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
	$pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);

	foreach ($pieces as $piece) {
		if (preg_match($pattern_contents, $piece, $matches)) {
			$new_content .= $matches[1];
		} else {
			$new_content .= wptexturize(wpautop($piece));
		}
	}

	return $new_content;
}

remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');

add_filter('the_content', 'my_formatter', 99);

Ideal para los que mostramos código en la página, ya que nos elimina las funciones encargadas de autoformatear el código. Aunque técnicamente no es un shortcode, se comporta como tal, y el texto que no esté dentro de los tags será autoformateado como por defecto.

Modo de uso

[raw]This portion of text will not be automatically formatted by WP.[/raw]

10) Muestra tus estadísticas con shortcodes

Se trata de un plugin que permite mostrar una serie de estadísticas mediante shortcodes.

Modo de uso

[pagerank]
[feedburner_subscribers]
[alexa_rank]
[technorati_authority]
[technorati_rank]
[user_count]
[post_count]
[page_count]
[comment_count]
[trackback_count]
[avg_comments_per_post]
[category_count]
[tag_count]
[link_count]
[google_backlinks]
[yahoo_backlinks]
[delicious_bookmarks]

Para ser un buen desarrollador de plugins para Wordpress debemos mejorar algunos de nuestros puntos de interacción con el usuario. Para ello Wordpress nos ofrece una serie de opciones para mejorar la información relacionada con el plugin que hemos desarrollado.

plugin_action_links

Se trata de un filtro que se aplicara siempre que entremos en la página de gestión de plugins. En él podemos modificar la salida de links que el plugin nos ofrece:

(Ver Imagen)

Estos links pueden, por ejemplo, llevarnos directamente a la página de configuración del plugin. Un valor añadido que hará que el plugin gane un poco de calidad.

<?php
// Asociamos la función add_plugin_links() al filtro
add_filter('plugin_action_links', 'add_plugin_links', 10, 2);

// Declaramos la función
function add_plugin_links($links, $file) {
	// Marcamos el plugin actual
	static $this_plugin;
	if (!$this_plugin) $this_plugin = plugin_basename(__FILE__);

		// Comprobamos que el plugin que estamos mostrando por pantalla es el nuestro.
		if ($file == $this_plugin ){

		// Definimos el enlace a "Configuración"
		$settings_link = '<a href="index.php">Configuración</a>';

		// Añadimos el nuevo link a los ya existentes
		array_unshift($links, $settings_link);
	}
	// Devolvemos los links
	return $links;
}
?>

after_plugin_row

Otra forma de ofrecer más información al usuario es informar de que existe una actualización pendiente para el plugin. Para ello podemos mostrar un mensaje en la parte inferior del plugin y así se verá claramente la actualización:

(Ver Imagen)

Esto hará que el usuario sea consciente del cambio de versión que está disponible en cada momento. Para ello Wordpres nos ofrece la posibilidad de comprobar un fichero alojado en nuestro servidor que indicará la versión y la contrastará con la instalada (siempre y cuando el servidor permita este tipo de peticiones).

<?php
// Asociamos add_plugin_row() al action.
add_action('after_plugin_row', 'add_plugin_row', 10, 2);

// Declaramos la función
function add_plugin_row($links, $file) {
	global $wp_version;
	// Marcamos el plugin actual
	static $this_plugin;
	if (!$this_plugin) $this_plugin = plugin_basename(__FILE__);

	// Comprobamos que el plugin que estamos mostrando por pantalla es el nuestro.
	if ($file == $this_plugin ){
		// ¿Está disponible la actualización de plugins?
		$current = get_option('update_plugins');
		if (!isset($current->response[$file])) return false;

		// Controlamos el número de columnas disponibles dependiendo de la versión.
		$columns = substr($wp_version, 0, 3) == "2.8" ? 3 : 5;

		// Definimos la ruta de nuestro fichero de información.
		$url = "http://www.yoursite.com/info.txt";

		// Lanzamos la consulta externa.
		$update = wp_remote_fopen($url);

		// Pintamos el mensaje de alerta.
		echo '<td colspan="'.$columns.'">';
		echo $update;
		echo '</td>';
	}
}

Minimizando

Apartir de Wordpress 2.7 disponemos de 2 posibilidades más:

<?php
// Nombre del plugin
$plugin_name = "miplugin";

// Filtros específicos para cada plugin
add_filter("plugin_action_links_$plugin_name", "....");
add_action("after_plugin_row_$plugin_name", "....");
?>

Hoy via WP-Engineer descubro dos plugins que considero realmente importantes para nuestro Wordpress. Ambos ofrecen información acerca de nuestro servidor, algo realmente útil para tener controlado lo que no solemos controlar.

WP Memory Usage

(Ver Imagen)

Se trata de un simple Widget, desarrollado por Alex Rabe,  que nos vá mostrando con una gráfica de colores el nivel de memoria consumida sobre el máximo de memoria establecida para Wordpress. Muy útil para los que tienen problemas de rendimiento.

[Descargar][Página del plugin]

WP System Health

(Ver Imagen)	(Ver Imagen)
(Ver Imagen)	(Ver Imagen)

Se trata de un plugin muy completo que además de mostrar información de la máquina, nos muestra información sobre nuestra instalación PHP, nuestro Wordpress y nuestra base de datos. Una información muy interesante de conocer.

[Descargar] [Página del plugin]

Actualización II

David Rojas nos avisa que en servidores con IIS (Internet Information Services) no funcionan correctamente los 2 plugins.

Actualización

A petición de Relay, ahí van las capturas de aNieto2k

Continua —>

Creo que acabo de descubrir un bug, para mi un problemón, en Wordpress 2.8. Se trata de la insercción de código mediante copia/pega en el editor visual de Wordpress (TinyMCE).

Según las pruebas que he realizado, me he encontrado con que al intentar copiar este código:

<div class="cube">
    <div class="face top">
    </div>
    <div class="face left">
    </div>
    <div class="face right">
    </div>
</div>

Directamente desde UltraEdit (es el que uso en Windows, aunque supongo que usando TextMate o cualquier otro ocurrirá lo mismo). Obtengo este resultado:

<div>
 <div>
 </div>
 <div>
 </div>
 <div>
 </div>
</div>

Creo que he encontrado el problema en el fichero wp-includes/js/tinymce/wp-tinymce.js, sobre la línea 14-15. Pero aún no he tenido tiempo de solventarlo. Esta tarde le echaré un vistazo. ¿A alguien más le pasa?

Solución temporal

Por el momento he visto que podemos solucionarlo editando el fichero en cuestión (wp-includes/js/tinymce/wp-tinymce.js)

Buscamosen la línea 14-15 este código:

...if(c.getParam("paste_auto_cleanup_on_paste",true))...

Y reemplazamos el valor true por false para evitar que nos limpie estos parámetros.

...if(c.getParam("paste_auto_cleanup_on_paste",false))...

Esto puede deshabilitar todos los filtros aplicados al pegado de código y quizás con contenido de documentos Word sea necesario, lo mejor es hacer pruebas antes de dejarlo funcionando definitivamente.