Si es un desarrollador de WordPress, en algún momento probablemente se haya topado con editores visuales personalizados o extendidos de WordPress. Por ejemplo, es posible que desee agregar un botón a la barra de herramientas del editor visual para facilitar que su cliente inserte un cuadro de texto o un botón de llamada a la acción sin escribir ningún código HTML. En este artículo, le mostraremos cómo crear un complemento TinyMCE en WordPress.

Barra de herramientas Tiny MCE en el editor visual de WordPress

Exigir

Este tutorial es para usuarios avanzados. Si es un principiante y solo desea ampliar el editor visual, consulte el complemento TinyMCE Advanced o consulte estos consejos para usar el editor visual de WordPress.

Para este tutorial, necesitará habilidades básicas de codificación, acceso a una instalación de WordPress donde pueda probarlo.

Es una mala práctica desarrollar complementos en sitios web activos. Un pequeño error en el código puede hacer que su sitio web sea inaccesible. Sin embargo, si debe hacer esto en un sitio en vivo, al menos haga una copia de seguridad de WordPress primero.

Cree su primer complemento TinyMCE

Comenzaremos creando un complemento de WordPress para registrar nuestro botón personalizado de la barra de herramientas TinyMCE. Después de hacer clic en este botón, el usuario le permitirá agregar un enlace con una clase CSS personalizada.

Código fuente El código fuente completo se proporcionará al final de este artículo, pero hasta entonces, creemos el complemento paso a paso.

Primero, necesitas crear un directorio. wp-content/plugins Su carpeta de instalación de WordPress.nombra esta carpeta tinymce-custom-link-class.

A partir de aquí, comenzaremos a agregar nuestro código de complemento.

Encabezado del complemento

Cree un nuevo archivo en el directorio de complementos que acabamos de crear y asigne un nombre a este archivo tinymce-custom-link-class.phpAgregue este código al archivo y guárdelo.

/**
 * Plugin Name: TinyMCE Custom Link Class
 * Plugin URI: http://wpbeginner.com
 * Version: 1.0
 * Author: WPBeginner
 * Author URI: https://www.wpbeginner.com
 * Description: A simple TinyMCE Plugin to add a custom link class in the Visual Editor
 * License: GPL2
 */

Es solo un comentario de PHP que le dice a WordPress el nombre del complemento, así como el autor y la descripción.

En el área de administración de WordPress, active su nuevo complemento yendo a Complementos > Complementos instalados y haciendo clic en Activar junto a Complemento de clase de enlace personalizado TinyMCE:

complementos instalados

Configurar nuestra clase de complemento

Esto dará como resultado un error si dos complementos de WordPress tienen una función con el mismo nombre. Evitaremos este problema envolviendo la función en una clase.

class TinyMCE_Custom_Link_Class {
	
	/**
	* Constructor. Called when the plugin is initialised.
	*/
	function __construct() {
		
	}

}

$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

Esto creará nuestra clase de PHP junto con una construcción que se llama cuando llegamos a la línea $tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;.

Cualquier funcionalidad que agreguemos en esta clase no debe entrar en conflicto con otros complementos de WordPress.

Comience a configurar nuestro complemento TinyMCE

A continuación, debemos decirle a TinyMCE que es posible que deseemos agregar botones personalizados a la barra de herramientas del editor visual. Para esto, podemos usar acciones de WordPress, específicamente, init acción.

Agregue el siguiente código en su complemento __construct() Características:

if ( is_admin() ) {
	add_action( 'init', array(  $this, 'setup_tinymce_plugin' ) );
}

Esto verificará si estamos en la interfaz de administración de WordPress.En caso afirmativo, le pedirá a WordPress que se ejecute setup_tinymce_plugin Una función en nuestra clase cuando WordPress completa su rutina de carga inicial.

A continuación, agregue setup_tinymce_plugin Características:

/**
* Check if the current user can edit Posts or Pages, and is using the Visual Editor
* If so, add some filters so we can register our plugin
*/
function setup_tinymce_plugin() {

// Check if the logged in WordPress User can edit Posts or Pages
// If not, don't register our TinyMCE plugin
	
if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
	        return;
}

// Check if the logged in WordPress User has the Visual Editor enabled
// If not, don't register our TinyMCE plugin
if ( get_user_option( 'rich_editing' ) !== 'true' ) {
return;
}

