Aujourd’hui je reviens afin de vous parler d’une « problématique » que j’ai eu dans le développement de shortcodes sur WordPress.
Je ne sais pas si vous avez eu à développer pour un site média mais les shortcodes sur WordPress sont un outil indispensables pour styliser et ajouter des fonctionnalités pour un article. Sauf que là est le problème : plus vous avez de shortcodes plus il est difficile de les garder en tête. C’est pour cela qu’une bonne pratique est d’ajouter des boutons sur l’éditeur TinyMCE de WordPress !
Mais il n’est pas simple (enfin si si on met des post-it sur son bureau) lorsque que l’on est sur de multiple tâches différentes de penser à rajouter le bouton dans l’éditeur et puis même cela rajoute toujours quelques lignes à vos fichiers pour finir à plusieurs centaines de lignes pour presque faire la même chose.
Ajouter un shortcode ainsi qu’un bouton sur TinyMCE sans gestionnaire de shortcodes
Pour cette première partie je vais vous montrer comment de base ajouter un shortcode sur WordPress ainsi qu’un bouton pour insérer ce shortcode dans l’éditeur afin que vous visualisez le nombre de ligne de code que cela engendre.
Pour commencer nous allons ajouter à votre plugin ou à votre thème un shortcode que l’on va appeler « Hello World ». Ce shortcode va juste afficher « Hello World » lorsque on l’appellera.
Pour cela utilisez la fonction add_shortcode de WordPress.
[pastacode lang= »php » manual= »%3C%3Fphp%0Afunction%20call_hello_world()%7B%0A%20%20%20%20echo%20%22Hello%20World%22%3B%0A%7D%0Aadd_shortcode(‘hello-world’%2C%20%22call_hello_world%22)%3B » message= » » highlight= » » provider= »manual »/]
Et maintenant allons ajouter le bouton sur TinyMCE. Tout d’abord ajouter le bouton dans la liste des boutons de l’éditeur à travers le filtre « mce_buttons ». Ces lignes permettent juste d’informer TinyMCE des ID de boutons qui vont être affichés ou supprimés. Mais en rien on informe TinyMCE de l’ajout du bouton dans le code Javascript.
[pastacode lang= »php » manual= »%3C%3Fphp%0Afunction%20register_mce_button(%20%24buttons%20)%7B%0A%20%20%20%20array_push(%24buttons%2C%20’hello-world’)%3B%0A%20%20%20%20return%20%24buttons%3B%0A%7D%0A%0Aif%20(%20current_user_can(%20’edit_posts’%20)%20%26%26%20current_user_can(%20’edit_pages’%20)%20)%20%7B%0A%20%20%20%20add_filter(‘mce_buttons’%2C%20’register_mce_button’%20)%3B%0A%7D » message= » » highlight= » » provider= »manual »/]
Allons maintenant ajouter le code JS afin d’ajouter le bouton. Pour cela nous devons enregistrer un nouveau plugin à TinyMCE via le filtre « mce_external_plugins ». Ce filtre va permettre d’ajouter un fichier js où l’on va configurer le plugin dans le tableau comprenant tous les plugins externes de TinyMCE.
[pastacode lang= »php » manual= »%3C%3Fphp%0A%0A%2F**%0A%20*%20Register%20the%20TinyMCE%20Plugin%0A%20*%20%40param%20%24plugin_array%0A%20*%20%40return%20mixed%0A%20*%2F%0Afunction%20ad_mce_plugin(%20%24plugin_array%20)%7B%0A%20%20%20%20%24plugin_array%5B’shortcodes_plugin’%5D%20%3D%20get_template_directory_uri().’%2Fjs%2Ftinymce%2Fshortcode-buttons.js’%3B%0A%20%20%20%20return%20%24plugin_array%3B%0A%7D%0A%0Aif%20(%20current_user_can(%20’edit_posts’%20)%20%26%26%20current_user_can(%20’edit_pages’%20)%20)%20%7B%0A%20%20%20%20add_filter(%20’mce_external_plugins’%2C%20%20’ad_mce_plugin’%20)%3B%0A%7D » message= » » highlight= » » provider= »manual »/]
Le code JS du plugin :
[pastacode lang= »javascript » manual= »(function%20()%20%7B%0A%20%20%20%20tinymce.PluginManager.add(‘shortcodes_plugin’%2C%20function%20(editor%2C%20url)%20%7B%0A%0A%20%20%20%20%20%20%20%20editor.addButton(‘hello-world’%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20’Hello%20World’%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20icon%3A%20false%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20onclick%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20editor.insertContent(%22%5Bhello-world%5D%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D)%3B%0A%0A%7D)()%3B » message= » » highlight= » » provider= »manual »/]
Nous enregistrons le plugin avec le même nom que celui mis en PHP ainsi que le bouton avec aussi le même nom que celui enregistré précédemment.
Et voilà vous avez en quelques lignes un bouton sur l’éditeur TinyMCE qui va ajouter directement le shortcode dans l’éditeur !
Les points négatifs
Imaginons que vous travaillez dans un environnement avec plus de 30 shortcodes par exemple. Et bien vous devriez faire une boucle pour la fonction add shortcode puis autre part une boucle pour l’ajout des boutons sur tinymce plus l’ajout dans le javascript… Il y a des chances que vous oubliez un élément. C’est pour cela que maintenant je vais vous expliquer ce que moi j’ai mis en place afin d’avoir un code plus propre, peut être plus long au début mais vous n’aurez plus besoin après de toucher à TinyMCE et à ses filtres.
Le principe
Le principe est assez simple : donner à une Classe la tâche d’ajouter les shortcodes qui ne seront plus une fonction mais une Classe Shortcode spécifique que nous allons créer. Chaque Shortcode aura sa classe dans lequel nous configurerons ses paramètres de shortcode ainsi que ses paramètres de TinyMCE. Nous allons donc créer des classes qui vont tous avoir une tâche différentes.
Création du système
Nous allons donc créer la Class PHP abstraite pour les Shortcodes. Nous allons l’appeler CustomShortcode.
[pastacode lang= »php » manual= »%3C%3Fphp%0A%0Aabstract%20class%20CustomShortcode%0A%7B%0A%20%20%20%20public%20static%20%24itsTag%3B%0A%0A%20%20%20%20%2F**%0A%20%20%20%20%20*%20Add%20the%20shortcode%20to%20wordpress%0A%20%20%20%20%20*%20CustomShortcode%20constructor.%0A%20%20%20%20%20*%2F%0A%20%20%20%20public%20function%20__construct()%7B%0A%20%20%20%20%20%20%20%20add_shortcode(%24this-%3EgetTag()%2C%20array(%24this%2C%20’actionShortcode’))%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20%2F**%0A%20%20%20%20%20*%20Get%20shortcode%20Tag%0A%20%20%20%20%20*%20%40return%20mixed%0A%20%20%20%20%20*%2F%0A%20%20%20%20public%20function%20getTag()%7B%0A%20%20%20%20%20%20%20%20return%20%24this%3A%3A%24itsTag%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20public%20abstract%20function%20getDefaultParams()%3B%0A%20%20%20%20public%20abstract%20function%20getMceParams()%3B%0A%0A%20%20%20%20protected%20abstract%20function%20render(%24atts%2C%20%24content)%3B%0A%0A%20%20%20%20%2F**%0A%20%20%20%20%20*%20Mix%20atts%20of%20shortcode%20and%20default%20parameters%20and%20finally%20render%20the%20shortcode%0A%20%20%20%20%20*%20%40param%20%24atts%0A%20%20%20%20%20*%20%40param%20null%20%24content%0A%20%20%20%20%20*%20%40return%20mixed%0A%20%20%20%20%20*%2F%0A%20%20%20%20public%20function%20actionShortcode(%24atts%2C%20%24content%20%3D%20null)%7B%0A%20%20%20%20%20%20%20%20%24atts%20%3D%20shortcode_atts(%24this-%3EgetDefaultParams()%2C%20%24atts%20)%3B%0A%20%20%20%20%20%20%20%20return%20%24this-%3Erender(%24atts%2C%20%24content)%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20%2F**%0A%20%20%20%20%20*%20Generate%20shortcode%20string%0A%20%20%20%20%20*%20%40param%20string%20%24tag%0A%20%20%20%20%20*%20%40param%20array%20%24params%0A%20%20%20%20%20*%20%40param%20string%20%24content%0A%20%20%20%20%20*%20%40return%20string%0A%20%20%20%20%20*%2F%0A%20%20%20%20public%20static%20function%20__createShortcodeString(%24tag%2C%20%24params%2C%20%24content)%7B%0A%20%20%20%20%20%20%20%20%24start%20%3D%20’%5B’.%24tag%3B%0A%0A%20%20%20%20%20%20%20%20foreach(%24params%20as%20%24key%20%3D%3E%20%24value)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24start%20.%3D%20’%20′.%24key.’%3D%22′.%24value.’%22’%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%24start%20.%3D%20’%5D’%3B%0A%20%20%20%20%20%20%20%20%24end%20%3D%20’%5B%2F’.%24tag.’%5D’%3B%0A%20%20%20%20%20%20%20%20return%20%24start.%24content.%24end%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20%2F**%0A%20%20%20%20%20*%20Generate%20the%20shortcode%20string%0A%20%20%20%20%20*%20%40return%20string%0A%20%20%20%20%20*%2F%0A%20%20%20%20public%20function%20createDefaultShortcodeString()%7B%0A%20%20%20%20%20%20%20%20return%20%24this%3A%3A__createShortcodeString(%24this%3A%3A%24itsTag%2C%20%24this-%3EgetDefaultParams()%2C%20 »)%3B%0A%20%20%20%20%7D%0A%0A%7D » message= » » highlight= » » provider= »manual »/]
- $itsTag correspond au tag du shortcode, ici cela serait « hello-world »,
- Le constructeur va lui ajouter le shortcode dans WordPress,
- Chaque shortcode devra implémenter les fonctions « getDefaultParams » et « getMceParams » qui permettent de configurer les paramètres par défaut du shortcode ainsi que les paramètres pour l’éditeur de TinyMCE ainsi que la fonction « render » qui permet d’afficher le contenu du shortcode,
- la fonction « actionShortcode » est la fonction appelée par chaque « add_shortcode » et permet d’appeler la fonction render du shortcode. Cela permet d’automatiser la fusion des attributs du shortcode afin de ne pas devoir refaire appel à la fonction shortcode_atts à chaque fois dans le render 🙂
- « __createShortcodeString » permet de générer le shortcode en version text, pour notre dernier shortcode cela générerait « [hello-world] »
Voilà nous avons donc notre class Shortcode dont chaque nouveau shortcode à ajouter à WordPress devra étendre. Cela permet bien de séparer chaque shortcode afin de ne pas avoir toutes les fonctions de shortcodes dans functions.php ou un autre fichier.
Il nous reste deux choses à faire :
- Créer une classe qui va sauvegarder les shortcodes ajoutés
- Créer la classe qui intégrera les boutons sur TinyMCE
Créons donc une classe qui va instancier/sauvegarder les shortcodes ainsi que d’appeler la classe qui ajoutera les boutons des shortcodes dans TinyMCE :
[pastacode lang= »php » manual= »%3C%3Fphp%0A%0Aclass%20ClassA%0A%7B%0A%20%20%20%20public%20static%20%24shortcodes%20%3D%20array()%3B%0A%20%20%20%20public%20function%20__construct()%7B%0A%20%20%20%20%20%20%20self%3A%3A%24shortcodes%20%3D%20array(%0A%20%20%20%20%20%20%20%20%20%20%20%20HellowWorldShortcode%3A%3A%24itsTag%20%3D%3E%20new%20HellowWorldShortcode()%2C%0A%20%20%20%20%20%20%20%20)%3B%0A%0A%20%20%20%20%20%20%20%20add_action(‘admin_init’%2C%20function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24tinyMce%20%3D%20new%20TinyMceIntegrator(self%3A%3A%24shortcodes)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24tinyMce-%3EaddShortcodeToTinyMce()%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%0A%7D » message= » » highlight= » » provider= »manual »/]
Et créons la classe qui va intégrer les boutons sur TinyMCE dont je vais expliquer en détail :
[pastacode lang= »php » manual= »%3C%3Fphp%0A%0Aclass%20TinyMceIntegrator%0A%7B%0A%20%20%20%20%2F**%0A%20%20%20%20%20*%20%40var%20CustomShortcodes%5B%5D%0A%20%20%20%20%20*%2F%0A%20%20%20%20private%20%24shortcodes%3B%0A%0A%20%20%20%20public%20function%20__construct(array%20%24shortcodes)%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%24this-%3Eshortcodes%20%3D%20%24shortcodes%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20%2F**%0A%20%20%20%20%20*%20Add%20filter%20and%20action%20for%20TinyMCE%0A%20%20%20%20%20*%20%40param%20array%20%24shortcodes%0A%20%20%20%20%20*%2F%0A%20%20%20%20public%20function%20addShortcodeToTinyMce()%7B%0A%20%20%20%20%20%20%20%20if%20(%20current_user_can(%20’edit_posts’%20)%20%26%26%20current_user_can(%20’edit_pages’%20)%20)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20add_filter(‘mce_buttons’%2C%20array(%24this%2C%20’registerMceButtons’))%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20add_filter(%20’mce_external_plugins’%2C%20array(%24this%2C%20’addMCEPlugin’)%20)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20foreach%20(%20array(‘post.php’%2C’post-new.php’)%20as%20%24hook%20)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20add_action(%20%22admin_head-%24hook%22%2C%20array(%24this%2C%20’initVarJavascript’)%20)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20%2F**%0A%20%20%20%20%20*%20Add%20all%20Shortcodes%20buttons%20to%20TinyMCE%0A%20%20%20%20%20*%20%40param%20%24buttons%0A%20%20%20%20%20*%20%40return%20mixed%0A%20%20%20%20%20*%2F%0A%20%20%20%20public%20function%20registerMceButtons(%20%24buttons%20)%7B%0A%20%20%20%20%20%20%20%20global%20%24sanitizer%3B%0A%20%20%20%20%20%20%20%20foreach(%24this-%3Eshortcodes%20as%20%24aShortcode)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20array_push(%24buttons%2C%20%24aShortcode-%3EgetTag())%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FAdd%20parent%20buttons%0A%20%20%20%20%20%20%20%20%20%20%20%20%24mceParam%20%3D%20%24aShortcode-%3EgetMceParams()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20if(%24mceParam%5B’parent’%5D%20!%3D%3D%20false)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24sanitizeParent%20%3D%20%24sanitizer-%3EsimpleSanitize(%24mceParam%5B’parent’%5D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(!in_array(%24sanitizeParent%2C%20%24buttons))%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20array_push(%24buttons%2C%20%24sanitizeParent)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20return%20%24buttons%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20%2F**%0A%20%20%20%20%20*%20Register%20the%20TinyMCE%20Plugin%0A%20%20%20%20%20*%20%40param%20%24plugin_array%0A%20%20%20%20%20*%20%40return%20mixed%0A%20%20%20%20%20*%2F%0A%20%20%20%20public%20function%20addMCEPlugin(%20%24plugin_array%20)%7B%0A%20%20%20%20%20%20%20%20%24plugin_array%5B’shortcodes_plugin’%5D%20%3D%20get_template_directory_uri().’%2Fshortcode-buttons.js’%3B%0A%20%20%20%20%20%20%20%20return%20%24plugin_array%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20%2F**%0A%20%20%20%20%20*%20Initialize%20javascript%20var%20for%20TinyMCE%20plugin%0A%20%20%20%20%20*%2F%0A%20%20%20%20public%20function%20initVarJavascript()%7B%0A%20%20%20%20%20%20%20%20global%20%24sanitizer%3B%0A%3F%3E%0A%20%20%20%20%20%20%20%20%3Cscript%20type%3D’text%2Fjavascript’%20id%3D%22shortcode_tmce_buttons%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20buttonsNotParent%20%3D%20%7B%7D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20buttonsWithParent%20%3D%20%7B%7D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20textParent%20%3D%20%7B%7D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Finitialize%20if%20parent%0A%3C%3Fphp%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Floop%20shortcodes%20and%20get%20tinyMCE%20param%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20first%20loop%20is%20to%20init%20array%20of%20parent%0A%20%20%20%20%20%20%20%20%20%20%20%20foreach(%24this-%3Eshortcodes%20as%20%24aShortcode)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24mceParam%20%3D%20%24aShortcode-%3EgetMceParams()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(%24mceParam%5B’parent’%5D%20!%3D%3D%20false)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24sanitizeParent%20%3D%20%20%24sanitizer-%3EsimpleSanitize(%24mceParam%5B’parent’%5D)%3B%0A%3F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20buttonsWithParent.%3C%3F%3D%20%24sanitizeParent%20%3F%3E%20%3D%20%5B%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20textParent.%3C%3F%3D%20%24sanitizeParent%20%3F%3E%20%3D%20%22%3C%3F%3D%20%24mceParam%5B’parent’%5D%20%3F%3E%22%3B%0A%3C%3Fphp%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%3F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fpush%20if%20parent%20and%20finish%0A%3C%3Fphp%0A%20%20%20%20%20%20%20%20%20%20%20%20foreach(%24this-%3Eshortcodes%20as%20%24aShortcode)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24mceParam%20%3D%20%24aShortcode-%3EgetMceParams()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24defaultShortcodeString%20%3D%20%24aShortcode-%3EcreateDefaultShortcodeString()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24tagShortcode%20%3D%20%24aShortcode%3A%3A%24itsTag%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(%24mceParam%5B’parent’%5D%20!%3D%3D%20false)%7B%0A%3F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20buttonsWithParent.%3C%3Fphp%20echo%20%24sanitizer-%3EsimpleSanitize(%24mceParam%5B’parent’%5D)%20%3F%3E.push(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20%22%3C%3F%3D%20%24mceParam%5B’text’%5D%20%3F%3E%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onclick%3A%20function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20editor%20%3D%20tinyMCE.get(wpActiveEditor)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20content%20%3D%20’%3C%3Fphp%20echo%20%24defaultShortcodeString%20%3F%3E’%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20editor.insertContent(content)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%3C%3Fphp%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%7B%0A%3F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20buttonsNotParent.%3C%3F%3D%20%24tagShortcode%20%3F%3E%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20%22%3C%3F%3D%20%24mceParam%5B’text’%5D%20%3F%3E%22%2C%0A%3C%3Fphp%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(isset(%24mceParam%5B’icon’%5D)%20%26%26%20%24mceParam%5B’icon’%5D%20!%3D%20false)%7B%0A%3F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20icon%3A%20%22%3C%3F%3D%20%24mceParam%5B’icon’%5D%20%3F%3E%22%2C%0A%3C%3Fphp%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%7B%0A%3F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20icon%3A%20false%2C%0A%3C%3Fphp%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%3F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onclick%3A%20function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20editor%20%3D%20tinyMCE.get(wpActiveEditor)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20content%20%3D%20’%3C%3Fphp%20echo%20%24defaultShortcodeString%20%3F%3E’%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20editor.insertContent(content)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%3B%0A%3C%3Fphp%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%3F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fscript%3E%0A%3C%3Fphp%0A%20%20%20%20%7D%0A%7D » message= » » highlight= » » provider= »manual »/]
Si vous vous rappelez cette Classe va reprendre le code plus haut mais que je vais intégrer directement à tous les shortcodes.
- « addShortcodeToTinyMce » permet d’appeler les filtres de TinyMCE « mce_buttons » et « mce_external_plugins » ainsi que deux actions « admin_head-post.php » et « admin_head-post-new.php »
- « registerMceButtons » est la fonction appelée pour le hook mce_buttons, on boucle juste sur les shortcodes. Un bouton sera ajouté pour chaque shortcode. L’id du bouton sera donc le tag du shortcode ici
- « addMCEPlugin » est appelée pour ajouter le plugin js comme plus haut dans la première partie
Je vais vous expliquer à quoi sert la fonction « initVarJavascript ». Elle me permet d’ajouter des variables globales JS afin de les récupérer dans le plugin TinyMCE que j’ai enregistré. Dans cette fonction je vais configurer les boutons à ajouter en fonction des paramètres TinyMCE de l’objet Shortcode instancié. Comme ça je n’aurai plus qu’à faire une boucle sur ces variables et ajouter les boutons. Simple non ? 🙂
Allez je vous mets enfin le fichier JS qui va permettre d’ajouter les boutons côté Javascript 😉 :
[pastacode lang= »javascript » manual= »(function()%20%7B%0A%20%20%20%20%2F*%0A%20%20%20%20%20var%20buttonsNotParent%20%3D%20%5B%5D%3B%0A%20%20%20%20%20var%20buttonsWithParent%20%3D%20%7B%7D%3B%0A%20%20%20%20%20var%20textParent%20%3D%20%7B%7D%3B%0A%20%20%20%20%20*%2F%0A%20%20%20%20%2F*%20Register%20the%20buttons%20*%2F%0A%20%20%20%20tinymce.create(‘tinymce.plugins.ShortcodeButtons’%2C%20%7B%0A%20%20%20%20%20%20%20%20init%20%3A%20function(editor%2C%20url)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20for(var%20slugParent%20in%20buttonsWithParent)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20editor.addButton(%20slugParent%2C%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22menubutton%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20textParent%5BslugParent%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20icon%3A%20false%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20menu%3A%20buttonsWithParent%5BslugParent%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20for(var%20slugButton%20in%20buttonsNotParent)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20editor.addButton(%20slugButton%2C%20buttonsNotParent%5BslugButton%5D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20createControl%20%3A%20function(n%2C%20cm)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20null%3B%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%2F*%20Start%20the%20buttons%20*%2F%0A%20%20%20%20tinymce.PluginManager.add(%20’shortcodes_plugin’%2C%20tinymce.plugins.ShortcodeButtons%20)%3B%0A%7D)()%3B » message= » » highlight= » » provider= »manual »/]
Quoi ? Seulement 30 lignes ? Et oui et oui seulement 30 et vous n’aurez plus besoin d’y toucher ensuite ! Sympas non ?
Bon après ça il nous reste plus qu’à créer notre petit shortcode HelloWorld dans ce système 🙂
Donc on crée notre classe :
[pastacode lang= »php » manual= »%3C%3Fphp%0A%0Aclass%20HelloWorldShortcode%20extends%20CustomShortcode%0A%7B%0A%20%20%20%20public%20static%20%24itsTag%20%3D%20’hello-world’%3B%0A%0A%20%20%20%20public%20function%20getDefaultParams()%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20return%20array(%0A%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20public%20function%20getMceParams()%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20return%20array(%0A%20%20%20%20%20%20%20%20%20%20%20%20’parent’%20%3D%3E%20false%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20’icon’%20%3D%3E%20false%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20’text’%20%3D%3E%20’Hello%20World’%2C%0A%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20protected%20function%20render(%24atts%2C%20%24content)%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20echo%20%22Hello%20World%22%3B%0A%20%20%20%20%7D%0A%7D » message= » » highlight= » » provider= »manual »/]
Et on l’instancie dans notre ClassA comme plus haut et le tour est joué vous avez ajouté un shortcode HelloWorld sur WordPress en même temps qu’un bouton TinyMCE afin d’intégrer ce shortcode dans un futur (mega génial) article !
Voilà le tutoriel touche à sa fin, j’espère qu’il vous a été utile et vous aidera à rendre le codage de thème ou de plugin WordPress plus propre et facile :).
Si vous avez des questions, des remarques sur le code ou sur WordPress n’hésitez pas à laisser un commentaire et je vous répondrai. J’ai imaginé ce mini système car je crée un thème WordPress Premium et du coup je crée mon petit framework pour être plus rapide dans mes développements plus tard.
À plus tard pour un nouveau tutoriel sur du développement WordPress 🙂