{"id":229296,"date":"2022-11-15T17:11:00","date_gmt":"2022-11-15T14:11:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229296"},"modified":"2022-11-15T17:23:51","modified_gmt":"2022-11-15T14:23:51","slug":"dodawanie-modalnych-okien-dialogowych-wordpress-przy-uzyciu-danych-statycznych","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/dodawanie-modalnych-okien-dialogowych-wordpress-przy-uzyciu-danych-statycznych\/","title":{"rendered":"Dodawanie modalnych okien dialogowych WordPress (przy u\u017cyciu danych statycznych)"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/pl\/dodawanie-modalnych-okien-dialogowych-wordpress-z-wbudowanymi-bibliotekami\/\" title=\"W poprzednim po\u015bcie\">W poprzednim po\u015bcie<\/a> przeszed\u0142em przez proces wymagany do wy\u015bwietlenia modalnych okien dialogowych WordPress w kontek\u015bcie obszaru administracyjnego.<\/p>\n<p>Wykorzystuje:<\/p>\n<ul>\n<li>wbudowane API WordPress,<\/li>\n<li>dostarczona biblioteka Thickbox,<\/li>\n<li>i przyk\u0142adowy kod do wy\u015bwietlenia.<\/li>\n<\/ul>\n<p>W tym samouczku przejd\u0119 przez wype\u0142nianie modalnego okna dialogowego danymi. Nast\u0119pnie podziel\u0119 si\u0119 tym, jak dynamicznie wype\u0142nia\u0107 dane za pomoc\u0105 Ajax.<\/p>\n<h2>Modalne okna dialogowe WordPress: dane statyczne<\/h2>\n<p>W przypadku tego postu zak\u0142adam, \u017ce przeczyta\u0142e\u015b pierwszy post z serii i rozumiesz, co robi kod (chocia\u017c jest jeszcze lepiej, je\u015bli masz dzia\u0142aj\u0105cy kod w swoim lokalnym \u015brodowisku programistycznym).<\/p>\n<p>Niezale\u017cnie od tego porozmawiajmy o wype\u0142nieniu metabox informacjami. Oznacza to, \u017ce przyjrzymy si\u0119:<\/p>\n<ol>\n<li>umieszczanie informacji w tre\u015bci meta boxa,<\/li>\n<li>wype\u0142nianie tytu\u0142u tre\u015bci\u0105.<\/li>\n<\/ol>\n<p>Gdy to zrobimy, przejdziemy do pobierania informacji z serwera w spos\u00f3b asynchroniczny, a nast\u0119pnie wype\u0142niania kodu, kt\u00f3ry mamy do tej pory.<\/p>\n<h3>1 Definiowanie danych<\/h3>\n<p>Dodawanie tre\u015bci do metaboxa jest naprawd\u0119 \u0142atwe. Przypomnijmy z poprzedniego postu; mamy element HTML, kt\u00f3ry ma <strong>wy\u015bwietlacz: none;<\/strong> warto\u015b\u0107 atrybutu <strong>stylu .<\/strong><\/p>\n<p>Oto <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1db21634b8b7a88a963b3875553d2539#file-03-adding-the-modal-dialog-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">oryginalna tre\u015b\u0107<\/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>Dodawanie tre\u015bci do modalnego okna dialogowego jest \u0142atwe. Po prostu znajd\u017a element <strong>acme-modal-dialog<\/strong>, a nast\u0119pnie wype\u0142nij go dowolnymi informacjami, kt\u00f3re chcesz wy\u015bwietli\u0107 u\u017cytkownikowi.<\/p>\n<p>Na przyk\u0142ad zobacz <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1db21634b8b7a88a963b3875553d2539#file-04-modal-dialog-content-html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ten przyk\u0142ad kodu<\/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>Kiedy u\u017cytkownik kliknie kotwic\u0119 w poprzednim po\u015bcie (ten, kt\u00f3ry brzmi <strong>Wy\u015bwietl okno dialogowe<\/strong> ), zostanie wy\u015bwietlony modalny z tre\u015bci\u0105, kt\u00f3r\u0105 widzisz powy\u017cej.<\/p>\n<p>Og\u00f3lnie rzecz bior\u0105c, powinien wygl\u0105da\u0107 jak to, co widzisz powy\u017cej, na podstawie kodu opisanego w sednie.<\/p>\n<h3>2 Ustawianie tytu\u0142u<\/h3>\n<p>Nast\u0119pnie zauwa\u017c, \u017ce modalne okno dialogowe zawiera opcj\u0119 odrzucenia go, gdy u\u017cytkownik sko\u0144czy czyta\u0107. Opr\u00f3cz oferowania tej umiej\u0119tno\u015bci, zauwa\u017c, \u017ce obszar okna dialogowego ma du\u017co bia\u0142ej przestrzeni.<\/p>\n<p>Wiesz, co mam na my\u015bli: jest to obszar, kt\u00f3ry zwykle jest spychany do u\u017cycia jako pasek tytu\u0142u. Dzi\u0119ki API Thickbox i jego integracji z WordPressem mo\u017cemy \u0142atwo doda\u0107 do niego nasz tytu\u0142. Mo\u017ce by\u0107 dynamiczny (jak gdyby informacje mia\u0142y nadej\u015b\u0107 przez Ajax) lub mo\u017ce by\u0107 statyczny.<\/p>\n<p>A poniewa\u017c w tym konkretnym po\u015bcie pracujemy z informacjami statycznymi, skonfigurujmy to. Aby to zrobi\u0107, musimy doda\u0107\u00a0 atrybut <strong>title<\/strong> do kotwicy odpowiedzialnej za wy\u015bwietlanie modalno\u015bci.<\/p>\n<p>Po zlokalizowaniu kotwicy odpowiedzialnej za wywo\u0142anie wy\u015bwietlania (pami\u0119taj, \u017ce zawiera ona tekst <strong>Display The Dialog<\/strong> ), dodaj do niej atrybut title, aby kod wygl\u0105da\u0142 <a href=\"http:\/\/05-adding-a-dialog-title.html\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tak<\/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>Teraz, gdy klikniesz kotwic\u0119, aby uruchomi\u0107 wy\u015bwietlanie, nie tylko wy\u015bwietli okno dialogowe, jak w powy\u017cszym uj\u0119ciu, ale b\u0119dzie zawiera\u0142o r\u00f3wnie\u017c tytu\u0142:<\/p>\n<\/p>\n<p>Przydatne, prawda? Ale co by by\u0142o, gdyby by\u0142o bardziej dynamiczne?<\/p>\n<h2>Teraz na Ajax<\/h2>\n<p>A dynamiczna natura jest tym, co zamierzam om\u00f3wi\u0107 w nast\u0119pnej kolejno\u015bci. W szczeg\u00f3lno\u015bci zamierzam przej\u015b\u0107 przez proces pobierania tego, co mamy tutaj, czyli danych statycznych, i zast\u0119powania ich informacjami pobieranymi asynchronicznie.<\/p>\n<p>Oznacza to, \u017ce u\u017cytkownik klika kotwic\u0119 <strong>Wy\u015bwietl okno dialogowe, a nast\u0119pnie:<\/strong><\/p>\n<ul>\n<li>wys\u0142ano zapytanie do serwera,<\/li>\n<li>dane s\u0105 pobierane,<\/li>\n<li>a nast\u0119pnie informacje s\u0105 przesy\u0142ane do obszaru tytu\u0142u i zawarto\u015bci okna dialogowego.<\/li>\n<\/ul>\n<p>Jest to troch\u0119 lepsze ni\u017c u\u017cywanie informacji statycznych i sprawia, \u017ce \u200b\u200baplikacja jest bardziej dynamiczna.<\/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>Podczas pracy z modalnymi oknami dialogowymi WordPress warto upewni\u0107 si\u0119, \u017ce zawieraj\u0105 one zar\u00f3wno tytu\u0142, jak i tre\u015b\u0107. Oto jak to zrobi\u0107 z danymi statycznymi.<\/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":[897,845,866],"tags":[1169],"class_list":["post-229296","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kod","category-samouczki","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/229296","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=229296"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/229296\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/165632"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=229296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=229296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=229296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}