Mots-clés Plugin est l'éditeur visuel par défaut, alimentant les composants texte de l'éditeur de blocs. Créer un plugin TinyMCE personnalisé vous permet d'étendre ses fonctionnalités — comme ajouter un bouton pour insérer des liens style, des shortcodes ou des éléments personnalisés — sans modifier les fichiers de base. Ceci est idéal pour les développeurs qui veulent rationaliser les workflows ou ajouter des fonctionnalités uniques. En 2026, avec l'éditeur de blocs (Gutenberg) dominant, les plugins TinyMCE restent pertinents pour l'édition classique ou les configurations hybrides. Chez Cope Business, nous construisons des plugins personnalisés comme celui-ci pour nos clients services techniques d'audit SEO améliorer la création de contenu et optimiser les performances du site.
Ce tutoriel vous permet de créer un simple plugin TinyMCE qui ajoute un bouton personnalisé pour insérer un lien avec une classe CSS spécifique (par exemple, pour les boutons). Il s'adresse aux utilisateurs ayant des connaissances de base en PHP et en JavaScript — toujours tester sur un site de mise en scène.
Exigences avant le début
- Un site WordPress local ou de mise en scène (éviter les sites en direct sans sauvegardes).
- Compétences de base en codage (PHP, JavaScript).
- Un éditeur de code comme VS Code.
- Optionnel : Connaissance de l'éditeur classique (TinyMCE est toujours utilisé en blocs).
Si vous êtes débutant, envisagez d'utiliser des plugins existants comme TinyMCE Advanced pour des fonctionnalités similaires sans codage.
Étape par étape: Création de votre plugin TinyMCE
Nous allons créer un plugin qui ajoute un bouton de la barre d'outils de bouton d'insert. Lorsqu'il est cliqué, il invite à une URL et enroule le texte sélectionné dans une balise avec classe ===button.
Étape 1: Créer le dossier de plugin et le fichier principal
- Dans votre répertoire WordPress, allez à /wp-content/plugins/.
- Créer un nouveau dossier : minimce-custom-link-class.
- À l'intérieur, créez minimce-custom-link-class.php.
Étape 2: Ajouter l'en-tête de plugin
Ouvrez minuscule-custom-link-class.php et ajoutez :
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
*/Étape 3: Mettre en place la classe de plugin
Ajouter ce code:
PHP
class TinyMCE_Custom_Link_Class {
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;Étape 4: Accrocher dans l'action Init (administrateur seulement)
À l'intérieur de construire():
PHP
if ( is_admin() ) {
add_action( 'init', array( $this, 'setup_tinymce_plugin' ) );
}Étape 5: Définir la fonction setup tinymce plugin
Ceci vérifie les autorisations et enregistre les filtres:
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' ) );
}Étape 6: Enregistrer le fichier de plugin JavaScript
PHP
function add_tinymce_plugin( $plugin_array ) {
$plugin_array['custom_link_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-link-class.js';
return $plugin_array;
}Étape 7 : Ajouter le bouton à la barre d'outils
PHP
function add_tinymce_toolbar_button( $buttons ) {
array_push( $buttons, '|', 'custom_link_class' );
return $buttons;
}Étape 8 : Créer le fichier JavaScript
Dans le dossier plugin, créez minusculement-custom-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>');
});
});
})();Étape 9: Ajouter une icône de bouton
Créez ou téléchargez un petit icon.png (16x16px) et placez-le dans le dossier plugin. Utilisez une simple icône de lien.
Étape 10: Activer et tester le plugin
- Activer le plugin Greffons.
- Modifier un message/page dans l'éditeur visuel.
- Sélectionnez texte, cliquez sur le nouveau bouton dans la barre d'outils, entrez URL — il insère un lien style.
Meilleures pratiques pour les plugins TinyMCE personnalisés
- Essai approfondi — Vérifiez sur plusieurs navigateurs et appareils.
- Sécurité — Sanitiser les entrées utilisateur dans JS/PHP pour empêcher XSS.
- Résultats — Gardez JS léger; minifiez si nécessaire.
- Mises à jour — Surveiller les changements de cœur WordPress affectant TinyMCE.
- Solutions de remplacement — Pour les non-codeurs, utiliser TinyMCE Avancé pour étendre sans plugins personnalisés.
Des plugins personnalisés comme celui-ci vous donnent un contrôle total sur l'éditeur — idéal pour les flux de travail de marque.
Réflexions finales
Créer un plugin WordPress TinyMCE est une façon gratifiante de personnaliser l'éditeur et de rationaliser la création de contenu. Suivez ces étapes pour un simple bouton, ou élargissez à des fonctionnalités plus complexes.
Cela améliore la productivité et l'expérience utilisateur.
Besoin d'aide pour créer des plugins personnalisés, optimiser votre éditeur ou améliorer les performances globales du site ? Contacter Cope Business pour une consultation SEO technique gratuite — nous allons construire des solutions sur mesure pour élever votre site WordPress.
