{"id":230133,"date":"2022-11-19T16:26:00","date_gmt":"2022-11-19T13:26:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230133"},"modified":"2022-11-19T16:26:04","modified_gmt":"2022-11-19T13:26:04","slug":"construindo-telas-de-administracao-do-wordpress-componentes-design-etc","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/construindo-telas-de-administracao-do-wordpress-componentes-design-etc\/","title":{"rendered":"Construindo telas de administra\u00e7\u00e3o do WordPress (componentes, design, etc.)"},"content":{"rendered":"\n<p>Eu n\u00e3o falo muito sobre design de interface de usu\u00e1rio porque n\u00e3o \u00e9 meu forte. Sou a favor de pessoas que trabalham dentro de seus principais pontos fortes e, em seguida, contratam-nas quando necess\u00e1rio, projeto a projeto (se os designs ainda n\u00e3o tiverem sido fornecidos).<\/p>\n<p>Mas quando se trata de trabalhar com telas de administra\u00e7\u00e3o do WordPress, h\u00e1 uma diferen\u00e7a, certo?<\/p>\n<p>Estou na mentalidade de que, como a \u00e1rea de administra\u00e7\u00e3o do WordPress tem uma apar\u00eancia consistente, qualquer coisa criada para funcionar na tela de administra\u00e7\u00e3o (como uma tela de configura\u00e7\u00f5es) deve parecer o mais pr\u00f3ximo poss\u00edvel da interface do usu\u00e1rio principal.<\/p>\n<p>Nem todos concordam, e isso \u00e9 evidente pela vasta gama de plugins dispon\u00edveis. Mas essa \u00e9 a minha posi\u00e7\u00e3o sobre isso.<\/p>\n<p>Periodicamente, me perguntam como eu estruturo as UIs de projetos quando eles precisam de telas de administra\u00e7\u00e3o e como eu as mapeio para arquivos dentro do projeto.<\/p>\n<p>Ent\u00e3o eu pensei em pegar um exemplo simples e dividi-lo neste post curto.<\/p>\n<h2>Criando telas de administra\u00e7\u00e3o do WordPress<\/h2>\n<p>Para este post, vou mant\u00ea-lo simples. Ou seja, a tela consistir\u00e1 no m\u00ednimo de controles que geralmente comp\u00f5em uma tela de administra\u00e7\u00e3o.<\/p>\n<p>Aquilo \u00e9:<\/p>\n<ul>\n<li>Mensagens (sucesso, erros ou avisos),<\/li>\n<li>T\u00edtulos e conte\u00fado<\/li>\n<li>Controles de entrada<\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/WordPress_Nonces\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a>Campos <a href=\"https:\/\/codex.wordpress.org\/WordPress_Nonces\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Nonce<\/a><\/li>\n<\/ul>\n<p>Voc\u00ea pode ficar um pouco mais complicado com guias, mas o acima cobrir\u00e1 99% de uma tela de configura\u00e7\u00f5es b\u00e1sicas. Eu n\u00e3o estou mergulhando na <a href=\"https:\/\/codex.wordpress.org\/Settings_API\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">API<\/a> de configura\u00e7\u00f5es neste post (eu fiz <a href=\"https:\/\/tommcfarlin.com\/wordpress-settings-api-example\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">uma s\u00e9rie inteira<\/a> sobre isso antes).<\/p>\n<p>Em vez disso, trata-se puramente de uma maneira de organizar os arquivos para que possam ser mantidos ao longo da vida \u00fatil de um projeto,<\/p>\n<h3>Quebr\u00e1-lo<\/h3>\n<p>Antes de ver como os arquivos s\u00e3o organizados e usados, quero esbo\u00e7ar como normalmente conceituo o que vejo na tela trabalhando nesta parte de um projeto.<\/p>\n<p>Como voc\u00ea pode ver, todas as \u00e1reas acima s\u00e3o cobertas. Mas como eles mapeiam para arquivos \u00e9 um pouco diferente. Caso em quest\u00e3o, a estrutura de diret\u00f3rios se parece com isso:<\/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=\"Construindo telas de administra\u00e7\u00e3o do WordPress (componentes, design, etc.)\"><\/a><\/p>\n<p>Agora, dependendo de como voc\u00ea est\u00e1 implementando sua solu\u00e7\u00e3o, depender\u00e1 de como essas telas s\u00e3o exibidas.<\/p>\n<p>Ou seja, algumas vezes usar <strong>settings_mesasages()<\/strong> \u00e9 o que voc\u00ea vai usar; outras vezes, voc\u00ea pode optar por usar manualmente <strong>require_once<\/strong>, pois tudo depende de como voc\u00ea est\u00e1 construindo a solu\u00e7\u00e3o.<\/p>\n<p>\u00c9 f\u00e1cil argumentar que deveria haver uma maneira de fazer isso, mas conforme as demandas das pessoas sobre como elas usam o WordPress mudam, assim como os <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/programacao-orientada-a-objetos-no-wordpress-declaracao-de-trabalho\/\" title=\"requisitos e a implementa\u00e7\u00e3o\">requisitos e a implementa\u00e7\u00e3o<\/a>.<\/p>\n<h2>Como pode ser o c\u00f3digo?<\/h2>\n<p>Se voc\u00ea optar por sair da API de configura\u00e7\u00f5es e fazer sua implementa\u00e7\u00e3o, a marca\u00e7\u00e3o pode ser algo assim:<\/p>\n<h3>1 A IU completa<\/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 As mensagens inclu\u00eddas<\/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>Isso \u00e9 Barebones<\/h2>\n<p>&#8216;Observe que isso n\u00e3o inclui internacionaliza\u00e7\u00e3o ou outras coisas que possam ser necess\u00e1rias em seu projeto. \u00c9 realmente o m\u00ednimo.<\/p>\n<p>Mas, se nada mais, d\u00e1 uma id\u00e9ia de como voc\u00ea pode pegar os arquivos e junt\u00e1-los.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Um exemplo simples de como construir telas de administra\u00e7\u00e3o do WordPress dividindo-as em componentes.<\/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":[722,920,846,867],"tags":[1170],"class_list":["post-230133","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvedor","category-outro","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/230133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=230133"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/230133\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/220968"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=230133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=230133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=230133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}