Accentsconagua

Intégration avec l'interface utilisateur de WordPress boîtes méta sur des pages personnalisées

Code
Share

Il s’agit de la deuxième partie d’une série consacrée à la manière dont votre plugin et votre thème peuvent offrir la meilleure expérience utilisateur possible en "s’intégrant" à l’interface utilisateur native de WordPress. Cela signifie plus que juste regardant une partie de WordPress (que nous avons couverte dans la première partie), mais le cas échéant, imitant le même flux de travail qui serait (espérons-le) familier aux utilisateurs de WordPress. Une partie de cela consiste à structurer les pages et à présenter les informations à l'utilisateur final. Un outil incroyablement utile de tous les deux une perspective interface utilisateur et développeur est la boîte à méta. Dans ce tutoriel, nous examinons comment vous pouvez ajouter des méta-boîtes à votre propre page d’administrateur personnalisée..

L'utilisation de boîtes à méta est courante dans WordPress. Il est utilisé sur les pages Widgets, Menus et Dashboard - et bien sûr sur l'écran de post-édition. Ils peuvent être un outil fantastique pour améliorer l'expérience utilisateur:

  • Ils fournissent un regroupement naturel d'informations. Sur l'écran d'édition du post, il y a une méta-boîte pour gérer la publication du post, une pour chaque taxonomie et une autre pour traiter les discussions du post. Les méta-boîtes divisent visuellement les informations en parties plus faciles à manipuler.
  • L'utilisateur décide ce qui est important. L'utilisateur final peut décider quelles méta-boîtes apparaissent où, et peut complètement masquer les méta-boîtes qui ne les concernent pas. Autrement dit, cela permet à l’utilisateur de manipuler la page de sorte qu’elle soit organisée de manière à faciliter leur flux de travail.
  • Réduire ou supprimer. Un point similaire à celui ci-dessus: les méta-boîtes non pertinentes peuvent être minimisées ou complètement masquées.
  • Cela semble bon. Dans l'ensemble, les méta-boîtes ont l'air bien. Comme ils sont assez courants dans WordPress, d’autres exemples de boîtes à méta (c’est-à-dire des boîtes à méta qui ne ressemblent pas à la boîte à méta native) semblent tout simplement déplacés..

Un dernier point qui ne devrait pas passer inaperçu: lorsqu'elles sont implémentées correctement, les méta-boîtes permettent également à des tiers d'ajouter ou de supprimer du contenu à partir de votre page d'administrateur, ce qui rend votre plugin ou votre thème facilement extensible..

Veuillez noter que je ne préconise pas l'utilisation de boîtes à méta pour tout, mais uniquement dans les cas où cela est logique. Comme indiqué dans la première partie, il arrive que l'interface utilisateur existante de WordPress ne soit ni suffisante ni appropriée pour ce que votre plugin tente de faire. Dans ces cas, vous ne devrait pas contraignez-vous à l'interface utilisateur d'administration - mais vous ne devriez pas l'ignorer non plus.

La mise en page

WordPress est très bon pour être étendu et les boîtes à méta ne font pas exception. Les scripts et les styles utilisés par WordPress pour positionner, styler et "animer" des boîtes méta sont également disponibles. Leur utilisation signifie que les méta-boîtes (ainsi que toutes leurs "fonctionnalités") peuvent être ajoutées avec relativement peu de code..

Cependant, pour en tirer parti, nous devons imiter la mise en page d'une page d'administrateur de WordPress afin que les sélecteurs utilisés dans les scripts et les styles s'appliquent à notre page. Bien entendu, différentes pages implémentent les boîtes à méta différemment. Par exemple, le tableau de bord a jusqu'à 4 colonnes de boîtes de méta de taille égale, alors que la page de post-édition en autorise seulement 1 ou 2, l'une d'entre elles jouant le rôle de barre latérale. Selon la manière dont vous souhaitez que votre page apparaisse, vous devrez structurer votre page en conséquence. Dans ce tutoriel, je vais passer en revue la disposition de la boîte 1/2-méta de l'écran d'édition. Jetons donc un coup d'œil à la structure filaire d'une page d'administrateur.

.emballage

Cet élément enveloppe toute votre page d’administration. Il ajoute une marge en haut et à droite pour que la page d'administration reste à l'écart des côtés de l'écran. Cela devrait être utilisé sur toutes vos pages d'administration.

Icône d'écran

Suivant est l'icône de l'écran. Ceci à nouveau devrait apparaître sur toutes vos pages d’administrateur. Le balisage de l'icône d'écran peut être généré à l'aide de la fonction screen_icon (). Nous avons couvert son utilisation dans la première partie de cette série. screen_icon ('mon-id') produit le HTML:

Titre

Suivant est le titre de la page. Le titre doit être enveloppé à l'intérieur Mots clés. Si nécessaire, un lien "Ajouter un nouveau" peut être ajouté à l'intérieur de ces balises:

  % s% s ', esc_html __ (' Titre de la page ',' plugin_domain '), esc_url (admin_url (admin.php? page = mon-lien-à-ajouter-nouveau)), esc_html __ (' Ajouter nouveau ',' plugin_domain ')); ?>

Forme

