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/

Compartir:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • BarraPunto
  • StumbleUpon
  • TwitThis
  • e-mail