Créer des méta-boîtes WordPress maintenables terminez le front-end

Dans cette série d'articles, nous passons en revue quelques conseils et stratégies que nous pouvons utiliser pour créer des plugins WordPress plus faciles à maintenir, et nous allons tout au long du contexte d'un plugin qui exploite les boîtes à méta à onglets.

Dans le post précédent, nous avons implémenté la fonctionnalité spécifiquement pour nos onglets et nous avons également implémenté le premier zone de texte qui sera utilisé pour capturer une partie de l'entrée de l'utilisateur. Pour ceux qui ont suivi, vous savez que nous n’avons atteint que:

Rendre les onglets fonctionnels
Introduction d'un seul élément d'interface utilisateur avec lequel l'utilisateur peut interagir

Nous n'avons pas encore terminé le processus de nettoyage, de validation et de sauvegarde des données, et nous n'avons pas non plus pris la peine d'introduire le contenu pour le reste des onglets. Au cours des deux prochains articles, nous allons faire exactement cela.

Plus précisément, dans cet article, nous allons continuer avec l'introduction du reste de l'interface utilisateur, puis nous allons passer à l'écriture du code chargé de vérifier l'entrée utilisateur et de l'associer à la publication donnée..

Avec cela mis en face de nous, commençons.

Modèles d'onglets, revisités

Comme mentionné, dans le dernier post nous avons introduit un zone de texte dans notre Brouillon languette. Si vous suivez les didacticiels et / ou utilisez le code du référentiel disponible, vous devriez voir quelque chose comme ceci:

L'idée derrière le Brouillon L’onglet est simple: c’est un endroit où les utilisateurs pourront prendre des notes, recueillir des idées et disposer d’un bloc-notes pour les aider à rassembler leurs idées avant de rédiger un message..

Ressources

Que dire de la Ressources languette? L'idée sous-jacente à cet onglet est que les utilisateurs pourront collecter diverses URL vers des pages, des tweets, des images et d'autres informations liées au contenu qu'ils souhaitent rédiger, de manière à pouvoir les intégrer, les lier et / ou les référencer dans leur publication..

Voici comment ça va fonctionner:

Il y aura un bouton qui permettra à l'utilisateur d'ajouter des champs supplémentaires
Lorsque le bouton est cliqué, un seul champ de saisie sera ajouté au-dessus du bouton pour capturer la saisie de l'utilisateur..
Si l'utilisateur fournit des informations, elles seront enregistrées lors de l'enregistrement de l'article..
Si l'utilisateur ne fournit aucune information, elle ne sera pas enregistrée..

En ce qui concerne les deux derniers points, nous nous en occuperons dans le prochain article. Pour l'instant, ajoutons dynamiquement des champs de saisie.

Localiser admin / views / partials / resources.php et mettez à jour le code pour qu'il ressemble à ceci:

Ensuite, créons un fichier dans admin / assets / js et l'appelle ressources.js. Stub le fichier afin qu'il ressemble à ce qui suit:

(function ($) 'use strict'; $ (function () );) (jQuery);

Ensuite, nous devons configurer un gestionnaire d’événements tel que lorsque l’utilisateur clique sur le bouton Ajouter une ressource bouton, il fait ce qui suit:

Crée un nouvel élément d'entrée.
Fournit l'ID et les attributs de nom appropriés pour que les informations puissent être sérialisées.
Attaché à la liste existante d'éléments d'entrée.

Voici le code entièrement commenté pour y parvenir avec plus d'informations ci-dessous:

/ ** * Crée un nouvel élément d'entrée à ajouter au DOM utilisé pour représenter une * ressource unique (adresse, tweet, URL de l'image, etc.) à référencer dans la publication. * * @since 0.4.0 * @param object $ Une référence à l'objet jQuery * @return object Un élément d'entrée à ajouter au DOM. * / function createInputElement ($) var $ inputElement, iInputCount; / * Commencez par compter le nombre de champs de saisie existants. Voici comment nous allons * implémenter les attributs name et ID de l'élément. * / iInputCount = $ ('# auteurs-commentaires-ressources') .children (). length; iInputCount ++; // Ensuite, créez l'élément d'entrée réel, puis renvoyez-le à l'appelant $ inputElement = $ ('') .attr (' type ',' text ') .attr (' nom ',' auteurs-commentary-resource- '+ iInputCount) .attr (' id ',' auteurs-commentary-resource- '+ iInputCount). attr ('value', "); return $ inputElement; (function ($) 'use strict'; $ (function () var inputElement; $ ('# auteurs-commentary-add-resource') .on. ('click', function (evt) evt.preventDefault (); / * Créer un nouvel élément d’entrée qui sera utilisé pour capturer l’entrée utilisateur * et l’ajouter au conteneur situé juste au-dessus de ce bouton. * / $ ('# authors-commentary-resources ') .append (createInputElement ($));););) (jQuery);

