7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. WordPress

Créer Des Méta Boxes Maintenables Sous Wordpress

Scroll to top
Read Time: 10 mins
This post is part of a series called Creating Maintainable WordPress Meta Boxes.
Creating Maintainable WordPress Meta Boxes: The Layout

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

A l'heure actuelle, l'un des design patterns les plus communs - si ce n'est le design pattern le plus commun utilisé dans le développement web est le MVC (ou Model/View/Controller). Mais aussi populaire qu'il puisse être, ce n'est pas l'unique façon dont les frameworks, les fondations (bases) et les autres bibliothèques sont construits.

Un exemple pour appuyer ce point est Wordpress, qui utilise le design patten event-driven pour son système de hook. Et bien que les design patterns ne sont pas mutuellement exclusifs, vous êtes plus susceptibles de reconnaître ce design pattern, parce que c'est lui qui rend Wordpress aussi flexible qu'il l'est.

De façon plus claire, cela ne veut pas dire qu'il n'y a pas d'autres design patterns utilisés dans son code (ou le code de n'importe quelle autre application). Ils pourraient juste ne pas être aussi facilement reconnaissable.

Par dessus tout, l'une des choses pour lesquelles les développeurs professionnels se battent le plus est l'écriture d'un code maintenable. Mais puisqu'un code de base prend de l'âge et que de plus en plus de personnes y ajoutent leur travail, il devient difficile de même niveau d'organisation, de clarté et de maintenabilité dans le projet.

Toutes les idées ci-dessus s'appliquent aussi à Wordpress, que vous travaillez sur les thèmes, les plugins, les extensions ou tout autre type de projet. Le fait est que, il est important que vous vous atteliez à suivre les règles et les conventions de codages établies lors de la création de ces projets.

Supposons que vous êtes en train de travailler sur un plugin qui présente une méta box personnalisée; cependant, il ne suffit pas de présenter une méta box. On créera plutôt des groupes d'options reliées.

C'est là que les choses deviennent un peu difficiles.

A travers cette série, nous vous conduirons à l'écriture d'un code maintenable, en créant un plugin d'exemple qui affiche une meta box, des options variées et une navigation par onglet dans le tableau de bord de Wordpress.

Optimiser les Méta Boxes

Pendant votre phase de plannification des options de vos meta méta boxes, quelques choix s'offrent à vous:

  1. Créer une méta box par option
  2. Créer une méta box avec des onglets qui logiquemment regroupent des options.

Pour ceux d'entre-vous qui ont utilisé Wordpress pendant longtemps, vous êtes probablement habitués à la navigation par onglet dans le tableau de bord de Wordpress, du moins dans une certaine mesure. Pour les curieux désireux de savoir comment implémenter cela autrement que par programmation, mais d'une façon maintenable, nous allons voir comment le faire à travers cette série.

De façon spécifique, nous allons écrire un petit plugin Wordpress qui présentera quelques champs, quelques options reliées groupées par onglet. Et nous présenterons quelques éléments en plus pour montrer comment enregistrer, nettoyer et récupérer des données de façon propre et sécurisée.

Où nous allons

Comme dans la plupart des articles de série que j'écris, j'aime donner un grand aperçu de ce que nous allons faire avant que nous n'entrions dans le code. Cela permet de fournir une base conceptuelle de là où nous allons, et aide à esquisser les futurs séries d'articles, aussi bien que ce que nous ferons au niveau du code.

S'il n'y a rien d'autre, cela permet d'avoir un référentiel lors de notre progression dans les séries.

Avant d'en arriver à l'esquisse, je voudrais mentionner que le gain le plus important de cet article spécifique sera la mise en évidence de la séparation des problèmes, aussi bien que des raisons qui nous ont poussé à faire les choses comme nous les avons faites, afin que nous comprenions en quoi cela aide la maintenance du code.

A cette fin, voici ce que nous aborderons à travers les futurs articles:

  1. Préparer le terrain pour le plugin
  2. Définir toutes les options et les organiser en onglets
  3. Implémenter de façon propre chacune des options et des onglets avec les mesures de sécurité
  4. Voir tout en action

Comme avec toute chose dans le développement, découper les choses en composantes plus petites est la clé absolue. Pour la suite de cet article, nous verrons les étapes nécessaires pour le développement de notre plugin qui présente une méta box dans le type de contenu standard 'Post'.

Squelette du plugin

Avant de continuer, créons le dossier de notre plugin. Il contiendra les éléments suivants:

  • Un fichier pour le lancement du plugin
  • La classe principale du plugin
  • La compréhension de l'organisation initiale des fichiers
  • Un fichier vide README

Et évidemment, nous devrons nous assurer que les dossiers sont bien organisés et que le code est clair.

Afin de le rendre un tant soit peu utilisable, nous appelerons notre plugin "Commentaires de l'auteur", ce qui nous permettra de partager quelques notes candides à propos des pensées que nous avons eues, ce que nous avons utilisé et gribouillé pendant l'écriture de notre article.

