Botón personalizado en el editor de WordPress

El editor visual de WordPress es bastante potente, te permite escribir las entradas de forma sencilla y sin conocimientos de html. Además puedes ampliar sus capacidades con el plugin TinyMCE Advanced.

Pero siempre se puede hacer algo más, el tutorial de hoy te ayudará a crear tus botones personalizados en el editor visual.

Ejemplo con el shortcode “compartir en Twitter”

Como en otras entradas voy a poner un ejemplo para seguir el tutorial. Esta vez quiero un botón en el editor visual que cree un enlace “Compartir en Twitter” en la caja de edición:

Front End Sharetwitter Visual Editor

En realidad no crea un enlace, sino un shortcode que a su vez genera el enlace que necesito.

Plugin con el shortcode “compartir en Twitter”

Este tutorial se puede dividir en dos partes:

  • Crear un shortcode “Compartir en Twitter”
  • Crear un boton que añade el shortode “Compartir en Twitter”

La primera parte la puedes ver en el tutorial “Shortcodes de WordPress”. La segunda parte la tratamos en esta entrada.

Así que partimos del primer tutorial y creamos un plugin con dos ficheros:

  • El primer fichero es twittervisualeditor.php con el shortcode “Compartir en Twitter”:
<?php
/*
Plugin Name: Twittervisualeditor
Version: 1.0
Description: Add button 'Share on Twitter' on Visual Editor
Author: Pinto
Author URI: http://bitado.com
Plugin URI: http://bitado.com
Text Domain: twittervisualeditor
Domain Path: /languages
*/

/*
 *  Shortcode share on Twitter. [sct_sharetwitter]
 *  Attributes:
 * 
 *  - text. Default is empty
 *  - size. Default is small. Other value is big
 *
 *  Example: [sct_sharetwitter text="Compartir en Twitter" size="big"]
 */
function twittervisualeditor_sharetwitter( $atts, $content = null ) {
    $atts_sharetwitter = shortcode_atts( array(
        'text' => 'Compartir en Twitter',
        'size' => 'small',
    ), $atts );

    $link_twitter = 'http://twitter.com/intent/tweet?url=' . urlencode( get_permalink() ) . '&amp;text=' . urlencode( get_the_title() );

    $bigclass = '';
    if ( $atts_sharetwitter['size'] == 'big' )
        $bigclass = 'sct-twitter-big';

    $content = '<a class="sct-twitter ' . $bigclass . '" target="_blank" href="' . $link_twitter . '">' . $atts_sharetwitter['text'] . '</a>';

    return $content;
}
add_shortcode( 'sct_sharetwitter', 'twittervisualeditor_sharetwitter' );


/*
 *  Enqueue css, javascript, and fonts files needed
 */
function twittervisualeditor_css() {

    wp_enqueue_style( 'shortcodetwitter-style', plugins_url( '/twittervisualeditor.css', __FILE__ ) );
    wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'twittervisualeditor_css' );
  • El segundo fichero es twittervisualeditor.css con el estilo necesario para mostrar el enlace “Compartir en Twitter”:
.sct-twitter,
.sct-twitter:hover {
    text-decoration: none;
    color: #4099FF;
}

.sct-twitter:before {
    font-family: "dashicons";
    content: "301";
    font-size: 24px;
    padding-right: 6px;
}

.sct-twitter-big:before {
    font-size: 32px;    
}

Como indiqué antes, todo este código está explicado en detalle en el tutorial “Shortcodes de WordPress”

Botón en el editor de WordPress

Para crear un botón en el editor visual (o editor TinyMCE) son necesarios dos pasos:

  • Declarar el botón en TinyMCE.
  • Crear un fichero javascript con la acción que realiza el botón.

Paso1: Declarar el botón

La declaración necesita de dos filtros:

  • mce_buttons: añade el nuevo botón al editor.
  • mce_external_plugins: asocia el fichero javascript al nuevo botón.

