{"id":230101,"date":"2022-11-22T15:17:00","date_gmt":"2022-11-22T12:17:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230101"},"modified":"2022-11-09T20:05:59","modified_gmt":"2022-11-09T17:05:59","slug":"iteration-sur-la-conception-de-lecran-dadministration-de-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/iteration-sur-la-conception-de-lecran-dadministration-de-wordpress\/","title":{"rendered":"It\u00e9ration sur la conception de l&rsquo;\u00e9cran d&rsquo;administration de WordPress"},"content":{"rendered":"\n<p>L&rsquo;id\u00e9e d&rsquo;un \u00ab\u00a0processus it\u00e9ratif\u00a0\u00bb n&rsquo;est pas nouvelle dans le d\u00e9veloppement de logiciels. Elle est pr\u00e9sente dans un certain nombre de m\u00e9thodologies diff\u00e9rentes et probablement parce qu&rsquo;elle fonctionne bien, en particulier lorsqu&rsquo;il s&rsquo;agit d&rsquo;obtenir des commentaires des clients.<\/p>\n<p>L&rsquo;un des endroits o\u00f9 je le trouve \u00e9galement utile est lors de la cr\u00e9ation d&rsquo;interfaces d&rsquo;administration pour les plugins WordPress.<\/p>\n<p>Pour \u00eatre clair, je ne suis pas designer, donc quand il s&rsquo;agit de travail front-end, je me r\u00e9f\u00e8re toujours \u00e0 la charte graphique et aux maquettes que le designer me fournit d\u00e8s le d\u00e9but du projet. (Je ne mentionne cela que parce que je pense que c&rsquo;est une pratique que toute personne qui n&rsquo;est pas designer devrait suivre, mais je m&rsquo;\u00e9gare).<\/p>\n<p>Mais quand il s&rsquo;agit de travailler sur des \u00e9crans d&rsquo;administration ou des \u00e9crans back-end pour WordPress, j&rsquo;ai tendance \u00e0 suivre une r\u00e8gle stricte\u00a0: assurez-vous que cela semble aussi naturel que possible.<\/p>\n<p>Comment, alors, le d\u00e9veloppement it\u00e9ratif et l&rsquo;interface des \u00e9crans d&rsquo;administration de WordPress ont-ils quelque chose \u00e0 voir ?<\/p>\n<h2>Conception d&rsquo;\u00e9cran d&rsquo;administration WordPress<\/h2>\n<p>Cet article particulier renonce \u00e0 parler des choses qui sont attendues pour enregistrer des informations. C&rsquo;est-\u00e0-dire que j&rsquo;assume tout :<\/p>\n<ul>\n<li>assainissement,<\/li>\n<li>validation,<\/li>\n<li>ch\u00e8ques nonce,<\/li>\n<li>v\u00e9rification des autorisations,<\/li>\n<\/ul>\n<p>Et les autres sont compris et manipul\u00e9s.<\/p>\n<p>Pour ce post, je vais faire simple. Disons que nous voulons avoir :<\/p>\n<ul>\n<li>quelques champs de texte,<\/li>\n<li>un bouton de sauvegarde,<\/li>\n<li>un bouton de r\u00e9initialisation,<\/li>\n<li>et peut-\u00eatre quelque chose de plus \u00e0 la fin.<\/li>\n<\/ul>\n<p>Comment cela pourrait-il se traduire par un processus it\u00e9ratif lors de sa conception\u00a0?<\/p>\n<h3>1 Esquisse<\/h3>\n<p>Supposons que vous travaillez sur quelque chose et que vous planifiez \u00e0 quoi ressemblera l&rsquo;\u00e9cran d&rsquo;administration. Compte tenu de ce que nous avions ci-dessus, peut-\u00eatre qu&rsquo;un croquis initial pourrait ressembler \u00e0 ceci\u00a0:<\/p>\n<p>Assez facile, non? Il repr\u00e9sente ce que le projet doit maintenir et affiche tout ce dont nous avons besoin pour cet \u00e9cran d&rsquo;administration particulier.<\/p>\n<h3>2 Construire<\/h3>\n<p>Une fois assembl\u00e9, il devrait avoir l&rsquo;air aussi natif que possible. Compte tenu des styles disponibles dans WordPress, il est relativement facile de le cr\u00e9er avec les API et le balisage disponibles\u00a0:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164847-61e76fc6c5f0d.jpg\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164847-61e76fc6c5f0d.jpg\" alt=\"It\u00e9ration sur la conception de l&#039;\u00e9cran d&#039;administration de WordPress\" ><\/a><\/p>\n<p>Et que font chaque champ et bouton\u00a0?<\/p>\n<h3>3 Affiner<\/h3>\n<p>C&rsquo;est l\u00e0 que le raffinement des fonctionnalit\u00e9s entre en jeu. Par exemple:<\/p>\n<ul>\n<li>Je ne pense pas que le bouton <strong>Enregistrer<\/strong> doive \u00eatre activ\u00e9 tant que les champs obligatoires ne sont pas renseign\u00e9s,<\/li>\n<li>Je pense que le bouton <strong>R\u00e9initialiser devrait effacer ce qui est pr\u00e9sent,<\/strong><\/li>\n<li>Il devrait y avoir un certain nombre de messages d&rsquo;erreur qui repr\u00e9sentent tous ce que nous devons faire lorsque quelque chose \u00e9choue, lorsque quelque chose ne va pas ou que quelque chose ne va pas du tout.<\/li>\n<\/ul>\n<p>De toute \u00e9vidence, il est beaucoup plus facile d&rsquo;en parler lorsqu&rsquo;il ne s&rsquo;agit pas d&rsquo;un projet sp\u00e9cifique, mais peut-\u00eatre que certaines des id\u00e9es sont applicables \u00e0 tout ce que vous avez en cours.<\/p>\n<h2>Am\u00e9liorations asynchrones\u00a0?<\/h2>\n<p>L&rsquo;une des choses auxquelles nous nous sommes habitu\u00e9s avec des appareils comme nos t\u00e9l\u00e9phones et certaines parties de nos syst\u00e8mes d&rsquo;exploitation est que lorsque nous basculons un interrupteur ou apportons un petit changement, les donn\u00e9es sont enregistr\u00e9es.<\/p>\n<p>Autrement dit, aucune action de confirmation (autre que quelque chose de destructif comme la suppression d&rsquo;un fichier, bien s\u00fbr) n&rsquo;est requise. Les donn\u00e9es sont simplement enregistr\u00e9es et l&rsquo;option fonctionne.<\/p>\n<p>Pourtant, nous voyons encore beaucoup de boutons <strong>Enregistrer<\/strong> dans WordPress, n&rsquo;est-ce pas? Qu&rsquo;en est-il de la sauvegarde des entr\u00e9es via Ajax ou une autre m\u00e9thode asynchrone\u00a0? C&rsquo;est quelque chose que je n&rsquo;ai pas encore mis en \u0153uvre, mais j&rsquo;y ai certainement pens\u00e9.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lorsque vous travaillez sur la conception de l&rsquo;\u00e9cran d&rsquo;administration de WordPress, il existe un processus it\u00e9ratif que nous pouvons suivre \u00e0 des fins de qualit\u00e9.<\/p>\n","protected":false},"author":1,"featured_media":223984,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[841,862],"tags":[1167],"class_list":["post-230101","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/230101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=230101"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/230101\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/223984"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=230101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=230101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=230101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}