Hace poco me surgió una necesidad, en mi afán de ahorrar clics y rentabilizar mi tiempo a la hora de escribir entradas para el blog, y era buscar el modo de añadir un botón rápido al editor visual clásico, o TinyMCE de WordPress, para envolver texto entre <code> y </code>, como la quicktag que tiene por defecto el editor de código, para añadir el formato de código a partes de un párrafo, como acabo de hacer en este mismo texto en <code> y </code>.

Índice de contenidos

«Mi» problema

Esto de usar el formato de code dentro de frases es algo que uso mucho, y cada vez que tengo que añadir este formato tengo que dejar de escribir, pasar a la pestaña de código del editor clásico, seleccionar el texto y hacer clic en el botón de code. ¡Un latazo!

«Mi» solución

Así que me dije «¡Anda, si hay un montón de plugins que añaden botones al editor visual clásico, voy a mirar cómo lo hacen y añadir uno por mi cuenta!», y tras un par de días haciendo experimentos y rompiendo una web de pruebas, aquí tienes un ejemplo de botón personalizado al editor clásico visual TinyMCE de WordPress:

/* Botón de código inline en editor visual clásico TinyMCE */
// Añado el nuevo botón al editor TinyMCE
add_filter('mce_buttons', 'register_code_button');
function register_code_button($buttons) {
array_push($buttons, 'code_button');
return $buttons;
}

// Registro el código como plugin de TinyMCE
add_filter('mce_external_plugins', 'add_code_button_plugin');
function add_code_button_plugin($plugin_array) {
// Uso un id único para el plugin
$plugin_array['code_button'] = admin_url('admin-ajax.php?action=tinymce_code_button_js');
return $plugin_array;
}

// Genero el JavaScript dinámicamente para no tener que crear un fichero js
add_action('wp_ajax_tinymce_code_button_js', 'output_tinymce_code_button_js');
function output_tinymce_code_button_js() {
header('Content-Type: application/javascript');
echo "(function() {
tinymce.PluginManager.add('code_button', function(editor, url) {
editor.addButton('code_button', {
text: '<code>',
icon: false,
onclick: function() {
var selected_text = editor.selection.getContent();
if (selected_text) {
editor.selection.setContent('<code>' + selected_text + '</code>');
} else {
editor.selection.setContent('<code>Tu código aquí</code>');
}
}
});
// Añado u na atajo de teclado Ctrl+Mayús+C por vaguería pura y dura
editor.addShortcut('ctrl+shift+c', 'Envuelve el texto seleccionado en etiquetas de code', function() {
var selected_text = editor.selection.getContent();
if (selected_text) {
editor.selection.setContent('<code>' + selected_text + '</code>');
} else {
editor.selection.setContent('<code>Tu código aquí</code>');
}
});
});
})();";
exit;
}

¿Qué hace este código?

¡Gloria bendita!, al menos para mi…

Añade un botón nuevo con el texto <code> al final de los demás iconos por defecto de WordPress.
Si haces clic en el nuevo botón se añade al editor el textoTu código aquí, por supuesto envuelto en las etiquetas <code> y </code>.
Si seleccionas un texto en el editor y haces clic en el nuevo botón se le envuelve con las etiquetas <code> y </code>.
Para mayor comodidad (galbana pura y dura, y que soy muy de atajos) he añadido un atajo de teclado que hace lo mismo que el clic en el botón: Ctrl+Mayús+C, da igual si usas Windows, Linux o Mac (probé otras combinaciones pero interferían siempre con otros atajos o de WordPress, o del navegador, o del sistema operativo, vamos, un peñazo, pero esta funciona casi 100% sin interferir con nada)
Funciona sí o sí y siempre, da igual si lo añades en un plugin propio, plugin mu, plugin de snippets o archivo functions.php.

¿Qué requisitos tiene?

Solo es funcional, útil, si usas el editor clásico de WordPress, pues añade un botón a la pestaña visual de este editor. Si usas el editor de bloques tienes la misma funcionalidad incluida en la barra de formato, algo escondida, pero ahí está…

En serio ¿funciona?

¡QUE SÍÍÍÍÍ!, lo tengo activo aquí mismo en mi blog, en ayudawp.com y va de coña todo.

No se tú, yo estoy encantado, no veas la de tiempo que he querido hacer esto y nunca había encontrado el rato para ponerme a ello.

Espero que también lo disfrutes

¿Se puede cambiar para añadir otro botón distinto?

Claro, cambiando la función pero sobre todo el JavaScript. Un ejemplo sencillito, para añadir un botón que inserte un shortcode de tu creación sería así:

/* Añadir botón a tinymce visual para insertar shortcode */
// Añadimos el botón al editor TinyMCE
add_filter('mce_buttons', 'register_shortcode_button');
function register_shortcode_button($buttons) {
array_push($buttons, 'shortcode_button');
return $buttons;
}

// Registramos el código como plugin de TinyMCE
add_filter('mce_external_plugins', 'add_shortcode_button_plugin');
function add_shortcode_button_plugin($plugin_array) {
// Usamos un id único para el plugin
$plugin_array['shortcode_button'] = admin_url('admin-ajax.php?action=tinymce_shortcode_button_js');
return $plugin_array;
}

// Generamos el JavaScript
add_action('wp_ajax_tinymce_shortcode_button_js', 'output_tinymce_shortcode_button_js');
function output_tinymce_shortcode_button_js() {
header('Content-Type: application/javascript');
echo "(function() {
tinymce.PluginManager.add('shortcode_button', function(editor, url) {
editor.addButton('shortcode_button', {
text: 'Shortcode',
icon: false,
onclick: function() {
var selected_text = editor.selection.getContent();
if (selected_text) {
editor.selection.setContent('[mishortcode]' + selected_text + '[/mishortcode]');
} else {
editor.selection.setContent('[mishortcode]Tu contenido aquí[/mishortcode]');
}
}
});
// Atajo de teclado Ctrl+Mayús+S para shortcode
editor.addShortcut('ctrl+shift+s', 'Insertar shortcode mishortcode', function() {
var selected_text = editor.selection.getContent();
if (selected_text) {
editor.selection.setContent('[mishortcode]' + selected_text + '[/mishortcode]');
} else {
editor.selection.setContent('[mishortcode]Tu contenido aquí[/mishortcode]');
}
});
});
})();";
exit;
}

Si quieres algo más concreto, para alguna funcionalidad muy específica que tengas, puedes contactarme y me pongo a ello 😉