<style type='text/css'>
    #{$selector} {
    	margin: auto;
    }
    #{$selector} .gallery-item {
    	float: {$float};
    	margin-top: 10px;
    	text-align: center;
    	width: {$itemwidth}%;
    }
    #{$selector} img {
    	border: 2px solid #cfcfcf;
    }
    #{$selector} .gallery-caption {
    	margin-left: 0;
    }
</style>

Este fragmento de código se encuentra en:
wp-includes/media.php (Line 833)

El problema es que se incrusta estilo en pleno documento, donde se ha insertado la galería. Lo cual no resulta muy limpio si atendemos a la abstracción de las 3 capas: diseño, función y contenido.

Si volvemos a media.php veremos entorno a la línea 831:

if ( apply_filters( 'use_default_gallery_style', true ) )

Por tanto una opción elegante podría ser:

add_filter('use_default_gallery_style', FALSE);

Colocando este filtro en el fichero functions.php del theme usado, indicamos a WordPress que no debe usar por el estilo CSS por defecto para las galerías, y relegamos el CSS necesario al fichero style.css donde tengamos centralizado todo el estilo del blog.

Usando filtros se puede cambiar altamente el comportamiento por defecto de WordPress.

¿Qué es un post-thumbnail?

Es una imagen en miniatura que puedes asociar a cada post.

Esta nueva característica es muy interesante puesto que te ahorras códigos y métodos un tanto rebuscados si lo único que quieres es asociar a un post una imagen.
Por ejemplo en el apartado portfolio de este sitio web veis que aparecen un thumbnail por cada proyecto. Para lograrlo he subido el thumbnail como una imagen más y a través de “query y el menu-order” cojo la primera imagen del post, luego en la ficha del proyecto me salto la primera y coloco el resto.
Otra formula para establecer thumbnails es usar algún plugin disponible.

Y ahora por fin en WordPress ya tenemos incorporada de base esta característica.

Método de empleo

Dando soporte a post-thumbnails en nuestro theme activo

Lo primero es indicar a WordPress que deseamos usar esta funcionalidad. Para ello usamos la siguiente instrucción que debemos incorporar al fichero function.php de nuestro theme.

add_theme_support( 'post-thumbnails' );

Incluir el thumbnail en un post

Se hace a través de la interfaz del panel de control, facilitando así la tarea para los editores del blog.
Cuando escribamos un post o lo editemos en el panel de control de WordPress, veremos al margen derecho un nuevo bloque llamado “Post Thumbnail”, en el podemos incluir la imagen en miniatura.

Mostrar los últimos 5 posts (con thumbnails)

