Comment créer un plugin WordPress TinyMCE

Si vous êtes développeur WordPress, il est possible que vous ayez à personnaliser ou à développer WordPress Visual Editor. Par exemple, vous pouvez ajouter un bouton à la barre d'outils de Visual Editor pour permettre à votre client d'insérer facilement une zone de texte ou un appel à un bouton d'action sans écrire de code HTML. Dans cet article, nous allons vous montrer comment créer un plugin TinyMCE dans WordPress..

Exigences

Ce tutoriel est destiné aux utilisateurs avancés. Si vous êtes un utilisateur débutant qui souhaite simplement étendre l'éditeur visuel, consultez le plug-in TinyMCE Advanced ou consultez ces conseils d'utilisation de l'éditeur visuel WordPress..

Pour ce tutoriel, vous aurez besoin de compétences de base en codage et d’un accès à une installation WordPress où vous pourrez le tester..

C'est une mauvaise pratique de développer des plugins sur un site web en direct. Une erreur mineure dans le code peut rendre votre site inaccessible. Mais si vous devez le faire sur un site actif, sauvegardez au moins WordPress en premier.

Créer votre premier plugin TinyMCE

Nous allons commencer par créer un plugin WordPress pour enregistrer notre bouton personnalisé de la barre d’outils TinyMCE. Lorsque vous cliquez dessus, ce bouton permettra à l'utilisateur d'ajouter un lien avec une classe CSS personnalisée.

Le code source sera fourni en entier à la fin de cet article, mais jusque-là, créons le plugin pas à pas..

Tout d’abord, vous devez créer un répertoire dans wp-content / plugins dossier de votre installation WordPress. Nommez ce dossier tinymce-custom-link-class.

A partir de là, nous allons commencer à ajouter notre code de plugin.

L'en-tête du plugin

Créez un nouveau fichier dans le répertoire du plugin que nous venons de créer et nommez ce fichier. tinymce-custom-link-class.php. Ajoutez ce code au fichier et enregistrez-le.

 / ** * Nom du plugin: Classe de liens personnalisés TinyMCE * URI du plugin: http://wpbeginner.com * Version: 1.0 * Auteur: WPBeginner * URI de l'auteur: https://www.wpbeginner.com * Description: Un simple plugin TinyMCE ajouter une classe de liens personnalisée dans Visual Editor * Licence: GPL2 * / 

Ceci est juste un commentaire PHP, qui indique à WordPress le nom du plugin, ainsi que l'auteur et une description.

Dans la zone d’administration de WordPress, activez votre nouveau plug-in en accédant à Plug-ins> Plug-ins installés, puis en cliquant sur Activer en regard du plug-in TinyMCE Custom Link Class:

Configurer notre classe de plugins

Si deux plugins WordPress ont des fonctions portant le même nom, cela provoquerait une erreur. Nous allons éviter ce problème en ayant nos fonctions encapsulées dans une classe.

 class TinyMCE_Custom_Link_Class / ** * Constructeur. Appelé lorsque le plugin est initialisé. * / function __construct ()  $ tinymce_custom_link_class = new TinyMCE_Custom_Link_Class; 

Cela crée notre classe PHP, avec une construction, qui est appelée lorsque nous atteignons la ligne $ tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;.

Les fonctions que nous ajoutons dans cette classe ne devraient pas entrer en conflit avec d’autres plugins WordPress.

Démarrer la configuration de notre plugin TinyMCE

Ensuite, nous devons dire à TinyMCE que nous pourrions vouloir ajouter notre bouton personnalisé à la barre d’outils de Visual Editor. Pour ce faire, nous pouvons utiliser les actions de WordPress - en particulier le init action.

Ajoutez le code suivant dans votre plugin __construction() une fonction:

 if (is_admin ()) add_action ('init', array ($ this, 'setup_tinymce_plugin'));  

Cela vérifie si nous sommes dans l'interface d'administration WordPress. Si nous sommes, alors il demande à WordPress de lancer le setup_tinymce_plugin fonctionner dans notre classe lorsque WordPress a terminé sa routine de chargement initiale.

Ensuite, ajoutez le setup_tinymce_plugin une fonction:

 / ** * Vérifie si l'utilisateur actuel peut modifier des publications ou des pages et utilise Visual Editor * Si c'est le cas, ajoutez des filtres pour que nous puissions enregistrer notre plugin * / function setup_tinymce_plugin () // Vérifiez si l'utilisateur WordPress connecté est connecté. peut éditer des articles ou des pages // Sinon, n'enregistrez pas notre plugin TinyMCE if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) return;  // Vérifiez si l'utilisateur WordPress connecté a le Visual Editor activé // Sinon, n'enregistrez pas notre plug-in TinyMCE if (get_user_option ('rich_editing')! == 'true') return;  // Configuration de certains filtres add_filter ('mce_external_plugins', array (& $ this, 'add_tinymce_plugin')); add_filter ('mce_buttons', array (& $ this, 'add_tinymce_toolbar_button'));  

