Filtrando el contenido del post

Ya en el capitulo anterior hemos configurado el filtro “the_content” por lo que solo tenemos que añadir el código necesario para aplicar al texto una expresión regular que buscará las etiquetas que definen los idiomas y que serán pasadas a la función que realiza los cambios, para todo esto voy a usar la función “preg_replace_callback“.

$text=preg_replace_callback("|\[lang='(.*)'\](.*)\[/lang\]|","replace",$text);

La función “replace” es invocada una vez por cada coincidencia, recibiendo como parámetro cada una de las coincidencias y los grupos detectados por el expresión regular, y tiene que devolver el texto por el que se reemplazaran la coincidencia. Por lo tanto, esta función es muy sencilla, si el idioma (grupo 1) es igual al idioma seleccionado devuelve el texto (grupo 2) y en caso contrario devuelve “vacío”. Aquí el código de la función:

function replace($matchs){
	global $lang;
	$res="";
	if($matchs[1]==$lang) $res=$matchs[2];
	return $res;
}

Y listo… ya esta… ya funciona… lo podéis ver funcionando en la página de prueba junto con el código fuente completo.

[lang='es']texto que esta en español[/lang]

[lang='en']texto que esta en ingles[/lang]

Añadir botones en el editor de WordPress (TinyMCE)

Lo siguiente que voy a hacer es añadir un plugin al TinyMCE que trae WordPress para añadir las etiquetas necesarias para saber en que idioma están las diferentes partes del post.

Lo primero que hay que hacer es indicarle a WordPres que queremos añadir unos botones en la barra de herramientas del editor, para ello usamos el filtro “mce_buttons“, este filtro envía a la función un array al que hay que añadir el nombre de los botones que definiremos posteriormente en el plugin del editor

add_filter('mce_buttons', 'ML_mce_buttons');

function ML_mce_buttons($buttons) {
   array_push($buttons, "separator", "ML_en_bt", "ML_es_bt");
   return $buttons;
}

Lo siguiente es indicar a WordPress cual es fichero de JavaScript que define el plugin del editor, para ello usaremos el filtro “mce_external_plugins“, este filtro nos envía un mapa al que tenemos que añadir el nombre del plugin del editor y el fichero JavaScript en el que esta defenido.

add_filter("mce_external_plugins", "ML_mce_external_plugins");

function ML_mce_external_plugins($plugin_array) {
   $plugin_array['ML'] = '/wp-content/plugins/ML/ml.js';
   return $plugin_array;
}

Aquí os pongo el código completo del del fichero que define el plugin del editor, y a continuación lo explico línea a línea

(function() {
  tinymce.create('tinymce.plugins.ML', {
    init : function(ed, url) {
      ed.addCommand('ML_apply', function(ui, value) {
        ed.execCommand('mceReplaceContent', 0, "[lang='"+value+"']{$selection}[/lang]");
      });
      ed.addButton('ML_en_bt', {
        title : 'Ingles',
        image : url + '/flags/gb.png',
        cmd : 'ML_apply',
        value:'en'
      });
      ed.addButton('ML_es_bt', {
        title : 'Espa–ol',
        image : url + '/flags/es.png',
        cmd : 'ML_apply',
        value:'es'
      });
    },
    getInfo : function() {
      return {
        longname : 'ML Plugin',
        author : 'laullon',
        authorurl : 'http://wordpress.org',
        infourl : 'http://wordpress.org',
        version : '0'
      };
    }
  });
  tinymce.PluginManager.add('ML', tinymce.plugins.ML);
})();

• Línea 2. Creamos el plugin.
• Líneas 3-19. Funcion “init”, en esta función definimos todo lo necesario para el plugin.
  • Líneas 4-6. Añadimos la función que se ejecutara cuando se pulse en unos de los botones.
  • Líneas 7-12 y 13-18. Creamos los dos botones con los nombres definidos en el plugin de WordPress.
• Línea 30. Añadimos el plugin al editor.

Aquí tenéis el resultado.

Mas info acerca los plugins de TinyMCE aquí: http://wiki.moxiecode.com/index.php/TinyMCE:API

Continua en: http://zxblog.laullon.com/2008/05/wordpress-en-varios-idiomas-iii/

Para empezar tenemos que hacer es crear el fichero que contendrá todo el código del plugin, para ello lo mejor es seguir la documentación propia de WordPress.

Lo primero que voy a definir y programar es como indicarle al plugin que lenguaje tiene que usar a la hora de mostrar el post o la página.
En un primer momento pensé en indicarlo re-escribiendo las URL, por ejemplo, si la URL original era:

http://example.com/2008/08/titulo

para indicar que la queríamos en Ingles debería ser:

http://example.com/en/2008/08/titulo

Pero después de hacer algunas pruebas he descartado esta opción por que complicaba el desarrollo con re-direcciones, o por lo menos no he encontrado una forma sencilla de hacerlo.

Por lo tanto voy a usar un parámetro en la URL para indicar el lenguaje, por lo que la URL quedaría de esta forma:

http://example.com/2008/08/titulo?lang=en

