Cuando creamos o editamos una publicación en WordPress contamos con dos editores de contenido a elegir: el editor visual TinyMCE y el editor de texto WordPress, que consiste en un elemento de textarea mejorado por un conjunto de botones que proporciona una forma rápida y eficaz de insertar el código HTML en la publicación.

Los usuarios pueden cambiar fácilmente el modo visual al modo de texto simplemente al hacer clic en las etiquetas superiores derechas. WordPress conservará el contenido de la publicación, pero TinyMCE convertirá en caracteres especiales a las entidades HTML correspondientes. Por esta razón, se puede preferirlo.

Lectura recomendada: Sumergirse en el nuevo editor de Gutenberg WordPress (pros y contras)

El editor de texto muestra exactamente la estructura HTML del contenido de la publicación, y otorga el control total sobre la entrada del usuario, por lo que esta publicación trata sobre el editor de texto de WordPress. Primero, profundizaremos en el tema desde la perspectiva del desarrollador: veremos la API de Quicktags JS, el filtro quicktags_settings y la función wp_editor ().

La sección final de esta publicación está dedicada a los no desarrolladores. Presentaré un plugin que permite a los usuarios configurar el editor de texto de forma rápida y fácil desde el panel de control de WordPress.

Editores visuales y de texto comparados
Editores visuales y de texto comparados

WordPress Editor de Texto

Ya sea que esté acostumbrado a agregar una gran cantidad de código en sus publicaciones, o simplemente desea obtener una vista previa de la estructura HTML exacta de su contenido, puede preferir el editor de texto barebones ante la facilidad de uso del editor visual avanzado.

Sin embargo, el editor de texto no es solo un elemento de formulario. La barra de herramientas del editor proporciona un conjunto de botones (llamados etiquetas rápidas) que permiten a los usuarios insertar rápidamente un buen número de etiquetas en la estructura de la publicación HTML.

Por omisión, WordPress proporciona las siguientes etiquetas rápidas:

  • a
  • strong
  • code
  • del
  • em
  • ol
  • ul
  • li
  • img
  • blockquote
  • ins
  • fullscreen
  • lookup
  • close
La imagen muestra los botones predeterminados del editor de texto de WordPress
La imagen muestra los botones predeterminados del editor de texto de WordPress

La configuración predeterminada puede anularse gracias a la API de Quicktags. Es una API de JavaScript que proporciona una manera fácil de agregar botones personalizados e insertar código y contenido en el área del editor de texto.

El método QTags.addButton agrega un botón a la barra de herramientas y se define de la siguiente manera:

QTags.addButton( 
	id, 
	display, 
	arg1, 
	arg2, 
	access_key, 
	title, 
	priority, 
	instance );

Este método mantiene los siguientes parámetros:

  • id (string) (requerido) es la ID del HTML para el botón;
  • display (string) (requerido) es el valor HTML;
  • arg1 (string) (requerido) es la etiqueta de apertura que debe incluirse o una función de devolución de llamada personalizada que se ejecutará cuando se haga clic en el botón;
  • arg2 (string) (opcional) es la etiqueta de cierre;
  • access_key (string) (opcional) es una tecla de atajo para el botón;
  • title (string) (opcional) es el título HTML;
  • priority (int) (opcional) es un número representando la posición del botón en la barra de herramientas;
  • instance (string) (opcional) limita el botón a una instancia específica de Quicktags.

Supongamos ahora que queremos agregar las etiquetas requeridas por un marcador de sintaxis como Prism, y nos gustaría proporcionar a la barra de herramientas del editor botones que impriman el siguiente marcado:

<pre><code class="language-php"></code></pre>
<pre><code class="language-css"></code></pre>
<pre><code class="language-html"></code></pre>

Para lograr esta tarea, necesitamos agregar el siguiente código al archivo principal de un plugin:

function my_quicktags() {
	if ( wp_script_is( 'quicktags' ) ) {
	?>
	<script type="text/javascript">
	QTags.addButton( 'eg_php', 'PHP', '<pre><code class=\"language-php\">', '</code></pre>', 'p', 'PHP Code', 100 );
	QTags.addButton( 'eg_css', 'CSS', '<pre><code class=\"language-css\">', '</code></pre>', 'q', 'CSS Code', 100 );
	QTags.addButton( 'eg_html', 'HTML', '<pre><code class=\"language-html\">', '</code></pre>', 'r', 'HTML Code', 100 );
	</script>
	<?php
	}
}
add_action( 'admin_print_footer_scripts', 'my_quicktags' );

