{"id":229449,"date":"2022-11-19T16:35:00","date_gmt":"2022-11-19T13:35:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229449"},"modified":"2022-11-19T16:48:50","modified_gmt":"2022-11-19T13:48:50","slug":"budowanie-ekranow-administracyjnych-wordpress-komponenty-projekt-itp","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/budowanie-ekranow-administracyjnych-wordpress-komponenty-projekt-itp\/","title":{"rendered":"Budowanie ekran\u00f3w administracyjnych WordPress (komponenty, projekt itp.)"},"content":{"rendered":"\n<p>Nie m\u00f3wi\u0119 du\u017co o projektowaniu interfejsu u\u017cytkownika, poniewa\u017c nie jest to moja mocna strona. Jestem dla os\u00f3b pracuj\u0105cych w ramach swoich podstawowych mocnych stron, a nast\u0119pnie zatrudniaj\u0105cych ich w razie potrzeby na podstawie projektu po projekcie (je\u015bli projekty nie s\u0105 jeszcze dostarczone).<\/p>\n<p>Ale je\u015bli chodzi o prac\u0119 z ekranami administracyjnymi WordPress, jest r\u00f3\u017cnica, prawda?<\/p>\n<p>Mam na my\u015bli, \u017ce poniewa\u017c obszar administracyjny WordPressa ma sp\u00f3jny wygl\u0105d i spos\u00f3b dzia\u0142ania, wszystko, co jest zbudowane do pracy na ekranie administracyjnym (takie jak ekran ustawie\u0144), powinno wygl\u0105da\u0107 jak najbli\u017cej g\u0142\u00f3wnego interfejsu u\u017cytkownika.<\/p>\n<p>Nie wszyscy si\u0119 z tym zgadzaj\u0105, co wida\u0107 po szerokiej gamie dost\u0119pnych wtyczek. Ale takie jest moje stanowisko w tej sprawie.<\/p>\n<p>Od czasu do czasu jestem pytany, jak organizuj\u0119 interfejsy u\u017cytkownika projekt\u00f3w, gdy potrzebuj\u0105 ekran\u00f3w administracyjnych i jak mapuj\u0119 je do plik\u00f3w w projekcie.<\/p>\n<p>Pomy\u015bla\u0142em wi\u0119c, \u017ce wezm\u0119 prosty przyk\u0142ad i opisz\u0119 go w tym kr\u00f3tkim po\u015bcie.<\/p>\n<h2>Budowanie ekran\u00f3w administracyjnych WordPress<\/h2>\n<p>W tym po\u015bcie zachowam prostot\u0119. Oznacza to, \u017ce ekran b\u0119dzie sk\u0142ada\u0142 si\u0119 z minimum element\u00f3w steruj\u0105cych, kt\u00f3re zwykle tworz\u0105 ekran administracyjny.<\/p>\n<p>To znaczy:<\/p>\n<ul>\n<li>Wiadomo\u015bci (sukces, b\u0142\u0119dy lub powiadomienia),<\/li>\n<li>Nag\u0142\u00f3wki i tre\u015b\u0107<\/li>\n<li>Kontrola wprowadzania<\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/WordPress_Nonces\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a>Pola <a href=\"https:\/\/codex.wordpress.org\/WordPress_Nonces\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nonce<\/a><\/li>\n<\/ul>\n<p>Mo\u017cesz nieco bardziej skomplikowa\u0107 si\u0119 z zak\u0142adkami, ale powy\u017csze obejmuje 99% ekranu podstawowych ustawie\u0144. W tym po\u015bcie nie zag\u0142\u0119biam si\u0119 w <a href=\"https:\/\/codex.wordpress.org\/Settings_API\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Settings API<\/a> (zrobi\u0142em ju\u017c na ten temat <a href=\"https:\/\/tommcfarlin.com\/wordpress-settings-api-example\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ca\u0142\u0105 seri\u0119<\/a> ).<\/p>\n<p>Zamiast tego chodzi wy\u0142\u0105cznie o spos\u00f3b organizowania plik\u00f3w tak, aby by\u0142y mo\u017cliwe do utrzymania przez ca\u0142y czas trwania projektu,<\/p>\n<h3>Rozbijaj\u0105c to<\/h3>\n<p>Zanim przyjrz\u0119 si\u0119 organizacji i wykorzystaniu plik\u00f3w, chc\u0119 naszkicowa\u0107, jak zwykle konceptualizuj\u0119 to, co widz\u0119 na ekranie, pracuj\u0105c nad t\u0105 cz\u0119\u015bci\u0105 projektu.<\/p>\n<p>Jak wida\u0107, wszystkie powy\u017csze obszary s\u0105 obj\u0119te. Ale spos\u00f3b, w jaki te mapowanie do plik\u00f3w jest nieco inny. Na przyk\u0142ad struktura katalog\u00f3w wygl\u0105da mniej wi\u0119cej tak:<\/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=\"Budowanie ekran\u00f3w administracyjnych WordPress (komponenty, projekt itp.)\"><\/a><\/p>\n<p>Teraz, w zale\u017cno\u015bci od tego, jak wdra\u017casz swoje rozwi\u0105zanie, b\u0119dzie zale\u017ce\u0107 od tego, jak wy\u015bwietlane s\u0105 te ekrany.<\/p>\n<p>Oznacza to, \u017ce czasami u\u017cyjesz <strong>settings_mesasages()<\/strong> ; innym razem mo\u017cesz zdecydowa\u0107 si\u0119 na r\u0119czne u\u017cycie <strong>require_once<\/strong>, poniewa\u017c wszystko zale\u017cy od tego, jak budujesz rozwi\u0105zanie.<\/p>\n<p>\u0141atwo si\u0119 spiera\u0107, \u017ce powinien by\u0107 jeden spos\u00f3b, aby to zrobi\u0107, ale w miar\u0119 jak zmieniaj\u0105 si\u0119 wymagania ludzi dotycz\u0105ce sposobu korzystania z WordPressa, podobnie jak <a href=\"https:\/\/wordpress.mediadoma.com\/pl\/programowanie-obiektowe-w-wordpress-zestawienie-pracy\/\" title=\"wymagania i implementacja\">wymagania i implementacja<\/a>.<\/p>\n<h2>Jak mo\u017ce wygl\u0105da\u0107 Kodeks?<\/h2>\n<p>Je\u015bli zdecydujesz si\u0119 wyj\u015b\u0107 poza interfejs Settings API i wykona\u0107 swoj\u0105 implementacj\u0119, znaczniki mog\u0105 wygl\u0105da\u0107 mniej wi\u0119cej tak:<\/p>\n<h3>1 Pe\u0142ny interfejs u\u017cytkownika<\/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 Do\u0142\u0105czone wiadomo\u015bci<\/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>To jest kad\u0142ubki<\/h2>\n<p>\u201eZauwa\u017c, \u017ce nie obejmuje to internacjonalizacji ani innych rzeczy, kt\u00f3re mog\u0105 by\u0107 wymagane w twoim projekcie. To naprawd\u0119 absolutne minimum.<\/p>\n<p>Ale je\u015bli nic wi\u0119cej, to daje wyobra\u017cenie, jak mo\u017cesz wzi\u0105\u0107 pliki i z\u0142o\u017cy\u0107 je razem.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Prosty przyk\u0142ad, jak zbudowa\u0107 ekrany administracyjne WordPress, dziel\u0105c je na komponenty.<\/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":[721,919,845,866],"tags":[1169],"class_list":["post-229449","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-inny","category-samouczki","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/229449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=229449"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/229449\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/220968"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=229449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=229449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=229449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}