WordPress es una herramienta muy potente para la edición de contenidos. No solo para blogs, sino para casi cualquier tipo de página Web.
Una de las ventajas que tiene para editar texto es la integración de un panel para personalizar los estilos. Estamos hablando del famoso editor TinyMCE. Aunque el plugin puede usarse fuera de WordPress, también lo tenemos integrado en el framework. Gracias a este plugin, podemos poner negritas, cambiar alineaciones, etc.
¿Y si queremos programar nosotros mismos un botón? Esto nos puede servir para incluir una etiqueta HTML o un shortcode, sin necesidad de usar el visor de código, lo que queda más transparente al usuario.
Para añadirlo, necesitamos seguir estos tres pasos:
1. Añadir el código al archivo de funciones, functions.php de nuestro template.
add_action('init', 'wpse72394_shortcode_button_init');
function wpse72394_shortcode_button_init() {
//Si el usuario no carga el plugin TinyMCE, abortamos la función
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
return;
//Añadimos la llamada al plugin tinymce
add_filter("mce_external_plugins", "wpse72394_register_tinymce_plugin");
// Añadimos la respuesta para añadir nuestro botón a la barra del TinyMCE
add_filter('mce_buttons', 'wpse72394_add_tinymce_button');
}
//Esta llamada registra el plugin. Crearemos un archivo Javascript dentro de nuestra carpeta del tema.
function wpse72394_register_tinymce_plugin($plugin_array) {
$plugin_array['wpse72394_button'] = get_bloginfo('template_url').'/js/shortcode.js';
return $plugin_array;
}
//Esta llamada añadirá el botón a la barra
function wpse72394_add_tinymce_button($buttons) {
//Añadimos el ID del botón al array
$buttons[] = "wpse72394_button";
return $buttons;
}
Ahora necesitamos crear el plugin que active y desactive el botón. Para ello crearemos un archivo javascript. En este ejemplo, lo llamaremos shortcode.js. Lo podemos guardar dentro de una carpeta JS dentro de la raíz de nuestro template, por ejemplo. Sería algo así:
tinymce.create('tinymce.plugins.wpse72394_plugin', {
init : function(ed, url) {
// Registramos el comando de click sobre el botón
ed.addCommand('wpse72394_insert_shortcode', function() {
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//Si hay un texto seleccionado al pulsar el botón
//el código lo rodeará.
content = '[shortcode title=""]'+selected+'[/collapse]';
}else{
content = '[shortcode]';
}
tinymce.execCommand('mceInsertContent', false, content);
});
// Registramos el botón, y la función del click. También especificaremos el icono del botón
ed.addButton('wpse72394_button', {title : 'Insert shortcode', cmd : 'wpse72394_insert_shortcode', image : url+'/../images/icono.png' });
},
});
// Registramos nuestro plugin para TinyMCE
// El primer parámetro es el ID del botón
// El segundo debe ser la función
tinymce.PluginManager.add('wpse72394_button', tinymce.plugins.wpse72394_plugin);
});
Ya tenéis disponible el artículo sobre los shortcodes.