// Setup some filters
add_filter( 'mce_external_plugins', array( &$this, 'add_tinymce_plugin' ) );
add_filter( 'mce_buttons', array( &$this, 'add_tinymce_toolbar_button' ) );
		
	}

Esto verificará si el usuario de WordPress actualmente conectado puede editar la publicación o la página. Si no pueden, no tiene sentido registrar nuestro complemento TinyMCE para ese usuario, porque nunca verán el editor visual.

Luego verificamos si el usuario está usando el editor visual, ya que algunos usuarios de WordPress lo desactivan a través de Usuarios > Su perfil. Asimismo, si el usuario no está usando el editor visual, regresamos (salimos) de la función porque no necesitamos hacer nada más.

Finalmente, agregamos dos filtros de WordPress: mce_external_plugins y mce_buttons, llame a nuestras funciones que cargarán los archivos Javascript necesarios para TinyMCE y agregará un botón a la barra de herramientas de TinyMCE.

Registre archivos y botones Javascript con el editor visual

Sigamos adelante y agreguemos add_tinymce_plugin Características:

/**
* Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
*
* @param array $plugin_array Array of registered TinyMCE Plugins
* @return array Modified array of registered TinyMCE Plugins
*/
function add_tinymce_plugin( $plugin_array ) {

$plugin_array['custom_link_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-link-class.js';
return $plugin_array;

}
    

Esta función le dice a TinyMCE que necesita cargar la tienda en $plugin_array al por mayor. Estos archivos Javascript le dirán a TinyMCE qué hacer.

También necesitamos agregar algo de código para add_tinymce_toolbar_button función que le dice a TinyMCE qué botón queremos agregar a la barra de herramientas:


/**
* Adds a button to the TinyMCE / Visual Editor which the user can click
* to insert a link with a custom CSS class.
*
* @param array $buttons Array of registered TinyMCE Buttons
* @return array Modified array of registered TinyMCE Buttons
*/
function add_tinymce_toolbar_button( $buttons ) {

array_push( $buttons, '|', 'custom_link_class' );
return $buttons;
}

Esto empuja dos elementos a la matriz de botones TinyMCE: el separador (|) y el nombre del programa del botón (custom_link_class).

Guarde su complemento, luego edite la página o la publicación para ver el editor visual. Lo más probable es que la barra de herramientas no se muestre ahora:

wordpress-tinymce-plugin - falta la barra de herramientas

No se preocupe, si usamos la consola del inspector del navegador web, veremos que TinyMCE genera un error 404 y una notificación que nos dice que no pudo encontrar nuestro archivo Javascript.

wordpress-tinymce-plugin-js-404

Genial, eso significa que hemos registrado con éxito nuestro complemento personalizado TinyMCE, ahora necesitamos crear el archivo Javascript para decirle a TinyMCE qué hacer.

Crear un complemento de Javascript

Crea un nuevo archivo en tus archivos wp-content/plugins/tinymce-custom-link-class carpeta y asígnele un nombre tinymce-custom-link-class.jsAgregue este código a su archivo js:

(function() {
	tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {
		
	});
})();

Esto llama a la clase de administrador de complementos TinyMCE, que podemos usar para realizar algunas operaciones relacionadas con el complemento TinyMCE.Específicamente, agregamos nuestro complemento a TinyMCE usando add Características.

Esto acepta dos elementos; el nombre del complemento (custom_link_class) y una función anónima.

Si está familiarizado con el concepto de funciones en la codificación, una función anónima es una función sin nombre. Por ejemplo, function foobar() { ... } es una función que podemos llamar en cualquier parte del código foobar().

Con una función anónima, no podemos llamar a la función en ningún otro lugar del código; solo se puede llamar en add() se llama la función.

Guarde su archivo Javascript, luego edite la página o la publicación para ver el editor visual. Si todo está bien, verá la barra de herramientas:

wordpress-tinymce-plugin-visual-editor-barra de herramientas

En este momento, nuestro botón no se ha agregado a esta barra de herramientas. Eso es porque solo le decimos a TinyMCE que somos un complemento personalizado. Ahora debemos decirle a TinyMCE qué hacer, es decir, agregar un botón a la barra de herramientas.

Actualice su archivo Javascript, reemplazando el código existente con lo siguiente:

(function() {
	tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {
		// Add Button to Visual Editor Toolbar
		editor.addButton('custom_link_class', {
			title: 'Insert Button Link',
			cmd: 'custom_link_class',
		});	
	});
})();

Tenga en cuenta que nuestra función anónima tiene dos parámetros.el primero es editor Ejemplo: este es el editor visual TinyMCE.Del mismo modo, podemos llamar a varias funciones PluginManager, también podemos llamar a varias funciones editor.En este caso llamamos addButton función para agregar un botón a la barra de herramientas.

Guarde su archivo Javascript y regrese a su editor visual. A primera vista, nada parece haber cambiado. Sin embargo, si pasa el cursor del mouse a la derecha del ícono más a la derecha en la fila superior, debería ver una información sobre herramientas:

wordpress-tinymce-plugin-botón-noicon

Agregamos con éxito un botón a la barra de herramientas, pero necesita una imagen.Agregue los siguientes parámetros a addButton función, abajo title: Cuerda:

image: url + '/icon.png',

url es la URL de nuestro complemento. Esto es útil si queremos hacer referencia a un archivo de imagen en la carpeta de complementos porque podemos agregar el nombre del archivo de imagen a la URL.En este caso, necesitamos un archivo llamado icon.png en la carpeta de nuestro plugin. Utilice los iconos a continuación:
icono

Vuelve a cargar nuestro editor visual y ahora verás botones con íconos:
wordpress-tinymce-plugin-botón-icono

Definir el comando a ejecutar

Ahora, si haces clic en el botón, no pasa nada. Agreguemos un comando a TinyMCE que le diga qué hacer cuando se hace clic en nuestro botón.

En nuestro archivo Javascript, agregue el siguiente código al final editor.addButton parte:

// Add Command when Button Clicked
editor.addCommand('custom_link_class', function() {
	alert('Button clicked!');
});

Vuelva a cargar nuestro editor visual, haga clic en el botón y aparecerá una alerta confirmando que acabamos de hacer clic en el botón:

wordpress-tinymce-plugin-botón-de-alerta-clic

Reemplacemos la alerta con un mensaje que le pide al usuario un enlace que desee para envolver el texto seleccionado en el editor visual:

// Add Command when Button Clicked
editor.addCommand('custom_link_class', function() {
	// Check we have selected some text that we want to link
	var text = editor.selection.getContent({
		'format': 'html'
	});
	if ( text.length === 0 ) {
		alert( 'Please select some text to link.' );
		return;
	}

	// Ask the user to enter a URL
	var result = prompt('Enter the link');
	if ( !result ) {
		// User cancelled - exit
		return;
	}
	if (result.length === 0) {
		// User didn't enter a URL - exit
		return;
	}

	// Insert selected text back into editor, wrapping it in an anchor tag
	editor.execCommand('mceReplaceContent', false, '<a  href="' + result + '">' + text + '</a>');
});

Este bloque de código hace algo.

Primero, verificamos si el usuario ha seleccionado algún texto para vincular en el editor visual. De lo contrario, verán una alerta que les indicará que seleccionen algún texto para enlazar.

wordpress-tinymce-plugin-alerta-seleccionar-texto

A continuación, les pedimos que ingresen un enlace, comprobando que lo ingresaron. Si cancelan o no ingresan nada, no hacemos nada más.

wordpress-tinymce-plugin-prompt-url

Finalmente, corremos execCommand Funciones en el editor TinyMCE, especialmente en ejecución mceReplaceContent acción. Esto reemplazará el texto seleccionado con el texto seleccionado por el usuario con nuestro código HTML que contiene un enlace ancla con class=”button”.

Si todo está bien, verá que el texto que seleccionó ahora está vinculado en el editor visual y en la vista de texto con la clase establecida en button:

wordpress-tinymce-plugin-enlace-visual

wordpress-tinymce-plugin-enlace-html

generalizar

Hemos creado con éxito un complemento de WordPress que agrega un botón al editor visual TinyMCE en WordPress. El tutorial también cubre algunos de los conceptos básicos de la API de TinyMCE y los filtros de WordPress que se pueden usar para la integración de TinyMCE.

Agregamos código para que cuando el usuario haga clic en nuestro botón personalizado, se le solicite que seleccione un texto en el editor visual y luego pueda vincular a la URL de su elección.Finalmente, nuestro complemento reemplaza el texto seleccionado con la versión vinculada que contiene la clase CSS personalizada llamada button.

Esperamos que este tutorial lo haya ayudado a aprender cómo crear un complemento de WordPress TinyMCE. También puede consultar nuestra guía sobre cómo crear un complemento de WordPress específico para un sitio.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.