Si eres un desarrollador de WordPress, es posible que en algún momento te encuentres con la personalización o extensión del editor visual de WordPress. Por ejemplo, es posible que desee agregar un botón a la barra de herramientas del Editor visual para permitir que su cliente inserte fácilmente un cuadro de texto o un botón de llamada a la acción sin escribir HTML. En este artículo, le mostraremos cómo crear un plugin TinyMCE en WordPress.
Requisitos
Este tutorial está destinado a usuarios avanzados. Si es un usuario de nivel principiante que solo desea ampliar el editor visual, consulte el plugin TinyMCE Advanced o consulte estos consejos sobre el uso del editor visual de WordPress.
Para este tutorial, necesitará conocimientos básicos de programación, acceso a una instalación de WordPress donde podrá probarlo.
Es una mala práctica desarrollar plugins en un sitio web activo. Un pequeño error en el código puede hacer que su sitio sea inaccesible. Pero si tiene que hacer esto en un sitio en vivo, al menos primero haga una copia de seguridad de su WordPress.
Creando su primer plugin TinyMCE
Comenzaremos creando un plugin de WordPress para registrar nuestro botón de barra de herramientas TinyMCE personalizado. Al hacer clic en este botón, el usuario podrá 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.
Desde aquí, comenzaremos a agregar nuestro código de plugin.
El encabezado del plugin
Cree un nuevo archivo en el directorio de plugins que acabamos de crear y asigne un nombre a este archivo tinymce-custom-link-class.php. Agregue este código al archivo y guárdelo.
/** * Plugin Name: TinyMCE Custom Link Class * Plugin URI: https://trucoswp.com * Version: 1.0 * Author: TrucosWP * Author URI: https://www.trucoswp.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, el autor y la descripción.
En el área de administración de WordPress, active su nuevo plugin yendo a Plugins> Plugins instalados, luego haga clic en Activar junto al plugin TinyMCE Custom Link Class:
Configurando nuestra clase de plugin
Si dos plugins de WordPress tienen funciones con el mismo nombre, esto provocaría un error. Evitaremos este problema poniendo nuestras funciones 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 otros plugins de WordPress.
Comience a configurar nuestro plugin 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 acciones de WordPress, especialmente el init acción.
Agregue el siguiente código dentro de su plugin __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í, le pide a WordPress que ejecute el archivo. setup_tinymce_plugin funcionar dentro de nuestra clase cuando WordPress haya terminado su rutina de carga inicial.
A continuación, agregue el archivo 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 verifica si el usuario de WordPress actualmente conectado puede editar publicaciones o páginas. Si no pueden, no tiene sentido registrar nuestro plugin 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 deshabilitan 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 es necesario hacer nada más.
Finalmente, agreguemos dos filtros de WordPress: mce_external_plugins es mce_buttons, para llamar a nuestras funciones que cargarán el archivo Javascript requerido para TinyMCE y agregarán un botón a la barra de herramientas de TinyMCE.
Registrar el archivo y el botón Javascript en el editor visual
Sigamos adelante y agreguemos el archivo 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 Vector. Estos archivos Javascript le dirán a TinyMCE qué hacer.
También necesitamos agregar algo de código al archivo. 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 inserta dos elementos en la matriz de botones de TinyMCE: un separador (|) y el nombre programático de nuestro botón (custom_link_class).
Guarde su plugin, luego edite una página o publicación para abrir el Editor visual. Es probable 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 una advertencia, indicándonos que no puede encontrar nuestro archivo Javascript.
Bien: significa que hemos registrado con éxito nuestro plugin personalizado TinyMCE y ahora necesitamos crear el archivo Javascript para decirle a TinyMCE qué hacer.
Creación del plugin Javascript
Cree un nuevo archivo en su wp-content/plugins/tinymce-custom-link-class carpeta y darle un 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 acciones relacionadas con el plugin TinyMCE. Específicamente, estamos agregando nuestro plugin a TinyMCE usando el add función.
Esto acepta dos elementos; el nombre del 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 add() se invoca la función.
Guarde el archivo Javascript, luego edite una página o publicación para mostrar el Editor visual. Si todo funcionó, verá la barra de herramientas:
Por el momento, nuestro botón no se ha agregado a esa barra de herramientas. Esto se debe a que solo le dijimos a TinyMCE que somos un plugin personalizado. Ahora tenemos que decirle a TinyMCE qué hacer, que es 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',
});
});
})();
Observe que nuestra función anónima tiene dos argumentos. El primero es el archivo editor ejemplo: este es el editor visual de TinyMCE. Del mismo modo, podemos llamar a varias funciones en el archivo PluginManager, también podemos llamar a varias funciones en editor. En este caso, llamamos al archivo 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 a la derecha del ícono más a la derecha de la fila superior, debería ver aparecer una pista:
Hemos agregado con éxito un botón a la barra de herramientas, pero necesita una imagen. Agregue el siguiente parámetro al archivo addButton función, bajo 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 carpeta de plugins, ya que podemos agregar el nombre del archivo de imagen a la URL. En este caso, necesitaremos una imagen llamada icon.png en nuestra carpeta de plugins. Utilice el icono de abajo:
Vuelva a cargar nuestro editor visual y ahora verá su botón con el icono:
Definición de un comando a 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 del archivo editor.addButton sección:
// Add Command when Button Clicked
editor.addCommand('custom_link_class', function() {
alert('Button clicked!');
});
Recargue nuestro editor visual, haga clic en el botón y aparecerá una advertencia confirmando que acabamos de hacer clic en el botón:
Reemplacemos la advertencia 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, verifiquemos si el usuario ha seleccionado algún texto para vincular en el Editor visual. De lo contrario, verán una advertencia que les indicará que seleccionen algún texto para vincular.
A continuación, les pedimos que inserten un enlace, comprobando nuevamente si lo han hecho. Si han eliminado o no han ingresado nada, no hacemos nada más.
Finalmente, ejecutemos el archivo execCommand en el editor de TinyMCE, específicamente ejecutando el archivo mceReplaceContent acción. Esto reemplaza el texto seleccionado con nuestro código HTML, que incluye un enlace de anclaje con class = «button», usando el texto seleccionado por el usuario.
Si todo funcionó, verá que el texto seleccionado ahora está vinculado en las vistas Editor visual y Texto, con la clase configurada en button:
Resumen
Hemos creado con éxito un plugin de WordPress que agrega un botón al editor visual TinyMCE en WordPress. Este tutorial también cubrió algunos de los conceptos básicos de la API de TinyMCE y los filtros de WordPress disponibles para las integraciones de TinyMCE.
Hemos agregado código para que cuando un usuario haga clic en nuestro botón personalizado, se le pida que seleccione un texto en el Editor visual, que luego puede vincular a una URL de su elección. Finalmente, nuestro plugin 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 plugin TinyMCE para WordPress. También puede consultar nuestra guía sobre cómo crear un plugin de WordPress específico para un sitio.
¿Te ha resultado útil??
0 / 0