Ir al contenido


WordPress en varios idiomas (II)

He decidido que voy a usar una etiqueta para indicar al plugin que partes del post tiene que mostrar para cada idioma, esta etiqueta tendra el siguiente formato:

[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/

Publicado en programacion, wordpress.

Etiquetado con , , , , .


4 Respuestas

Sigue la conversación, suscríbete al RSS feed de los comentarios de esta entrada.

  1. Chefwww dijo

    Excelente idea. A mi me iría bien este plugin para hacer las entradas en castellano y catalán. A ver que tal sale.

    Un saludo!

  2. RaveN dijo

    Gracias por los tips. Me han servido de mucho :) .

  3. loixiyo dijo

    Estoy intentando utilizar este plugin, y usarlo como modelo para entender cómo crear otro que llevo en mente.

    Subo los archivos tal cual explicas, pero en el editor no aparece nada de nada. ¿Cómo se tienen que llamar los archivos? ¿Hay que hacerles algo (por ejemplo comprimir el js)?

    Un saludo, y gracias por el post!

Siguiendo la Conversación

  1. WordPress en varios idiomas (I) | zxblog.laullon.com enlazó a esta entrada el 1 Mayo 2008

    [...] en “Añadir botones en el editor de WordPress (TinyMCE)“ Compartir: These icons link to social bookmarking sites where readers can share and [...]



Un poco de HTML está bien

o responde a esta entrada a través de una referencia.



ZXBLog.laullon.com is Digg proof thanks to caching by WP Super Cache!