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

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:

Les notes de préparation de l'article
Les informations et les ressources utilisées dans l'article
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.

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.
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.
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:

<?php

/**
 * Représente la Meta Box du Commentaire de l'Auteur.
 *
 * @link       http://code.tutsplus.com/tutorials/creating-maintainable-wordpress-meta-boxes-the-layout--cms-22208
 * @since      0.2.0
 *
 * @package    Author_Commentary
 * @subpackage Author_Commentary/admin
 */

/**
 * Représente la Meta Box du Commentaire de l'Auteur.
 *
 * Enregistre la meta box avec l'API Wordpress, configure des propriétés et affiche le contenu
 * en incluant les balises de la vue qui lui est associée.
 *
 * @package    Author_Commentary
 * @subpackage Author_Commentary/admin
 * @author     Tom McFarlin <tom@tommcfarlin.com>
 */
class Authors_Commentary_Meta_Box {

    /**
   * Enregistre cette classe avec l'API Wordpress
	 *
	 * @since    0.2.0
	 */
	public function __construct() {
		add_action( 'add_meta_boxes', array( $this, 'add_meta_box' ) );
	}

	/**
	 * Cette fonction est responsable de la création de la Meta Box.
	 *
	 * @since    0.2.0
	 */
	public function add_meta_box() {

		add_meta_box(
			'authors-commentary',
			"Author's Commentary",
			array( $this, 'display_meta_box' ),
			'post',
			'normal',
			'default'
		);

	}

	/**
	 * Affiche le contenu de la Meta Box.
	 *
	 * @since    0.2.0
	 */
	public function display_meta_box() {
	}

}

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

Le contructeur enregistre la fonction add_meta_box avec l'action Wordpress correspondant.
La fonction add_meta_box défini les propriétés de la meta box.
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:

/**
 * La classe qui représente la meta box qui affichera les onglets de navigation et
 * chacun des champs de la meta box.
 */
require_once plugin_dir_path( __FILE__ ) . 'admin/class-authors-commentary-meta-box.php';

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.

/**
 * Une référence à la meta box.
 *
 * @since    0.2.0
 * @access   private
 * @var      Authors_Commentary_Meta_Box    $meta_box    A reference to the meta box for the plugin.
 */
private $meta_box;

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

/**
 * Initialise la classe ses propriétés
 *
 * @since    0.1.0
 * @var      string    $name       Le nom de ce plugin.
 * @var      string    $version    La version de ce plugin.
 */
public function __construct( $name, $version ) {

    $this->name = $name;
	$this->version = $version;

	$this->meta_box = new Authors_Commentary_Meta_Box();

}

À 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:

<div id="authors-commentary-navigation">
    <h2 class="nav-tab-wrapper current">
		<a class="nav-tab nav-tab-active" href="javascript:;">Draft</a>
		<a class="nav-tab" href="javascript:;">Resources</a>
		<a class="nav-tab" href="javascript:;">Published</a>
	</h2>
</div>

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

<?php

/**
 * Affiche le contenu de la meta box.
 *
 * @since    0.2.0
 */
public function display_meta_box() {
    include_once( 'views/authors-commentary-navigation.php' );
}

À 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:

a.nav-tab {
    margin-bottom: -4px;
}

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

add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_styles' ) );

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

/**
 * Ajoute spécifiquement tous les fichiers de l'administration dans une queue.
 *
 * @since    0.2.0
 */
public function enqueue_admin_styles() {

    wp_enqueue_style(
		$this->name . '-admin',
		plugins_url( 'authors-commentary/admin/assets/css/admin.css' ),
		false,
		$this->version
	);

}

À 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.