Share
Dans le tutoriel précédent, nous avons abordé les espaces de noms et le chargement automatique avec PHP dans le contexte du développement WordPress. Et bien que nous n’ayons jamais réellement présenté l’un ou l’autre de ces deux sujets, nous les avons définis et avons commencé à jeter les bases de la façon dont nous les présenterons dans un prochain tutoriel..
Avant de faire cela, cependant, il y a quelques fonctionnalités que nous devons compléter pour compléter notre plugin. Le but est de terminer le plugin et ses fonctionnalités de manière à ce que nous ayons un plugin de base orienté objet qui soit documenté et fonctionne bien avec une mise en garde; il n'utilise pas d'espaces de noms ni de chargement automatique.
Cela nous donnera l'occasion de voir à quoi ressemble un plugin avant et après l'introduction de ces sujets..
Avant de continuer, je vous recommande de lire le tutoriel précédent. De cette façon, vous comprendrez ce que sont les espaces de noms et le chargement automatique, vous aurez la version de travail du plugin jusqu’à présent (étant donné que nous allons continuer à le développer), procéder à partir de ce moment.
Une fois que vous l'avez lu, n'hésitez pas à revenir à ce tutoriel et à reprendre votre travail..
Comme pour tous mes tutoriels, je suppose que votre ordinateur dispose d’un environnement de développement fonctionnel. Cela comprend les éléments suivants:
Si vous êtes si loin dans la série (ou avez lu l'un de mes travaux précédents), alors je suppose que vous avez déjà quelque chose comme ci-dessus déjà en place.
Et quand vous le faites, nous sommes prêts à commencer.
Rappel du tutoriel précédent:
Nous allons créer un plug-in facilitant le chargement de feuilles de style et de styles JavaScript dans notre plug-in, et affichant une boîte méta invitant l'utilisateur à poser une question afin de l'aider à réfléchir à un sujet sur lequel bloguer..
Oui, c'est simple et ce n'est probablement pas quelque chose que quelqu'un utilisera en dehors de l'étude des concepts que nous couvrons dans ce blog. Mais les moyens par lesquels nous enseignons les concepts que nous utilisons sont ce qui est important.
Ce plugin nous donne la possibilité de faire exactement cela.
À la fin du dernier tutoriel, nous sommes partis avec un plugin qui affiche une question aléatoire à l'auteur en haut de la barre latérale dans l'écran de création de post WordPress.
Chaque fois que vous actualisez la page, une nouvelle question est chargée. Dans l'état actuel des choses, ce n'est pas mauvais, mais nous pouvons apporter certaines améliorations en termes de style du contenu de la boîte méta..
Autrement dit, nous pouvons introduire des feuilles de style qui nous aideront à créer une présentation légèrement plus attrayante visuellement. De plus, cela nous donnera l'occasion d'explorer quelques techniques plus orientées objet que nous pouvons utiliser lorsque nous travaillons avec des actifs tels que des feuilles de style..
Alors commençons.
Pour les besoins de ce didacticiel, je ne vais utiliser aucun type de pré-processeur. Je vais juste utiliser CSS CSS à la vanille. Mais la manière dont nous mettons en file d'attente les actifs sera un peu plus orientée objet que ce que beaucoup de développeurs WordPress ont l'habitude de voir..
Tout cela contribuera à l'objectif d'utilisation des espaces de noms et du chargement automatique dans cette série. Mais tout d’abord, commençons par présenter ces feuilles de style, en créant les interfaces et les classes de classe nécessaires, ainsi que la communication avec l’API WordPress..
dans le admin répertoire, créez un sous-répertoire appelé les atouts. Dans le les atouts répertoire, créez un sous-répertoire appelé css puis ajoutez le fichier admin.css.
La structure de répertoires finale devrait ressembler à ceci:
Nous ne sommes pas encore prêts à fournir aucun type de style. Au lieu de cela, nous devons porter notre attention sur le code côté serveur responsable de la mise en file d'attente de cette feuille de style..
Lorsqu'il s'agit d'enregistrer et de mettre en file d'attente les feuilles de style et le code JavaScript, la plupart des développeurs de plugins WordPress connaissent bien les points d'ancrage nécessaires à cet effet. Plus précisément, je me réfère à admin_enqueue_scripts et wp_enqueue_style.
Et bien que nous utilisions ces crochets, nous allons le configurer d’une manière simple, orientée objet. Non, cette série n'a pas pour vocation de plonger profondément dans les principes orientés objet mais, le cas échéant, je suis heureux d'essayer de vous les montrer..
En programmation orientée objet, une interface est définie comme telle:
Une interface est une structure / syntaxe de programmation qui permet à l’ordinateur d’appliquer certaines propriétés à une classe..
Une autre façon de penser est la suivante:
Si vous avez une classe qui implémente une interface, la classe doit définir les fonctionnalités que dicte l'interface.
Donc, si l'interface a deux signatures de méthode avec une visibilité et un nom spécifiques, la classe implémentant l'interface doit avoir deux méthodes avec la même visibilité et le même nom, ainsi qu'une implémentation réelle de la méthode..
Et c'est ce que nous allons faire. Premièrement, nous devons définir notre interface. Donc dans le util répertoire, créer interface-assets.php puis ajoutez le code suivant:
Remarquez que l'interface ne définit pas réellement la fonctionnalité. Au lieu de cela, il spécifie quoi les classes qui implémentent cette interface doivent définir.
Comme vous pouvez le supposer, les classes qui implémenteront cette interface auront deux méthodes ci-dessus, ainsi qu'une implémentation réelle pour chaque fonction. Et nous verrons comment cela fonctionne momentanément.
Ensuite, assurez-vous d'inclure ce fichier dans le fichier de plugin principal:
Ensuite, nous devons créer un fichier qui implémente cette interface. Puisque nous travaillons avec des fichiers CSS, nous allons créer un chargeur CSS..
Le chargeur CSS
Il s’agit de la classe responsable de la mise en oeuvre de l’interface et de l’enregistrement de la fonction avec le hook WordPress nécessaire (et en donnant l’implémentation à cette fonction)..
Si vous regardez le code ci-dessous, il devrait ressembler beaucoup à quelque chose que vous avez vu ou sur lequel vous avez peut-être travaillé dans un projet précédent:
Le code ci-dessus devrait être relativement facile à suivre étant donné les commentaires du code, mais je vais décrire ce qui se passe:
Accentsconagua
init et mettre en file d'attente sont les deux fonctions requises lorsque la classe implémente le Assets_Interface.init est appelé, il enregistre le mettre en file d'attente fonctionne avec le crochet responsable de l'enregistrement d'une feuille de style.mettre en file d'attente méthode enregistre la admin.css fichier et utilise filemtime comme moyen de savoir si le fichier a changé ou non (ce qui nous permet de supprimer n'importe quelle version mise en cache du fichier lors du traitement).Dans cette implémentation, le réel admin.css le fichier est ajouté sur chaque page. Ajouter une condition pour vérifier quelle page est actuellement active, puis déterminer si la feuille de style doit être ajoutée ou non peut être ajouté en tant qu’exercice post-tutoriel. Pour un indice, consultez get_current_screen ().
Ensuite, nous devons inclure ce fichier dans le fichier de plugin principal:
Ensuite, nous devons instancier le chargeur CSS et appeler son
initméthode dans la principaletutsplus_namespace_demoune fonction:init ();En supposant que vous avez tout fait correctement, vous devriez pouvoir actualiser la Ajouter un nouveau message page, voir la source, et voir
admin.cssrépertorié comme une feuille de style disponible.Nous avons encore une chose à faire avant de terminer cette partie du didacticiel. Nous devons réellement écrire du CSS.
Style de la Meta Box
Étant donné que la majorité du didacticiel a mis l'accent sur certaines techniques orientées objet et que nous avons encore de nouveaux sujets à explorer dans cette série, nous allons rendre cette partie relativement facile..
Plutôt que d’utiliser seulement certains styles par défaut fournis par WordPress, améliorons un peu la boîte de méta.
D'abord, localisez le
rendrefonctionner dans leMeta_Box_Displayclasse. Modifions-le pour qu'il affiche le contenu du fichier dans un élément de paragraphe avec l'attribut ID "tutsplus-author-prompt"..Pour ce faire, nous allons introduire une nouvelle méthode qui utilisera une méthode API WordPress pour assainir le code HTML..
array ('id' => array (),),); return wp_kses ($ html, $ allowed_html);Nous appellerons ensuite cette fonction depuis le
rendreméthode pour afficher le contenu dans la boîte méta.question_reader-> get_question_from_file ($ file); $ html = "$ question
"; echo $ this-> sanitized_html ($ html);Maintenant, nous pouvons ouvrir admin.css et faire quelques petits changements pour mettre à jour l'apparence de la méta-boîte dans Ajouter un nouveau message écran. Ajoutons le CSS suivant:
# tutsplus-author-prompt font-style: italic; text-align: center; couleur: # 333;Et à ce stade, votre boîte méta devrait maintenant ressembler à ceci:
Comme mentionné au début, ce n’est rien d’important, mais c’est quelque chose qui améliore un peu l’apparence de la question..
Et après?
À ce stade, nous avons introduit plusieurs classes, interfaces et autres fonctionnalités orientées objet. Nous avons un plugin qui utilise les données d'un fichier texte, qui communique avec l'API WordPress et qui nettoie les informations avant de les restituer à la page d'accueil..
Nous avons une bonne base pour commencer à parler d’espaces de noms. Donc, dans le prochain tutoriel, nous allons faire exactement cela. Si vous n'avez pas encore rattrapé le reste de la série, je le recommande, car nous ne ferons que continuer à nous appuyer sur ce que nous avons appris..
Si, dans l'intervalle, vous recherchez d'autres documents relatifs à WordPress, vous pouvez retrouver tous mes tutoriels précédents sur ma page de profil et vous pouvez me suivre sur mon blog ou sur Twitter..
D'ici là, n'oubliez pas de télécharger la version de travail du plugin (version 0.2.0) jointe à ce message. Le lien est disponible dans la barre latérale sous un bouton intitulé Télécharger la pièce jointe. Et, comme d'habitude, n'hésitez pas à poser des questions dans les commentaires!
Ressources