En fonction de vos avis, nous pourrons choisir de le rendre public dans le futur. Mais pour l'instant, nous le laisserons dans l'administration.

Ceci dit, commencons.

Premiers pas avec Le Commentaire de l'Auteur

Préparer le dossier

Ce que nous avons besoin de faire est finalement afficher la structure du dossier que nous utiliserons pour le projet. Vous trouverez une capture écran de cette structure ci-dessous, après quoi je décrirai le but de chaque dossier.

La racine du dossier contient deux fichiers:

  1. README.md qui est le fichier standard README qui vient avec tout plugin Wordpress
  2. authors-commentary.php qui a la charge de démarrer le plugin. C'est notre fichier de démarrage.

Ensuite, nous avons le dossier admin. Il contient:

  1. Le dossier assets qui contient les sous-dossier pour les fichiers JavaScript est CSS (nous utiliserons Vanilla CSS dans cette série).
  2. Le fichier class-authors-commentary.php qui sera la classe primaire dans laquelle la plupart des fonctionnalités seront encapsulées.
  3. views qui contient un sous-dossier nommé partials. Le dossier views aura la charge d'afficher les onglets et d'inclure le contenu de chaque onglet sur la base de sa section. Ce qui veut dire que le dossiers partials contient le contenu de chaque onglet.
  4. Notez que nous pourrons ajouter plus de dossiers durant la suite de la série. En d'autres termes, cette structure est sujette au changement car nous ajouterons ou supprimerons probablement du contenu en fonction de la progression du plugin. Mais la structure telle qu'elle est, est la base dont nous avons besoin pour commencer.

    Créer les fichiers

    Maintenant que nous avons posé la structure de base du dossier et que les fichiers nécessaires sont en place, nous sommes prêts à l'écriture du code. Veuillez noter que, bien que le plugin sera fonctionner d'un point de vue de l'activation (dans l'administration), il ne fera rien jusqu'à ce qu'on ait ajouté du code dans les articles suivants.

    Bien. Il est temps d'avancer et de poser les fichiers nécessaires à l'installation et au fonctionnement du plugin dans le tableau de bord de Wordpress.

    La premier chose que nous avons besoin de faire est d'écrire l'en-tête de notre plugin, afin d'y mettre les informations dont Wordpress à besoin pour l'afficher dans l'administration.

    La dernière condition s'assure que le script s'interrompra si quelqu'un essaye d'y accéder directement.

    Ensuite, nous avons besoin de nous assurer que le coeur du plugin qui a été lancé ci-dessus est conscient de la classe primaire que nous avons créé dans l'étape précédente. Pour ce faire, nous avons besoin d'un simple require_once.

    Mais avant d'appeler require_once, nous avons d'un fichier à inclure n'est-ce pas? A cette fin, allons dans le sous-dossier admin et dans la classe du fichier class-author-commentary.php nous mettrons le code ci-dessous.

    Les commentaires s'expliquent d'eux-même, mais je décrirai tout ce qui se passe après que le bloc de code soit complet:

    Vous noterez que dans le code ci-dessus, tout ce que nous avons réellement fait - en plus de fournir la documentation pour notre classe, nos propriétés et notre constructeur - c'est créer un constructeur qui accepte les paramètres $name et $version.

    Ceux-ci seront utiles plus tard quand on chargera les dépendances JavaScript et les feuilles de style. Pour l'instant cependant, voilà tout ce dont nous avons besoin pour commencer.

    Ceci étant fait, nous pouvons retourner au fichier authors-commentary.php et écrite le code pour démarrer le plugin.

    Tout d'abord, nous utiliserons require_once pour importer la classe que nous venons de créer:

    Ensuite, nous allons créer une simple fonction et écrire un appel de fonction pour démarrer le processus:

    Notez que l'on ne défini aucun hook dans ce fichier. Tout va éventuellement demeurer dans ce sous-package - ça nous aidera à séparer nos problèmes de façon plus effective et rendre notre code plus maintenable, et nous permettra de garder notre code aussi orienté objet que possible.

    Notez que ce code défini une simple fonction qui, lorsqu'elle est appelée à l'activation du plugin, crée une instance de la classe Author_Commentary_Admin après avoir passé les variables obligatoires $name et $version.

    Jeter les bases

    A ce niveau, toutes les bases qui nous aiderons à travailler avec le plugin ont été posées. Vous devriez être capable de télécharger le fichier depuis GitHub, l'installer sous Wordpress et l'activer.

    Encore une fois, ce plugin n'affichera rien pour le moment, mais prépare le code pour le travail qui commencera dans le prochain article.

    Si vous avez des à propos du code ci-dessus ou à propos là où nous sommes actuellement dans la série, n'hésitez pas à laisser un commentaire; sinon, j'ai hâte de vous voir dans le prochain article.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.