Share
Très probablement, vous savez que WordPress est fourni avec l'éditeur HTML WYSIWYG, TinyMCE. La variété des fonctionnalités et la possibilité d'être étendu à l'aide de plugins en font l'éditeur WYSIWYG le plus utilisé au monde. WordPress n'utilise cependant pas toutes ses fonctionnalités. WordPress le personnalise et ne conserve que les parties qui sont vraiment utiles aux utilisateurs, en évitant de gâcher l'interface utilisateur. Cela signifie également que certaines fonctionnalités, des boutons par exemple, ont été masquées aux utilisateurs. Vous pouvez totalement activer les boutons MCE cachés. Typiquement ils sont feuille de style, sous, souper boutons. Si même ceux qui sont cachés ne répondent toujours pas à vos besoins, vous devez créer un plugin TinyMCE pour pouvoir ajouter le vôtre. Dans ce tutoriel, je vais vous expliquer les bases de l’ajout de boutons de l’éditeur WordPress en créant un plugin TinyMCE..
Comme mentionné précédemment, nous allons créer un nouveau plugin TinyMCE dont la tâche est d’ajouter les nouveaux boutons souhaités. Alors quels boutons allons-nous ajouter? Nous allons essayer d'ajouter deux boutons simples: Dropcap et Messages récents, dans lequel le premier vous donne la possibilité de convertir une lettre sélectionnée en une lettre lettrine, et le dernier affichera les messages récents. Le code génère ces boutons illustrés ci-dessous.
Créons un nouveau dossier nommé wptuts-éditeur-boutons (bien sûr, vous pouvez le changer en autre chose si vous le souhaitez) dans votre répertoire de thèmes (j'utilise TwentyTwelve). Continuer à créer deux nouveaux fichiers, wptuts.php qui appelle PHP personnalisé, et l'autre nommé wptuts-plugin.js où les extraits de code JavaScript seront situés. Enfin, ouvrez votre thème functions.php déposer et inclure le nouveau créé wptuts.php déposer dedans. Remarque, n'oubliez pas de définir son chemin exactement:
Accentsconagua
require ('wptuts-editor-buttons / wptuts.php'); Ensuite, nous devons préparer du code pour ces deux boutons:
/ * Ajoutez ce code dans style.css * / .dropcap float: left; taille de la police: 80px; padding-right: 7px; hauteur de ligne: 72px;
add_shortcode ('articles récents', 'wptuts_recent_posts'); fonction wptuts_recent_posts ($ atts) extract (shortcode_atts (array ('nombres' => '5',), $ atts))); $ rposts = new WP_Query (array ('posts_per_page' => $ nombres, 'orderby' => 'date')); if ($ rposts-> have_posts ()) $ html = 'Messages récents
Nous supposons que lorsque les utilisateurs cliquent sur le bouton Messages récents bouton, le navigateur affichera une boîte de dialogue leur demandant le nombre de messages qu’ils souhaitent afficher. Après avoir eu ce numéro, l'éditeur le remplira comme argument dans le shortcode ci-dessus. Par exemple, si nous voulons afficher sept publications récentes, le shortcode est généré comme suit:
[recent-posts numbers = "7" /]
En supposant que nous disposions déjà du nouveau plugin, nous devons ensuite l'enregistrer auprès de WordPress pour l'intégrer dans l'éditeur TinyMCE. Le code est indiqué ci-dessous:
add_action ('init', 'wptuts_buttons'); fonction wptuts_buttons () add_filter ("mce_external_plugins", "wptuts_add_buttons"); add_filter ('mce_buttons', 'wptuts_register_buttons'); fonction wptuts_add_buttons ($ plugin_array) $ plugin_array ['wptuts'] = get_template_directory_uri (). '/wptuts-editor-buttons/wptuts-plugin.js'; return $ plugin_array; function wptuts_register_buttons ($ buttons) array_push ($ buttons, 'dropcap', 'showrecent'); // dropcap ',' recentposts return $ button; Le crochet de filtre important mce_external_plugins est utilisé pour connecter le nouveau plugin à TinyMCE. Nous devons passer un identifiant de plugin (Wptuts) et l'URL absolue pointant sur notre wptuts-plugin.js fichier. le mce_buttons hook est utilisé pour indiquer à l'éditeur TinyMCE quels boutons de notre plugin nous voulons afficher. le lettrine et montrer sont les valeurs d'identifiant de ces boutons que nous prévoyons de créer. Gardez à l'esprit ces valeurs, elles seront utilisées plus tard.
En général, je pense que le meilleur moyen d'étendre ou de développer quelque chose sur une plate-forme est de consulter la documentation de cette plate-forme. TinyMCE a son propre wiki qui pourrait vous être utile. En suivant un exemple de création d'un plugin TinyMCE, nous obtenons le code d'initialisation suivant:
(function () tinymce.create ('tinymce.plugins.Wptuts', / ** * Initialise le plugin, il sera exécuté après la création du plugin. * Cet appel est effectué avant que l'instance de l'éditeur n'ait terminé son initialisation. utilisez donc l'événement onInit * de l'instance de l'éditeur pour intercepter cet événement. * * @param tinymce.Editor ed Instance de l'éditeur dans laquelle le plug-in est initialisé. * * @param string url URL absolue de l'emplacement du plug-in. * / init: function (ed, url) , / ** * Crée des instances de contrôle basées sur le nom entrant. Cette méthode n'est normalement pas * nécessaire, car la méthode addButton de la classe tinymce.Editor est un moyen plus simple d'ajouter boutons * mais vous devez parfois créer des contrôles plus complexes comme des listes de sélection, des boutons divisés, etc. Cette méthode * peut alors être utilisée pour les créer. * * @param String n Nom du contrôle à créer. * @param tinymce.ControlManager cm Gestionnaire de contrôle à utiliser pour créer un nouveau contrôle. * @return tinymce.ui.Control Nouveau contrôle inst ance ou null si aucun contrôle n'a été créé. * / createControl: function (n, cm) return null; , / ** * Retourne des informations sur le plugin sous la forme d'un tableau de noms / valeurs. * Les clés actuelles sont longname, author, authorurl, infourl et version. * * @return Object Tableau de nom / valeur contenant des informations sur le plugin. * / getInfo: function () return longname: 'Wptuts Buttons', auteur: 'Lee', authorurl: 'http://wp.tutsplus.com/author/leepham', infourl: 'http: // wiki. moxiecode.com/index.php/TinyMCE:Plugins/example ', version: "0.1"; ); // Enregistrer le plugin tinymce.PluginManager.add ('wptuts', tinymce.plugins.Wptuts); ) (); N'oubliez pas d'ajouter ce code dans le wptuts-plugin.js fichier. Nous avons laissé les commentaires de code pour que vous puissiez facilement comprendre ce qui se passe. Le code ci-dessus ne fait que deux tâches principales:
créer méthode. Le comportement de notre plugin sera défini dans le init et createControl les fonctions. Vous pouvez voir que les informations du plugin sont déclarées dans le getInfo fonction aussi. Notre plugin aura le nom Wptuts et l'ID Wptuts comme vous pouvez le voir.dans le init fonction, nous commençons à créer nos boutons. Le code vu comme suit:
(function () tinymce.create ('tinymce.plugins.Wptuts', init: function (ed, url)) ed.addButton ('dropcap', titre: 'DropCap', cmd: 'dropcap', image: url + '/dropcap.jpg'); ed.addButton ('showrecent', titre: 'Ajouter messages récents shortcode', cmd: 'showrecent', image: url + '/recent.jpg');, //… Code caché); // Enregistrez le plugin tinymce.PluginManager.add ('wptuts', tinymce.plugins.Wptuts);) (); En utilisant le addButton méthode du ed objet, nous disons à l'éditeur actuel que nous voulons créer tous ces boutons. Cette méthode accepte deux arguments:
cmd propriété, il a la valeur de montrer. C'est l'identifiant de la commande qui est exécuté à chaque appel, nous allons entrer dans les détails sous peuimagela valeur de.Maintenant, vérifiez l'éditeur WordPress et nous verrons nos boutons apparaître. Cependant, ils ne font rien pour l'instant.
Nous avons défini le nom des commandes que nos boutons exécuteront, mais nous n’avons pas encore défini ce qu’ils vont réellement exécuter. Dans cette étape, nous allons configurer ce que nos boutons vont faire. À l'intérieur de init fonction, continuez à ajouter ce code comme indiqué:
(function () tinymce.create ('tinymce.plugins.Wptuts', init: function (ed, url)) ed.addButton ('dropcap', titre: 'DropCap', cmd: 'dropcap', image: url + '/dropcap.jpg'); ed.addButton ('showrecent', titre: 'Ajouter messages récents shortcode', cmd: 'showrecent', image: url + '/recent.jpg'); ed. addCommand ('dropcap', function () var selected_text = ed.selection.getContent (); var return_text = "; return_text = ''+ selected_text +''; ed.execCommand ('mceInsertContent', 0, return_text); ); ed.addCommand ('showrecent', function () var number = prompt ("Combien de messages que vous voulez afficher?"), shortcode; if (nombre! == null) nombre = parseInt (nombre); if (nombre > 0 && nombre <= 20) shortcode = '[recent-post number="' + number + '"/]'; ed.execCommand('mceInsertContent', 0, shortcode); else alert("The number value is invalid. It should be from 0 to 20."); ); , //… Hidden code ); // Register plugin tinymce.PluginManager.add( 'wptuts', tinymce.plugins.Wptuts ); )(); Maintenant le ed.addCommand Cette méthode nous aidera à ajouter une nouvelle commande. Vous devez transmettre l'ID de la commande et la fonction de rappel qui sera exécutée si elle a été appelée par le ed.execCommand méthode. Notez que ed représente le tinyMCE.activeEditor objet. Jetons un coup d'oeil aux fonctions de rappel:
lettrine commande, le souhait que nous voulons est quand un utilisateur sélectionne une lettre et clique sur le DropCap bouton, la lettre sera ensuite transformée en lettrine. Alors, comment pouvons-nous recevoir cette lettre? Bien, le ed.selection.getContent méthode le fera pour nous. Ensuite, une fois que nous avons reçu cette lettre, nous l’enveloppons dans un envergure élément. N'oubliez pas de définir la valeur de classe de cet élément sur lettrine que nous avons défini auparavant, non? Enfin, nous avons le texte complet qui doit être réinséré dans l’éditeur. TinyMCE a une commande par défaut avec le nom mceInsertContent qui est utilisé pour insérer un contenu spécifique dans l'éditeur, son utilisation est indiquée ci-dessus. Le contenu sera passé comme troisième argument de la mceInsertContent méthode.Au lieu d'ajouter du texte pur lorsque les boutons insèrent du contenu dans l'éditeur visuel, nous pouvons le rendre beaucoup plus visuel en enregistrant du CSS personnalisé pour nos boutons. Cela dépend du type de données de contenu et vous pouvez choisir un style approprié. Par exemple, notre DropcapLe style de peut avoir le même sens que celui figurant sur le front-end. Donc, vous pouvez prendre son code CSS tout en haut de ce post, puis placez-le dans le editor-style.css file (pour défaut, voir add_editor_style pour detais).
Pour les codes courts, ils peuvent ne pas avoir eux-mêmes d'élément HTML. Comment devrions-nous les coiffer? Eh bien, cette situation est beaucoup plus complexe pour obtenir le résultat, ce n’est pas impossible (vous pouvez voir certains boutons par défaut de WordPress tels que "Ajouter un média"). Cependant, cela peut toujours être une tâche délicate, en encapsulant ce shortcode dans un élément HTML, puis en le stylant comme ci-dessus. C'est assez simple, pas tout à fait parfait cependant. Dans cet article, nous ne nous concentrerons pas sur ce traitement complexe.
Enfin, les résultats obtenus sont les suivants:
Ensuite, sur le front-end:
Et le bouton Recent Posts fonctionne bien aussi:
Ok, nous avons couvert une pratique assez simple et facile à suivre. Vous remarquerez peut-être que le bouton Publications récentes vous permet de régler un paramètre (le nombre de publications à afficher). Vous savez certainement que nous avons utilisé le JavaScript par défaut, rapide, pour y parvenir. Et si vous voulez un popup plus complexe, qui a plusieurs réglages plutôt qu'un seul? Eh bien, dans un autre post, nous allons en discuter et essayer une autre approche.
Tout commentaire sur ce post sera apprécié. Merci d'avoir lu et à plus tard.
TinyMCE_Custom_Buttons