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.
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/
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!
Gracias por los tips. Me han servido de mucho
.
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!