Habituellement, avec les boîtes à méta, vous acceptez une forme de saisie de la part de l'utilisateur. Pour ce faire, vous devez insérer la page entière dans un formulaire. Dans tous les cas, il est nécessaire de stocker les préférences de la boîte à méta (les boîtes à méta qui sont fermées et l'emplacement des boîtes à méta)..

#poststuff

Cet élément enveloppe le titulaire de la boîte à méta. C'est un élément important car WordPress l'utilise pour cibler ses styles et ses scripts.

# post-body

Cet élément agit en tant que titulaire de la boîte à méta. Il a deux classes importantes:

porte-metabox et colonnes- *. La seconde spécifie la mise en page de la page (qu’elle comporte 1 ou 2 colonnes). L’option de présentation spécifiée par l’utilisateur peut être obtenue avec get_current_screen () -> get_columns (). Dans ce qui suit, nous utilisons ceci pour ajouter la classe colonnes-1 ou colonnes-2 de manière appropriée (avec ce dernier par défaut).

Les conteneurs de la méta-boîte à l'intérieur # post-body

Il existe deux conteneurs de boîte à méta, qui agissent en tant que «colonnes» de boîtes à méta. La première, .postbox-container-1, agit comme la barre latérale dans la disposition à 2 colonnes et dans la disposition à 1 colonne se trouve juste au-dessus du deuxième conteneur de la boîte méta. Ensuite il y a # contenu post-corporel. Cet élément (facultatif) ne contient aucune boîte de méta, mais contient le contenu que vous souhaitez placer en haut de la page et ne peut pas être déplacé. Dans l'écran d'édition, par exemple, il contient le titre de l'article et l'éditeur TinyMCE..

Pour imprimer les méta-boîtes à l'intérieur du conteneur approprié, nous utilisons le do_meta_boxes fonction qui prend trois arguments:

  • $ écran - L'ID d'écran (ou nous pouvons utiliser une chaîne vide pour utiliser l'ID d'écran actuel).
  • $ contexte - C'est un identifiant de chaîne utilisé lors de l'enregistrement de la méta-boîte. Cela peut être n'importe quoi, mais devrait être descriptif (par exemple, "side" et "normal"). Cela vous permet de définir la position par défaut et l'ordre des boîtes méta..
  • $ object - Celui-ci est transmis au rappel de la boîte à méta en tant que premier argument et correspond généralement à l'objet en cours de modification (par exemple, un objet de publication, dans l'écran de modification). Si ce n'est pas pertinent pour votre page d'administrateur, vous pouvez passer nul.

Exemple de mise en page

Ajout de méta-boîtes et d'options d'écran

Nous avons maintenant la structure de page que nous souhaitons maintenant (ou tout autre tiers) pour pouvoir ajouter des méta-boîtes à la page. Nous aimerions également charger le code JavaScript nécessaire permettant de minimiser, masquer ou déplacer ces méta-boîtes..

Pour permettre l'ajout de boîtes méta, nous devons utiliser deux crochets. La première:

 add_meta_box_ screen_id

Passe l'objet en cours d'édition (ou null). La deuxième:

 add_meta_box

Passe deux variables: l'identifiant d'écran et l'objet en cours d'édition. Les utilisateurs peuvent ensuite se connecter à ces actions et ajouter leurs boîtes de méta à la page..

Ensuite, nous voulons charger le script WordPress postbox.js. Ce script permet à l'utilisateur de déplacer, minimiser ou fermer des méta-boîtes (et enregistre ses préférences). Le script doit être initialisé, nous devrons donc imprimer une ligne de javascript dans le pied de page pour le faire..

Enfin, nous ajoutons une option d’écran permettant à l’utilisateur de basculer entre la disposition d’une ou deux colonnes. Les options d'écran permettant à l'utilisateur de masquer les méta-boîtes sont automatiquement ajoutées. Nous allons utiliser le charge - $ pagenow crochet pour déclencher notre rappel uniquement sur la page appropriée. Pour les pages d'administration personnalisées, $ pagenow est l'ID de l'écran.

  2, 'default' => 2));  / * Imprime le script dans le pied de page. Ceci "initialise" les méta-boîtes * / function wptuts_print_script_in_footer () ?>

Il ne reste plus qu'à ajouter les méta-boîtes.

Ajout de méta-boîtes à la page

Normalement, les méta-boîtes peuvent être ajoutées en utilisant le add_meta_boxes ou, mieux encore, le add_meta_boxes_ post_type crochets. Plus généralement, le type de post peut être considéré comme l'identifiant de l'écran. Nous avons déclenché ces crochets à l'intérieur du wptuts_add_screen_meta_boxes () fonction ci-dessus. Il ne reste plus qu'à accrocher ces actions et à utiliser le add_meta_box () une fonction.

 / * Tout au long de $ screen_id est supposé contenir l'ID d'écran * / add_action ('add_meta_boxes _'. $ Screen_id, 'wptuts_add_my_meta_box'); function wptuts_add_my_meta_box () add_meta_box ('my_meta_box_id', // ID de la méta-boîte __ ('Ma méta-boîte', 'plugin_domain'), // Titre de la méta-boîte 'wptuts_my_meta_box_callback', // Callback définissant l'incrément de plugin '$ screen_id Écran auquel ajouter la méta-boîte 'normal' // Context);

Code

Vous pouvez télécharger une classe de page d'administration simple basée sur ce tutoriel à partir de GitHub.

Code
×