{"id":230359,"date":"2022-11-19T16:28:00","date_gmt":"2022-11-19T13:28:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230359"},"modified":"2022-11-19T16:28:02","modified_gmt":"2022-11-19T13:28:02","slug":"creazione-di-schermate-di-amministrazione-di-wordpress-componenti-design-ecc","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/creazione-di-schermate-di-amministrazione-di-wordpress-componenti-design-ecc\/","title":{"rendered":"Creazione di schermate di amministrazione di WordPress (componenti, design, ecc.)"},"content":{"rendered":"\n<p>Non parlo molto del design dell&#8217;interfaccia utente perch\u00e9 non \u00e8 il mio forte. Sono tutto per le persone che lavorano all&#8217;interno dei loro punti di forza principali e poi le assumono quando necessario, progetto per progetto (se i progetti non sono gi\u00e0 forniti).<\/p>\n<p>Ma quando si tratta di lavorare con le schermate di amministrazione di WordPress, c&#8217;\u00e8 una differenza, giusto?<\/p>\n<p>Sono convinto che, poich\u00e9 l&#8217;area di amministrazione di WordPress ha un aspetto coerente, tutto ci\u00f2 che \u00e8 costruito per funzionare all&#8217;interno della schermata di amministrazione (come una schermata delle impostazioni) dovrebbe apparire il pi\u00f9 vicino possibile all&#8217;interfaccia utente principale.<\/p>\n<p>Non tutti sono d&#8217;accordo, ed \u00e8 evidente dalla vasta gamma di plugin disponibili. Ma questa \u00e8 la mia posizione al riguardo.<\/p>\n<p>Periodicamente, mi viene chiesto come strutturo le UI dei progetti quando necessitano di schermate di amministrazione e come le mappo ai file all&#8217;interno del progetto.<\/p>\n<p>Quindi ho pensato di fare un semplice esempio e di scomporlo in questo breve post.<\/p>\n<h2>Creazione di schermate di amministrazione di WordPress<\/h2>\n<p>Per questo post, lo manterr\u00f2 semplice. Cio\u00e8, lo schermo consister\u00e0 nel minimo indispensabile di controlli che di solito costituiscono una schermata di amministrazione.<\/p>\n<p>Questo \u00e8:<\/p>\n<ul>\n<li>Messaggistica (successo, errori o avvisi),<\/li>\n<li>Intestazioni e contenuti<\/li>\n<li>Controlli di input<\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/WordPress_Nonces\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a>Campi <a href=\"https:\/\/codex.wordpress.org\/WordPress_Nonces\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Nonce<\/a><\/li>\n<\/ul>\n<p>Puoi diventare leggermente pi\u00f9 complicato con le schede, ma quanto sopra coprir\u00e0 il 99% di una schermata delle impostazioni di base. Non mi sto immergendo <a href=\"https:\/\/codex.wordpress.org\/Settings_API\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nell&#8217;API delle impostazioni<\/a> in questo post (ho gi\u00e0 fatto <a href=\"https:\/\/tommcfarlin.com\/wordpress-settings-api-example\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">un&#8217;intera serie<\/a> su questo).<\/p>\n<p>Invece, si tratta semplicemente di un modo per organizzare i file in modo che siano gestibili per tutta la durata di un progetto,<\/p>\n<h3>Scomponendolo<\/h3>\n<p>Prima di vedere come sono organizzati e utilizzati i file, voglio abbozzare come concettualizzare normalmente ci\u00f2 che vedo sullo schermo lavorando su questa parte di un progetto.<\/p>\n<p>Come puoi vedere, tutte le aree sopra sono coperte. Ma il modo in cui questi vengono mappati sui file \u00e8 leggermente diverso. Caso in questione, la struttura della directory \u00e8 simile a questa:<\/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=\"Creazione di schermate di amministrazione di WordPress (componenti, design, ecc.)\"><\/a><\/p>\n<p>Ora, a seconda di come stai implementando la tua soluzione, dipender\u00e0 da come vengono visualizzate queste schermate.<\/p>\n<p>Cio\u00e8, a volte\u00a0 userai <strong>settings_mesasages()<\/strong> ; altre volte, puoi scegliere di utilizzare manualmente <strong>require_once<\/strong> poich\u00e9 tutto dipende da come stai creando la soluzione.<\/p>\n<p>\u00c8 facile sostenere che dovrebbe esserci un modo per farlo, ma poich\u00e9 le richieste delle persone su come utilizzano WordPress cambiano, cos\u00ec come i <a href=\"https:\/\/wordpress.mediadoma.com\/it\/programmazione-orientata-agli-oggetti-in-wordpress-statement-of-work\/\" title=\"requisiti e l&#039;implementazione\">requisiti e l&#8217;implementazione<\/a>.<\/p>\n<h2>Come potrebbe apparire il codice?<\/h2>\n<p>Se scegli di uscire dall&#8217;API delle impostazioni e di eseguire la tua implementazione, il markup potrebbe assomigliare a questo:<\/p>\n<h3>1 L&#8217;interfaccia utente 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 messaggistica inclusa<\/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>Questo \u00e8 Barebones<\/h2>\n<p>&#8216;Nota che questo non include l&#8217;internazionalizzazione o altre cose che potrebbero essere richieste nel tuo progetto. \u00c8 davvero il minimo indispensabile.<\/p>\n<p>Ma, se non altro, d\u00e0 un&#8217;idea di come prendere i file e metterli insieme.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <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 semplice esempio di come creare schermate di amministrazione di WordPress suddividendolo in componenti.<\/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":[918,720,844,865],"tags":[1168],"class_list":["post-230359","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-sviluppatore","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/230359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=230359"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/230359\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/220968"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=230359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=230359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=230359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}