Dans le code ci-dessus, il existe une fonction spécialement conçue pour créer un élément d'entrée et utiliser le nombre d'éléments préexistants pour lui donner un nom et un ID uniques..

Il existe également un gestionnaire DOM-ready qui configure une fonction à déclencher chaque fois que l'utilisateur clique sur le bouton Ajouter une ressource bouton. Lorsque le bouton est cliqué, la fonction susmentionnée est appelée, puis l'élément input est ajouté au conteneur parent..

Afin de nous assurer que le résultat est optimal, nous devons écrire quelques styles. Donc, comme nous l'avons fait avec la source JavaScript, localisez admin / assets / css / admin.css puis ajoutez le code suivant au bas du fichier:

# authors-commentary-resources input [type = "text"] width: 100%; marge inférieure: 10px;

Cela garantira que chaque élément d’entrée aura une largeur de 100%, de sorte qu’ils résident chacun sur leur propre ligne..

Enfin, nous devons mettre en file d'attente le JavaScript que nous avons écrit avec WordPress afin qu'il réponde correctement aux éléments que nous avons affichés dans notre partie. Pour ce faire, localisez le enqueue_admin_scripts fonctionner dans admin / class-authors-commentary.php, et mettez à jour la fonction pour qu'elle ressemble à ceci:

id) wp_enqueue_script ($ this-> name. '-tabs', plugin_dir_url (__FILE__). 'authors-commentary / admin / assets / js / tabs.js', array ('jquery'), $ this-> version) ; wp_enqueue_script ($ this-> name. '-resources', plugin_dir_url (__FILE__). 'authors-commentary / admin / assets / js / resources.js', array ('jquery'), $ this-> version);

À ce stade, vous devriez pouvoir charger l’éditeur de publications dans votre navigateur, cliquez sur le bouton Ressources onglet, puis commencez à ajouter dynamiquement plusieurs champs de saisie à votre page.

N'oubliez pas que nous ne faisons actuellement rien du côté serveur, nous ne sommes donc pas en train de nettoyer, valider ou enregistrer ces informations. Nous ferons cela dans le prochain article.

Publié

Maintenant que nous avons un endroit pour collecter diverses notes et ressources à utiliser dans tous nos postes, quels éléments le Publié onglet contient?

Cela inclurait-il un domaine dans lequel nous pourrions laisser nos propres commentaires et notes similaires à ceux du Brouillons languette? Peut-être.
Cela inclurait-il un endroit pour enregistrer des liens vers des commentaires et d'autres ressources utiles pour un suivi après le post?
Peut-être que cela inclurait simplement une liste de tous les commentaires sur le post avec un lien vers ces commentaires et une case à cocher pour indiquer si le commentaire avait reçu une réponse ou non..

Tous les trois sont des choses parfaitement acceptables à introduire dans le Publié languette; Cependant, pour ne pas réinventer la roue et pour continuer à introduire de nouvelles fonctionnalités ainsi que d'autres moyens de travailler avec l'API WordPress, nous allons choisir l'option finale..

Plus précisément, nous allons charger une liste de tous les commentaires présents dans le message. À côté de chaque commentaire sera une case à cocher. Si le commentaire a reçu une réponse, elle sera vérifiée. sinon, il sera décoché.

Nous allons ne pas inclure des pingback pour cela puisqu'un auteur ne répond généralement pas aux pingback.

Cela dit, chargez admin / views / partials / published.php et ajoutez le code suivant:

  load_post_comments (); ?>      Ce commentaire a reçu une réponse..   comment_author; ?>: comment_content; ?>

Notez que nous appelons une fonction appelée load_post_comments. Comme nous ne l’avons pas encore défini, passons à autre chose. admin / class-auteurs-commentary-meta-box.php et ajoutez le code suivant:

 get_the_ID (), 'status' => 'approuver'); $ comments = get_comments ($ args); retourne $ commentaires;

Cette fonction récupérera une collection de tous les commentaires approuvés pour le message donné. Les partiels énumérés ci-dessus parcourent ensuite les commentaires, puis créent une étiquette et une case à cocher permettant à l'utilisateur de sélectionner si le commentaire a reçu une réponse ou non..

Sous l’étiquette, vous remarquerez l’auteur et le commentaire. Ceci est principalement destiné à identifier facilement le commentaire laissé..

Enfin, nous devons ajouter une dernière chose à notre feuille de style:

# author-commentary-comments label font-weight: bold;

Et nous avons fini.

En fin de compte, vous devriez vous retrouver avec un écran un peu comme vous voyez ci-dessus.

Déplacement vers le côté serveur

Dans le prochain article, nous allons revenir au serveur et commencer à travailler sur du code pour la validation, la désinfection, la sérialisation et la récupération de tout le code associé à l'interface utilisateur que nous venons de créer..

En attendant, n'oubliez pas de vérifier le code sur GitHub (disponible à droite de ce message) et n'hésitez pas à laisser vos questions et commentaires dans le fil ci-dessous..

Code