Oferta SiteGround Black Friday

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!

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 5 / 5. Total de votos: 1

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en las redes sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿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. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)

Sobre el autor

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 *

Información base sobre privacidad:
- Responsable: Fernando Tellado ([email protected])
- Fin del tratamiento: Moderación de comentarios para evitar spam
- Legitimación: Tu consentimiento
- Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
- Derechos: Acceso, rectificación, portabilidad, olvido

 

Scroll al inicio