admin_print_footer_scripts es un hook de acción utilizado para imprimir scripts en el pie de página de las páginas administrativas. La función callback comprueba si el script de etiquetas rápidas está en uso, luego imprime el código JS.

Esta secuencia de comandos agrega tres botones más a cualquier instancia de las Quicktags en el panel de administración, como se muestra en la siguiente imagen.

La imagen muestra nuestros nuevos botones personalizados
La imagen muestra nuestros nuevos botones personalizados

Agregar botones a la barra de herramientas del editor es bastante sencillo, pero podemos hacer mucho más con la API de Quicktags. Por ejemplo, podemos pasar al método QTags.addButton una función callback para ejecutar cuando el usuario hace clic en el botón correspondiente. Considere el siguiente código:

function custom_quicktags() {

	if ( wp_script_is( 'quicktags' ) ) {
	?>
	<script type="text/javascript">
	QTags.addButton( 'eg_callback', 'CSS div', css_callback );

	function css_callback(){
		var css_class = prompt( 'Class name:', '' );

		if ( css_class && css_class !== '' ) {
			QTags.insertContent('<div class="' + css_class +'"></div>');
		}
	}
	</script>
	<?php
	}
}
add_action( 'admin_print_footer_scripts', 'custom_quicktags' );

css_callback es una función personalizada de JS que se ejecuta cuando el usuario hace clic en el botón personalizado. En nuestro ejemplo, la función solicita un cuadro de entrada para permitir a los usuarios establecer un nombre de clase para un elemento de desplazamiento.

El método QTags.insertContent imprimirá el string necesario en el editor text area.

La función callback de nuestro ejemplo solicita un cuadro de entrada que permite a los usuarios establecer un nombre de clase
La función callback de nuestro ejemplo solicita un cuadro de entrada que permite a los usuarios establecer un nombre de clase

Hasta ahora hemos agregado etiquetas rápidas al editor de WordPress en las páginas de administración gracias a la acción admin_print_footer_scripts. Si tiene instancias del editor en el front-end del sitio, debe conectar la función callback a la acción wp_print_footer_scripts.

De todos modos, en producción, debe considerar poner en cola sus archivos JavaScript a los scripts registrados de WordPress, como se explica en Cómo poner en cola sus activos en WordPress. Una herramienta útil para crear etiquetas rápidas personalizadas es el Generador Quicktags de GenerateWP.

Anulación de las Configuraciones de Quicktags

La API Quicktags proporciona un método para agregar nuevos botones a la barra de herramientas. WordPress nos permite eliminar botones también, gracias al filtro quicktags_settings.

function my_quicktags( $qtInit, $editor_id = 'content' ) {
	$qtInit['buttons'] = 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close';
	return $qtInit;
}
add_filter( 'quicktags_settings', 'my_quicktags', 10, 2 );

La función callback mantiene dos argumentos: $qtInit es una matriz de configuraciones, y $editor_id es la ID única del editor. En nuestro ejemplo, $editor_id se establece de manera predeterminada en «contenido«, que es la ID del editor textarea en la edición de páginas de publicaciones.

Tenga en cuenta que los nombres de las etiquetas en la lista de etiquetas rápidas están separados por comas que no están seguidas de espacios en blanco.

Esta función anulará la configuración predeterminada y también se puede usar para eliminar todos los botones de la barra de herramientas:

function my_quicktags( $qtInit, $editor_id = 'content' ) {
	$qtInit['buttons'] = ',';
	return $qtInit;
}
add_filter( 'quicktags_settings', 'my_quicktags', 10, 2 );

Hemos asignado una coma como valor para el elemento ‘botones’ de $qtInit. Una cadena vacía no funcionará como se espera y la configuración predeterminada no se anulará.

Incluyendo el Editor de WordPress en las Páginas Frontales

Disponible a partir de la versión 3.3, la función wp_editor proporciona una manera fácil de incluir los editores de WordPress en cualquier parte del sitio.

La función se define en el archivo wp-includes/general-template.php de la siguiente manera:

