Añadir quicktags al editor de WordPress de manera sencilla

quicktags-wordpress

El editor HTML (texto) de WordPress ofrece una serie de botones, conocidos cómo quicktags que permiten dar formato a los textos de manera sencilla, pero en ocasiones los botones ofrecidos pueden ser limitados y necesitar uno especial.

Añadirlos es muy fácil.

Conlleva solo dos pasos, estos:

1. Crea el archivo que contiene las nuevas Quicktags

Crea donde quieras un fichero, que puedes denominar quicktags.js, y en el añade líneas cómo la siguiente por cada una de las quicktags que puedas querer utilizar actualmente o en un futuro.

edButtons[edButtons.length] = new edButton( 'id', 'Nombre del botón', '[mishortcode]', '[/mishortcode]', 'h', '-1');

La explicación del código, para que puedas personalizarlo sería este:

  • id define que se cree un identificador único para el nuevo botón
  • Nombre del botón es el texto que aparecerá en el botón
  • Lo siguiente es la tag HTML que añadirá tu botón, en el ejemplo un shortcode, con el formato de apertura y el de cierre.
  • h especifica una combinación de teclas de acceso rápido, en este caso sería Control+Alt+h
  • -1 define si el botón puede cerrarse o no

Una vez añadidas tantas líneas cómo botones puedas querer utilizar algún día guarda los cambios.

2. Crea la función para añadir quicktags

En tu plugin personal o archivo functions.php de tu tema activo añade algo así:

//Añadir quicktag
function mi_quicktag() {
	wp_enqueue_script( 'mishortcode', 'http://misitio.es/quicktags.js', array( 'quicktags' ) );
}

add_action( 'admin_print_scripts', 'mi_quicktag' );

Y vuelves a guardar los cambios.

Cómo podrás comprobar en el código lo verdaderamente relevante es definir claramente en la tercera línea el código al que llama y la ubicación del archivo donde están las quicktags.
añadir quicktag

¡Qué lo disfrutes!

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(1 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

3 comentarios en “Añadir quicktags al editor de WordPress de manera sencilla”

  1. Guillermo Mendieta Sainz

    Encontre esta funcion:

    // add more buttons to the html editor

    function appthemes_add_quicktags() {

    ?>

    QTags.addButton( ‘eg_strong’, ‘b’, ‘‘, ‘‘, ‘b’, ‘Strong’, 1 );

    QTags.addButton( ‘eg_h1’, ‘h1’, », », », ‘Heading 1’, 2 );

    QTags.addButton( ‘eg_h2’, ‘h2’, », », », ‘Heading 2’, 3 );

    QTags.addButton( ‘eg_h3’, ‘h3’, », », », ‘Heading 3’, 4 );

    QTags.addButton( ‘eg_h4’, ‘h4’, », », », ‘Heading 4’, 5 );

    QTags.addButton( ‘eg_h5’, ‘h5’, », », », ‘Heading 5’, 6 );

    QTags.addButton( ‘eg_hr’, ‘hr’, », », », ‘Horizontal rule line’, 201 );

    QTags.addButton( ‘eg_nbsp’, ‘nbsp’, ‘ ‘, », », ‘Non Breaking Space’, 111 );

    <?php

    }

    add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags', 100 );

    // Removing buttons from the html editor

    function wpa_init( $qtInit ) {

    $qtInit['buttons'] = 'h1,h2,h3,h4,h5,em,link,block,del,img,ul,ol,li,code,more,hr,nbsp,spell,close,fullscreen';

    return $qtInit;

    }

    add_filter('quicktags_settings', 'wpa_init');

  2. Fernando cunsulta.
    Desde hace un tiempo no se me visualizan los botones en el editor y no se si tendra que ver pero al pasar la consola dice el siguiente error «a.replace is not a function»
    que puede ser? gracias.

Deja un comentario

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

 

Ir arriba Ir al contenido