Share
Depuis longtemps, il est largement admis que l’un des plus grands avantages de WordPress par rapport à ses concurrents est son interface utilisateur admin. Il est dans l’ensemble très simple et intuitif à utiliser. En outre, il est constamment affiné et amélioré, l'écran de téléchargement des médias faisant désormais partie des nombreux éléments examinés. Malheureusement, il y a quelque chose sur lequel l'équipe WordPress-UI n'a aucun contrôle, qui annule constamment tout leur travail: plugins et thèmes.
L'interface utilisateur de votre plugin (je vais utiliser le terme plugin dans cet article, mais il en va de même pour l'interface utilisateur de votre thème) est l'un des aspects les plus importants de votre plugin. Elle définit la manière dont les gens interagissent avec elle, sa facilité d’utilisation et peut-être même sa prendre plaisir En l'utilisant. C’est l’objectif ultime de votre plugin: faciliter une tâche ou des tâches particulières à votre utilisateur final (c’est en fait le but apparemment oublié des ordinateurs eux-mêmes). L’UI devrait être attrayante, mais au final elle devrait être fonctionnelle. Lorsque vous décidez comment mettre en page votre plugin, vous devez décider comment rendre votre plugin facile à utiliser - mieux encore, obtenez des commentaires - c'est essentiellement ce que fait WordPress.
Au cours des dernières semaines et des derniers mois, de nombreuses discussions ont eu lieu sur la manière d'améliorer la convivialité de WordPress - des améliorations générales de l'interface utilisateur à l'accessibilité (si vous ne pensez pas que l'accessibilité est un problème pour WordPress ou votre plugin, je vous recommande de vérifier l'excellent discours de Graham Armfield de WordCamp Edinburgh). Plus récemment, Tom McFarlin a suscité de nombreuses discussions sur l'intégration à l'interface utilisateur de WordPress. La discussion a ensuite porté sur la nécessité d'une directive d'interface utilisateur pour les auteurs de plug-in afin de les aider à intégrer leur plug-in de manière transparente dans WordPress. Ce guide commence à prendre forme sous la forme du document WordPress User Interface Guidelines.
Dans cette série, nous examinerons les étapes à suivre pour intégrer votre plug-in dans l'interface utilisateur de WordPress. Dans cet article, nous allons nous concentrer sur certaines instructions de base, ainsi que sur l'API d'interface utilisateur à votre disposition. Veuillez noter que ces directives ne sont en aucun cas "officielles". Dans les articles suivants, nous examinerons davantage d'exemples "pratiques", notamment l'utilisation de métaboxes sur des pages d'administration personnalisées et l'utilisation des pointeurs d'administration de WordPress..
C'est la raison la plus importante. L'objectif principal de l'interface utilisateur WordPress et de votre plugin ou thème est de faciliter la gestion et la production de contenu pour l'utilisateur final. C'est pour permettre à l'utilisateur d'atteindre un but spécifique. Si votre plugin ou votre thème introduit une interface utilisateur très différente de WordPress ', vous forcez l'utilisateur à apprendre une toute nouvelle interface. Ce faisant, vous leur facilitez la tâche et ils vont probablement désinstaller votre plugin et en trouver un autre. La cohérence est la clé ici.
Deuxièmement, c’est moche qu’un plugin ou un thème ressorte comme un pouce endolori. L'administrateur WordPress est (pour la plupart) magnifiquement cohérent - et les plugins qui ne rentrent pas dans la peau ne sont que des plaies pour les yeux. Cela ne veut même pas dire que la propre interface utilisateur du plugin est particulièrement laide. L’interface du plugin est peut-être lisse, mais elle restera hors contexte.
le meilleur les plugins s'intègrent parfaitement dans WordPress dans la mesure où il est presque impossible de dire où WordPress lui-même s'arrête et le plugin démarre. Ce sont ces plugins que les utilisateurs aiment utiliser, en grande partie parce qu'ils ont l'air d'être censés être là. Les plugins devraient étendre WordPress - ne pas en faire un CMS que le Dr. Frankenstein produirait.
WordPress fournit de nombreuses façons de vous aider à vous "adapter" à WordPress. Il fournit également beaucoup de CSS sur les pages d’administration dont vous pouvez tirer parti. Faire les deux est un moyen efficace de «sécuriser à l'avenir» l'interface utilisateur de votre plugin. Toute modification apportée à WordPress sera également répercutée sur votre plugin. D'un autre côté, si vous vous débrouillez tout seul avec votre interface utilisateur d'administration, chaque mise à jour de WordPress entraîne un risque accru que votre interface utilisateur de plug-in soit en conflit avec WordPress. En utilisant les styles et les mises en page de WordPress, vous simplifiez la vie, ainsi que celle de vos utilisateurs..
Vous pensez peut-être que votre plugin est la chose la plus importante du référentiel, et peut-être le meilleur du genre. Mais est-ce que vraiment besoin d'une place de choix dans le menu administrateur? Un aspect important de toute interface utilisateur est la simplicité qui permet aux utilisateurs de trouver rapidement ce qu'ils veulent. Encombrer le menu est le contraire de cette.
Votre plugin n'aura peut-être même pas besoin de sa propre sous-page. Des sections peuvent être ajoutées à toutes les pages de paramètres par défaut. Si votre plugin ne contient que quelques paramètres et qu’ils ne seraient pas déplacés dans une page de paramètres existante, vous devriez en tenir compte..
Si votre plugin nécessite une place dans le menu de niveau supérieur, réfléchissez bien à l'endroit où il devrait aller. Le menu d'administration est divisé en trois sections: le tableau de bord, la gestion de contenu et les paramètres. L'emplacement de votre élément de menu de niveau supérieur dépend du but principal de votre plugin. S'il s'agit de produire, d'éditer et de gérer du contenu, vous devez le placer au centre. Si son objectif est la maintenance, les performances ou la configuration (par exemple, l'intégration avec un logiciel tiers, la mise en cache ou les plug-ins de sauvegarde), ceux-ci devraient probablement aller en bas.
Enfin, votre plugin ne devrait pas trop s’imposer. Litter votre plugin avec des liens, des publicités ou des flux RSS provenant de votre blog ne fera pas aimer votre plugin à vos utilisateurs. Le plugin 'branding' doit être évité ou au moins suffisamment subtil pour ne pas entrer en conflit avec l'interface utilisateur de WordPress.
Bien que cela puisse ne pas affecter la facilité d'utilisation du plugin, l'intégration dans l'apparence de WordPress permet une expérience utilisateur transparente et améliorée. Ce n'est pas que la marque du plugin puisse être terrible (certains ont l'air fantastique) - mais plus qu'ils ont l'air hors de propos.
Il va de soi que la plupart des auteurs de plug-ins souhaitent que leur plug-in fasse appel au plus grand nombre possible d'utilisateurs. Un effet secondaire malheureux est que l'utilisateur se voit proposer une panoplie d'options. Une partie de la philosophie WordPress est de prendre des décisions et non des options:
En tant que développeurs, nous pensons parfois que fournir des options pour tout est une bonne chose, vous ne pouvez jamais avoir trop de choix, non? Ces choix finissent par être des choix techniques, des choix auxquels l’utilisateur final moyen n’a aucun intérêt. C’est notre devoir, en tant que développeurs, de prendre des décisions de conception intelligente et d’éviter de faire porter le poids des choix techniques à nos utilisateurs finaux..
Il y a deux choses à équilibrer: d'une part, vous voulez que les utilisateurs puissent modifier le comportement de votre plugin. D'autre part, un trop grand nombre d'options peut rendre difficile la recherche de l'une d'elles et peut laisser l'utilisateur perplexe et frustré. Il n'y a pas de solution unique ici, et c'est un jugement qui devrait être porté sur vos expériences de ce que vos utilisateurs demandent..
Cependant, les options ne sont pas le seul moyen de permettre à votre plugin d'être peaufiné:
L'élément du menu des paramètres? Ou votre propre menu de niveau supérieur? J'en ai même trouvé dans le menu 'Plugins' auparavant. Il y a beaucoup de débat à ce sujet. Pour la majorité des plugins, qui n'ont pas besoin de leur propre menu de niveau supérieur, la décision est prise pour eux. Mais qu'en est-il des plugins qui font? Je ne peux que donner mon opinion ici. Un point convaincant est que certains utilisateurs attendre pour trouver les paramètres du plugin dans le menu du plugin. Dans certains cas, bien que je pense que cela expose à une mauvaise utilisation du menu administrateur - le menu ne doit pas être le "menu du plugin", mais un menu associé à une sorte de tâche (comme créer et éditer des publications, afficher des commentaires, etc.). Tout comme WordPress sépare les tâches des paramètres, les plugins devraient.
Deuxièmement, la modification des paramètres est une tâche en soi - une tâche rarement effectuée, souvent après l’installation de WordPress ou d’un plugin. Comme il n'est pas visité régulièrement, placez-le sous l'élément de menu Paramètres range le sous-menu de votre plugin pour une utilisation quotidienne..
Si vous voulez vous assurer que votre page de paramètres n'est pas manquée, je vous encourage à lui ajouter un lien sous le nom de votre plugin sur la page "Plugins". Il s’agit de la page sur laquelle l’utilisateur atterrira lorsqu’il activera le plug-in, ce qui facilitera la recherche de vos paramètres..
Voici un exemple de réalisation:
Accentsconagua
add_filter ('plugin_action_links', 'wptuts_plugin_settings_link', 10, 2); function wptuts_plugin_settings_link ($ links, $ file) if ($ file == 'myplugin / myplugin.php') / * Insère le lien à la fin * / $ links ['settings'] = sprintf ('% s', admin_url ('options-general.php? page = my_plugin_settings'), __ ('Paramètres', 'plugin_domain')); return $ links; Si vos paramètres de plug-in ne correspondent pas parfaitement à une page, vous devez envisager d'utiliser des onglets pour les séparer. WordPress utilise des onglets sur la page Apparence -> Thèmes, qui peuvent être ajoutés à vos paramètres (ou à des pages d’administrateur personnalisées, si nécessaire). Lors de l'utilisation d'onglets de page, il y a très peu de raisons de ne pas utiliser les onglets de WordPress. Comment faire cela a été couvert dans la série Settings API de Tom McFarlin ici sur Wptuts+.
Mais que faire si vous avez besoin de trop d'onglets? Les onglets horizontaux ne s'échelonnent pas très bien - et les onglets débordants peuvent paraître déroutants et laids. Ce plug-in tente de traiter un grand nombre de pages de paramètres, mais les lignes de paramètres le rendent toujours insupportable:
Supposons que tous ces onglets sont nécessaires (ce qu'ils ne sont probablement pas), vous pouvez alors décider que les onglets verticaux sont une solution plus appropriée. J'ai vu quelques thèmes implémenter des onglets verticaux (souvent médiocres), utilisant généralement leur propre style. Bien que WordPress n’utilise pas les onglets verticaux (à l’exception des onglets d’aide), vous devez baser vos conceptions sur ce qui vous est disponible. N'hésitez pas à expérimenter, mais essayez de garder l'apparence native de WordPress - il sera intéressant de voir ce que les gens proposent.
WordPress propose deux types d’avis d’administrateur: les avis généraux et les messages d’erreur, qu’ils appellent respectivement jaune et rouge. Si votre plugin doit afficher une notification à l'utilisateur, vous devez utiliser l'un ou l'autre en fonction du contexte du message..
L'utilisation de l'API de notification de WordPress est un moyen très simple de donner à l'utilisateur une expérience cohérente. Voici un exemple de procédure:
/ * * Avis de notification nag - affiche un message * / / * Affiche une notification pouvant être rejetée * / add_action ('admin_notices', 'wptuts_admin_notices'); fonction wptuts_admin_notices () printf (' % s
', esc_html __ (' Ceci est un avis jaune ',' plugin_domain ')); printf (' % s
', esc_html __ (' Ceci est un avertissement d'erreur rouge ',' plugin_domain ')); Évidemment, vous ne devez afficher que les messages pertinents, ce qui signifie qu’ils affichent conditionnellement vos notifications uniquement sur certains écrans et pour certains utilisateurs. Pour ce faire, vous pouvez utiliser get_current_user_id () et get_current_screen ():
function wptuts_admin_notices () // Affiche la notification si l'utilisateur a '_wptuts_display_notice' stocké et affiché à l'écran avec l'id 'portfolio' $ $ screen_id = get_current_screen () -> id; $ display_notice = get_user_meta (get_current_user_id (), '_wptuts_display_notice', true); if ($ display_notice && 'portfolio' == $ screen_id) // Affichage avis
Pour les avis persistants, vous devez inclure un lien de renvoi pour permettre à l'utilisateur de masquer le message. Comme dans l'exemple suivant:
/ * Affichage conditionnel de la notification * / add_action ('admin_notices', 'wptuts_persistant_notice'); function wptuts_persistant_notice () / * Vérifiez que l'utilisateur n'a pas déjà cliqué pour ignorer le message * / if (! get_user_meta (get_current_user_id (), '_wptuts_hide_notice', true)) printf (' % 1 $ s | % 3 $ s
', __ ("Ceci est un avis persistant. Pour le cacher, cliquez sur" congédier "", "plugin_domain"), esc_url (add_query_arg ("wptus_nag", wp_create_nonce ("wptus_nag"))), __ ("Dismiss", "plugin_domain" ')); / * Masquer la notification * / add_action ('admin_init', 'wptuts_hide_notice'); fonction wptuts_hide_notice () if (! isset ($ _GET ['wptus_nag']))) return; // Vérifiez nonce check_admin_referer ('wptus_nag', 'wptus_nag'); // méta utilisateur mis à jour pour indiquer la notification de licenciement update_user_meta (get_current_user_id (), '_wptuts_hide_notice', 1); Vous pouvez également utiliser ajax pour supprimer les avis d’administrateur, mais vous devez également fournir une solution de secours non JavaScript..
WordPress propose un style pour deux "types" de boutons: "primaire" et "secondaire". L'ancien apparaît sous la forme d'un bouton bleu et il ne devrait jamais y avoir qu'un seul de ces boutons sur une page donnée. Le bouton secondaire est un bouton blanc. WordPress fournit quelques fonctions d'assistance pour créer des boutons: get_submit_button () / bouton de soumission() les fonctions.
submit_button (__ ('Submit text', 'plugin_domain'), 'primary', 'submit'); Les actions qui sont «destructives», par exemple un lien qui supprime quelque chose, doivent être rouges. Il y a souvent des classes que vous pouvez utiliser (comme poubelle) qui fera cela pour vous. Pour les autres liens, WordPress définit automatiquement les couleurs et ne doit pas être remplacé.
Les liens sur les tables (telles que la table posts) doivent filtrer la table et ne pas rediriger l'utilisateur. L'exception est "liens d'action", qui apparaissent lorsque vous survolez une ligne (par exemple, les liens "modifier" et "corbeille")..
Vous pouvez (et devriez) utiliser les icônes de page sur vos pages d’administrateur. Idéalement, elles devraient être personnalisées (évitez de réutiliser les mêmes icônes à des fins différentes). Pour changer l'icône d'un type d'article personnalisé, vous pouvez (conditionnellement) imprimer CSS dans l'en-tête de l'administrateur pour remplacer l'image par défaut de l'icône..
Vous devez vous assurer que vous ne le faites que pour les pages de votre post-type, afin de ne pas remplacer les icônes des autres pages. Voici un exemple de comment:
Type de poste; if ('event' == $ post_type) ?> Pour les pages d’administration personnalisées, vous pouvez également utiliser screen_icon (). Ceci imprime le code HTML pour les icônes d’écran. Il faut un argument (facultatif): soit une chaîne (utilisée dans l'attribut ID du conteneur d'icônes), soit un objet d'écran utilisé pour créer un attribut ID approprié. Par exemple: screen_icon ('myplugin'); imprimera quelque chose comme:
En utilisant le admin_head accrocher comme ci-dessus, vous pouvez cibler # icon-myplugin et fournir une image de fond.
Pour les types de publication personnalisés, le menu peut être spécifié lorsque vous enregistrez le type de publication:
register_post_type ('event', array (… 'menu_icon' => plugin_dir_url (__FILE__). 'css / images / icon-32.png';…)); Pour les onglets ajoutés au menu en utilisant add_menu_page vous pouvez spécifier l'icône comme l'un des arguments:
add_menu_page (__ ('Titre de la page', 'plugin_domain'), // Utilisé pour les balises de titre de la page __ ('Titre de la page', 'plugin_domain'), // La page telle qu'elle apparaît dans le menu 'manage_options', / / Fonctions pour accéder à cette page 'wptuts_custom_page_callback', // Callback qui imprime le contenu de la page plugin_dir_url (__FILE__). 'Css / images / icon-32.png'); Les icônes d’écran et de menu doivent être en niveaux de gris. Une icône de menu colorée est plus évidente et a l'air "étrange" pour le moins. Quelle que soit la qualité de l’icône, elle gâche l’esthétique de la barre latérale administrateur. Pire encore, une icône de menu colorée me dit que vous ne vous souciez pas de "bien jouer" avec l'interface utilisateur de WordPress, je vais donc suspecter que le code du plugin ne "joue pas bien" avec WordPress.
N'oubliez pas que l'icône de l'écran doit bien fonctionner sur trois arrière-plans différents:
C'est toujours une bonne idée de donner à vos utilisateurs des conseils supplémentaires au cas où ils en auraient besoin. Cependant, l'inclure sur la page peut introduire du fouillis (et le texte d'aide n'est jamais une alternative à la conception intuitive de l'interface utilisateur). WordPress vous permet d'ajouter du contenu à l'onglet 'aide' qui apparaît en haut à droite de l'écran. (Les options d’écran et les onglets d’aide peuvent souvent être négligés par les utilisateurs, mais il existe des discussions préliminaires sur la façon de les améliorer. Veuillez noter que ce sont des discussions et que rien n’a été décidé).
La possibilité d’ajouter une «aide contextuelle» existe depuis la version 2.7, mais depuis la version 3.3, l’onglet aide a été légèrement revampé, avec une barre d’aide à onglets..
Vous pouvez ajouter votre propre onglet avec le code suivant. Il est important que vous ajoutiez uniquement l'aide contextuelle sur les écrans appropriés. Vous devriez également vérifier que la méthode WP_Screen :: add_help_tab existe, sinon les versions antérieures à la version 3.3 de WordPress génèreront une erreur fatale.
add_filter ('contextual_help', 'wptuts_contextual_help', 10, 3); function wptuts_contextual_help ($ contextual_help, $ screen_id, $ screen) // Ajoute uniquement à certains écrans. La fonction add_help_tab pour screen a été introduite dans WordPress 3.3. if ($ screen_id! = 'screen_id' ||! method_exists ($ screen, 'add_help_tab')) return $ contextual_help; $ screen-> add_help_tab (array ('id' => 'wptuts-overview-tab', 'title' => __ ('Overview', 'plugin_domain'), 'content' => ''. __ ('Quelques textes d'aide ici', 'plugin_domain'). '
',)); return $ contextual_help; Lorsque vous utilisez des tableaux du côté administrateur de votre plug-in, il est presque toujours préférable d'utiliser le même style que WordPress pour ses tableaux. La présentation et l'apparence sont idéales pour la présentation de données telles que les ventes de produits, les journaux d'activité, etc., offrant ainsi à vos utilisateurs une interface cohérente. Il est important de noter que les utilisateurs s'attendent instinctivement à ce que le survol d'une ligne révèle des "liens d'action" et que les liens dans les colonnes filtrent le tableau. N'ayez pas peur d'adapter votre tableau à vos besoins spécifiques (modification de la largeur des colonnes, style personnalisé pour les images de la colonne, etc.), il est toutefois important de présenter vos données de manière très familière et intuitive. vos utilisateurs.
De loin, le moyen le plus simple de répliquer le tableau d'administration de WordPress consiste à étendre la WP_List_Table classe. Il existe de nombreux articles expliquant comment faire cela, mais le meilleur «tutoriel» est le plugin Custom List Table, qui vous fournit un exemple concret et est incroyablement commenté. Cependant, soyez averti que même si le Codex dit que WP_List_Table La classe peut être étendue par les développeurs, le code source actuel marque cette classe comme étant "privée". WordPress pourrait potentiellement changer de classe - et si de tels changements se produisent, vous devrez vérifier qu'ils ne cassent pas votre table..
Toute l'interface utilisateur de jQuery est fournie dans WordPress (et si votre plug-in en utilise, il doit utiliser les scripts fournis par WordPress). Malheureusement, il n'y a pas nécessairement les styles CSS correspondants. Ceci est actuellement laissé aux plugins à fournir. Cependant, il est possible que cela change avec ce ticket Trac. Helen Hou Sandi, développeur WordPress principal, a travaillé sur deux thèmes d’interface utilisateur jQuery qui complètent WordPress (un pour chaque jeu de couleurs administrateur). Rien ne garantit que cela se retrouvera dans WordPress * - mais dans tous les cas, vous devez télécharger les deux thèmes et les utiliser avec vos plugins..
Un plugin de démonstration peut être téléchargé ici. À partir de là, vous pouvez également extraire les deux thèmes:
Placez-les dans votre dossier de plugin. Lorsque vous enregistrez des scripts, utilisez le thème sélectionné par l'utilisateur:
add_action ('wp_enqueue_scripts', 'wptuts_register_scripts'); function wptuts_register_scripts () if ('classic' == get_user_option ('admin_color')) wp_register_style ('wptuts-plugin-jquery-ui-css', plugin_dir_url (__FILE__). 'jquery-ui-classic.css'); else wp_register_style ('wptuts-plugin-jquery-ui-css', plugin_dir_url (__FILE__). 'jquery-ui-fresh.css'); Ensuite, vous pouvez appeler wp_enqueue_style ('wptuts-plugin-jquery-ui-css') là où vous en avez besoin (vous devez évidemment attribuer aux styles un style différent, propre à votre plugin). Cela seul peut faire beaucoup pour donner à votre plugin un look cohérent avec WordPress.
* S'il se trouve dans WordPress, vous pouvez supprimer ce qui précède de votre plug-in et utiliser le style fourni par WordPress.
Tout le contenu de WordPress n'est pas un message, un commentaire ou une pièce jointe et parfois l'interface utilisateur existante ne fournit pas ce dont vous avez besoin. Dans ces cas, il ne convient tout simplement pas de lui imposer les structures de «postes» qui existent de manière native. Par exemple, Gravity Forms est un plugin qui vous permet d’ajouter et de gérer des formulaires sur votre site. S'ils se limitent à l'interface utilisateur WordPress native, présentant les formulaires sous la forme de messages, par exemple, le résultat serait une expérience utilisateur pire et des ventes moindres pour Gravity Forms..
Donner le meilleur UX à vos utilisateurs ne consiste pas simplement à tout mettre dans des listes et des métaboxes. Si votre plugin a besoin de présenter des informations d'une manière étrangère à l'interface utilisateur WordPress native, n'hésitez pas à faire preuve de créativité et à expérimenter. Mais comment tracez-vous la ligne entre créativité et intégration avec l'interface utilisateur WordPress? C'est quelque chose qui a été soulevé dans les commentaires du message de Tom mentionné plus tôt. La vérité est que cela revient à un jugement personnel et à des expériences pour voir ce qui fonctionne. Les formes de gravité, dans l’ensemble, le font bien:
Il est important de noter que, même si l’interface utilisateur de WordPress n’offre pas exactement ce dont vous avez besoin - il ya de nombreuses raisons de s’inspirer. Par exemple, si vous souhaitez que vos utilisateurs puissent glisser-déposer des éléments, vous pouvez consulter la page Menus pour obtenir des conseils. Vous ne devez pas supprimer l'interface utilisateur d'administration entièrement. Certains «principes» de l'interface utilisateur d'administration (certains énumérés ci-dessus) peuvent être traduits indépendamment de l'objectif recherché, tels que: l'utilisation de la couleur, des liens, des boutons et des icônes. Et les détails sont importants: il est important d’obtenir les gradients, le rayon et la police de caractères appropriés pour maintenir la cohérence, en particulier lorsque vous faites quelque chose de «différent». Pour l’exemple de glisser-déposer, vous souhaiterez peut-être réutiliser l’espace réservé gris avec une bordure en pointillé..
Cette attention aux détails peut sembler difficile - mais pour y arriver, il s'agit en réalité d'une chose paresseuse (et dans ce cas-ci appropriée). WordPress ajoute beaucoup de style à la page d'administration - et la plupart du temps, cela sera automatiquement hérité par votre plugin. Dans d'autres cas, il suffit d'ajouter les bonnes classes à vos éléments..
Les articles suivants de cette série seront beaucoup plus "pratiques", mais j'espère que cet article illustre quelques étapes simples et immédiates pour fournir à vos utilisateurs un administrateur plus cohérent. Les lignes directrices énumérées ici ne sont en aucun cas officielles, ni exhaustives - et j'apprécierais une discussion et des suggestions!
