{"id":229778,"date":"2022-11-19T16:19:00","date_gmt":"2022-11-19T13:19:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229778"},"modified":"2022-11-19T16:19:02","modified_gmt":"2022-11-19T13:19:02","slug":"creacion-de-pantallas-de-administracion-de-wordpress-componentes-diseno-etc","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/creacion-de-pantallas-de-administracion-de-wordpress-componentes-diseno-etc\/","title":{"rendered":"Creaci\u00f3n de pantallas de administraci\u00f3n de WordPress (componentes, dise\u00f1o, etc.)"},"content":{"rendered":"\n<p>No hablo mucho sobre el dise\u00f1o de la interfaz de usuario porque no es mi fuerte. Estoy totalmente a favor de las personas que trabajan dentro de sus fortalezas principales y luego las contratan cuando es necesario, proyecto por proyecto (si los dise\u00f1os a\u00fan no se han proporcionado).<\/p>\n<p>Pero cuando se trata de trabajar con las pantallas de administraci\u00f3n de WordPress, hay una diferencia, \u00bfno?<\/p>\n<p>Tengo la mentalidad de que debido a que el \u00e1rea de administraci\u00f3n de WordPress tiene una apariencia uniforme, cualquier cosa que est\u00e9 dise\u00f1ada para funcionar dentro de la pantalla de administraci\u00f3n (como una pantalla de configuraci\u00f3n) debe verse lo m\u00e1s cerca posible de la interfaz de usuario central.<\/p>\n<p>No todos est\u00e1n de acuerdo, y es evidente por la gran variedad de complementos disponibles. Pero esa es mi posici\u00f3n al respecto.<\/p>\n<p>Peri\u00f3dicamente, me preguntan c\u00f3mo estructuro las interfaces de usuario de los proyectos cuando necesitan pantallas de administraci\u00f3n y c\u00f3mo las asigno a archivos dentro del proyecto.<\/p>\n<p>As\u00ed que pens\u00e9 en tomar un ejemplo simple y desglosarlo en esta breve publicaci\u00f3n.<\/p>\n<h2>Creaci\u00f3n de pantallas de administraci\u00f3n de WordPress<\/h2>\n<p>Para esta publicaci\u00f3n, voy a mantenerlo simple. Es decir, la pantalla consistir\u00e1 en el m\u00ednimo de controles que normalmente componen una pantalla de administraci\u00f3n.<\/p>\n<p>Eso es:<\/p>\n<ul>\n<li>Mensajer\u00eda (\u00e9xito, errores o avisos),<\/li>\n<li>Encabezados y contenido<\/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>Puede volverse un poco m\u00e1s complicado con las pesta\u00f1as, pero lo anterior cubrir\u00e1 el 99% de una pantalla de configuraci\u00f3n b\u00e1sica. No me estoy sumergiendo en la <a href=\"https:\/\/codex.wordpress.org\/Settings_API\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">API de configuraci\u00f3n<\/a> en esta publicaci\u00f3n (he hecho <a href=\"https:\/\/tommcfarlin.com\/wordpress-settings-api-example\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">una serie completa<\/a> sobre eso antes).<\/p>\n<p>En cambio, se trata simplemente de una forma de organizar los archivos para que se puedan mantener durante la vida \u00fatil de un proyecto.<\/p>\n<h3>Rompi\u00e9ndolo<\/h3>\n<p>Antes de ver c\u00f3mo se organizan y utilizan los archivos, quiero esbozar c\u00f3mo conceptualizo normalmente lo que veo en la pantalla trabajando en esta parte de un proyecto.<\/p>\n<p>Como puede ver, todas las \u00e1reas anteriores est\u00e1n cubiertas. Pero la forma en que estos se asignan a los archivos es un poco diferente. Por ejemplo, la estructura del directorio se parece a esto:<\/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=\"Creaci\u00f3n de pantallas de administraci\u00f3n de WordPress (componentes, dise\u00f1o, etc.)\"><\/a><\/p>\n<p>Ahora, dependiendo de c\u00f3mo est\u00e9 implementando su soluci\u00f3n, depender\u00e1 de c\u00f3mo se muestren estas pantallas.<\/p>\n<p>Es decir, a veces usar <strong>settings_mesasages()<\/strong> es lo que usar\u00e1; otras veces, puede optar por usar <strong>require_once<\/strong> manualmente, ya que todo depende de c\u00f3mo est\u00e9 creando la soluci\u00f3n.<\/p>\n<p>Es f\u00e1cil argumentar que deber\u00eda haber una forma de hacerlo, pero a medida que cambian las demandas de las personas sobre c\u00f3mo usan WordPress, tambi\u00e9n cambian los <a href=\"https:\/\/wordpress.mediadoma.com\/es\/programacion-orientada-a-objetos-en-wordpress-declaracion-de-trabajo\/\" title=\"requisitos y la implementaci\u00f3n\">requisitos y la implementaci\u00f3n<\/a>.<\/p>\n<h2>\u00bfC\u00f3mo podr\u00eda verse el c\u00f3digo?<\/h2>\n<p>Si opta por salir de la API de configuraci\u00f3n y hacer su implementaci\u00f3n, el marcado puede verse as\u00ed:<\/p>\n<h3>1 La interfaz de usuario 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 La mensajer\u00eda incluida<\/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>esto es barebones<\/h2>\n<p>&#8216;Tenga en cuenta que esto no incluye la internacionalizaci\u00f3n u otras cosas que pueden ser necesarias en su proyecto. Es realmente el m\u00ednimo indispensable.<\/p>\n<p>Pero, al menos, da una idea de c\u00f3mo puede tomar los archivos y armarlos.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <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 ejemplo simple de c\u00f3mo crear pantallas de administraci\u00f3n de WordPress dividi\u00e9ndolas en 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":[716,914,840,861],"tags":[1172],"class_list":["post-229778","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollador","category-otro","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=229778"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229778\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/220968"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=229778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=229778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=229778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}