{"id":23873,"date":"2021-05-07T14:49:00","date_gmt":"2021-05-07T11:49:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=23873"},"modified":"2021-10-17T21:14:08","modified_gmt":"2021-10-17T18:14:08","slug":"integroi-modaalinen-valintaikkuna-kayttamalla-sisaanrakennettua-thickboxia-wordpressissa","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/integroi-modaalinen-valintaikkuna-kayttamalla-sisaanrakennettua-thickboxia-wordpressissa\/","title":{"rendered":"Integroi modaalinen valintaikkuna k\u00e4ytt\u00e4m\u00e4ll\u00e4 sis\u00e4\u00e4nrakennettua ThickBoxia WordPressiss\u00e4"},"content":{"rendered":"<p>Modaaliset valintaikkunat on joskus v\u00e4ltt\u00e4m\u00e4tt\u00e4 integroitava WordPress-verkkosivustoon. Modaalisen valintaikkunan avulla voimme n\u00e4ytt\u00e4\u00e4 sis\u00e4ll\u00f6n nykyisen sivun yl\u00e4osassa.<\/p>\n<p>Kun kyse on modaalisesta ponnahdusikkunasta, ihmiset yleens\u00e4 haluavat k\u00e4ytt\u00e4\u00e4 <a href=\"http:\/\/lokeshdhakar.com\/projects\/lightbox2\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Lightbox-<\/a> tai <a href=\"http:\/\/fancybox.net\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Fancybox-<\/a> kirjastoa. N\u00e4m\u00e4 ovat suosittuja kirjastoja ja toimivat melko hyvin.<\/p>\n<p>Jotta n\u00e4m\u00e4 kirjastot voidaan sis\u00e4llytt\u00e4\u00e4 WordPressiin, meid\u00e4n on ladattava JS- ja CSS-tiedostot kirjastosta ja sis\u00e4llytett\u00e4v\u00e4 se projektiin <a href=\"https:\/\/themewp.inform.click\/fi\/tavallinen-tapa-sisallyttaa-javascript-ja-css-wordpressiin\/\" title=\"tavalliseen tapaan\">tavalliseen tapaan<\/a>. Sen j\u00e4lkeen kirjaston ohjeiden mukaan meid\u00e4n on pakattava sis\u00e4lt\u00f6, kutsuttava menetelm\u00e4 modaalisen ikkunan avaamiseksi.<\/p>\n<p>WordPress sis\u00e4lsi <a href=\"https:\/\/codex.wordpress.org\/Javascript_Reference\/ThickBox\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ThickBox<\/a> jQuery -laajennuksen modifioidulla versiolla. Ja sit\u00e4 voidaan k\u00e4ytt\u00e4\u00e4 ulkoisten kirjastojen sijasta. T\u00e4m\u00e4n ydinominaisuuden avulla saamme k\u00e4ytt\u00f6liittym\u00e4n, joka on sama kuin WordPress-j\u00e4rjestelm\u00e4nvalvojan modaaliset ponnahdusikkunat kuten mediapainikkeessa.<\/p>\n<p>Voit kokeilla t\u00e4t\u00e4 sis\u00e4\u00e4nrakennettua ominaisuutta. Jos se t\u00e4ytt\u00e4\u00e4 tarpeesi, se s\u00e4\u00e4st\u00e4\u00e4 aikaa ulkoisen kirjaston integroinnissa.<\/p>\n<p>Kun k\u00e4yt\u00e4t ThickBoxia sis\u00e4isen sis\u00e4ll\u00f6n kanssa, saat tuotoksen jotain, kuten alla olevassa kuvakaappauksessa n\u00e4kyy.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20705-60821d0c9a8a4.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20705-60821d0c9a8a4.png\" alt=\"Integroi modaalinen valintaikkuna k\u00e4ytt\u00e4m\u00e4ll\u00e4 sis\u00e4\u00e4nrakennettua ThickBoxia WordPressiss\u00e4\" ><\/a><\/p>\n<h3>Modaalinen valintaikkuna k\u00e4ytt\u00e4m\u00e4ll\u00e4 ThickBoxia<\/h3>\n<p>WordPress ThickBox toimii hyvin sis\u00e4isen sis\u00e4ll\u00f6n kanssa. Lyhytkoodia voidaan k\u00e4ytt\u00e4\u00e4 my\u00f6s modaalisessa valintaikkunassa. Voit esimerkiksi n\u00e4ytt\u00e4\u00e4 yhteyslomakkeen modaalisessa ikkunassa k\u00e4ytt\u00e4m\u00e4ll\u00e4 yhteydenottolomakkeen 7 lyhytkoodia.<\/p>\n<p>T\u00e4m\u00e4n j\u00e4lkeen katsotaan, kuinka ThickBoxia k\u00e4ytet\u00e4\u00e4n WordPressiss\u00e4.<\/p>\n<p>Esimerkiksi n\u00e4yt\u00e4mme nuken sis\u00e4ist\u00e4 sis\u00e4lt\u00f6\u00e4 ankkuritunnisteen napsautuksella. Joten, aseta alla oleva koodi minne haluat k\u00e4ytt\u00e4\u00e4 ThickBoxia.<\/p>\n<pre><code>&lt;?php add_ThickBox(); ?&gt;\n&lt;div id=\"dummy-content-id\" style=\"display:none;\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;p&gt;\n\u00a0\u00a0\u00a0\u00a0Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\u00a0\u00a0\u00a0\u00a0&lt;\/p&gt;\n&lt;\/div&gt;\n\u00a0\n&lt;a href=\"#TB_inline?width=600&amp;height=350&amp;inlineId=dummy-content-id\" title=\"Inline Content\" class=\"ThickBox\"&gt;View dummy content!&lt;\/a&gt;<\/code><\/pre>\n<p>Thichboxin k\u00e4ytt\u00e4miseksi meid\u00e4n on sis\u00e4llytett\u00e4v\u00e4 ensimm\u00e4inen <code>add_ThickBox()<\/code>menetelm\u00e4. T\u00e4m\u00e4 toiminto lataa kirjaston ytimest\u00e4. Seuraavaksi meid\u00e4n on annettava ankkuritunnisteen href-m\u00e4\u00e4ritteelle #TB_inline sek\u00e4 s\u00e4il\u00f6n leveys, korkeus ja tunnus, johon sis\u00e4inen sis\u00e4lt\u00f6 on k\u00e4\u00e4ritty.<\/p>\n<p>Samalla tavalla, jos haluat n\u00e4ytt\u00e4\u00e4 yhteydenottolomakkeen modaalisessa valintaikkunassa, sinun on sijoitettava pikan\u00e4pp\u00e4imen sijaan pikakoodi <code>do_shortcode()<\/code>WordPress-toiminnon avulla.<\/p>\n<pre><code>&lt;?php echo do_shortcode('[shortcode_here]'); ?&gt;<\/code><\/pre>\n<p>Se siit\u00e4! Toivomme, ett\u00e4 ymm\u00e4rr\u00e4t kuinka lis\u00e4t\u00e4 modaalinen valintaikkuna k\u00e4ytt\u00e4m\u00e4ll\u00e4 ThickBoxia WordPressiss\u00e4. Haluamme kuulla ajatuksesi alla olevassa kommentissa.<\/p>\n<p>Voit my\u00f6s lukea artikkeleitamme <a href=\"https:\/\/themewp.inform.click\/fi\/ohjaa-kiitos-sivulle-yhteydenottolomakkeen-7-lahettamisen-jalkeen\/\" title=\"Uudelleenohjaus kiitossivulle yhteydenottolomakkeen 7 l\u00e4hett\u00e4misen j\u00e4lkeen\">Uudelleenohjaus kiitossivulle yhteydenottolomakkeen 7 l\u00e4hett\u00e4misen j\u00e4lkeen<\/a> ja <a href=\"https:\/\/themewp.inform.click\/fi\/yhteystietolomakkeen-7-lahetysten-tallentaminen-wordpress-tietokantaan\/\" title=\"kuinka yhteystietolomakkeen 7 l\u00e4hetysten tallentaminen WordPress-tietokantaan\">kuinka yhteystietolomakkeen 7 l\u00e4hetysten tallentaminen WordPress-tietokantaan<\/a><\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>T\u00e4ss\u00e4 artikkelissa keskustellaan modaalisesta valintaikkunasta k\u00e4ytt\u00e4m\u00e4ll\u00e4 sis\u00e4\u00e4nrakennettua ThickBoxia WordPressiss\u00e4. ThickBoxia k\u00e4ytt\u00e4m\u00e4ll\u00e4 voimme s\u00e4\u00e4st\u00e4\u00e4 aikaa ulkoisen integroinnista<\/p>\n","protected":false},"author":1,"featured_media":20706,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[499,414,610],"tags":[843],"class_list":["post-23873","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","category-sekalaisia","category-uncategorized-6","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/23873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=23873"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/23873\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/20706"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=23873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=23873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=23873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}