Wordpress TinyMCE Plugin es el editor visual predeterminado, potenciando los componentes de texto del editor de bloques. Crear un plugin personalizado TinyMCE le permite ampliar su funcionalidad —como agregar un botón para insertar enlaces de estilo, códigos cortos o elementos personalizados— sin modificar archivos de núcleo. Esto es ideal para los desarrolladores que desean simplificar los flujos de trabajo o añadir características únicas. En 2026, con el editor de bloques (Gutenberg), los plugins TinyMCE siguen siendo relevantes para la edición de estilo clásico o las configuraciones híbridas. En Cope Business, construimos plugins personalizados como este para clientes durante nuestro servicios técnicos de auditoría de la SEO mejorar la creación de contenido y optimizar el rendimiento del sitio.
Este tutorial te permite crear un sencillo plugin TinyMCE que añade un botón personalizado para insertar un enlace con una clase CSS específica (por ejemplo, para botones). Está dirigido a usuarios con conocimientos básicos de PHP y JavaScript, siempre prueba en un sitio de puesta en escena.
Requisitos Antes de comenzar
- Un sitio de WordPress local o estancado (evitar sitios en vivo sin respaldos).
- Destrezas básicas de codificación (PHP, JavaScript).
- Un editor de códigos como VS Code.
- Opcional: Conocimiento del editor clásico (TinyMCE todavía se utiliza en bloques).
Si eres un principiante, considera usar plugins existentes como TinyMCE Advanced para características similares sin codificación.
Paso a paso: Creando tu TinyMCE Plugin
Crearemos un plugin que añade un botón de barra de herramientas «Insert Button Link». Al hacer clic, pide una URL y envuelve texto seleccionado en una etiqueta con class=»button».
Paso 1: Crear la carpeta de plugin y el archivo principal
- En su directorio de WordPress, vaya a /wp-content/plugins/.
- Cree una nueva carpeta: pequeña clase de enlace de fondo.
- Dentro, crea minúsculas y acostumbradas.php.
Paso 2: Agregue el encabezado Plugin
Abra minúscula-costo-enlace-link-class.php y añadir:
PHP
/**
* Plugin Name: TinyMCE Custom Link Class
* Plugin URI: https://www.copebusiness.com
* Version: 1.0
* Author: Cope Business
* Author URI: https://www.copebusiness.com
* Description: A simple TinyMCE Plugin to add a custom link class in the Visual Editor
* License: GPL2
*/Paso 3: Configurar la clase de plugin
Añada este código:
PHP
class TinyMCE_Custom_Link_Class {
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;Paso 4: Introducir en la acción de entrada (sólo admin)
Dentro construct():
PHP
if ( is_admin() ) {
add_action( 'init', array( $this, 'setup_tinymce_plugin' ) );
}Paso 5: Defina la función setup tinymce plugin
Esto comprueba permisos y registra filtros:
PHP
function setup_tinymce_plugin() {
if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
return;
}
if ( get_user_option( 'rich_editing' ) !== 'true' ) {
return;
}
add_filter( 'mce_external_plugins', array( $this, 'add_tinymce_plugin' ) );
add_filter( 'mce_buttons', array( $this, 'add_tinymce_toolbar_button' ) );
}Paso 6: Registrar el archivo JavaScript Plugin
PHP
function add_tinymce_plugin( $plugin_array ) {
$plugin_array['custom_link_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-link-class.js';
return $plugin_array;
}Paso 7: Añadir el botón a la barra de herramientas
PHP
function add_tinymce_toolbar_button( $buttons ) {
array_push( $buttons, '|', 'custom_link_class' );
return $buttons;
}Paso 8: Crear el archivo JavaScript
En la carpeta plugin, crear minúsculas-costo-link-class.js:
JavaScript
(function() {
tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {
editor.addButton('custom_link_class', {
title: 'Insert Button Link',
cmd: 'custom_link_class',
image: url + '/icon.png' // Add an icon.png file to the folder
});
editor.addCommand('custom_link_class', function() {
var text = editor.selection.getContent({ 'format': 'html' });
if ( text.length === 0 ) {
alert( 'Please select some text to link.' );
return;
}
var result = prompt('Enter the link');
if ( !result || result.length === 0 ) {
return;
}
editor.execCommand('mceReplaceContent', false, '<a class="button" href="' + result + '">' + text + '</a>');
});
});
})();Paso 9: Añadir un icono de botón
Crear o descargar un pequeño icono.png (16x16px) y colocarlo en la carpeta plugin. Utilice un icono de enlace simple.
Paso 10: Activar " Prueba el plugin
- Activa el plugin en Plugins.
- Editar un post/página en el editor visual.
- Seleccione texto, haga clic en el botón nuevo en la barra de herramientas, introduzca URL — inserta un enlace con estilo.
Las mejores prácticas para Plugins de TinyMCE personalizados
- Test Thoroughly — Comprueba múltiples navegadores y dispositivos.
- Seguridad — Saque las entradas de los usuarios en la JS/PHP para prevenir XSS.
- Ejecución - Mantener el peso ligero de la JS; minificar si es necesario.
- Actualizaciones — Monitor para los cambios de núcleo de WordPress que afectan a TinyMCE.
- Alternativas — Para los nocodificadores, utilice TinyMCE Avanzado para extender sin plugins personalizados.
Plugins personalizados como este le dan el control completo sobre el editor — gran para los flujos de trabajo de marca.
Pensamientos finales
Crear un plugin de WordPress TinyMCE es una manera gratificante para personalizar el editor y simplificar la creación de contenido. Siga estos pasos para un botón simple, o amplíe a características más complejas.
Esto aumenta la productividad y la experiencia del usuario.
¿Necesita ayuda para crear plugins personalizados, optimizar su editor, o mejorar el rendimiento global del sitio? Contacto Cope Business para una consulta técnica SEO gratuita — vamos a construir soluciones personalizadas para elevar su sitio WordPress.
