Créer des méta-boîtes WordPress maintenables la mise en page

Dans cette série, nous expliquons comment créer des méta-boîtes WordPress maintenables. Autrement dit, nous examinons certaines des meilleures pratiques que nous pouvons utiliser dans notre développement WordPress pour nous assurer que nous écrivons du code qui est maintenable par nous-mêmes ou par notre équipe, car il continue d'évoluer avec le temps..

Dans le premier article, nous avons examiné la structure initiale des répertoires et défini le code de base requis pour faire fonctionner un plugin dans WordPress. Dans ce post, nous allons continuer à planifier et à construire notre plugin. 

Nous parlerons également des décisions que nous prenons lorsqu'il s'agit de séparer des parties de notre code et de la manière dont elles sont prises en compte pour la maintenabilité..

Planification Commentaire de l'auteur

Dans le post précédent, nous avons commencé à travailler sur un plugin appelé Commentaire de l'auteur. L'idée derrière le plugin est de permettre aux auteurs de publication de laisser diverses notes et ressources associées à la publication qui ont été utilisées soit comme source d'inspiration, soit comme pensées. après que le message a été écrit et reçu, et autres informations similaires.

Lorsque vous écrivez un article, supposons que nous voulions capturer trois informations spécifiques:

1. Notes utilisées pour préparer le post
2. Actifs et ressources utilisés tout au long du poste
3. Tweets et liens vers des commentaires et des commentaires après la publication

Pour être clair, nous souhaitons pouvoir conserver les notes relatives à la création de la publication avant sa rédaction, ainsi que les liens vers divers éléments d'actif - articles externes, images, vidéos, exemples de code, etc. liste de tweets, liens vers des commentaires et divers extraits de courriels que nous avons reçus.

À ce stade, nous en avons assez pour commencer à préparer la boîte de méta et la présentation à onglets correspondante..

Les onglets Meta Box

Avant de commencer à écrire du code, nommons les onglets qui seront associés à chacun des états de notre publication, comme indiqué ci-dessus. Cela nous aidera à organiser de manière conceptuelle nos éléments d’entrée afin qu’ils soient logiquement regroupés.

Certes, vous pouvez nommer ces noms comme vous le souhaitez, mais si vous suivez ce didacticiel et le code source fourni, c'est ce à quoi vous pouvez vous attendre..

1. Le premier onglet s'appellera Brouillon car il contiendra tous les points, les phrases et autres notes ayant servi à préparer le poste..
2. Le deuxième onglet s'appellera Ressources car il comprendra des informations sur d'autres articles, liens, vidéos, etc. que nous pourrions consulter dans notre article ou que nous pourrions intégrer dans notre article..
3. Le dernier onglet s'appellera Publié car il contient des liens vers des commentaires, des champs pour les e-mails et d'autres informations pertinentes pour le message après sa publication..

Assez simple, n'est-ce pas? Nous parlerons davantage des éléments d'entrée de chaque onglet une fois que nous en serons là dans le code, mais pour l'instant, nous devons nous concentrer sur la création de la boîte méta et la mise en œuvre des onglets..

Créer la méta-boîte

Pour créer la méta-boîte, nous allons tirer parti de la add_meta_box fonctionner comme indiqué dans le WordPress Codex. Pour ce faire, nous allons introduire une nouvelle classe, mettre à jour le fichier d'amorçage du plug-in et introduire quelques vues qui seront utilisées pour rendre le balisage dans le navigateur..

La classe meta box

Afin de nous assurer que notre code est bien encapsulé et que chaque classe représente une idée unique, nous allons créer un Authors_Commentary_Meta_Box classe. Cette classe sera responsable de l’enregistrement d’un crochet avec le add_meta_box action, configuration de la boîte à méta et rendu de son contenu.

Pour ceux qui n’ont pas l’habitude d’écrire des plugins de manière orientée objet avec WordPress, cette approche nous permet de segmenter nos domaines de responsabilité - comme une boîte méta - et d’avoir une seule classe représentant tout ce qui en fait la création..

Pour ce faire, commencez par créer auteurs-commentaires-meta-box.php dans le répertoire admin. Ensuite, ajoutez le code suivant:

 * / class Authors_Commentary_Meta_Box / ** * Enregistrez cette classe avec l'API WordPress * * @since 0.2.0 * / public function __construct () add_action ('add_meta_boxes', tableau ($ this, 'add_meta_box'));  / ** * La fonction responsable de la création de la boîte à méta réelle. * * @since 0.2.0 * / public function add_meta_box () add_meta_box ('author-commentary', 'Commentaire de l'auteur', array ($ this, 'display_meta_box'), 'post', 'normal', 'default') ;  / ** * Affiche le contenu de la boîte à méta. * * @since 0.2.0 * / fonction publique display_meta_box ()  

Les commentaires et le contenu de la classe devraient le rendre relativement facile à comprendre. Il fait trois choses, mais pour être clair:

1. Le constructeur enregistre le add_meta_box fonctionner avec l'action WordPress correspondante.
2. le add_meta_box fonction définit les propriétés de la boîte à méta.
3. le display_meta_box fonction ne fait rien encore - nous allons travailler sur ce moment.