Cela vérifie si l'utilisateur WordPress actuellement connecté peut modifier des publications ou des pages. S'ils ne le peuvent pas, il est inutile d'enregistrer notre plug-in TinyMCE pour cet utilisateur, car ils ne verront jamais l'éditeur visuel..

Nous vérifions ensuite si l'utilisateur utilise Visual Editor, car certains utilisateurs de WordPress désactivent cette option via Utilisateurs> Votre profil. Encore une fois, si l'utilisateur n'utilise pas Visual Editor, nous retournons (exit) la fonction, car nous n'avons rien d'autre à faire..

Enfin, nous ajoutons deux filtres WordPress - mce_external_plugins et mce_buttons, appeler nos fonctions qui chargeront le fichier Javascript requis pour TinyMCE et ajouter un bouton à la barre d’outils TinyMCE.

Enregistrement du fichier et du bouton Javascript dans l'éditeur visuel

Allons-y et ajoutons le add_tinymce_plugin une fonction:

 / ** * Ajoute un fichier JS compatible avec les plugins à l'instance de TinyMCE / Visual Editor * * @param array $ plugin_array Tableau de plugins TinyMCE enregistrés * @return array Tableau modifié de plugins TinyMCE enregistrés * / function add_tinymce_plugin ($ plugin_array) $ plugin_array ['custom_link_class'] = plugin_dir_url (__FILE__). 'tinymce-custom-link-class.js'; return $ plugin_array;  

Cette fonction indique à TinyMCE qu’il doit charger les fichiers Javascript stockés dans le $ plugin_array tableau. Ces fichiers Javascript indiqueront à TinyMCE quoi faire..

Nous devons également ajouter du code à la add_tinymce_toolbar_button fonction, pour dire à TinyMCE le bouton que nous aimerions ajouter à la barre d’outils:

 / ** * Ajoute un bouton à l'éditeur TinyMCE / Visual Editor sur lequel l'utilisateur peut cliquer * pour insérer un lien avec une classe CSS personnalisée. * * @param array $ buttons Tableau de boutons TinyMCE enregistrés * @return array Tableau modifié de boutons TinyMCE enregistrés * / function add_tinymce_toolbar_button ($ boutons) array_push ($ boutons, '|', 'custom_link_class'); retourne les boutons $;  

Cela place deux éléments sur le tableau de boutons TinyMCE: un séparateur (|) et le nom de programme de notre bouton (custom_link_class).

Enregistrez votre plugin, puis modifiez une page ou une publication pour afficher l'éditeur visuel. Il y a de fortes chances que la barre d'outils ne soit pas affichée pour le moment:

Ne vous inquiétez pas. Si nous utilisons la console d'inspecteur de notre navigateur Web, nous verrons qu'une erreur 404 et un avis ont été générés par TinyMCE, nous indiquant qu'il ne peut pas trouver notre fichier Javascript..

C'est bien. Cela signifie que nous avons enregistré notre plugin personnalisé TinyMCE avec succès et que nous devons maintenant créer le fichier Javascript pour indiquer à TinyMCE quoi faire..

Créer le plugin Javascript

