{"id":230178,"date":"2022-11-19T16:52:00","date_gmt":"2022-11-19T13:52:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230178"},"modified":"2022-11-19T16:52:08","modified_gmt":"2022-11-19T13:52:08","slug":"wordpress-hallintanaeyttoejen-rakentaminen-komponentit-suunnittelu-jne","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/wordpress-hallintanaeyttoejen-rakentaminen-komponentit-suunnittelu-jne\/","title":{"rendered":"WordPress-hallintan\u00e4ytt\u00f6jen rakentaminen (komponentit, suunnittelu jne.)"},"content":{"rendered":"\n<p>En puhu paljon k\u00e4ytt\u00f6liittym\u00e4suunnittelusta, koska se ei ole vahvuuteni. Olen ihmisten puolesta, jotka ty\u00f6skentelev\u00e4t ydinvahvuuksiensa puitteissa ja palkkaan heid\u00e4t tarvittaessa projektikohtaisesti (jos suunnitelmia ei ole jo toimitettu).<\/p>\n<p>Mutta kun se tulee ty\u00f6skentelem\u00e4\u00e4n WordPressin hallintaruutujen kanssa, on ero, eik\u00f6?<\/p>\n<p>Olen sit\u00e4 mielt\u00e4, ett\u00e4 koska WordPressin hallinta-alueella on yhten\u00e4inen ulkoasu ja tuntuma, kaiken, mik\u00e4 on rakennettu toimimaan hallintan\u00e4yt\u00f6ss\u00e4 (kuten asetusn\u00e4yt\u00f6ss\u00e4), pit\u00e4isi n\u00e4ytt\u00e4\u00e4 mahdollisimman l\u00e4helt\u00e4 ydink\u00e4ytt\u00f6liittym\u00e4\u00e4.<\/p>\n<p>Kaikki eiv\u00e4t ole samaa mielt\u00e4, ja se k\u00e4y ilmi saatavilla olevien laajennusten laajasta valikoimasta. Mutta t\u00e4m\u00e4 on minun kantani asiaan.<\/p>\n<p>Ajoittain minulta kysyt\u00e4\u00e4n, kuinka rakennan projektien k\u00e4ytt\u00f6liittym\u00e4t, kun ne tarvitsevat hallintaruutuja, ja kuinka yhdist\u00e4n ne tiedostoihin projektin sis\u00e4ll\u00e4.<\/p>\n<p>Joten ajattelin ottaa yksinkertaisen esimerkin ja purkaa sen t\u00e4ss\u00e4 lyhyess\u00e4 viestiss\u00e4.<\/p>\n<h2>WordPress-hallintan\u00e4ytt\u00f6jen rakentaminen<\/h2>\n<p>T\u00e4t\u00e4 viesti\u00e4 varten aion pit\u00e4\u00e4 asian yksinkertaisena. Toisin sanoen n\u00e4ytt\u00f6 tulee koostumaan v\u00e4himm\u00e4ism\u00e4\u00e4r\u00e4st\u00e4 s\u00e4\u00e4timi\u00e4, jotka yleens\u00e4 muodostavat hallintan\u00e4yt\u00f6n.<\/p>\n<p>Tuo on:<\/p>\n<ul>\n<li>Viestit (menestys, virheet tai ilmoitukset),<\/li>\n<li>Otsikot ja sis\u00e4lt\u00f6<\/li>\n<li>Sy\u00f6tt\u00f6ohjaimet<\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/WordPress_Nonces\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Nonce-<\/a> kent\u00e4t<\/li>\n<\/ul>\n<p>V\u00e4lilehtien kanssa voi tulla hieman monimutkaisempi, mutta yll\u00e4 oleva kattaa 99 % perusasetusn\u00e4yt\u00f6st\u00e4. En sukeltaa <a href=\"https:\/\/codex.wordpress.org\/Settings_API\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Asetukset-sovellusliittym\u00e4\u00e4n<\/a> t\u00e4ss\u00e4 viestiss\u00e4 (olen tehnyt <a href=\"https:\/\/tommcfarlin.com\/wordpress-settings-api-example\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">siit\u00e4 koko sarjan<\/a> aiemmin).<\/p>\n<p>Sen sijaan t\u00e4ss\u00e4 on kyse vain tavasta j\u00e4rjest\u00e4\u00e4 tiedostot niin, ett\u00e4 niit\u00e4 voidaan yll\u00e4pit\u00e4\u00e4 koko projektin elinkaaren ajan,<\/p>\n<h3>Breaking It Down<\/h3>\n<p>Ennen kuin tarkastelen tiedostojen j\u00e4rjest\u00e4mist\u00e4 ja k\u00e4ytt\u00f6\u00e4, haluan hahmotella, kuinka yleens\u00e4 k\u00e4sit\u00e4n sen, mit\u00e4 n\u00e4en n\u00e4yt\u00f6ll\u00e4 ty\u00f6skentelem\u00e4ss\u00e4 projektin t\u00e4ss\u00e4 osassa.<\/p>\n<p>Kuten n\u00e4et, kaikki yll\u00e4 mainitut alueet ovat katettuja. Mutta kuinka n\u00e4m\u00e4 yhdist\u00e4v\u00e4t tiedostot, on hieman erilainen. Esimerkiksi hakemistorakenne n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/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=\"WordPress-hallintan\u00e4ytt\u00f6jen rakentaminen (komponentit, suunnittelu jne.)\"><\/a><\/p>\n<p>Nyt riippuen siit\u00e4, kuinka toteutat ratkaisusi, riippuu siit\u00e4, miten n\u00e4m\u00e4 n\u00e4yt\u00f6t n\u00e4ytet\u00e4\u00e4n.<\/p>\n<p>Toisin sanoen joskus k\u00e4yt\u00e4t <strong>asetusta settings_mesasages()<\/strong> ; muina aikoina voit valita vaatimuksen_once-k\u00e4yt\u00f6n manuaalisesti<strong>,<\/strong> koska t\u00e4m\u00e4 kaikki riippuu siit\u00e4, miten rakennat ratkaisua.<\/p>\n<p>On helppo v\u00e4itt\u00e4\u00e4, ett\u00e4 sen pit\u00e4isi olla yksi tapa, mutta ihmisten WordPressin k\u00e4ytt\u00f6\u00e4 koskevat vaatimukset muuttuvat, samoin kuin <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/olio-ohjelmointi-wordpressissae-tyoeselostus\/\" title=\"vaatimukset ja toteutus\">vaatimukset ja toteutus<\/a>.<\/p>\n<h2>Milt\u00e4 koodi voi n\u00e4ytt\u00e4\u00e4?<\/h2>\n<p>Jos p\u00e4\u00e4t\u00e4t astua asetusten sovellusliittym\u00e4n ulkopuolelle ja toteuttaa, merkint\u00e4 voi n\u00e4ytt\u00e4\u00e4 suunnilleen t\u00e4lt\u00e4:<\/p>\n<h3>1 Koko k\u00e4ytt\u00f6liittym\u00e4<\/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 Mukana tulevat viestit<\/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>T\u00e4m\u00e4 on Barebone<\/h2>\n<p>&#8217;Huomaa, ett\u00e4 t\u00e4m\u00e4 ei sis\u00e4ll\u00e4 kansainv\u00e4listymist\u00e4 tai muita asioita, joita projektissasi saatetaan vaatia. Se on todellakin minimi.<\/p>\n<p>Mutta jos ei muuta, se antaa idean siit\u00e4, kuinka voit ottaa tiedostot ja koota ne.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Yksinkertainen esimerkki siit\u00e4, kuinka WordPress-hallintan\u00e4ytt\u00f6j\u00e4 voidaan rakentaa jakamalla ne osiin.<\/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":[719,917,843,864],"tags":[1166],"class_list":["post-230178","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kehittaejae","category-muut","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=230178"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230178\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/220968"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=230178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=230178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=230178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}