Skip to content

May 1, 2008

4

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/

4 Comments Post a comment
  1. May 3 2008

    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. Jul 14 2008

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

  3. May 30 2009

    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!

Trackbacks & Pingbacks

  1. WordPress en varios idiomas (I) | zxblog.laullon.com

Share your thoughts, post a comment.

(required)
(required)

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

Creative Commons License
Esta obra está bajo una licencia de Creative Commons.