Para usar este método lo primero que hay que hacer es indicarle a WordPress que tiene que recoger ese parámetro de la URL, para esto, usaremos un filtro llamado “query_vars“.

add_filter('query_vars', 'ML_query_vars');

function ML_query_vars($qvars){
	$qvars[] = 'lang';
	return($qvars);
}

Cuando WordPress invoca la función “ML_query_vars” asignada a este filtro nos pasa un Array con los parametros/variables que va extraer de la petición, lo único que tenemos que hacer es añadir la cadena “lang” a este array y devolver este array como resultado de la función.

Una vez hecho esto, solo tenemos acceder al objeto “wp_query” para obtener el valor de la variable “lang” cuando se necesite, por ejemplo, cuando se filtra el contenido del post.

add_filter('the_content', 'filtro');

function filtro($text) {
	global $current_user, $wp_query;
	$lang= $wp_query->query_vars['lang'];
        return($text);
}

Continua en “Añadir botones en el editor de WordPress (TinyMCE)“

Desde que se lanzo WordPress 2.5 parece que a la mayoría de los bloggers no les gusta la parte de administración. Gracias a esto están apareciendo numerosos plugin para cambiarlo.

A mi no es que me disguste, pero he decidido probar algunos de ellos, y he decidido quedarme con el “Leopard Admin” qe acaba de lanzar Teddy Hwang.

Este plugin le da un aspecto similar, como su nombre indica, a un Mac OS X Leopard, facilitando la navegación, que era lo que menos me gustaba.

Link: http://www.teddyhwang.com/resources/leopardadmin/

Una de los tareas que mas me han hecho sufrido durante el desarrollo de aplicaciones web es hacer debug de la aplicación en el lado del cliente, es decir, en el navegador. En aplicaciones sencillas suele valer con algún que otro alert() para saber que hace tu código en cada momento, pero cuando la cosa se complica con algo de Ajax, jQuery, Dojo y demas, la cosa se complica bastante.

Por suerte, he encontrado un plugin para FireFox que ofrece todo lo que necesito. El plugin se llama FireBug aunque esta en la versión 1.0 (1.1 en beta) es bastante completo y estable. Os resumo las principales carateriticas:

1. Examinar y editar HTML y CSS viendo los resultados al momento.
2. Monitorizar los tiempos de carga de todos los elemento de la página.
3. Explorar y modificar el árbol DOM.
4. Debug, profile y Log de JavaScript. (para mi lo mas interesante)

Ademas, aunque es un plugin para FireFox, proporcina un método para poder usarlo desde otros navegadores, como el Opera o el Safari.

Link: FireBug

Para conseguir que las piezas de código fuentes aparezcan bien coloreadas voy a usar un plugin para WordPress llamado WP-Syntax

Algunos ejemplos de como queda:

HTML

<div class="wp_syntax"><div class="code"><pre class="php"><span style="color: #ff0000;">'pre'</span> => <span style="color: #000066;">array</span><span style="color: #66cc66;">(</span>
      <span style="color: #ff0000;">'width'</span> => <span style="color: #000066;">array</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>,
      <span style="color: #ff0000;">'lang'</span> => <span style="color: #000066;">array</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>,
      <span style="color: #ff0000;">'line'</span> => <span style="color: #000066;">array</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>
<span style="color: #66cc66;">)</span>,</pre></div></div>

PHP

< ? print(Date("m/j/y")); ?>

JAVA

/* hola */
public class pp extends pp{
     System.out.println("hola"+p+".");
}

Durante las pruebas que he realizado me he encontrado algún que otro problemilla con los caracteres especiales, y con el editor que trae el WordPress 2.5. Para hacer mas cómodo el uso de este plugin he realizado las siguientes modificaciones:

1. He modificado el fichero “kses.php” para WP reconozca las propiedades “lang” y “line” necesarias para que el plugin funcione.

   'pre' => array(
         'width' => array(),
         'lang' => array(),
         'line' => array()
   ),

   via: http://realespace.com/2008/03/08/wordpress-tip-stop-wordpress-from-stripping-markup-in-your-posts/

2. He modificado el fichero “wp-syntax.php” (pugin) para que descodifique los caracteres especiales de HTML antes de aplicar los colores.

   $geshi = new GeSHi(htmlspecialchars_decode($code), $language);

   via: http://blog.felho.hu/escaping-problem-with-wp-syntax-wordpress-plugin.html

Acabo de instalar un plugin y un tema en mi WordPress para facilitar la lectura de este blog desde un iPhone o un iPod Touch.

El plugin es muy sencillo de instalar y configurar, basta con seguir las instrucciones de la web, y en cuestion de segundos esta en marcha.

De todas formas, he tenido que modificar un poco el plugin para que tambien funcione desde Aspen, el simulador de iPhone que viene incluido en el iPhone SDK.

La modificación consiste en añadir la cadena “Aspen” en el array “$useragents” del fichero “iwphone.php” lineas 41 y 42, tiene que quedar algo asi:

$useragents = array (“iPhone”,”iPod”,”Aspen”);

Url del plugin: http://iwphone.contentrobot.com/