Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Créer des Méta Box Maintenables Sous Wordpress: La Présentation

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Creating Maintainable WordPress Meta Boxes.
Creating Maintainable WordPress Meta Boxes
Creating Maintainable WordPress Meta Boxes: The Front-End

French (Français) translation by Willy Touomi (you can also view the original English article)

Dans ces séries, nous apprenons à créer des méta box maintenables sous Wordpress. C'est à dire que nous nous penchons sur quelques bonnes pratiques que nous pouvons employer lors de nos développements Wordpress pour nous assurer que le code que nous écrivons peut être maintenu par nous ou par notre équipe au fil du temps.

Dans le premier article, nous nous sommes penchés sur la struture initiale du dossier et nous avons écrit le code basique requis pour qu'un plugin fonctionne sous Wordpress. Dans cet article, nous allons continuer à planifier et à construire notre plugin.

Nous parlerons également des décisions que nous prenons en ce qui concerne la séparation des parties de notre code et de la façon dont elles influencent la maintenabilité.

Planification du Commentaire de l'auteur

Dans l'article précédent, nous avons commencé à travaillé sur un plugin appelé Commentaire de l'Auteur. L'idée derrière ce plugin est qu'il permettra aux auteurs d'articles de laisser des notes, des astuces et d'autres informations similaires relatives à l'article qu'il aura publié, et qui lui auront servi de base d'inspiration et de pensée, après écriture et réception de l'article.

Lorsque nous écrivons un article, disons que nous souhaitons captures trois types d'informations spécifiques:

  1. Les notes de préparation de l'article
  2. Les informations et les ressources utilisées dans l'article
  3. Les tweets et les liens vers des commentaires et des feedback après la publication

De façon claire, nous souhaitons avoir une méthode de maintenance des notes qui sont intervenues lors de la création de l'article avant qu'il ne soit écrit, des liens vers des informations différentes - que ce soit des articles, des images, des vidéos, des exemples de code, et ainsi de suite. Et nous souhaitons aussi faire la maintenance d'une liste de tweets, de liens vers des commentaires et des fragments d'email que nous avons reçus.

A ce niveau, nous en avons assez pour commencer la préparation de notre meta box et de sa présentation par onglet.

Les onglets de la Meta Box

Avant que nous ne commencions réellement à écrire du code, nommons les onglets qui seront associés avec chacun des états de notre article comme énoncé plus haut. Cela nous aidera à organiser nos éléments d'entrée de façon conceptuelle, afin que logiquement ils soient regroupés ensemble.

Vous pouvez les nommer comme il vous plait. Mais si vous suivez ce tutoriel et le code qui a été fourni, alors voici ce que vous devez vous attendre à voir.

  1. Le premier onglet sera appelé Draft (Brouillon), puisqu'il contiendra toutes les énumérations, les phrases et autres notes qui sont intervenues pendant la préparation de l'article.
  2. Le second onglet sera appelé Resources (Ressources), puisqu'il contiendra les informations sur les autres articles, liens, vidéos et autres choses auxquelles on pourra se référer dans l'article, ou que l'on pourra inclure intégrer dans l'article.
  3. Le dernier onglet sera appelé Published (Publié), puisqu'il contiendra les liens vers les commentaires, les champs pour l'email, et toute autre information relative à l'article après qu'il ait été publié.

Assez simple, n'est-ce pas? Nous parlerons plus en détail des éléments d'entrée de chaque onglet une fois que nous y serons dans le code. Mais pour le moment, nous avons besoin de nous focaliser sur la création de la meta box et l'implémentation des onglets.

Créer la Meta Box

Pour créer la meta box, nous utiliserons la fonction the add_meta_box documentée dans le Codex Wordpress. Pour ce faire, nous introduirons une nouvelle classe, mettrons à jour le fichier de démarrage, et ajouterons quelques vues que nous utiliserons pour l'affichage dans le navigateur.

La classe de la Meta Box

Afin de s'assurer que le code est bien encapsulé et que chaque classe représente une seule idée, nous allons créer une classe Authors_Commentary_Meta_Box. Cette classe sera responsable de l'enregistrement d'un hook via l'action add_meta_box, de la configuration de la meta box et de son affichage.

Pour ceux d'entre-vous qui ne sont pas habitués à développer des plugins Wordpress avec la méthode orientée objet, cette approche nous permet de segmenter nos zones de responsabilité - comme avec la meta box - et d'avoir une seule classe qui représentera tout ce qui intervient dans sa création.

Tout d'abord, créez le fichier class-authors-commentary-meta-box.php dans le dossier d'administration. Ensuite, ajoutez le code suivant:

