{"id":229215,"date":"2022-11-13T10:18:00","date_gmt":"2022-11-13T07:18:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229215"},"modified":"2022-11-09T06:00:30","modified_gmt":"2022-11-09T03:00:30","slug":"dodawanie-modalnych-okien-dialogowych-wordpress-z-wbudowanymi-bibliotekami","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/dodawanie-modalnych-okien-dialogowych-wordpress-z-wbudowanymi-bibliotekami\/","title":{"rendered":"Dodawanie modalnych okien dialogowych WordPress (z wbudowanymi bibliotekami)"},"content":{"rendered":"\n

Je\u015bli chodzi o opracowywanie rozwi\u0105za\u0144 dla klient\u00f3w, b\u0119d\u0105 chwile, w kt\u00f3rych prawdopodobnie b\u0119dziesz mia\u0142 za zadanie wy\u015bwietla\u0107 informacje w modalnych oknach dialogowych WordPress.<\/p>\n

Dost\u0119pnych jest wiele rozwi\u0105za\u0144 do tego celu i im lepiej znasz JavaScript, r\u00f3\u017cne biblioteki i dost\u0119pne w nich biblioteki, tym trudniej (a mo\u017ce nawet \u0142atwiej) wybra\u0107, kt\u00f3rej z nich u\u017cy\u0107.<\/p>\n

Ale WordPress ma wbudowan\u0105 infrastruktur\u0119, kt\u00f3ra sprawia, \u017ce \u200b\u200bw\u0142\u0105czanie funkcji do WordPressa jest trywialne. W trzech nadchodz\u0105cych postach om\u00f3wi\u0119 nast\u0119puj\u0105ce kwestie:<\/p>\n

    \n
  1. Jak w\u0142\u0105czy\u0107 modalne okna dialogowe WordPress za pomoc\u0105 wbudowanych bibliotek,<\/li>\n
  2. Zape\u0142nianie modalnych okien dialogowych danymi,<\/li>\n
  3. Wype\u0142nianie modalnego okna dialogowego danymi dynamicznymi przez Ajax.<\/li>\n<\/ol>\n

    Ze wzgl\u0119du na charakter serii posty nie b\u0119d\u0105 powtarzane jeden po drugim, ale wszystkie b\u0119d\u0105 u\u017cywa\u0107 unikalnego tagu, kt\u00f3rego mo\u017cna u\u017cy\u0107 do dodania do zak\u0142adek i odnoszenia si\u0119 do serii po uko\u0144czeniu post\u00f3w.<\/p>\n

    Maj\u0105c to na uwadze, porozmawiajmy o \u0142atwym w\u0142\u0105czeniu modalnych okien dialogowych WordPress z wbudowanymi bibliotekami.<\/p>\n

    Modalne okna dialogowe WordPress, cz\u0119\u015b\u0107 1<\/h2>\n

    Na pocz\u0105tek zak\u0142adam, \u017ce masz podstawow\u0105 podstaw\u0119 strony administracyjnej.<\/p>\n

    Na stronach wtyczek<\/h3>\n

    Oznacza to, \u017ce masz wszystko, czego potrzebujesz, aby skonfigurowa\u0107 wtyczk\u0119, aktywowa\u0107, a nast\u0119pnie wy\u015bwietli\u0107 stron\u0119 za pomoc\u0105 menu lub podmenu.<\/p>\n

    Je\u015bli nie, sprawd\u017a ten post<\/a>, aby dowiedzie\u0107 si\u0119, jak zacz\u0105\u0107.<\/p>\n

    Gdy to zrobisz, b\u0119dziesz potrzebowa\u0107 podstawowej infrastruktury dla strony wtyczki. Ta strona mo\u017ce s\u0142u\u017cy\u0107 do prostego wy\u015bwietlania informacji lub mo\u017ce s\u0142u\u017cy\u0107 zar\u00f3wno do wy\u015bwietlania informacji, jak i umo\u017cliwiania u\u017cytkownikowi zapisywania opcji.<\/p>\n

    W tym samouczku nie jestem szczeg\u00f3lnie zainteresowany umo\u017cliwieniem u\u017cytkownikowi zapisywania opcji. Zamiast tego musimy utworzy\u0107 kotwic\u0119, kt\u00f3ra po klikni\u0119ciu wy\u015bwietli modalne okno dialogowe.<\/p>\n

    A dane, kt\u00f3re b\u0119dzie zawiera\u0107, zostan\u0105 om\u00f3wione w p\u00f3\u017aniejszym samouczku.<\/p>\n

    Przyk\u0142adowa strona wtyczki<\/h3>\n

    W tym momencie zak\u0142adam, \u017ce masz stron\u0119 wtyczki. Podstawowa struktura mo\u017ce wygl\u0105da\u0107 tak<\/a> :<\/p>\n

    <?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 *\/\n?>\n\n<div id=\"acme-thickbox-demo\" class=\"wrap\">\n  <!-- TODO -->\n<\/div><!-- #acme-thickbox-demo --><\/code><\/pre>\n
    Stamt\u0105d potrzebne s\u0105 dwie rzeczy:<\/p>\n
      \n
    1. zawieraj\u0105ce bibliotek\u0119 Thickbox<\/li>\n
    2. dodanie kotwicy i kontenera, kt\u00f3ry wy\u015bwietli modalne okno dialogowe<\/li>\n<\/ol>\n
      Aby w\u0142\u0105czy\u0107 bibliotek\u0119 Thickbox do swojej strony wtyczki, po prostu dodaj ten tag. Je\u015bli przestrzegasz jakichkolwiek standard\u00f3w kodowania, prawdopodobnie Twoja strona ma blok docowy u g\u00f3ry strony. Tutaj zwykle dodaj\u0119 kod.<\/p>\n
      Funkcja add_thickbox<\/a> to funkcja dostarczana przez WordPress, kt\u00f3ra wykonuje nast\u0119puj\u0105ce czynno\u015bci:<\/p>\n
      \n
      Zakolejkuje domy\u015blne js i css ThickBox.<\/p>\n<\/blockquote>\n
      Troch\u0119 niejasne, prawda? Technicznie d\u0142u\u017cszy opis to:<\/p>\n
      \n
      ThickBox to widget okna dialogowego interfejsu u\u017cytkownika strony internetowej napisany w JavaScript na bazie biblioteki jQuery. Jego funkcj\u0105 jest pokazanie pojedynczego obrazu, wielu obraz\u00f3w, zawarto\u015bci wbudowanej, zawarto\u015bci iframe lub zawarto\u015bci obs\u0142ugiwanej przez AJAX w trybie hybrydowym.<\/p>\n<\/blockquote>\n
      A je\u015bli interesuje Ci\u0119 sama biblioteka Thickbox, mo\u017cesz j\u0105 zobaczy\u0107 na tej stronie<\/a>.<\/p>\n
      W ka\u017cdym razie wr\u00f3\u0107my do strony. Teraz, gdy dodaj\u0119 go do mojej strony wtyczki za pomoc\u0105 funkcji API WordPress, moja strona wygl\u0105da mniej wi\u0119cej tak<\/a> :<\/p>\n
      <?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?>\n\n<div id=\"acme-thickbox-demo\" class=\"wrap\">\n  <!-- TODO -->\n<\/div><!-- #acme-thickbox-demo --><\/code><\/pre>\n
      Nast\u0119pnie tworzenie kotwicy i elementu do wy\u015bwietlania danych id\u0105 ze sob\u0105 w parze, poniewa\u017c kotwica potrzebuje identyfikatora elementu, kt\u00f3ry b\u0119dzie s\u0142u\u017cy\u0142 jako modalne okno dialogowe.<\/p>\n
      Kotwica potrzebuje nast\u0119puj\u0105cych informacji:<\/p>\n