Share
L'une des principales raisons pour lesquelles WordPress est la plate-forme CMS la plus populaire disponible est le niveau de personnalisation qu'il apporte à la table. Aujourd'hui, nous allons passer en revue le processus d'intégration de l'une de ces fonctionnalités populaires, les codes courts, de la manière la plus conviviale possible, dans notre thème..
Même s'il existe quelques trillions d'options parmi lesquelles choisir, WordPress a confortablement remporté le titre de roi des CMS et des plates-formes de blogging avec son incroyable flexibilité. Un shortcode est l’une de ces fonctionnalités permettant d’améliorer la convivialité du système..
Cependant, dans la plupart des implémentations, vous devez toujours vous rappeler du code court lui-même. Lorsque vous avez créé un chef-d'œuvre d'un thème, la convivialité ne devrait pas être à la traîne. Je vais vous montrer comment créer des codes abrégés, puis l'intégrer à l'éditeur lui-même, afin que l'utilisateur n'ait pas à parcourir ses documents pour se souvenir de la syntaxe correcte pour intégrer un bouton. Intrigué? Commençons tout de suite!
Ça s'appelle un petit code et cela fait partie de l’installation de base de WordPress depuis la mise à jour 2.5. Fondamentalement, ceux-ci sont similaires à la codes-bb utilisé sur les logiciels de messagerie populaires: balises légères utilisées pour formater le contenu.
Ici, vous pouvez définir vos propres codes à utiliser dans votre thème. Contrairement aux BBCodes, les codes courts sont principalement utilisés pour protéger l'utilisateur des balises fastidieuses et des erreurs éventuelles. En utilisant un code abrégé, par exemple un bouton, l’utilisateur n’a pas à se souvenir du balisage complexe à saisir pour créer le bouton. Globalement, cela améliore considérablement la convivialité d'un thème et, éventuellement, sa convivialité.
Si vous n'êtes pas familier avec le concept de BBCode et, par extension, shortcode, voici à quoi ressemble la version la plus simple:
[ma galerie]
Si vous avez déjà intégré une galerie à WordPress, vous avez déjà utilisé un shortcode!
Il y a deux autres variantes que vous devriez également connaître.
[bouton] Contenu [/ bouton] [lien vers = "www.net.tutsplus.com"] NetTuts + [/ link]
Nous allons d'abord implémenter chacune de ces variantes avant de passer à d'autres choses plus occupées..
Chaque implémentation de shortcode nécessite un processus en deux étapes:
Quelle que soit la complexité du shortcode, les étapes principales restent les mêmes.
Nous allons d’abord apprendre à implémenter le shortcode le plus simple possible. En guise d’utilisation, disons que vous terminez chaque message par un texte de signature courant. Copier et coller peut être une approche simple, mais vous pouvez vous sentir luddite de le faire. Réglons cela avec une certaine netteté de WP!
Sauf indication contraire, tout le code ci-dessous va dans functions.php
La fonction principale prend en charge la logique de base de votre shortcode. Nous devrons créer ce premier avant de continuer.
function signOffText () return 'Merci beaucoup d'avoir lu! Et n'oubliez pas de vous abonner à notre flux RSS. ';
La prochaine étape, comme vous pouvez le supposer, consiste à vous connecter au système WordPress pour associer le code court à ce texte. Ceci est fait en utilisant le add_shortcode méthode.
Accentsconagua
add_shortcode ('signature', 'signOffText'); Oui, une seule ligne suffit. Le premier paramètre définit le shortcode que vous utiliserez dans l'éditeur, tandis que le second pointe vers la fonction que nous avons créée il y a un instant..
Remarque: le add_shortcode méthode vient toujours après la méthode de gestionnaire.
Ça devrait le faire. Il suffit de taper [Approuver] dans votre éditeur et WordPress remplacera dynamiquement le texte si nécessaire.
Ensuite, nous allons examiner une autre variante: envelopper du contenu avec du balisage. Vous devriez l'utiliser comme ceci:
[quote] du texte [/ quote]
La fonction principale doit être modifiée un peu ici. Nous constatons que notre fonction reçoit deux paramètres: les attributs via le atts variable et le contenu lui-même à travers le contenu variable.
L'étape suivante consiste simplement à renvoyer le balisage autour du texte sélectionné.
devis de fonction ($ atts, $ content = null) return '"'. $ content.'"';
Cette étape reste la même:
add_shortcode ("quote", "quote"); J'aime nommer mes codes abrégés de la même manière que les fonctions principales, à moins que l'attribution des noms ne soit trop compliquée. Vous pouvez avoir vos propres styles, alors n'hésitez pas à changer le schéma de nommage. Il n'y a pas de meilleure pratique acceptée.
Enfin, nous allons également ajouter des attributs au mélange. Vous devriez l'utiliser comme ceci:
[link to = "www.net.tutsplus.com"] NetTuts + [/ link]
La fonction principale doit être refactorisée pour gérer toutes les nouvelles fonctionnalités que nous intégrons. Tout d’abord, nous fusionnons les attributs transmis avec le shortcode et les attributs attendus. Vous pouvez lire plus sur le processus ici.
Comme toujours, la dernière étape consiste simplement à renvoyer le balisage souhaité après l'avoir rempli correctement. Ici, j’ai utilisé les données envoyées avec le shortcode pour compléter l’ancre. href attribut ainsi que contenu.
lien de fonction ($ atts, $ content = null) extract (shortcode_atts (array ("to" => 'http://net.tutsplus.com'), $ atts))); retourne ''. $ content. ''; Cette étape reste inchangée, mais essentielle. Rappelez-vous, sans cela, WordPress n'a pas quoi faire avec le shortcode.
add_shortcode ("lien", "lien"); C’est là que vous vous attendez à ce que ce tutoriel se termine, mais non, vous vous êtes trompé. Comme je l'ai mentionné plus tôt, les codes courts soulagent beaucoup, mais il y a peu de pièges. D'une part, l'utilisateur doit se rappeler les codes abrégés dont il dispose pour en faire un usage significatif.
Si vous n'avez qu'un couple, c'est bien, mais avec des thèmes très chargés, se souvenir de chacun devient une corvée. Pour rectifier cela, nous allons ajouter des boutons directement à l'interface TinyMCE, afin que l'utilisateur puisse simplement cliquer sur le bouton pour que tout soit terminé..
Par exemple, je vais vous apprendre à ajouter la deuxième variante à l'éditeur. J'espère que vous pourrez extrapoler ces informations pour les fonctionnalités spécifiques que vous envisagez.
La première étape du processus consiste à se connecter à WordPress et à ajouter notre code d'initialisation. L'extrait suivant s'en occupe. Rappelez-vous, tout cela doit être dans votre functions.php fichier.
add_action ('init', 'add_button'); Nous demandons à WordPress d’exécuter la fonction appelée add_button quand la page est initialement chargée. add_action est notre crochet dans les internes de WordPress.
fonction add_button () if (current_user_can ('edit_posts') && current_user_can ('edit_pages')) add_filter ('mce_external_plugins', 'add_plugin'); add_filter ('mce_buttons', 'register_button'); Ce petit extrait de code sera exécuté lors du chargement de la page. Ci-dessus, nous vérifions si l'utilisateur dispose des autorisations nécessaires pour modifier une page ou un message avant de poursuivre..
Une fois que cela est fait, nous relions deux de nos fonctions [à écrire] à des filtres spécifiques. Ces deux systèmes s’intègrent à l’architecture frontale de TinyMCE via WordPress. Le premier est exécuté lorsque l'éditeur charge les plugins tandis que le second est exécuté lorsque les boutons sont sur le point d'être chargés.
Dans l'exemple ci-dessus, nous procédons quel que soit le mode de l'éditeur. Si vous souhaitez l'afficher uniquement lorsque l'éditeur est en mode visuel, par exemple, vous devez effectuer une vérification rapide. Si get_user_option ('rich_editing') évalue à vrai, vous êtes en mode visuel. Sinon, le mode HTML. J'ai généralement tendance à ajouter ces boutons uniquement en mode visuel, mais n'hésitez pas à mélanger et assortir ici.
fonction register_button ($ button) array_push ($ button, "quote"); retourne les boutons $;
La fonction ajoute simplement notre code court au tableau de boutons. Vous pouvez également ajouter un séparateur entre votre nouveau bouton et les boutons précédents en passant un | avant.
function add_plugin ($ plugin_array) $ plugin_array ['quote'] = get_bloginfo ('template_url'). '/ js / customcodes.js'; return $ plugin_array; L'extrait ci-dessus permet à TinyMCE et à WordPress de savoir gérer ce bouton. Ici, nous cartographions nos citation shortcode à un fichier JavaScript spécifique. Nous utilisons le get_bloginfo méthode pour obtenir le chemin d'accès au modèle actuel. Par souci d'organisation, je conserve mon plugin tinyMCE avec mes autres fichiers JS.
Passons maintenant à la dernière partie de notre entreprise. Rappelez-vous, le code suivant va dans un fichier appelé customcodes.js placé dans le répertoire JS de votre thème. Si vous pensiez que ça allait functions.php comme tout le code ci-dessus, pas de cookie pour vous!
(function () tinymce.create ('tinymce.plugins.quote', init: function (ed, url) ed.addButton ('quote', titre: 'Ajouter un devis', image: url + '/ image .png ', onclick: function () ed.selection.setContent (' [quote] '+ ed.selection.getContent () +' [/ quote] '););, createControl: function (n, cm) return null;,); tinymce.PluginManager.add ('quote', tinymce.plugins.quote);) (); Ça a l'air un peu complexe mais je vous assure que c'est tout sauf. Découpons-le en une section plus petite pour faciliter l'analyse.
Premier L'ordre du jour est une fermeture rapide pour ne pas polluer l'espace de noms global. À l'intérieur, nous appelons le créer méthode pour créer un nouveau plugin en passant le nom et d’autres attributs assortis. Par souci de brièveté, je vais juste appeler mon plugin citation.
Une fois à l'intérieur, nous définissons la init fonction qui est exécutée à l'initialisation. ed pointe vers l'instance de l'éditeur tout en url pointe vers l'URL du code du plugin.
La plupart des attributs devraient être assez explicites. Notez que l'image que vous transmettez est relative au dossier parent du fichier JS contenant le code. Ici ce serait répertoire de thème / js.
Suivant up, nous créons le gestionnaire d’événements pour ce bouton à travers le sur clic une fonction. Le one-liner qu'il contient obtient essentiellement le texte sélectionné, le cas échéant, et l'enveloppe sans shortcode. setContent et Obtenir du contenu sont des méthodes d'assistance fournies par tinyMCE pour manipuler le texte sélectionné.
finalement, dans la dernière ligne, nous ajoutons le plugin fraîchement créé au gestionnaire de plugins de tinyMCE. Faites attention aux noms que vous utilisez à chaque étape. Il y a risque d'erreur si vous ne faites pas attention. Et c'est à peu près tout! Avaient fini! Chargez l'éditeur et assurez-vous que votre nouveau bouton spiffy fonctionne.
Et voila. Nous avons réussi à intégrer des codes courts dans un thème WordPress de manière très conviviale. J'espère que vous avez trouvé ce tutoriel utile. N'hésitez pas à réutiliser ce code ailleurs dans vos projets et à insérer des commentaires dans les commentaires si vous avez besoin d'aide..
Des questions? De belles choses à dire? Des reproches? Hit la section des commentaires et laissez-moi un commentaire. Bon codage et merci beaucoup pour la lecture!
