Crear un botón en el editor de WordPress

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.

wysiwyg

¿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.

// Iniciamos el proceso de registro del botón. Ponemos un ID aleatorio para no tener conflictos con otros plugins.
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í:

jQuery(document).ready(function($) {

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.

Crear un botón en el editor de WordPress

WordPress | 2 comentarios

2 comentarios

  • erknrio
    Reply

    He encontrado un fallo en tu código. A la hora de registrar el plugin pusiste un nombre diferente en el código del que sugieres:
    Cambiando “js/shortcode_tmp.js” por “/js/shortcode.js” todo debería funcionar correctamente.

    El resto de cosas se bien bastante bien cuando lo prueban directamente en el editor. Luego es ir ajustando según necesidades :).

    Saludos y gracias por la info, la traducción que hiciste del artículo original en inglés está muy bien.

    • admin
      Reply

      Gracias por tu comentario! He corregido el error que comentas sobre el código.
      Espero que te sigan gustando los nuevos artículos que iré publicando, y gracias de nuevo por colaborar.


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>