Share
Cette série est centrée sur les astuces et les stratégies que nous pouvons utiliser pour écrire des plugins WordPress - en particulier ceux qui utilisent des méta-boîtes - qui sont logiquement organisés et faciles à maintenir..
Dans les deux premiers articles de la série, nous avons présenté la structure de répertoires initiale, configuré le code du plug-in et discuté de ce que le plug-in va faire. Dans le dernier post, nous avons commencé à créer la boîte à méta et à introduire les onglets qui contiendront chacune des fonctionnalités que nous allons utiliser..
Cet article continuera à s'appuyer sur ce que nous avons fait jusqu'à présent. Nous allons introduire du contenu dans chacun des onglets, en implémentant une fonctionnalité qui nous permet de basculer avec ledit contenu, et nous allons commencer par introduire les champs pour le contenu sur le premier onglet..
Avant de commencer à mettre en place les onglets permettant de basculer entre toutes les options disponibles, nous devons introduire des partiels, des modèles, des vues ou tout autre moyen que vous souhaitez appeler afin de disposer de fichiers spécifiquement destinés à la gestion de nos informations..
Tout d'abord, accédez à la admin / vues / partielles répertoire et ajoutez les fichiers suivants (qui peuvent tous être vides, bien que je vous ai fourni du code de base ci-dessous):
Accentsconagua
drafts.phpressources.phppublished.phpChacun de ces fichiers correspondra à l'un des onglets de l'interface des boîtes à méta. Allons de l'avant et introduisons un contenu d'espace réservé pour chacun des onglets. Avant d'en avoir terminé avec l'article, nous allons implémenter l'interface utilisateur du premier onglet, mais cela nous donnera un visuel avec lequel nous pourrons travailler avant de continuer à travailler sur la fonctionnalité des onglets..
Ajoutez le code suivant à drafts.php.
C’est là que le brouillon va résider.
Nous allons jeter un oeil à cette partielle plus tard dans l'article.
Ajoutez le code suivant à ressources.php.
C’est là que le contenu des ressources réside.
Nous allons jeter un oeil à ce partiel plus tard dans la série.
Ajoutez le code suivant àpublished.php.
C'est là que le contenu publié résidera.
Nous allons également jeter un oeil à cette partielle plus tard dans la série.
Nous avons encore une chose à faire avant de tester cela dans le tableau de bord WordPress: nous devons réellement inclure ces fichiers dans la vue méta-box afin que nous puissions voir les informations..
C'est simple à faire. Tout d'abord, ouvrir auteurs-commentary-navigation.php. Ajoutez le code suivant au fichier (notez que tout le nouveau code est une série de include_once déclarations).
Ressources brutes publiées
En supposant que tous vos fichiers soient créés et correctement inclus, nous sommes prêts à jeter un coup d'œil au tableau de bord. Si tout a été correctement implémenté, vous devriez voir quelque chose comme ceci:
Évidemment, nous ne voulons pas que tout le contenu apparaisse dans le premier onglet, nous devons donc apporter des modifications. Alors faisons ça.
En fin de compte, notre objectif est d’utiliser les styles et les fonctions intégrés fournis par WordPress. Chaque fois que vous introduisez quelque chose qui ne fait pas partie des fonctionnalités de base de WordPress, vous devrez le maintenir au fil du temps..
De plus, vous travaillez également à la création d'un plug-in aussi étroitement que possible avec l'interface utilisateur WordPress. À cette fin, nous utiliserons une combinaison de styles intégrés, de styles personnalisés et de JavaScript pour obtenir exactement ce que nous espérons réaliser..
Nous savons que la première chose à faire est de tout masquer sauf la première vue (c’est-à-dire tout Brouillons).
Pour ce faire, nous devons ajouter un classe attribut de caché aux partiels pour la Ressources onglet et à la Publié languette.
Chacun des fichiers suivants devrait ressembler à ceci:
drafts.php:
C’est là que le brouillon va résider.
ressources.php:
C’est là que le contenu des ressources réside.
published.php:
C'est là que le contenu publié résidera.
Et le résultat de ce changement mineur devrait être le suivant:
Facile, non? C’est précisément pourquoi je recommande de s’en tenir au maximum aux fonctionnalités et styles principaux de WordPress..
Bien sûr, nous devons encore introduire le code permettant de basculer les données entre les onglets, non? Alors faisons cela maintenant.
Premièrement, nous devons nous assurer que le premier onglet est marqué comme actif. En supposant que vous suiviez ce tutoriel et son référentiel GitHub correspondant, votre code devrait alors ressembler à ceci:
Ressources brutes publiées
Ce qui est génial car il marque déjà votre premier onglet comme actif avec l’utilisation du nav-tab-active attribut de classe. Nous avons du travail à faire pour nous:
Maintenant, il y a plusieurs façons d'accomplir la deuxième étape. Nous allons le faire d’une manière documentée et expliquée au cours de cet article, mais sachez que sont d'autres alternatives que vous êtes susceptible de voir et qu'ils ne sont pas nécessairement faux.
En bout de ligne, il existe un certain nombre de moyens pour gérer cela, nous le traitons de l’un des nombreux moyens disponibles..
Alors d'abord, ajoutons un fichier JavaScript à admin / assets / js et nous appellerons est tabs.js. Le squelette du fichier devrait ressembler à ceci:
(function ($) 'use strict'; $ (function () );) (jQuery);
Ensuite, assurez-vous que nous importons du code JavaScript uniquement sur les pages de publication. Pour ce faire, nous introduisons un crochet dans notre constructeur où nous avons déjà inclus des feuilles de style. Le constructeur complet est ci-dessous:
nom = $ nom; $ this-> version = $ version; $ this-> meta_box = new Authors_Commentary_Meta_Box (); add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_admin_styles')); add_action ('admin_enqueue_scripts', tableau ($ this, 'enqueue_admin_scripts')); Et puis nous implémentons la fonction:
id) wp_enqueue_script ($ this-> name. '-tabs', plugins_url ('authors-commentary / admin / assets / js / tabs.js'), array ('jquery'), $ this-> version); À ce stade, nous avons tout ce dont nous avons besoin pour implémenter JavaScript afin de contrôler les onglets. Ci-dessous, vous trouverez le code commenté pour cela et une brève explication à la suite de l'extrait de code:
(function ($) 'use strict'; $ (function () // Récupère le wrapper pour les onglets de navigation var navTabs = $ ('# auteurs-commentaires-navigation'). enfants ('.nav-tab-wrapper '), tabIndex = null; / * Lorsque vous cliquez sur chacun des onglets de navigation, vérifiez s'il contient le nom de la classe' nav-tab-active '*. Sinon, marquez-le comme étant actif; sinon, ne le faites pas. faire n'importe quoi (comme * déjà marqué comme actif. * * Ensuite, quand un nouvel onglet est marqué comme actif, la vue enfant correspondante doit être marquée * comme visible. Pour ce faire, nous basculons l'attribut de classe 'hidden' de la classe correspondante. variables. * / navTabs.children (). each (fonction () $ (this) .on ('clic', fonction (evt) evt.preventDefault (); // Si cet onglet n'est pas actif… if (! $ (this) .hasClass ('nav-tab-active')) // Désélectionne l'onglet actuel et marque le nouvel comme actif $ ('.nav-tab-active') .removeClass ('nav-tab-active '); $ (this) .addClass (' nav-tab-active '); // Sauvegarde l’index de l’onglet qui vient d’être marqué comme actif. être 0 - 3. tabIndex = $ (this) .index (); // Cache l'ancien contenu actif $ ('# auteurs-commentaires-navigation') .children ('div: not (.inside.hidden)' ') .addClass (' hidden '); $ ('# authors-commentary-navigation') .children ('div: nth-child (' + (tabIndex) + ')') .addClass ('hidden'); // Et affiche le nouveau contenu $ ('# auteurs-commentaires-navigation') .children ('div: nth-child (' + (tabIndex + 2) + ')') .removeClass ('hidden'); ); ); ); ) (jQuery);Juste au cas où les commentaires de code ne seraient pas clairs, le code ci-dessus configure un gestionnaire d'événements pour tous les onglets. Quand un onglet est cliqué, il regarde pour voir s'il a le nav-tab-active classe. Si oui, alors rien ne se passe.
Sinon, nous basculons l'onglet et masquons le contenu était actif et afficher le nouveau contenu en supprimant le caché nom de classe que nous avons ajouté plus tôt dans l'article.
A présent, vous devriez pouvoir basculer entre les onglets et voir chacune des trois implémentations différentes sans aucun problème. Cela dit, allons de l'avant et passons à la mise en œuvre de la fonctionnalité pour le premier onglet.
Bien que nous n'acheverons pas toutes les fonctionnalités de ce didacticiel, nous aurons du pain sur la planche dans l'article suivant. Supposons que pour les besoins de ce plugin, le Brouillons L’UI sera un endroit où l’utilisateur le traitera simplement comme un bloc-notes pour des idées.
Il peut inclure des liens vers des articles, des liens vers des tweets, des notes brèves sur le contour, quelques phrases, etc. Généralement, il sert de "fourre-tout" à tous les artefacts que l'auteur peut utiliser tout au long de son post..
À cette fin, nous allons utiliser un simple, unique zone de texte. De plus, nous ne voulons pas introduire plus d’éléments d’interface utilisateur que nécessaire, nous allons donc ne pas introduire un bouton de soumission. Au lieu de cela, nous enregistrerons les données chaque fois que l'utilisateur clique sur "Mettre à jour" dans l'éditeur de publication..
De cette façon, tout est sauvegardé en même temps.
Encore une fois, nous n'allons pas entrer dans le processus de validation, de désinfection et de sérialisation, mais nous allons placer une zone de texte dans le texte. Brouillons partiel pour nous mettre dans un endroit agréable pour l'article de suivi.
Ouvrir drafts.php, ajoutez le code suivant, et votre code final devrait ressembler à ceci:
Après cela, mettez à jour le admin.css fichier pour vous assurer que le zone de texte s'intègre bien avec le reste de la boîte à méta:
# authors-commentary-drafts width: 100%; hauteur: 250px;
Maintenant, lorsque vous affichez la boîte de méta, vous devriez voir un bien formaté zone de texte avec la boîte méta avec des onglets qui fonctionnent lorsque vous cliquez dessus.
Dans le prochain article, nous allons continuer à implémenter l'interface utilisateur pour chacun des onglets existants dans la boîte méta..
Ensuite, nous commencerons le processus de nettoyage, de sérialisation et de validation en sauvegardant les informations que l'utilisateur place dans la méta-boîte. Nous allons également avancer avec l'introduction de champs supplémentaires dans le plugin.
.