function related_posts() {
	global $wpdb, $post;
 
	$category = get_the_category(); 	
 
	$last_posts = $wpdb->get_results("
		select $wpdb->posts.ID, $wpdb->posts.post_title, $wpdb->posts.guid, date_format($wpdb->posts.post_date, '%e-%m-%Y') as post_date
		from $wpdb->posts
		join $wpdb->term_relationships
			on $wpdb->posts.ID = $wpdb->term_relationships.object_id  
		where 
			$wpdb->term_relationships.term_taxonomy_id = ".$category[0]->cat_ID." and
			$wpdb->posts.post_type = 'post' and 
			$wpdb->posts.post_status = 'publish' and 
			$wpdb->posts.ID != ".$post->ID."
		group by $wpdb->posts.ID 
		order by $wpdb->posts.ID desc
		limit 5");
 
	echo '<ul>';
		foreach ($last_posts as $last_post_current) {
			echo '<li>';
				echo '<a href="'.$last_post_current->guid.'" rel="bookmark">';
					if (has_post_thumbnail($last_post_current->ID)) { 
						echo get_the_post_thumbnail($last_post_current->ID, array(40,40)); 
					}
					echo $last_post_current->post_title;
				echo '</a>'; 
				echo '<span class="date">'.$last_post_current->post_date.'</span>';
			echo '</li>';
		}
	echo '</ul>';		
}

A partir de un query se obtienen los últimos 5 posts publicados de la categoría activa get_the_category();.
Luego en el bucle que recorre cada post, se muestra el titulo, thumbnail y el enlace correspondiente a cada post.

Fijémonos en fragmento de código que nos interesa:

if (has_post_thumbnail($last_post_current->ID)) { 
	echo get_the_post_thumbnail($last_post_current->ID, array(40,40)); 
}

La función has_post_thumbnail(); a la que le pasamos como parámetro el post_id nos devuelve true si ese post contiene un thumbnail asociado. En ese caso se ejecuta la función get_the_post_thumbnail(); a la que se le pasa como primer parámetro el post_id y como segundo un tamaño para la imagen en miniatura (en forma de array), en este caso 40*40 pixel.

Podéis ver más información detallada sobre post-thumbnails en New in WordPress 2.9: Post Thumbnail Images.

• Evitar las redundancias.
• Usar mejor la descendencia en los selectores.
• Definir las variables como meros comentarios.
• Usar variables de PHP u otro lenguaje dinámico de servidor.
• Decantarnos por CSS 3.

Es probable que existan más formas ¿conoces alguna?, bueno… de momento voy a intentar explicar las mencionadas.

Evitar las redundancias

Ejemplo redundante

h1 { 
	color: #59B0E5; 
	font-size: 1em;
	text-decoration: underline;
}
h2 { 
	color: #59B0E5; 
	font-size: 1.2em; 
	text-decoration: underline;
}

Evitamos redundancias

h1 { font-size: 1em; }
h2 { font-size: 1.2em; }
h1, h2 { 
	color: #59B0E5; 
	text-decoration: underline;
}

El ejemplo es obvio y carece de explicaciones, sin embargo en hojas de estilo complejas la tarea de sintetizar es más complicada.

Usar una mejor la descendencia en los selectores

p em, p strong, p dfn { color: #59B0E5; }

Definir las variables como meros comentarios

En la cabecera del fichero CSS podemos incluir bajo la notación de comentarios las “variables” que entran en juego en la hoja de estilo.

/*
   Primary color: #59B0E5
   Second color: #DA5BA4
*/
 
p { color: #59B0E5; }
...

Así y con ayuda de la típica herramienta “buscar/reemplazar” podemos cambiar fácilmente los valores en todo el documento.

Usar variables de PHP u otro lenguaje dinámico de servidor

Para ello debemos tener en cuenta varias cuestiones.

Extensión .PHP

La primera de ellas es que el fichero sea interpretado como tal, en el caso de PHP podremos llamar a la hoja de estilos style.php.

Enlace al fichero

<link rel="stylesheet" type="text/css" href='/css/style.php' />

Tipo de contenido

Debemos indicar al servidor web el tipo de contenido de nuestro fichero para que sea correctamente interpretado. Esto lo podemos hacer fácilmente en PHP enviando la cabecera con el tipo MIME.

<?php
    header("Content-type: text/css;");
?>

Declarando las variables

<?php
   $colorweb1 = "#59B0E5";
   $colorweb2 = "#DA5BA4";
?>

Usando las variables

En las propias reglas CSS podemos incrustar las llamadas a las variables de PHP.

h1 { color: <?php echo $colorweb1; ?>; }
h2 { color: <?php echo $colorweb2; ?>; }

Decantarnos por CSS 3

Las anteriores soluciones son como “de andar por casa”. CSS 3 nos brinda la posibilidad de usar variables reales de forma “nativa”. El problema es la retrocompatibilidad con algunos navegadores actuales y todas las antiguas versiones

Declarando las variables

@variables { colorweb1: #59B0E5; colorweb2: #DA5BA4; }

Usando las variables

h1 { color: var(colorweb1); }
h2 { color: var(colorweb2); }

Pero puede pasar que el usuario tenga su navegador configurado de una forma determinada, no realice ese refresco de página, y tenga el CSS almacenado en la memoria cache, por tanto seguirá viendo la página exactamente igual.

Una posible solución:

<link rel="stylesheet" href="http://aurea.es/style.css?nocache=<?php echo mt_rand();?>" type="text/css" media="screen" />

De esta forma generamos por medio de PHP un número aleatorio (y diferente en cada acceso), con ello obligamos al navegador a que descargue siempre el CSS puesto que no se corresponde con el nombre guardado anteriormente.

Por razones de optimización en PHP he escogido esta función, es más rápida mt_rand() que rand().

Recordar también quitar este nocache=xxxxx cuando haya pasado el tiempo prudencial, para que la cache vuelva hacer su trabajo.

El problema

Si usamos este plugin e intentamos validar los documentos web en XHTML Strict veremos que existen errores generados por el carácter “&” puesto que no se encuentra como entidad HTML:

&

Todos los errores vienen de la URL que Language Switcher define para pasar de un lenguaje a otro (switcher interfaz).

La solución

El problema esta localizado y es sencillo, así que la solución no podías ser menos. Voy a exponerlo a continuación para ahorrar esos minutillos algún desarrollador sin ganas de rebuscar en el código del plugin.

En la línea 1010 del fichero langswitch.php debemos hacer el siguiente cambio:

//return $uriStr;
return htmlentities($uriStr);

Lo que hice simplemente es comentar la línea original del plugin e incorporar la misma instrucción pero añadiendo la función de PHP htmlentities() encargada de convertir la string pasada como parámetro $uriStr en una nueva string donde se han remplazado todos los caracteres que tienen una entidad HTML equivalente.

En próximas versiones

Jennifer Hodgdon (programadora en Poplar ProductivityWare y responsable de este plugin) me ha informado que esta solución será implementada en futuras versiones. Así no tendremos que preocuparnos de la sobre-escritura del fichero.

Por cierto, Jennifer me ha escrito en inglés y en un perfecto español

Se trata de un evento organizado por la Fundación CTIC, la oficina española del consorcio W3C, y subvencionado por el Gobierno del Principado de Asturias.

Este evento ha conseguido tras varias ediciones una enorme relevancia internacional, incorporando en sus actos a ponentes de primera fila.

A continuación voy a destacar lo que me ha parecido más interesante.

Beyond Web 2.0 – Jesse James Garret

Garret emplea gran parte de su ponencia en hablar acerca de la humanización de la web, de como hacer que esta sea más humana y amable con el usuario.

Nos pone como ejemplo productos que han triunfado, principalmente el ipod de Apple. Nos cuenta la historia de la niña de 12 años que cuando le regalaron su primer ipod le dio un beso antes de irse a la cama.

Nos explica como lo que hay que buscar es que el usuario llegue a pensar: “no me imagino la vida sin este producto/servicio”.

En ese tipo de conexiones entre el usuario y el producto/servicio se encuentra en el éxito.

En esta charla he recordado como en alguna asignatura de diseño en la universidad, o en algún libro que he comprado leí acerca de lo importante que es humanizar una marca. Yo siempre digo que:

El usuario, visitante o lector cuando se le transmiten emociones, el mensaje llega a calar mucho más profundo.

Garret nos pone el ejemplo de TiVo y como en su logo aparece una cara sonriente y tiene piernas, una forma más de humanizar la marca y acercar algo tecnológico a lo humano. Este producto tiene verdaderos fanáticos en EEUU.

También habla acerca del esquema tecnológico “Datos > Lógica > Interfaz“. Este modelo es válido para los que estamos trabajando en la web, pero para el usuario el modelo se reduce en: Interfaz. Mas abajo lo que hay para el usuario es algo desconocido y mágico.

Garret dice: Todo lo que tiene la interfaz es todo lo que el usuario puede hacer. Todo lo que ve es todo lo que hay.

Yo mejor diría que todo aquello que entra por los sentidos es todo lo que el usuario puede interpretar que puede hacer.

Y más abajo de esto no tiene porque conocer nada, pues estaríamos alejándonos de la humanización del producto.

Digging Beyond User Preferences – Eric Fain

Fain habla de lo importante y necesario que es la segmentación de audiencias. Analizar nuestro target, el público objetivo de nuestro servicio y conocer información acerca de ellos: emociones, temores, preferencias. De tal forma que con toda esta información podamos ofrecer las mejores soluciones posibles.

Plantea 6 reglas para investigar las preferencias que tiene el target destinatario:

1. Entender al usuario.
2. Preguntas abiertas, que no paralicen la motivación de la entrevista.
3. No al uso de tecnicismos.
4. Indagar, intentar seguir la conversación…
5. No se trata tanto de las herramientas en si, sino de como las usan.
6. Comprender cual es la experiencia del usuario tras el uso de la herramienta.

A continuación habla acerca de los modelos mentales.

También habla de la importancia de extraer la información que subyace detrás de las palabras del usuario.

Finalmente nos muestra gráficos de modelos mentales en los que ha trabajado. Uno de ellos ha sido trabajado por una compañera durante 6 meses… (que “locura”!).

Esta ponencia no me ha gustado tanto como la anterior

WAI-ARIA Just Do It

Steve Faulkner

He preferido este “track2″ al 1 (que trataba sobre CMS).

Steve Faulkner comienza explicándonos lo que significa WAI (Iniciativa de accesibilidad web) comandada por el consorcio W3C. A continuación nos cuenta lo que significa ARIA, actualmente en fase de desarrollo pero que le falta poco para convertirse en una recomendación impulsado nuevamente por el consorcio W3C.

Steve remarca la importancia de todos estos movimientos para impulsar una web realmente accesible.

Expone como un botón puede ser entendido como tal a través de un simple atributo:

role = button

A continuación nos explica como muchas de las cuestiones desarrolladas con ajax no son realmente accesibles y pueden solucionarse con la sencilla inclusión de un atributo ARIA.

Nos cuenta que actualmente soportan ARIA: Firefox, IE, Opera, Yahoo, Google, Adobe, IBM, SUN, etc.

Becky Gibson

Becky comienza dando un repaso a WAI-ARIA.

A continuación centra su ponencia totalmente en DOJO.

Explica a través de un WebMail propio e improvisado algunos de los elementos de interfaz que ofrece DOJO y que resultan totalmente accesibles.

Becky tiene problemas con su ponencia (temas del directo) le están fallando los ejemplos

Bueno, me ha parecido más instructiva la ponencia de Steve Faulkner.

Tu vida laboral (mesa redonda)

Moderador: Jesús Gorriti. Participantes: José Florido, Ariel Guersenzvaig, Humberto Matas, Manuel Muñoz y Daniel Torres Burriel.

Muchas ganas tenia de ver a Torres Burriel, le he seguido desde “creo sus comienzos” con el blog. Posteriormente (casualidades de la vida) me ha tocado de consultor en el graduado multimedia de la UOC. Pero a pesar de leer tanto su blog, de mandarle mis prácticas de la UOC, etc. Nunca le había visto/oído. Así que fue todo un placer

El contenido de esta sesión lo cuenta muy detalladamente Ricardo Gil:
FW’08: Tu vida laboral (mesa redonda).

Me ha parecido interesante como hablaron de “lo normal” que es fracasar en uno (o muchos) proyectos y que de ello siempre se puede aprender.

En general me ha gustado la mesa redonda, no obstante en algunos momentos he notado un tono demasiado pesimista.

Otros momentos

Algunas risas con Noel Martin, con el que estuve durante todo el congreso.

El tema de la comida me ha parecido bastante ameno, el pinchoteo estuvo muy bien

Fue un placer intercambiar algunas palabras con Yusef Hassan al que había conocido personalmente dos días atrás en un curso que ofrecio en Oviedo acerca de la arquitectura de la información para la web.

Una curiosidad fue hablar con Ariel Guersenzvaig sin saber que justo tras esa charla iba a ser uno de los ponentes de la mesa redonda jejeje. Como se nota que había mirado por alto la documentación ofrecida en el evento.

Conclusión

Me ha gustado en general, porque me apasiona todo esto pero claramente el evento ha ido a peor de una forma NOTABLE.

1. Mismo precio que el año anterior (creo recordar).
2. Muchísimas menos ponencias.
3. Un día menos dedicado a las charlas.

Comprendo que es difícil mantener un evento de esta magnitud en Asturias. Pero la gente en pasadas ediciones se ha visto como ha respondido muy favorablemente.

En esta edición sin embargo creo que los asistentes se han reducido muchísimo. Eso fue mi impresión y me parece un castigo totalmente lógico.

Sin duda me quedo con el grato recuerdo de Fundamentos web 2007.

Otros resúmenes del congreso

• Fundamentos web 2008: Eric Fain
• FW’08: Punto y final
• Fotos de espinr > Fundamentos Web 2008 (Set)

Algunas incompatibilidades

1.- En vez de copy() es preferible usar la función move_uploaded_file(), o mejor aún las funciones FTP como ftp_put() lo cual garantiza una transferencia más rápida y segura.

2.- Las variables del tipo $HTTP_* deben ser sustituidas por $_POST, $_GET, etc. A estas alturas es obvio pero hace años no lo era tanto. Por ejemplo: $HTTP_POST_FILES en php5 debe ser $_FILES.

3.- Debemos prestar mucha atención a los permisos otorgados a los directorios y al safe_mode.

4.- Las matrices deben siempre accederse por su índice $matriz['id'] nunca $matriz_id.

5.- En php4 era posible construir matrices en los campos html:

<input name="foto[]" type="image" />

Evitando esto potenciamos los estándares:

<input name="foto_x" type="image" />

6.- Las variables enviadas por formularios deben ser accedidas a través de $_GET, $_POST, así como debemos usar las variables superglobales en todo momento, además de tener en cuenta el register_globals. Si tenemos toda nuestra aplicación programada como en php4 o php3 y haciendo uso de las variables directamente (no las superglobales), podemos optar por el uso de la función extract(). Ejemplo:

extract($_POST,EXTR_SKIP);

A partir de ese momento ya podemos usar $mi_var_post como se venía haciendo.

7.- En php5 debemos definir la zona horaria con date_default_timezone_set().

Estos son solo algunas cuestiones resumidas, y este es un post abierto, así que si tienes alguna incompatibilidad o puntualización al respecto, sera un placer que lo expongas aquí.

Más información

1. Migración desde PHP 4 a PHP 5 (manual oficial)
   
2. Cómo migrar tus aplicaciones de PHP4 a PHP5
3. PHP4 y PHP5: ¿Cuál elegir? ¿Migrar o no Migrar? El advenimiento de PHP6

1.- Copia de seguridad

Lo primero es hacer una copia de seguridad completa, que contenga los ficheros y la base de datos de nuestro blog.

• Copiar todos los ficheros contenidos en el sitio web. Esto lo podemos hacer con nuestro gestor de FTP favorito y descargando el directorio raíz de la web.
• Copiar la estructura y contenido de la base de datos. Una buena forma puede ser exportarla a un fichero SQL con un gestor local (lo prefiero) o de web (como phpMyAdmin).

2.- Restaurar datos en el nuevo dominio

A continuación acudimos a nuestro nuevo dominio y subimos los ficheros previamente copiados y restauramos la base de datos importando el fichero SQL.

3.- Actualizar la base de datos

En este momento tenemos todos los datos de nuestro blog en el nuevo dominio, pero nos queda lo más importante, actualizar la información almacenada en la base de datos para que wordpress tenga en cuenta correctamente el cambio.

La instrucción SQL que debemos usar es:

UPDATE TABLE SET FIELD = REPLACE(FIELD, 'string1', 'string2');

La explicación es sencilla, actualizamos la tabla remplazando string1 por string2 en el campo especificado.

Esta instrucción debemos ejecutarla en varios lugares adaptándonos a cada caso:

UPDATE wp_options SET option_value = REPLACE(option_value, 'aureawebdesign.com', 'aurea.es');

UPDATE wp_posts SET post_content = REPLACE(post_content, 'aureawebdesign.com', 'aurea.es');

UPDATE wp_posts SET guid = REPLACE(guid, 'aureawebdesign.com', 'aurea.es');

(*) Nota: El campo “meta_value” de la tabla wp_postmeta no es necesario ser actualizado, de hecho si se actualiza se pueden dar irregularidades en los thumb de las imágenes.

Es muy fácil incrustar (embed) vídeos en nuestro blog de diversas fuentes:

• YouTube
• Google Video
• Metacafe
• etc.

¿Porqué el estándar es un problema?

Embed, flash y object se pelean entre ellos y no alcanzo a comprender por qué a estas alturas de la historia todavía muchos sitios web (y los más populares) nos dan unos códigos para incrustar el vídeo que no siguen los estándares, usando etiquetas prehistóricas como <embed> el invento de netscape y no aceptada por la W3C.

Entiendo que estos servicios tienen miles de usuarios y que buscan una compatibilidad absoluta, pero ¿no creen que ya es momento de mirar hacia adelante? incluso existen desde hace mucho técnicas que mantienen la compatibilidad y en cierto modo mejoran el estandarizado del marcado.

• Flash Satay (2002)
• Código valido “xhtml object video” (2004)
• Valid flash video and audio embed object

Entonces, ¿cuál es la razón para que estos sitios web con mega-inversiones y fuertes sumas en facturación, sigan atados al pasado?. Siento que algo se me está escapando, pero sigo sin saber que hay detrás de esto: razones corporativas, técnicas, financieras, ¿el qué?.

Estos servicios tan grandes deberían predicar con el ejemplo porque con ellos se está inundando la red de códigos no estandarizados.

El lema de la W3C es guiar a la red al futuro…, pero exagerando un poco todo esto ¿no creen que la red está siendo guiada ya desde hace tiempo por unos 49 sitios web (+ 1 google)?

De acuerdo que algunas tecnologías propietarias son tomadas como estándares de facto y más fáciles de implementar que las especificaciones estándares, y cierto es que no todas las recomendaciones del W3C son “perfectas”. Pero creo que hay que tener en cuenta que detrás de una especificación hay muchos: estudios, intereses, empresas, usuarios, colaboraciones, grupos, etc.

Conclusión

Creo que realmente merece la pena seguir las especificaciones, puesto que nos brinda la posibilidad de mirar al futuro de una forma inteligente.

Soluciones en la actualidad

Mientras que estos populares servicios sigan así, nosotros tenemos el “deber” de intentar solucionarlo, bien con las técnicas ya anteriormente comentadas o si tenemos un blog mediante algún plugin.

En el caso de wordpress contamos con la ayuda de algunos plugins:

• pb-embedFlash
• Viper’s Video Quicktags
• Video Embedder
• XHTML Video Embed
• Embedded Video with Link

Personalmente, me quedo con pb-embedFlash.

Otros enlaces

Javier Aroche nos cuenta cuando la usabilidad y los estándares web se contradicen (en google reader).

Concluido el plugin voy a compartir lo aprendido pero en su versión resumida. Intentare explicar como crear un plugin, hacer uso de shortcode e integrar una página de opciones en el panel de administración de wordpress, aunque todo ello de forma sencilla y bastante esquematizada, a partir de ahí nuestra imaginación hará el resto.

Antes de comenzar, demos una vuelta por la wikipedia para conocer ¿que es un plugin? y recordar como son gestionados en wordpress.

1.- Crear el fichero contenedor del plugin (para wordpress)

Por ejemplo: “miplugin.php”, su contenido debe ajustarse al formato siguiente:

/*
Plugin Name: nombre de nuestro plugin
Plugin URI: web del plugin (descarga, soporte, etc.)
Description: descirpción detallada del plugin
Author: nombre y apellidos del autor
Version: 1.0
Author URI: web del autor
*/
 
/*
Licencia
*/

2.- Vamos a programar!

Las siguientes lineas ya deben contener el código de nuestro plugin.

Empiezo por escribir el esqueleto principal del programa, la clase con algunas variables y funciones.

class miplugin {
	var $opt;
	var $table_name;
 
	// inicializamos plugin
	function miplugin() { }
	// instalar cosas del plugin
	function install() { }
	// desinstalar
	function uninstall() { }
	// página de configuración
	function config_page() { }
	//opciones de configuración
	function options_plugin() { }
	//ejecuta resultado
	function init() { }
}
 
$mp = new miplugin();

Como se observa, el plugin se encuentra bajo POO pero por razones de compatibilidad no usa las características de PHP5, es por ello que se hace uso de “var” para declarar las variables y “__construct” ha sido remplazado por el nombre del plugin en la función de inicialización.

La línea 19 es la encargada de crear un objeto “mp” de la clase “miplugin”. A partir de aquí empieza la faena

3.- Inicializamos el plugin

function miplugin() {
	global $wpdb;
 
	$this->table_name = $wpdb->prefix.'miplugin';
 
	register_activation_hook(__FILE__, array(&$this, 'install')); //gancho para instalar
	register_deactivation_hook(__FILE__, array(&$this, 'uninstall')); //gancho para desinstalar
 
	add_action('admin_menu', array(&$this, 'config_page'));
	add_shortcode('mundo', array(&$this, 'init'));
}

Esta función es ejecutada automáticamente cuando se crea un objeto de la clase, puesto que tiene el mismo nombre.

En la línea 2 tomamos el objeto $wpdb; que es el encargado de llevar la gestión de bases de datos para wordpress. Siempre que queramos interactuar con la base de datos de wordpress será necesaria esta llamada.

En la línea siguiente almacenamos en “$this->table_name” el nombre de la tabla para nuestro plugin.

Con register_activation_hook y register_deactivation_hook podemos indicar que funciones deben ejecutarse “installa/uninstall” cuando el plugin sea activado/desactivado desde el panel de administración de wordpress.

La línea 6 se encarga de implementar la función “config_page” que debe llamarse para que podamos tener un menú de opciones del plugin integrado en wordpress (solapa opciones). Para ello debe hacerse uso de la función de wordpress add_action.

La línea 7 hace que podamos usar las shortcodes (códigos rápidos) como llamadas al plugin. Esto hace que por ejemplo cuando se escribe “[mundo]” en el contenido de un post, el plugin llame a la función “init” puesto que ha sido implementado con add_shortcode.

4.- Instalar/desinstalar

Hacemos un alto en el proceso anterior para comentar las funciones install/uninstall.

function install() {
	global $wpdb;
 
	$sql = 'CREATE TABLE `'.$this->table_name.'` (
		`frase` varchar(100) NOT NULL default ""
	) ENGINE=MyISAM DEFAULT CHARSET=utf8';
 
	$wpdb->query($sql);
	$wpdb->query('INSERT INTO `'.$this->table_name.'` SET frase = "hola mundo!!!"');
}

Aquí va la creación de la tabla para el plugin en la base de datos de wordpress. A continuación inserté un registro donde uno de los campos contiene el valor “hola mundo!!!”.

function uninstall() {
	global $wpdb;
 
	$sql = 'drop table `'.$this->table_name.'`';
	$wpdb->query($sql);
}

Cuando desinstalamos el plugin se ejecuta la función “uninstall” y con ella procesamos el borrado de la tabla del plugin.

5.- Página de configuración del plugin

function config_page() {
	add_options_page('mi plugin', 'mi plugin', 8, 'miplugin_options', array(&$this, 'options_plugin'));
}
 
function options_plugin() {
	global $wpdb;
 
	if (isset($_POST['update'])) {
		//aquí podemos poner el sql update, basado en los datos de un formulario
	}
 
	//aquí va el formulario para las opciones de configuración
}

La ya mencionada función ” add_action(‘admin_menu’, array(&$this, ‘config_page’));” ejecutada en la inicialización del plugin, es la encargada de indicar que debe procesarse la función “config_page” que a su vez pide las opciones que debe contener el plugin a “options_plugin”.

6.- Resultado del shortcode

function init($atts) {
	global $wpdb;
 
	// options (config)
	$this->opt = $wpdb->get_row('SELECT * FROM '.$this->table_name.' LIMIT 1', ARRAY_A);
 
	// atributes (user)
	extract(shortcode_atts(array('frase' => $this->opt['frase']), $atts));
	include('fichero.php');
}

Volviendo al proceso del programa, cuando se escribe en un post el shortcode “[mundo]” se ejecuta la función “init” y se le pasa como parametro el shortcode con sus atributos “$atts“.

[mundo] //esto es un shortcode
[mundo frase="hola mundo 2!!!"] //esto es un shortcode con un atributo

Esta función “init($atts)” se encarga de hacer una consulta sql “select” a la tabla del plugin y obtener la frase “hola mundo!!!” que tenemos almacenada.

A continuación la función “extract(shortcode_atts(array(‘frase’ => $this->opt['frase']), $atts));”, es crucial puesto que se encarga de “repartir” los pares de valores tomados de los atributos.

Es por esto que podamos contener en la variable $frase = “hola mundo!!!” (en caso de que se llamará al shortcode sin atributo) o “hola mundo 2!!!” si se ha llamado con el atributo.

Por último y para separar un poco el html del php, pongo un “include” que llama a un fichero.php (debe estar en el mismo directorio que el plugin) .

//fichero.php

El fichero muestra la frase.

Consejos

• Creo que es importante emplear cierto tiempo en buscar nombres originales para nuestras funciones y variables (sobre todo si se programe de forma estructurada y no orientada a objetos), puesto que debemos tener en cuenta la compatibilidad con otros plugins y el propio código de wordpress.
• Se puede aprender un montón de cosas viendo el código ordenado de algunos plugins

Recursos

• Docs de wordpress
• Como crear un plugin para wordpress
• Vamos a crear un plugin