Botón personalizado en el editor de WordPress

Cuando nos metemos en el mundillo de wordpress, ya sea para desarrolladores, diseñadores, periodistas… Van surgiendo dudas de como hacer ciertas cosas mas faciles, para el usuario final, una de estas dudas era como hacer automaticamente los shortcodes, ya que es un poco engorroso tener que copiarte el shortcode, memorizarlo… Pues en este tutorial explicare como crear un botón personalizado para nuestro editor de wordpress.

Primero de todo explicar que es TinyMce, es un editor de texto WYSIWYG para HTML de código abierto que funciona completamente en JavaScript y se distribuye gratuitamente bajo licencia LGPL, WordPress por defecto lo tiene instalado. Entonces tenemos que crear botones personalizados para este nuestro edito.

crear Botón personalizado en wordpress

Empezamos, primero de todo tenemos que registrar en nuestro functions.php nuestro botón:

add_action( 'init', 'ejemplo_buttons' );
// Filtros para añadir los botones
function hello_buttons() {
    add_filter( "mce_external_plugins", "ejemplo_add_buttons" );
    add_filter( 'mce_buttons', 'ejemplo_register_buttons' );
}
// Añade el script del plugin tinymce
function ejemplo_add_buttons( $plugin_array ) {
    $plugin_array['ejemplo'] = get_template_directory_uri() . '/js/tinymce-plugin.js';
    return $plugin_array;
}
// Un nuevo botón que se identifica como 'ejemplo'
function ejemplo_register_buttons( $buttons ) {
    array_push( $buttons, 'ejemplo' ); 
    return $buttons;
}

Ahora tenemos el botón identificado como ejemplo, en este ejemplo tengo que crear un archivo js en la ruta js/tinymce-plugin.js, como se puede ver en la ruta anterior del código. Cuando creamos este archivo dentro introduciremos este código:

(function() {
    // Creamos el plugin
    tinymce.create('tinymce.plugins.ejemplo', {
        init : function(ed, url) {
          ed.addButton('ejemplo', {
              text : 'hola',
              title : 'insertar shortcode',
              onclick: function() {
                        
                                ed.insertContent( '[simple shortcode]');
                            
                       
                    }
          });
        }
    });
    // Register plugin
    tinymce.PluginManager.add( 'ejemplo', tinymce.plugins.ejemplo );
})();

Lo que estamos haciendo es crear un botón con la api de tinymce registrado llamado ‘ejemplo’, anteriormente es el nombre que le hemos dado a nuestro botón. Hay muchos atributos con el que poder editar los botones, yo he utilizado solamente text, que es el texto para mostrar en el botón y title que sirve para cuando pasas por encima de nuestro botón salga el titulo, pero se puede añadir imagen por ejemplo. Luego como podéis entender cuando pulses encima del botón se printara en el editor [simple shortcode].

Aquí podéis ver el resultado:

botón personalizado en el editor tinyMce en wordpress

Espero que os haya sido de utilidad, puedes hacer muchas mas cosas con tinymce, este es un tutorial muy simple, podéis encontrar mas información aquí.

Si os ha gustado compartir y pulsar en los banners de publicidad.

 

Saludos 😀

Summary
Review Date
Author Rating
51star1star1star1star1star
Entradas relacionadas

Deja un comentario

Tu dirección de correo electrónico no será publicada.