wp_editor( $content, $editor_id, $settings = array() );
  • $contenido (string) (obligatorio) establece el contenido inicial del editor;
  • $editor_id (string) (obligatorio) establece el atributo id para el área de texto y el editor TinyMCE (solo puede contener letras minúsculas y guiones bajos);
  • $settings (array) (opcional) una matriz de argumentos.

La matriz de argumentos permite establecer una gran cantidad de parámetros de configuración para ambos editores, y un argumento específico se puede utilizar para pasar configuraciones directamente a Quicktags (consulte la lista completa de argumentos en el Codex).

Como ejemplo, es posible que desee incluir el editor en una plantilla. Considere el siguiente ejemplo:

$content = '';
	$editor_id = 'mycustomeditor';
	$settings = array( 
		'wpautop' => false, 
		'media_buttons' => false, 
		'quicktags' => array(
				'buttons' => 'strong,em,del,ul,ol,li,block,close'
			),
	);
wp_editor( $content, $editor_id, $settings );

Estas pocas líneas de código imprimen un editor vacío con id de ‘myeditor‘ y los botones especificados en la barra de herramientas del editor de texto.

  • El argumento wpautop se establece en falso, de modo que los elementos p se usarán para ajustar los párrafos al editor,
  • El argumento media_buttons está establecido en falso, de modo que el usuario no podrá cargar archivos multimedia,
  • El argumento quicktags array determina los botones que se mostrarán en la barra de herramientas del editor de texto.

Por lo que respecta al editor de texto de WordPress, la principal diferencia entre la función wp_editor () y el filtro quicktags_settings es que la función se aplica a una instancia específica del editor y puede usarse para incluir nuevos editores en cualquier lugar del sitio (como plantillas), mientras que el hook de quicktags_settings del filtro se encarga de filtrar todas las instancias existentes y no se puede usar para generar nuevas instancias del editor.

El código completo de los ejemplos anteriores está disponible en Gist.

Mejorar el Editor de Texto de WordPress con el Plugin AddQuicktag

Si necesita una herramienta para agregar rápidamente botones al editor de texto de WordPress, AddQuicktag es el plugin ideal para usted.

AddQuicktag es un plugin gratuito que permite a los usuarios agregar un botón personalizado al editor de texto de WordPress
AddQuicktag es un plugin gratuito que permite a los usuarios agregar un botón personalizado al editor de texto de WordPress

Este plugin proporciona una página de opciones accesible desde el menú Configuración. En esta página, el usuario administrador puede agregar botones personalizados y eliminar botones existentes.

AddQuicktag permite configurar el editor específicamente para publicaciones, páginas y otras áreas de texto habilitadas por el editor disponible (comentarios, widgets de texto, etc.).

El plugin agrega Quicktags al editor visual también. Simplemente seleccione la opción »Visual» y el editor visual mostrará un menú desplegable de Quicktags con sus botones personalizados.

La segunda sección de la página de opciones AddQuicktag está dedicada a la configuración incorporada de las etiquetas rápidas. En esta sección, es posible eliminar botones en áreas de texto específicas.

Se han eliminado tres botones del editor de texto de las páginas de edición
Se han eliminado tres botones del editor de texto de las páginas de edición

La sección final proporciona funcionalidades adicionales para la barra de herramientas del editor. La primera fila de opciones mejora el botón de código predeterminado, proporcionando un menú de selección que establece una clase de CSS para la etiqueta de código dependiendo del idioma seleccionado.

La segunda fila proporciona dos botones que codifican y decodifican caracteres especiales (htmlentities).

Características Avanzadas de AddQuicktag
Características Avanzadas de AddQuicktag

Conclusiones

Si es un desarrollador, puede resultarle útil agregar un tema o funciones específicas de plugin a los editores de WordPress. La API Quicktags y una buena cantidad de filtros y funciones proporcionan herramientas útiles que nos permiten agregar valor a nuestros productos. Y si usted no es un desarrollador, también puede configurar editores de WordPress, gracias a varios plugins disponibles de forma gratuita en el Directorio de plugins de WordPress, como el AddQuicktag que se presenta en esta publicación.

¿Tiene más ideas sobre funciones útiles para agregar al editor de texto de WordPress?

Brian Jackson

Brian tiene una gran pasión por WordPress, lo ha estado utilizando durante más de 10 años e incluso ha desarrollado un par de plugins premium. Brian disfruta de los blogs, las películas y el senderismo. Conéctese con Brian en Twitter.