Créez un nouveau fichier dans votre wp-content / plugins / tinymce-custom-link-class dossier et nommez-le tinymce-custom-link-class.js. Ajoutez ce code dans votre fichier js:

 (function () tinymce.PluginManager.add ('custom_link_class', fonction_link_class ', fonction (éditeur, url) );) (); 

Ceci appelle la classe TinyMCE Plugin Manager, que nous pouvons utiliser pour effectuer un certain nombre d’actions liées au plugin TinyMCE. Plus précisément, nous ajoutons notre plugin à TinyMCE en utilisant le ajouter une fonction.

Ceci accepte deux articles. le nom du plugin (custom_link_class) et une fonction anonyme.

Si vous connaissez le concept de fonctions de codage, une fonction anonyme est simplement une fonction sans nom. Par exemple, fonction foobar () … est une fonction que nous pourrions appeler ailleurs dans notre code en utilisant foobar ().

Avec une fonction anonyme, nous ne pouvons pas appeler cette fonction ailleurs dans notre code. Elle est appelée uniquement au point où ajouter() la fonction est appelée.

Enregistrez votre fichier Javascript, puis modifiez une page ou une publication pour afficher l'éditeur visuel. Si tout a fonctionné, vous verrez la barre d’outils:

Pour l'instant, notre bouton n'a pas été ajouté à cette barre d'outils. C'est parce que nous avons seulement dit à TinyMCE que nous sommes un plugin personnalisé. Nous devons maintenant dire à TinyMCE quoi faire - c’est-à-dire ajouter un bouton à la barre d’outils.

Mettez à jour votre fichier Javascript en remplaçant votre code existant par le suivant:

 (function () tinymce.PluginManager.add ('custom_link_class', fonction (editor, url) // Ajouter un bouton à la barre d'outils de l'éditeur visuel editor.addButton ('custom_link_class', titre: 'Insérer un lien de bouton', cmd: ' custom_link_class ',););) (); 

Notez que notre fonction anonyme a deux arguments. Le premier est le éditeur exemple - il s’agit de l’éditeur visuel TinyMCE. De la même manière, nous pouvons appeler diverses fonctions sur le Gestionnaire de plugins, nous pouvons également appeler diverses fonctions sur le éditeur. Dans ce cas, nous appelons le addButton fonction, pour ajouter un bouton à la barre d'outils.

Enregistrez votre fichier Javascript et revenez dans votre éditeur visuel. À première vue, rien ne semble avoir changé. Toutefois, si vous passez le curseur de la souris sur l'icône située à l'extrême droite de la rangée supérieure, une infobulle apparaît:

Nous avons réussi à ajouter un bouton à la barre d’outils, mais il nécessite une image. Ajoutez le paramètre suivant à la addButton fonction, sous le Titre: ligne:

image: url + '/icon.png', 

url est l'URL de notre plugin. C'est pratique si nous voulons référencer un fichier image dans notre dossier de plug-ins, car nous pouvons ajouter le nom du fichier image à l'URL. Dans ce cas, nous aurons besoin d’une image appelée icon.png dans le dossier de notre plugin. Utilisez l'icône ci-dessous:

Rechargez notre Visual Editor, et vous verrez maintenant votre bouton avec l’icône:

Définir une commande à exécuter

Pour le moment, si vous cliquez sur le bouton, rien ne se passera. Ajoutons une commande à TinyMCE pour lui dire quoi faire quand on clique sur notre bouton.

Dans notre fichier Javascript, ajoutez le code suivant sous la fin du editor.addButton section:

 // Ajouter une commande lorsque le bouton est cliqué editor.addCommand ('custom_link_class', function () alert ('Le bouton a été cliqué!');); 

Rechargez notre Visual Editor, cliquez sur le bouton et une alerte apparaît confirmant que nous venons de cliquer sur le bouton:

Remplaçons l'alerte par une invite demandant à l'utilisateur le lien qu'il souhaite entourer du texte sélectionné dans l'éditeur visuel:

 // Ajouter une commande lorsque le bouton est cliqué editor.addCommand ('custom_link_class', function () // Vérifiez que nous avons sélectionné du texte que nous voulons lier var text = editor.selection.getContent ('format': 'html' if (text.length === 0) alert ('Veuillez sélectionner du texte à lier.'); return; // Demandez à l'utilisateur de saisir une URL var result = prompt ('Entrez le lien'); if (! result) // Utilisateur annulé - exit return; if (result.length === 0) // l'utilisateur n'a pas entré d'URL - exit return; // Insérer le texte sélectionné dans l'éditeur, le renvoyer dans une balise d'ancrage editor.execCommand ('mceReplaceContent', false, '' + text + '');); 

Ce bloc de code effectue quelques actions.

Premièrement, nous vérifions si l’utilisateur a sélectionné du texte à lier dans Visual Editor. Sinon, ils verront une alerte leur disant de sélectionner du texte à lier.

Ensuite, nous leur demandons d’entrer un lien, en vérifiant à nouveau s’ils l’ont fait. S'ils annulent ou n'entrent rien, nous ne faisons rien d'autre.

Enfin, nous courons le execCommand fonction sur l'éditeur TinyMCE, en particulier l'exécution du mceReplaceContent action. Ceci remplace le texte sélectionné par notre code HTML, qui comprend un lien d'ancrage avec class = "bouton", en utilisant le texte sélectionné par l'utilisateur..

Si tout fonctionne, vous verrez que le texte sélectionné est maintenant lié dans les vues Visual Editor et Text, avec la classe définie sur bouton:

Résumé

Nous avons créé avec succès un plugin WordPress qui ajoute un bouton à l’éditeur visuel TinyMCE dans WordPress. Ce tutoriel a également abordé certaines des bases de l'API TinyMCE et des filtres WordPress disponibles pour les intégrations TinyMCE..

Nous avons ajouté du code afin que lorsqu'un utilisateur clique sur notre bouton personnalisé, il lui soit demandé de sélectionner du texte dans Visual Editor, qu'il peut ensuite lier à une URL de son choix. Enfin, notre plugin remplace ensuite le texte sélectionné par une version liée contenant une classe CSS personnalisée appelée bouton.

Nous espérons que ce tutoriel vous a aidé à apprendre à créer un plugin WordPress TinyMCE. Vous pouvez également consulter notre guide sur la création d'un plugin WordPress spécifique au site..

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.