Cómo crear un plugin de WordPress TinyMCE

Si usted es un desarrollador de WordPress, entonces en algún momento puede que se encuentre personalizando o extendiendo el Editor Visual de WordPress. Por ejemplo, puede añadir un botón a la barra de herramientas de Visual Editor para permitir a su cliente insertar fácilmente 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 plugin TinyMCE en WordPress.

Requisitos

Este tutorial está dirigido a usuarios avanzados. Si usted es un usuario de nivel principiante que sólo quiere ampliar el editor visual, por favor eche un vistazo al plugin TinyMCE Advanced o eche un vistazo a estos consejos sobre el uso del editor visual WordPress.

Para este tutorial, necesitará conocimientos básicos de codificación, acceso a una instalación de WordPress donde podrá probarla.

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, entonces al menos haga una copia de seguridad de WordPress primero.

Creación del primer plugin TinyMCE

Comenzaremos creando un WordPressplugin para registrar nuestro botón personalizado de la barra de herramientas TinyMCE. Al hacer clic en este botón, el usuario podrá añadir un enlace con una clase CSS personalizada.

El código fuente será proporcionado en su totalidad al final de este artículo, pero hasta entonces, vamos a crear el plugin paso a paso.

Primero, necesita crear un directorio en la carpeta wp-content/plugins de su instalación de WordPress. Nombre esta carpeta tinymce-custom-link-class.

A partir de aquí, empezaremos a añadir nuestro código de plugin.

El encabezado del plugin

Cree un nuevo archivo en el directorio de plugins que acabamos de crear y nombre este archivo tinymce-custom-link-class.php. Añada este código al archivo y guárdelo.

123456789/*** Nombre del plugin: TinyMCE Custom Link Class* Plugin URI: http://Topmanuales.com* Versión: 1.0* Autor: TopManuales* Autor URI: https://www.Topmanuales.com* Descripción: Un simple plugin TinyMCE para añadir una clase de enlace personalizada en la licencia del Editor Visual*: GPL2*//

Esto es sólo un comentario 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 Plugins> Plugins instalados, y luego haga clic en Activar al lado del plugin TinyMCE Custom Link Class:

Configurando Nuestra Clase de Plugin

Si dos plugins de WordPress tienen funciones con el mismo nombre, entonces esto causaría un error. Evitaremos este problema al tener nuestras funciones envueltas en una clase.

12345678910111112clase TinyMCE_Custom_Link_Class {/*** Constructor. Llamado cuando el plugin es inicializado.*/función __construct() {}}}$tinymce_custom_link_class = nuevo TinyMCE_Custom_Link_Class;

Esto crea nuestra clase PHP, junto con una construcción, que se llama cuando alcanzamos la línea $tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;.

Cualquier función que agreguemos dentro de esta clase no debe entrar en conflicto con otros plugins de WordPress.

Comience a configurar nuestro plugin TinyMCE

A continuación, necesitamos decirle a TinyMCE que es posible que queramos añadir nuestro botón personalizado a la barra de herramientas del Editor visual. Para hacer esto, podemos usar las acciones de WordPress – específicamente, la acción init.

Añada el siguiente código dentro de la función __construct() de su plugin:

123if ( is_admin()) ) {add_action( ‘init’, array( $this, ‘setup_tinymce_plugin’);}; </ i&gt.

Esto comprueba si estamos en la interfaz de administración de WordPress. Si es así, entonces le pide a WordPress que ejecute la función setup_tinymce_plugin dentro de nuestra clase cuando WordPress haya terminado su rutina de carga inicial.

A continuación, añada la función setup_tinymce_plugin:

1234567891011121314141516171818192021222324/*** Compruebe si el usuario actual puede editar Mensajes o Páginas, y si está usando el Editor Visual* Si es así, agregue algunos filtros para que podamos registrar nuestro plugin*/ función setup_tinymce_plugin() {/// Compruebe si el usuario de WordPress puede editar Mensajes o Páginas/// Si no, no registre nuestro plugin TinyMCE ( current_user_can( ‘edit_posts’) && ! current_user_can( ‘edit_pages’) Compruebe si el usuario de WordPress que ha iniciado sesión tiene activado el Editor Visual/// Si no, no registre nuestro plugin TinyMCE ( get_user_option( ‘rich_editing’) !== Configurar algunos filtros-add_filternal_plugins’, array( &$this, ‘add_tinymce_plugin’);add_filter( ‘mce_buttons’, array( &$this, ‘add_tinymce_toolbar_button’);};}

Esto comprueba si el usuario actual conectado en WordPress puede editar Mensajes 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 comprobamos si el usuario está usando el Editor Visual, ya que algunos usuarios de WordPress lo desactivan a través de Usuarios> Su Perfil. De nuevo, si el usuario no está usando el Editor Visual, le devolvemos la función, ya que no necesitamos hacer nada más.

Finalmente, añadimos dos filtros de WordPress – mce_external_plugins y mce_buttons, para llamar a nuestras funciones que cargarán el archivo Javascript necesario para TinyMCE, y añadiremos un botón a la barra de herramientas de TinyMCE.

Registro del archivo y botón Javascript en el editor visual

Vamos a añadir la función add_tinymce_plugin:

12345678910111213/*** Añade un archivo JS compatible con el plugin TinyMCE a la instancia de TinyMCE / Visual Editor** @param array $plugin_array Array of registered TinyMCE Plugins* @return array Array Array Modified array of registered TinyMCE Plugins*/function add_tinymce_plugin( $plugin_array) {$plugin_array_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 la matriz $plugin_array. Estos archivos Javascript le dirán a TinyMCE qué hacer.

También necesitamos añadir algún código a la función add_tinymce_toolbar_button, para informar a TinyMCE sobre el botón que nos gustaría añadir a la barra de herramientas:

123456789101112/*** Añade un botón al Editor Visual / TinyMCE en el que el usuario puede hacer clic* para insertar un enlace con una clase CSS personalizada.** Matriz de botones $@param Matriz de botones TinyMCE registrados* Matriz de retorno Matriz modificada de botones TinyMCE registrados*/ función add_tinymce_toolbar_button( $buttons) {array_push( $buttons, |’, ` custom_link_class’);return $buttons;}.

Esto empuja dos elementos sobre la matriz de botones TinyMCE: un separador (|), y el nombre programático de nuestro botón (custom_link_class).

Guarda tu plugin, y luego edita una Página o Post para ver el Editor Visual. Lo más probable es que la barra de herramientas no se muestre ahora mismo:

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, diciéndonos que no puede encontrar nuestro archivo Javascript.

Eso es bueno – 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 carpeta wp-content/plugins/tinymce-custom-link-class, y llámelo tinymce-custom-link-class.js. Añade este código en tu archivo js:

12345(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 plugins TinyMCE

Valora el post

Deja un comentario