Les commentaires et le contenu de la classe devraient vous aider à la comprendre assez facilement. Elle fait trois chose, mais pour être clair:

  1. Le contructeur enregistre la fonction add_meta_box avec l'action Wordpress correspondant.
  2. La fonction add_meta_box défini les propriétés de la meta box.
  3. La fonction display_meta_box ne fait rien pour l'instant - nous y travaillerons dans un moment.

Avant de continuer, nous devons introduire quelques modifications dans le reste du plugin.

Pour commencer, nous devons inclure ce nouveau fichier dans le fichier de démarrage du plugin. Dans le fichier authors-commentary.php, ajoutez le code suivant au-dessus de l'instruction require_once:

Nous ajoutons cette ligne au-dessus du code initial parce que le code initial dépend de ce fichier particulier pour fonctionner; par conséquent, il devait être chargé en premier.

Ensuite nous avons besoin d'introduire une nouvelle propriété à côté de admin/class-authors-commentary.php qui sera une référence d'une instance de la meta box.

Finallement, nous avons besoin d'instancier le code dans le constructeur de la classe:

À ce niveau, vous devriez être capable d'activer le plugin, naviguer jusqu'à une page d'article, et voir une meta box vide:

Rien de vraiment excitant, mais nous avons ce qu'il nous faut pour commencer notre navigation par onglet.

Ajouter des onglets

À ce niveau, nous sommes prêt à introduire la navigation par onglet de notre meta box. Notre but ultime est d'ajouter le marquage HTML et les styles de l'onglet dans l'article, puis implémenter le comportement et les éléments dans le prochain article de la série.

Ceci dit, commençons par créer un sous-dossier vues dans le dossier admin. Techniquement, nous l'avons fait dans l'article précédent; toutefois, nous n'avions aucun contenu dans le dossier et il n'a donc pas été vérifié dans le contrôle de la source (ainsi, le dossier n'a pas été ajouté - si vous suivez avec le dépôt, c'est maintenant le moment de créer le dossier).

Ensuite, créez un fichier dans le dossier des vues appelé authors-commentary-navigation.php. Ce fichier servira d'abord comme marquage; cependant, il incluera un peu de PHP au moment pendant qu'on travaillera avec ce plugin.

Ajoutez le code suivant au fichier. Nous en discuterons plus en profondeur après le bloc de code:

Une fois fait, insérez le code suivant dans Authors_Commentary_Meta_Box, ajoutez le code suivant pour importer ce bout de marquage:

À côté du conteneur div que nous avons, notez ceci:

  • Nous avons encapsulé trois ancres dans un élément h2. L'élément h2 contient les attributs de classe pour nav-tab-wrapper et current. Ceci nous permet d'hériter directement des styles de Wordpress sans aucune intervention de notre part.
  • Chaque ancre a une class nav-tab, dont la première a la classe nav-tab-active. Encore une fois, ceci nous permet d'hériter un peu de style de Wordpress.
  • L'attribut href de chaque ancre a également pour valeur javascript:; parce que les ancres ne vont mener nulle part. Plutôt, dans un prochain tutoriel, nous utiliserons JavaScript pour contrôller les onglets et le contenu affiché dans chacun d'eux.

À ce niveau, vous devriez voir ceci:

Remarquez que tous les styles appliqués aux onglets ont été fournis par Wordpress. La seule chose que vous pourriez adapter est la marge qui existe entre les onglets et la ligne horizontale en-dessous d'eux.

Faisons-le.

Inclure la feuille de style

Dans le dossier admin, ajoutez un autre sous-dossier nommé assets dans lequel vous créerez un dossier appelé css. Ensuite, créez un fichier vide appelé admin.css.

Après cela, ajoutez les lignes suivantes dans le fichier CSS:

Puis, rassurez-vous que l'appel suivant est inséré dans le constructeur de class-authors-commentary.php:

Finallement, ajouter la fonction suivante - son rôle est de mettre la feuille de style dans une queue:

À ce niveau, les choses devraient être plus claires:

Ceci fait, nous avons terminé tout ce qu'il faut pour la fondation de base de la navigation par onglet de notre meta box.

Préparation à avancer

Dans le prochain article, nous allons introduire le contenu de chaque article et nous allons traiter le JavaScript nécessaire pour activer les onglets et chacun de leur contenu.

Les plus expérimentés avec Wordpress pourraient penser que cette série d'articles avance lentement; mais c'est le but - nous souhaitons être le plus exhaustif possible lorsqu'il s'agit non seulement de construire nos interfaces utilisateurs, mais aussi lorsqu'il faut expliquer le raisonnment derrière chacune de nos décisions.

Entre-temps, n'oubliez pas de regarder le code source sur GitHub, de nous suivre, et de laisser des questions ou des commentaires dans le flux ci-dessous.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.