Que a su vez deben ser usados en el hook de administración: admin_head.

Pero antes de usar estos filtros debo comprobar varias cosas:

  • Si el usuario tiene permisos para editar entradas y páginas
  • Si lo que voy a editar es una entrada o un página
  • Si está activo el editor visual.

Con todo esto, la declaración del botón queda así:

/*
 * Create a shortcode button for tinymce
 */
function twittervisualeditor_shortcode_button() {
    global $typenow;

    // check user permissions
    if ( current_user_can( 'edit_posts' ) && current_user_can( 'edit_pages' ) ) {

        // verify the post type
        if( in_array( $typenow, array( 'post', 'page' ) ) ) {

            // check if WYSIWYG is enabled
            if ( get_user_option( 'rich_editing' ) == 'true') {
                add_filter( 'mce_external_plugins', 'twittervisualeditor_add_tinymce_plugin' );
                add_filter( 'mce_buttons', 'twittervisualeditor_register_button' );
            }
        }
    }
}
add_action( 'admin_head', 'twittervisualeditor_shortcode_button' );


/*
 * Specify the path to the script with our plugin for TinyMCE
 */
function twittervisualeditor_add_tinymce_plugin($plugin_array) {

    $plugin_array['twittervisualeditor_button'] = plugins_url( '/twittervisualeditor-button.js', __FILE__ );
    return $plugin_array;
}


/*
 * Add button in TinyMCE
 */
function twittervisualeditor_register_button($buttons) {
   array_push( $buttons, 'twittervisualeditor_button');
   return $buttons;
}

Paso2: Crear un fichero javascript

El segundo paso consiste en crear un javascript twittervisualeditor-button.js con el siguiente contenido:

(function() {
    tinymce.PluginManager.add( 'twittervisualeditor_button', function( editor, url ) {
        editor.addButton( 'twittervisualeditor_button', {
            text: 'Share on Twitter',
            icon: false,
            onclick: function() {
                editor.insertContent( '[sct_sharetwitter]' );
            }
        });
    });
})();   

Este javascript es el que realmente da forma al botón y donde programo su funcionalidad. La función editor.addButton tiene varios parámetros, pero de momento voy a usar estos tres:

  • text: el texto del botón.
  • icon: si lleva icono.
  • onclick: la acción que va a realizar el botón.

La acción onclick inserta el shortcode [sct_sharetwitter] en la caja de edición. En el front-end este shortcode genera el enlace “Compartir en Twitter”.

El resultado en el editor visual:

Back End Sharetwitter Visual Editor Simple

El resultado en el front-end:

Front End Sharetwitter Visual Editor

Icono chulo para el botón

El botón funciona correctamente pero quiero un diseño más acorde con el resto de botones, así que quito el texto y pongo un icono con el logo de Twitter.

Para el icono se pueden usar imágenes pero prefiero usar una fuente como Dashicon (incluida en el back-end de WordPress) que contiene el logo de Twiter.

Para usar Dashicon tengo que hacer tres cosas:

  • Cambiar el parametro icon del botón
  • Crear un fichero CSS para el icono
  • Encolar este fichero CSS en el plugin

Cambiar parametro icon

Debo modificar el javascript twittervisualeditor-button.js y cambiar la variable icon:

icon: 'icon dashicons-twitter',

Con este cambio, el botón en el editor visual tiene este HTML:

<i class="mce-ico mce-i-icon dashicons-twitter"></i>

La clase dashicons-twitter muestra el logo de twitter, pero necesito un poco de CSS para que se vea correctamente.

CSS para el icono

Creo un fichero css llamado twittervisualeditor-admin.css y uso la clase mce-i-icon:

i.mce-i-icon {
    font: 400 20px/1 dashicons;
    padding: 0;
    vertical-align: top;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: -2px;
    padding-right: 2px
}   

Con este estilo el botón se ve perfectamente.

Encolar el CSS del icono

