{"id":229971,"date":"2022-11-15T17:21:00","date_gmt":"2022-11-15T14:21:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229971"},"modified":"2022-11-15T17:23:52","modified_gmt":"2022-11-15T14:23:52","slug":"wordpressin-modaalidialogien-lisaeaeminen-kaeyttaeen-staattista-dataa","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/wordpressin-modaalidialogien-lisaeaeminen-kaeyttaeen-staattista-dataa\/","title":{"rendered":"WordPressin modaalidialogien lis\u00e4\u00e4minen (k\u00e4ytt\u00e4en staattista dataa)"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/fi\/wordpressin-modaalidialogien-lisaeaeminen-sisaeaenrakennetuilla-kirjastoilla\/\" title=\"Edellisess\u00e4 viestiss\u00e4\">Edellisess\u00e4 viestiss\u00e4<\/a> k\u00e4vin l\u00e4pi prosessin, joka vaaditaan, jotta WordPressin modaalivalintaikkunat ilmestyv\u00e4t hallinta-alueen kontekstiin.<\/p>\n<p>T\u00e4m\u00e4 k\u00e4ytt\u00e4\u00e4:<\/p>\n<ul>\n<li>sis\u00e4\u00e4nrakennettu WordPress API,<\/li>\n<li>toimitettu Thickbox-kirjasto,<\/li>\n<li>ja esimerkkikoodin sen n\u00e4ytt\u00e4miseksi.<\/li>\n<\/ul>\n<p>T\u00e4ss\u00e4 opetusohjelmassa k\u00e4yn l\u00e4pi modaalisen valintaikkunan t\u00e4ytt\u00e4misen tiedoilla. Sen j\u00e4lkeen kerron, kuinka tiedot t\u00e4ytet\u00e4\u00e4n dynaamisesti Ajaxin avulla.<\/p>\n<h2>WordPressin modaalidialogit: Staattiset tiedot<\/h2>\n<p>T\u00e4t\u00e4 viesti\u00e4 varten oletan, ett\u00e4 olet lukenut sarjan ensimm\u00e4isen viestin ja ymm\u00e4rr\u00e4t koodin toiminnan (vaikka on viel\u00e4 parempi, jos sinulla on toimiva koodi paikallisessa kehitysymp\u00e4rist\u00f6ss\u00e4si).<\/p>\n<p>Siit\u00e4 huolimatta, puhutaanpa metalaatikon t\u00e4ytt\u00e4misest\u00e4 tiedoilla. Eli katsotaan:<\/p>\n<ol>\n<li>tietojen sijoittaminen metalaatikon runkoon,<\/li>\n<li>t\u00e4ytt\u00e4m\u00e4ll\u00e4 otsikon sis\u00e4ll\u00f6ll\u00e4.<\/li>\n<\/ol>\n<p>Kun se on tehty, siirrymme tietojen ker\u00e4\u00e4miseen palvelimelta asynkronisesti ja sitten t\u00e4ytt\u00e4m\u00e4\u00e4n t\u00e4h\u00e4n menness\u00e4 meill\u00e4 olevan koodin.<\/p>\n<h3>1 Tietojen m\u00e4\u00e4ritt\u00e4minen<\/h3>\n<p>Sis\u00e4ll\u00f6n lis\u00e4\u00e4minen metalaatikkoon on todella helppoa. Muista edellisest\u00e4 viestist\u00e4; meill\u00e4 on HTML-elementti, jossa on <strong>n\u00e4ytt\u00f6: none;<\/strong> arvo sen <strong>tyylim\u00e4\u00e4ritteelle<\/strong>.<\/p>\n<p>T\u00e4ss\u00e4 <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1db21634b8b7a88a963b3875553d2539#file-03-adding-the-modal-dialog-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">alkuper\u00e4inen ydin<\/a> :<\/p>\n<pre><code>&lt;?php\n\/**\n * A basic plugin page that will eventually be used to demonstrate how to use the\n * Thickbox library included with WordPress.\n *\n * @package Acme\n *\/\nadd_thickbox();\n?&gt;\n\n&lt;div id=\"acme-thickbox-demo\" class=\"wrap\"&gt;\n\n  &lt;h1&gt;Acme Thickbox Demo&lt;\/h1&gt;\n  &lt;p&gt;Provides an exmaple of how to use the thickbox library within a WordPress plugin page.&lt;\/p&gt;\n\n  &lt;div id=\"acme-thickbox-content\"&gt;\n    &lt;a href=\"TB_inline?width=600&amp;height=550&amp;inlineId=acme-modal-dialog\" class=\"thickbox\"&gt;Display The Dialog&lt;\/a&gt;\n    &lt;div id=\"acme-modal-dialog\" style=\"display:none;\"&gt;&lt;\/div&gt;&lt;!-- #acme-modal-dialog --&gt;\n  &lt;\/div&gt;&lt;!-- #acme-thickbox-content --&gt;\n\n&lt;\/div&gt;&lt;!-- #acme-thickbox-demo --&gt;<\/code><\/pre>\n<p>Sis\u00e4ll\u00f6n lis\u00e4\u00e4minen modaalivalintaikkunaan on helppoa. Etsi vain elementti <strong>acme-modal-dialog<\/strong> ja t\u00e4yt\u00e4 se sitten kaikilla tiedoilla, jotka haluat n\u00e4ytt\u00e4\u00e4 k\u00e4ytt\u00e4j\u00e4lle.<\/p>\n<p>Katso esimerkiksi <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1db21634b8b7a88a963b3875553d2539#file-04-modal-dialog-content-html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">t\u00e4m\u00e4 koodiesimerkki<\/a> :<\/p>\n<pre><code>&lt;div id=\"acme-modal-dialog\" style=\"display:none;\"&gt;\n  &lt;h2&gt;Hello World&lt;\/h2&gt;\n  &lt;p&gt;Lucas ipsum dolor sit amet ventress dak jusik chewbacca tenel beru bail anomid hapes mas.&lt;\/p&gt;\n  &lt;p&gt;Fel kalee kyle desann. Ozzel p'w'eck jax castell saleucami. Thisspias veila mantell mccool garindan jax.&lt;\/p&gt;\n  &lt;p&gt;Barriss kurtzen sing bertroff cody frozarns. Han koon miraluka vau.&lt;\/p&gt;\n  &lt;p&gt;\n    &lt;ul&gt;\n      &lt;li&gt;Bajic asajj boba raymus dug piell moddell jax darth.&lt;\/li&gt;\n      &lt;li&gt;Sio anakin naberrie shistavanen fisto utapau chewbacca aayla.&lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/p&gt;\n  &lt;p&gt;\n    Corran axmis kor-uj hutt marek kenobi ansuroer echani. Mirax mara fisto bith tyranus kashyyyk farlander max b'omarr.\n    Ben dodonna askajian teevan palpatine lobot beru.\n  &lt;\/p&gt;\n&lt;\/div&gt;&lt;!-- #acme-modal-dialog --&gt;<\/code><\/pre>\n<p>Kun k\u00e4ytt\u00e4j\u00e4 napsauttaa ankkuria edellisess\u00e4 viestiss\u00e4 (se, jossa lukee <strong>N\u00e4yt\u00e4 valintaikkuna<\/strong> ), modaali n\u00e4ytet\u00e4\u00e4n yll\u00e4 n\u00e4kyv\u00e4n sis\u00e4ll\u00f6n kanssa.<\/p>\n<p>Yleisesti ottaen sen pit\u00e4isi n\u00e4ytt\u00e4\u00e4 silt\u00e4, \u200b\u200bmit\u00e4 n\u00e4et yll\u00e4, perustuen ydinsis\u00e4lt\u00f6\u00f6n hahmoteltuun koodiin.<\/p>\n<h3>2 Otsikon asettaminen<\/h3>\n<p>Huomaa seuraavaksi, ett\u00e4 modaalinen valintaikkuna sis\u00e4lt\u00e4\u00e4 vaihtoehdon hyl\u00e4t\u00e4 se aina, kun k\u00e4ytt\u00e4j\u00e4 on lukenut sen. T\u00e4m\u00e4n ominaisuuden tarjoamisen lis\u00e4ksi huomaa, ett\u00e4 valintaikkunan alueella on paljon tyhj\u00e4\u00e4 tilaa.<\/p>\n<p>Tied\u00e4t mit\u00e4 tarkoitan: se on alue, jota yleens\u00e4 k\u00e4ytet\u00e4\u00e4n otsikkopalkkina. Thickbox API:n ja sen integroinnin WordPressiin ansiosta voimme helposti lis\u00e4t\u00e4 sen otsikoksemme. Se voi olla dynaaminen (ik\u00e4\u00e4n kuin tieto tulisi Ajaxin kautta) tai se voi olla staattista.<\/p>\n<p>Ja koska ty\u00f6skentelemme t\u00e4ss\u00e4 viestiss\u00e4 staattisen tiedon kanssa, m\u00e4\u00e4ritet\u00e4\u00e4n se. T\u00e4t\u00e4 varten meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 modaalin n\u00e4ytt\u00e4misest\u00e4 vastaavaan ankkuriin <strong>title -attribuutti.<\/strong><\/p>\n<p>Kun olet l\u00f6yt\u00e4nyt n\u00e4yt\u00f6n k\u00e4ynnist\u00e4misest\u00e4 vastaavan ankkurin (muista, ett\u00e4 se sis\u00e4lt\u00e4\u00e4 tekstin <strong>Display The Dialog<\/strong> ), lis\u00e4\u00e4 siihen otsikko-attribuutti, jotta koodi n\u00e4ytt\u00e4\u00e4 <a href=\"http:\/\/05-adding-a-dialog-title.html\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">t\u00e4lt\u00e4<\/a> :<\/p>\n<pre><code>&lt;a href=\"TB_inline?width=600&amp;height=550&amp;inlineId=acme-modal-dialog\" title=\"Hello World\" class=\"thickbox\"&gt;Display The Dialog&lt;\/a&gt;<\/code><\/pre>\n<p>Nyt kun napsautat ankkuria k\u00e4ynnist\u00e4\u00e4ksesi n\u00e4yt\u00f6n, se ei ainoastaan \u200b\u200bn\u00e4yt\u00e4 valintaikkunaa, kuten yll\u00e4 olevassa kuvassa, vaan se sis\u00e4lt\u00e4\u00e4 my\u00f6s otsikon:<\/p>\n<\/p>\n<p>Hy\u00f6dyllinen, eik\u00f6? Mutta ent\u00e4 jos se olisi dynaamisempi?<\/p>\n<h2>Nyt Ajaxiin<\/h2>\n<p>Ja dynaaminen luonto on se, mit\u00e4 aion k\u00e4sitell\u00e4 seuraavaksi. Tarkemmin sanottuna haluan k\u00e4yd\u00e4 l\u00e4pi prosessin, jossa otetaan se, mit\u00e4 meill\u00e4 on t\u00e4\u00e4ll\u00e4, eli staattista dataa, ja korvataan se asynkronisesti haetulla tiedolla.<\/p>\n<p>Eli k\u00e4ytt\u00e4j\u00e4 napsauttaa <strong>Display The Dialog<\/strong> -ankkuria ja sitten:<\/p>\n<ul>\n<li>palvelimelle tehd\u00e4\u00e4n pyynt\u00f6,<\/li>\n<li>tiedot haetaan,<\/li>\n<li>ja sitten tiedot johdetaan valintaikkunan otsikkoon ja sis\u00e4lt\u00f6alueille.<\/li>\n<\/ul>\n<p>Se on hieman parempi kuin staattisen tiedon k\u00e4ytt\u00e4minen ja tekee sovelluksesta dynaamisemman.<\/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>Kun ty\u00f6skentelet WordPressin modaalisten valintaikkunoiden kanssa, on hy\u00f6dyllist\u00e4 varmistaa, ett\u00e4 ne sis\u00e4lt\u00e4v\u00e4t sek\u00e4 otsikon ett\u00e4 sis\u00e4ll\u00f6n. N\u00e4in teet sen staattisilla tiedoilla.<\/p>\n","protected":false},"author":1,"featured_media":165632,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[895,843,864],"tags":[1166],"class_list":["post-229971","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-koodi","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/229971","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=229971"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/229971\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/165632"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=229971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=229971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=229971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}