Avant de continuer, il y a quelques changements que nous devons présenter au reste du plugin.

Tout d'abord, nous devons inclure ce nouveau fichier dans le fichier d'amorçage du plugin. Dans auteurs-commentary.php, ajouter la ligne de code suivante au-dessus du courant Demandez une fois déclaration:

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

Nous ajoutons cette ligne au-dessus du code initial, car le code initial dépend du fichier à exécuter. par conséquent, il doit être chargé en premier.

Ensuite, nous devons introduire une nouvelle propriété à côté de admin / class-authors-commentary.php qui fera référence à une instance de la méta-boîte:

/ ** * Une référence à la boîte à méta. * * @since 0.2.0 * @access private * @var Authors_Commentary_Meta_Box $ meta_box Référence à la méta-boîte du plug-in. * / private $ meta_box;

Enfin, nous devons instancier le code dans le constructeur de la classe:

/ ** * Initialise la classe et définit ses propriétés. * * @since 0.1.0 * @var string $ name 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 stade, vous devriez pouvoir activer le plug-in, accéder à une page de publication et voir une boîte méta vide:

Rien d’excitant, mais nous avons ce dont nous avons besoin pour commencer à présenter notre navigation par onglets.

Ajout d'onglets

À ce stade, nous sommes prêts à introduire la partie de navigation par onglets de la boîte méta. En fin de compte, notre objectif est d’introduire le balisage et les styles de l’onglet de ce post, puis d’implémenter le comportement des éléments du prochain post de la série..

Cela dit, créons d'abord un vues sous-répertoire dans le admin annuaire. Techniquement, nous l'avons fait dans l'article précédent. Cependant, nous n'avions pas de contenu dans le répertoire, il n'a donc pas été coché dans le contrôle de source (le répertoire n'a donc pas été ajouté - donc si vous suivez le référentiel, le moment est venu de le créer).

Ensuite, créez un fichier dans le répertoire views appelé auteurs-commentary-navigation.php. Ce fichier servira principalement de balisage; cependant, cela inclura un peu de PHP au moment où nous le ferons avec ce plugin.

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

 
 Ressources brutes publiées 
 

Une fois cela fait, insérez le code suivant dans Authors_Commentary_Meta_Box, ajoutez le code suivant pour importer ce balisage particulier:

En dehors de la div conteneur que nous avons, notez ce qui suit:
 
Nous avons enveloppé trois ancres dans un h2 élément. le h2 l'élément contient les attributs de classe de nav-tab-wrapper et actuel. Cela nous permet d’hériter des styles directement à partir de WordPress sans rien faire de notre part..
 
Chaque ancre a un onglet de navigation classe le premier dont le nav-tab-active classe. Cela nous donne encore un peu de style dont nous héritons de WordPress.
 
Chaque ancre a aussi le href attribut de javascript :; parce que les ancres ne nous mèneront nulle part. Dans un prochain tutoriel, nous utiliserons plutôt JavaScript pour contrôler les onglets et le contenu affiché dans chacun d'eux..
 
À ce stade, vous devriez voir ce qui suit:
Notez que tous les styles appliqués aux onglets ont été fournis par WordPress. La seule chose que vous voudrez peut-être modifier est la marge qui existe entre les onglets et la ligne horizontale située en dessous.. 
Faisons-le maintenant.
Y compris une feuille de style
dans le admin répertoire, ajoutez un autre sous-répertoire appelé les atouts et en son sein un répertoire appelé css. Ensuite, créez un fichier vide appelé admin.css.
Après cela, incluez les lignes suivantes dans le fichier CSS:
a.nav-tab margin-bottom: -4px; 
Assurez-vous ensuite d’inclure l’appel suivant dans le constructeur de classe-auteurs-commentary.php:
add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_admin_styles'));
Enfin, ajoutez la fonction suivante - elle est responsable de la mise en file d'attente de la feuille de style actuelle:
/ ** * Met en file d'attente tous les fichiers spécifiquement pour le tableau de bord. * * @since 0.2.0 * / public function enqueue_admin_styles () wp_enqueue_style ($ this-> name. '-admin', plugins_url ('auteurs-commentary / admin / assets / css / admin.css'), false, $ this-> version); 
À ce stade, il devrait sembler beaucoup plus propre:
Ceci fait, nous avons complété tout ce que nous devons faire pour la base des onglets de navigation de notre boîte méta..
Préparer l'avenir
Dans le prochain article, nous allons introduire le contenu de chaque onglet et travailler sur le JavaScript qui est nécessaire pour basculer entre les onglets et chacun de leur contenu..
Pour ceux qui sont plus expérimentés avec WordPress, cette série d'articles peut sembler bouger à un rythme plus lent, mais c'est le but: nous cherchons à être aussi exhaustif que possible lorsqu'il s'agit non seulement de construire notre interface utilisateur, mais également aussi en expliquant la raison d'être de chacune de nos décisions.
En attendant, n'oubliez pas de vérifier le code source sur GitHub, de suivre et de laisser des questions ou des commentaires dans le flux ci-dessous..



		
			
	   
	




Code