Para que el estilo del fichero twittervisualeditor-admin.css se aplique debo encolarlo en el panel de administración con el hook admin_enqueue_scripts:

/*
 * Add stylel for custom TinyMCE button
 */
function twittervisualeditor_admin_css() {
    wp_enqueue_style( 'twittervisualeditor-admin', plugins_url( '/twittervisualeditor-admin.css' , __FILE__ ) );
}s
add_action('admin_enqueue_scripts', 'twittervisualeditor_admin_css');

Al final el botón queda de esta forma:

Back End Sharetwitter Visual Editor Cool

Ventana emergente con opciones

El botón funciona perfectamente pero voy a hacerlo un poco más complejo. El shortcode original del que partimos tiene un par de atributos que modifican el aspecto del enlace. Los atributos son:

  • text: Es el texto del enlace. Por defecto es ‘Compartir en Twitter’.
  • size: Es el tamaño del icono. Puede tener dos valores big o small. Por defecto es small.

La API de TinyMCE me permite crear ventanas emergentes al clickar el botón. Esto es lo que quiero mostrar:

Back End Sharetwitter Visual Editor Popup

Para conseguirlo debo modifiar el fichero twittervisualeditor-button.js y poner el siguiente código:

(function() {
    tinymce.PluginManager.add('twittervisualeditor_button', function(editor, url) {
        editor.addButton('twittervisualeditor_button', {
            title: 'Share on Twitter',
            icon: 'icon dashicons-twitter',

            onclick: function() {
                editor.windowManager.open({
                    title: 'Share on Twitter',
                    body: [
                        {
                            type:  'textbox',
                            label: 'Texto',
                            name:  'text',
                            value: 'Compartir en Twitter',
                        },
                        {
                            type:  'listbox',
                            label: 'Tamaño Icono',
                            name:  'size',
                            value: 'small',
                            values: [{
                                text: 'Pequeño',
                                value: 'small'
                            }, {
                                text: 'Grande',
                                value: 'big'
                            }]
                        }
                    ],

                    onsubmit: function(e) {
                        editor.insertContent('[sct_sharetwitter text=&quot;' + e.data.text + '&quot; size=&quot;' + e.data.size + '&quot;]');
                    }
                });
            }
        });
    });
})();

Explicación del código

La acción onclick abre una ventana emergente editor.windowManager.open con dos elementos:

El primer elemento es una caja de texto donde debo poner el tipo de elemento 'textbox', el nombre de la variable 'text', la etiqueta 'Texto' y su valor por defecto 'Compartir en Twitter'. Así queda:

{
    type:  'textbox',
    label: 'Texto',
    name:  'text',
    value: 'Compartir en Twitter',
}

El segundo elemento es una lista de selección. Debo poner los mismos parámetros que la caja de texto pero cambio el tipo type: 'listbox' y añado el parámetro values con la lista de elementos a seleccionar (cada elemento con el par text-value).

{
    type:  'listbox',
    label: 'Tamaño Icono',
    name:  'size',
    value: 'small',
    values: [{
        text: 'Pequeño',
        value: 'small'
    }, {
        text: 'Grande',
        value: 'big'
    }]
}

Tan sólo me queda onsubmit: function(e) {... que se ejecuta al pulsar el botón OK. Esta función es igual que la original pero se añaden los atributos al shortcode con los valores capturados en la ventana emergente:

  • Atributo text: text=&quot;' + e.data.text + '&quot;
  • Atributo size: size=&quot;' + e.data.size + '&quot;

Ahora ya puedo probar el funcionamiento del botón.

Conclusión

Al final hay que crear unos cuantos ficheros pero no es muy difícil crear tus botones personalizados. Quizás lo más difícil es evitar funcionalidades complejas para que el usuario no se asuste. Es mejor un botón con funciones sencillas y que los haga bien a saturar al usuario con infinitas posibilidades.

Puedes bajar el código en github.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *