Requisitos
Este tutorial está destinado a usuarios avanzados. Si es un usuario de nivel principiante que solo quiere ampliar el editor visual, consulte TinyMCE Advanced plugin o eche un vistazo a estos consejos sobre el uso del 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 plugins en un sitio web en vivo. Un pequeño error en el código puede hacer que su sitio sea inaccesible. Pero si debe hacerlo en un sitio en vivo, primero haga una copia de seguridad de WordPress.
Creación de su primer complemento TinyMCE
Empezaremos creando un WordPress plugin para registrar nuestro botón personalizado de la barra de herramientas TinyMCE. Cuando se hace clic, este botón permitirá al usuario agregar un enlace con una clase CSS personalizada.
El código fuente se proporcionará en su totalidad al final de este artículo, pero hasta entonces, creemos el plugin paso a paso.
Primero, necesita crear un directorio en wp-content/plugins carpeta de su instalación de WordPress. Nombra esta carpeta tinymce-custom-link-class.
A partir de aquí, comenzaremos a agregar nuestro plugin código.
El encabezado del complemento
Cree un nuevo archivo en el plugin directorio que acabamos de crear y nombrar este archivo tinymce-custom-link-class.php. Agregue este código al archivo y guárdelo.
/** * Plugin Name: TinyMCE Custom Link Class * Plugin URI: http://wpbeginner.com * Version: 1.0 * Author: * Author URI: https://www.wpbeginner.com * Description: A simple TinyMCE Plugin to add a custom link class in the Visual Editor * License: GPL2 */
Esto es solo un comentario de PHP, que le dice a WordPress el nombre del plugin, así como el autor y una descripción.
En el área de administración de WordPress, active su nuevo plugin yendo a Complementos> Complementos instalados y luego haciendo clic en Activar junto a la Clase de enlace personalizado de TinyMCE plugin:
Configuración de nuestra clase de complemento
Si dos WordPress plugins tienen funciones con el mismo nombre, entonces esto causaría un error. Evitaremos este problema teniendo nuestras funciones envueltas 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 crea nuestra clase 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 función que agreguemos dentro de esta clase no debería entrar en conflicto con otro WordPress plugins.
Comience a configurar nuestro complemento TinyMCE
A continuación, debemos decirle a TinyMCE que es posible que deseemos agregar nuestro botón personalizado a la barra de herramientas del Editor visual. Para hacer esto, podemos usar las acciones de WordPress, específicamente, el init acción.
Agregue el siguiente código dentro de su plugin’s __construct() función:
if ( is_admin() ) {
add_action( 'init', array( $this, 'setup_tinymce_plugin' ) );
}
Esto comprueba si estamos en la interfaz de administración de WordPress. Si es así, entonces le pide a WordPress que ejecute el setup_tinymce_plugin funcionar dentro de nuestra clase cuando WordPress haya terminado su rutina de carga inicial.
A continuación, agregue el setup_tinymce_plugin función:
/**
* 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 comprueba si el usuario de WordPress que ha iniciado sesión actualmente puede editar publicaciones o páginas. Si no pueden, no tiene sentido registrar nuestro complemento TinyMCE para ese usuario, ya que 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. Nuevamente, si el usuario no está usando el Editor visual, devolvemos (salimos) la función, ya que no necesitamos hacer nada más.
Finalmente, agregamos dos filtros de WordPress: mce_external_plugins y mce_buttons, para llamar a nuestras funciones que cargarán el archivo Javascript requerido para TinyMCE y agregar un botón a la barra de herramientas de TinyMCE.
Registro del botón y archivo Javascript en el editor visual
Sigamos adelante y agreguemos el add_tinymce_plugin función:
/**
* 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 los archivos Javascript almacenados en el $plugin_array formación. Estos archivos Javascript le dirán a TinyMCE qué hacer.
También necesitamos agregar algo de código al add_tinymce_toolbar_button función, para decirle a TinyMCE sobre el botón que nos gustaría 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: un separador (|) y el nombre programático de nuestro botón (custom_link_class).
Guarda tu pluginy luego edite una página o publicación para ver el editor visual. Lo más probable es que la barra de herramientas no se muestre en este momento:
No se preocupe, si usamos la consola de inspección de nuestro navegador web, veremos que TinyMCE ha generado un error 404 y un aviso, que nos dice que no puede encontrar nuestro archivo Javascript.
Eso es bueno, significa que hemos registrado con éxito nuestra costumbre TinyMCE plugin, y ahora necesito crear el archivo Javascript para decirle a TinyMCE qué hacer.
Creación del complemento de Javascript
Cree un nuevo archivo en su wp-content/plugins/tinymce-custom-link-class carpeta y asígnele el nombre tinymce-custom-link-class.js. Agregue este código en su archivo js:
(function() {
tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {
});
})();
Esto llama a la clase TinyMCE Plugin Manager, que podemos usar para realizar una serie de TinyMCE plugin acciones relacionadas. Específicamente, estamos agregando nuestro plugin a TinyMCE usando el add función.
Esto acepta dos elementos; El nombre de plugin (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 simplemente una función sin nombre. Por ejemplo, function foobar() { ... } es una función a la que podríamos llamar en otro lugar de nuestro código usando foobar().
Con una función anónima, no podemos llamar a esa función en otro lugar de nuestro código; solo se llama en el punto en el que add() se invoca la función.
Guarde su archivo Javascript y luego edite una página o publicación para ver el editor visual. Si todo funcionó, verá la barra de herramientas:
En este momento, nuestro botón no se ha agregado a esa barra de herramientas. Eso es porque solo le hemos dicho a TinyMCE que somos una costumbre plugin. Ahora necesitamos decirle a TinyMCE qué hacer, es decir, agregar un botón a la barra de herramientas.
Actualice su archivo Javascript, reemplazando su 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',
});
});
})();
Observe que nuestra función anónima tiene dos argumentos. El primero es el editor instancia: este es el editor visual de TinyMCE. De la misma manera podemos llamar a varias funciones en el PluginManager, también podemos llamar a varias funciones en el editor. En este caso, llamamos al addButton función, para agregar un botón a la barra de herramientas.
Guarde su archivo Javascript y vuelva a su Editor visual. A primera vista, nada parece haber cambiado. Sin embargo, si coloca el cursor del mouse sobre la derecha del ícono más a la derecha de la fila superior, debería ver aparecer una información sobre herramientas:
Hemos agregado con éxito un botón a la barra de herramientas, pero necesita una imagen. Agregue el siguiente parámetro al addButton función, debajo de la title: línea:
image: url + '/icon.png',
url es la URL de nuestro plugin. Esto es útil si queremos hacer referencia a un archivo de imagen dentro de nuestra plugin carpeta, ya que podemos agregar el nombre del archivo de imagen a la URL. En este caso, necesitaremos una imagen llamada icon.png en nuestro plugincarpeta de. Utilice el siguiente icono:
Vuelva a cargar nuestro Editor visual y verá su botón con el icono:
Definición de un comando para ejecutar
Ahora mismo, si hace clic en el botón, no pasará 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 debajo del final de la editor.addButton sección:
// 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:
Reemplacemos la alerta con un mensaje, pidiendo al usuario el enlace que desea envolver alrededor del 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 class="button" href="' + result + '">' + text + '</a>');
});
Este bloque de código realiza algunas acciones.
Primero, verificamos si el usuario seleccionó algún texto para vincularlo en el Editor visual. De lo contrario, verán una alerta que les indicará que seleccionen un texto para vincular.
A continuación, les pedimos que ingresen un enlace, nuevamente verificando si lo hicieron. Si cancelaron o no ingresaron nada, no hacemos nada más.
Finalmente, ejecutamos el execCommand función en el editor TinyMCE, específicamente ejecutando el mceReplaceContent acción. Esto reemplaza el texto seleccionado con nuestro código HTML, que se compone de un enlace de anclaje con class = ”button”, usando el texto que el usuario seleccionó.
Si todo funcionó, verá que el texto seleccionado ahora está vinculado en el Editor visual y las vistas de Texto, con la clase configurada en button:
Resumen
Hemos creado con éxito un WordPress plugin que agrega un botón al editor visual TinyMCE en WordPress. Este tutorial también ha cubierto algunos de los conceptos básicos de la API de TinyMCE y los filtros de WordPress disponibles para las integraciones de TinyMCE.
Agregamos código para que cuando un usuario haga clic en nuestro botón personalizado, se le solicite que seleccione un texto en el Editor visual, que luego puede vincular a una URL de su elección. Finalmente, nuestro plugin luego reemplaza el texto seleccionado con una versión vinculada que contiene una clase CSS personalizada llamada button.
Esperamos que este tutorial le haya ayudado a aprender a crear un TinyMCE de WordPress. plugin. También puede consultar nuestra guía sobre cómo crear un WordPress específico para un sitio. plugin.
Si le gustó este artículo, suscríbase a nuestro Canal de Youtube . También puedes encontrarnos en Twitter y Facebook.
Cómo crear un complemento de WordPress TinyMCE .
Fuente: wpbeginner