{"id":230028,"date":"2022-11-19T16:20:00","date_gmt":"2022-11-19T13:20:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230028"},"modified":"2022-11-19T16:20:02","modified_gmt":"2022-11-19T13:20:02","slug":"creation-decrans-dadministration-wordpress-composants-conception-etc","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/creation-decrans-dadministration-wordpress-composants-conception-etc\/","title":{"rendered":"Cr\u00e9ation d&rsquo;\u00e9crans d&rsquo;administration WordPress (composants, conception, etc.)"},"content":{"rendered":"\n<p>Je ne parle pas beaucoup de design d&rsquo;interface utilisateur car ce n&rsquo;est pas mon fort. Je suis tout \u00e0 fait pour les personnes travaillant dans le cadre de leurs forces principales, puis les embauchant en cas de besoin, projet par projet (si les conceptions ne sont pas d\u00e9j\u00e0 fournies).<\/p>\n<p>Mais quand il s&rsquo;agit de travailler avec les \u00e9crans d&rsquo;administration de WordPress, il y a une diff\u00e9rence, n&rsquo;est-ce pas ?<\/p>\n<p>Je pense que parce que la zone d&rsquo;administration de WordPress a une apparence coh\u00e9rente, tout ce qui est con\u00e7u pour fonctionner dans l&rsquo;\u00e9cran d&rsquo;administration (comme un \u00e9cran de param\u00e8tres) doit \u00eatre aussi proche que possible de l&rsquo;interface utilisateur principale.<\/p>\n<p>Tout le monde n&rsquo;est pas d&rsquo;accord, et cela se voit par la vaste gamme de plugins disponibles. Mais c&rsquo;est ma position l\u00e0-dessus.<\/p>\n<p>P\u00e9riodiquement, on me demande comment je structure les interfaces utilisateur des projets lorsqu&rsquo;ils ont besoin d&rsquo;\u00e9crans d&rsquo;administration et comment je les associe aux fichiers du projet.<\/p>\n<p>J&rsquo;ai donc pens\u00e9 prendre un exemple simple et le d\u00e9composer dans ce court article.<\/p>\n<h2>Construire des \u00e9crans d&rsquo;administration WordPress<\/h2>\n<p>Pour ce post, je vais faire simple. C&rsquo;est-\u00e0-dire que l&rsquo;\u00e9cran sera compos\u00e9 du strict minimum de commandes qui constituent g\u00e9n\u00e9ralement un \u00e9cran d&rsquo;administration.<\/p>\n<p>C&rsquo;est-\u00e0-dire:<\/p>\n<ul>\n<li>Messagerie (succ\u00e8s, erreurs ou avis),<\/li>\n<li>Titres et contenu<\/li>\n<li>Commandes d&rsquo;entr\u00e9e<\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/WordPress_Nonces\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a>Champs <a href=\"https:\/\/codex.wordpress.org\/WordPress_Nonces\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nonce<\/a><\/li>\n<\/ul>\n<p>Vous pouvez devenir un peu plus compliqu\u00e9 avec les onglets, mais ce qui pr\u00e9c\u00e8de couvrira 99% d&rsquo;un \u00e9cran de param\u00e8tres de base. Je ne plonge pas dans l&rsquo; <a href=\"https:\/\/codex.wordpress.org\/Settings_API\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">API des param\u00e8tres<\/a> dans ce post (j&rsquo;ai d\u00e9j\u00e0 fait <a href=\"https:\/\/tommcfarlin.com\/wordpress-settings-api-example\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">toute une s\u00e9rie<\/a> l\u00e0-dessus).<\/p>\n<p>Au lieu de cela, il s&rsquo;agit uniquement d&rsquo;une mani\u00e8re d&rsquo;organiser les fichiers afin qu&rsquo;ils soient maintenables tout au long de la dur\u00e9e de vie d&rsquo;un projet,<\/p>\n<h3>D\u00e9composer<\/h3>\n<p>Avant de regarder comment les fichiers sont organis\u00e9s et utilis\u00e9s, je veux esquisser comment je conceptualise normalement ce que je vois \u00e0 l&rsquo;\u00e9cran en travaillant sur cette partie d&rsquo;un projet.<\/p>\n<p>Comme vous pouvez le voir, tous les domaines ci-dessus sont couverts. Mais la fa\u00e7on dont ceux-ci sont mapp\u00e9s aux fichiers est un peu diff\u00e9rente. Par exemple, la structure du r\u00e9pertoire ressemble \u00e0 ceci\u00a0:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-165140-61e777e4161e6.png\" 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-165140-61e777e4161e6.png\" alt=\"Cr\u00e9ation d&#039;\u00e9crans d&#039;administration WordPress (composants, conception, etc.)\"><\/a><\/p>\n<p>Maintenant, selon la fa\u00e7on dont vous impl\u00e9mentez votre solution, cela d\u00e9pendra de la fa\u00e7on dont ces \u00e9crans sont affich\u00e9s.<\/p>\n<p>C&rsquo;est-\u00e0- dire que vous utiliserez parfois <strong>settings_mesasages() ;<\/strong> d&rsquo;autres fois, vous pouvez choisir d&rsquo;utiliser manuellement <strong>require_once<\/strong> car tout d\u00e9pend de la fa\u00e7on dont vous construisez la solution.<\/p>\n<p>Il est facile d&rsquo;affirmer qu&rsquo;il devrait y avoir une fa\u00e7on de le faire, mais \u00e0 mesure que les demandes des gens sur la fa\u00e7on dont ils utilisent WordPress changent, il en va de m\u00eame pour les <a href=\"https:\/\/wordpress.mediadoma.com\/fr\/programmation-orientee-objet-dans-wordpress-enonce-des-travaux\/\" title=\"exigences et la mise en \u0153uvre\">exigences et la mise en \u0153uvre<\/a>.<\/p>\n<h2>\u00c0 quoi pourrait ressembler le code\u00a0?<\/h2>\n<p>Si vous choisissez de sortir de l&rsquo;API Settings et d&rsquo;effectuer votre impl\u00e9mentation, le balisage peut ressembler \u00e0 ceci\u00a0:<\/p>\n<h3>1 L&rsquo;interface utilisateur compl\u00e8te<\/h3>\n<pre><code>&lt;?php\n\/**\n * This is the parent administration UI. This includes a single partial for the messaging.\n *\/\n?&gt;\n&lt;div class=\"wrap\"&gt;\n    &lt;h1 class=\"wp-heading-inline\"&gt;Import New Item&lt;\/h1&gt;\n    &lt;?php include_once 'partials\/error-invalid-file.php'; ?&gt;\n    &lt;div id=\"acme-upload-new-item-pdf\"&gt;\n        &lt;form action=\"\" enctype=\"multipart\/form-data\" method=\"post\"&gt;\n            &lt;p&gt;Upload a PDF&lt;\/p&gt;\n            &lt;input type=\"file\" \/&gt;\n            &lt;?php submit_button( 'Upload' ); ?&gt;\n            &lt;?php wp_nonce_field( 'acme-upload', 'acme-importer' ); ?&gt;\n        &lt;\/form&gt;\n    &lt;\/div&gt;&lt;!-- #acme-upload-new-item-pdf --&gt;\n&lt;\/div&gt;&lt;!-- .wrap --&gt;<\/code><\/pre>\n<h4>2 La messagerie incluse<\/h4>\n<pre><code>&lt;div id=\"invalid-file-message\" class=\"error notice is-dismissible\"&gt;\n    &lt;p&gt;You have attempted to upload an invalid file type.&lt;\/p&gt;\n    &lt;button type=\"button\" class=\"notice-dismiss\"&gt;\n        &lt;span class=\"screen-reader-text\"&gt;Dismiss this notice.&lt;\/span&gt;\n    &lt;\/button&gt;\n&lt;\/div&gt;&lt;!-- #invalid-file-message --&gt;<\/code><\/pre>\n<h2>C&rsquo;est Barebones<\/h2>\n<p>&lsquo;Notez que cela n&rsquo;inclut pas l&rsquo;internationalisation ou d&rsquo;autres choses qui peuvent \u00eatre n\u00e9cessaires dans votre projet. C&rsquo;est vraiment le strict minimum.<\/p>\n<p>Mais, si rien d&rsquo;autre, cela donne une id\u00e9e de la fa\u00e7on dont vous pouvez prendre les fichiers et les assembler.<\/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>Un exemple simple de la fa\u00e7on de cr\u00e9er des \u00e9crans d&rsquo;administration WordPress en le d\u00e9composant en composants.<\/p>\n","protected":false},"author":1,"featured_media":220968,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,717,841,862],"tags":[1167],"class_list":["post-230028","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-developpeur","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/230028","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=230028"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/230028\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/220968"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=230028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=230028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=230028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}