Jeśli chodzi o opracowywanie rozwiązań dla klientów, będą chwile, w których prawdopodobnie będziesz miał za zadanie wyświetlać informacje w modalnych oknach dialogowych WordPress.
Dostępnych jest wiele rozwiązań do tego celu i im lepiej znasz JavaScript, różne biblioteki i dostępne w nich biblioteki, tym trudniej (a może nawet łatwiej) wybrać, której z nich użyć.
Ale WordPress ma wbudowaną infrastrukturę, która sprawia, że włączanie funkcji do WordPressa jest trywialne. W trzech nadchodzących postach omówię następujące kwestie:
- Jak włączyć modalne okna dialogowe WordPress za pomocą wbudowanych bibliotek,
- Zapełnianie modalnych okien dialogowych danymi,
- Wypełnianie modalnego okna dialogowego danymi dynamicznymi przez Ajax.
Ze względu na charakter serii posty nie będą powtarzane jeden po drugim, ale wszystkie będą używać unikalnego tagu, którego można użyć do dodania do zakładek i odnoszenia się do serii po ukończeniu postów.
Mając to na uwadze, porozmawiajmy o łatwym włączeniu modalnych okien dialogowych WordPress z wbudowanymi bibliotekami.
Modalne okna dialogowe WordPress, część 1
Na początek zakładam, że masz podstawową podstawę strony administracyjnej.
Na stronach wtyczek
Oznacza to, że masz wszystko, czego potrzebujesz, aby skonfigurować wtyczkę, aktywować, a następnie wyświetlić stronę za pomocą menu lub podmenu.
Jeśli nie, sprawdź ten post, aby dowiedzieć się, jak zacząć.
Gdy to zrobisz, będziesz potrzebować podstawowej infrastruktury dla strony wtyczki. Ta strona może służyć do prostego wyświetlania informacji lub może służyć zarówno do wyświetlania informacji, jak i umożliwiania użytkownikowi zapisywania opcji.
W tym samouczku nie jestem szczególnie zainteresowany umożliwieniem użytkownikowi zapisywania opcji. Zamiast tego musimy utworzyć kotwicę, która po kliknięciu wyświetli modalne okno dialogowe.
A dane, które będzie zawierać, zostaną omówione w późniejszym samouczku.
Przykładowa strona wtyczki
W tym momencie zakładam, że masz stronę wtyczki. Podstawowa struktura może wyglądać tak :
<?php
/**
* A basic plugin page that will eventually be used to demonstrate how to use the
* Thickbox library included with WordPress.
*
* @package Acme
*/
?>
<div id="acme-thickbox-demo" class="wrap">
<!-- TODO -->
</div><!-- #acme-thickbox-demo -->Stamtąd potrzebne są dwie rzeczy:
- zawierające bibliotekę Thickbox
- dodanie kotwicy i kontenera, który wyświetli modalne okno dialogowe
Aby włączyć bibliotekę Thickbox do swojej strony wtyczki, po prostu dodaj ten tag. Jeśli przestrzegasz jakichkolwiek standardów kodowania, prawdopodobnie Twoja strona ma blok docowy u góry strony. Tutaj zwykle dodaję kod.
Funkcja add_thickbox to funkcja dostarczana przez WordPress, która wykonuje następujące czynności:
Zakolejkuje domyślne js i css ThickBox.
Trochę niejasne, prawda? Technicznie dłuższy opis to:
ThickBox to widget okna dialogowego interfejsu użytkownika strony internetowej napisany w JavaScript na bazie biblioteki jQuery. Jego funkcją jest pokazanie pojedynczego obrazu, wielu obrazów, zawartości wbudowanej, zawartości iframe lub zawartości obsługiwanej przez AJAX w trybie hybrydowym.
A jeśli interesuje Cię sama biblioteka Thickbox, możesz ją zobaczyć na tej stronie.
W każdym razie wróćmy do strony. Teraz, gdy dodaję go do mojej strony wtyczki za pomocą funkcji API WordPress, moja strona wygląda mniej więcej tak :
<?php
/**
* A basic plugin page that will eventually be used to demonstrate how to use the
* Thickbox library included with WordPress.
*
* @package Acme
*/
add_thickbox();
?>
<div id="acme-thickbox-demo" class="wrap">
<!-- TODO -->
</div><!-- #acme-thickbox-demo -->Następnie tworzenie kotwicy i elementu do wyświetlania danych idą ze sobą w parze, ponieważ kotwica potrzebuje identyfikatora elementu, który będzie służył jako modalne okno dialogowe.
Kotwica potrzebuje następujących informacji:
- identyfikator elementu, który będzie wyświetlał modalny,
- wymiary wspomnianego modalnego okna dialogowego
W tym przykładzie skonfiguruję okno dialogowe, które będzie wyświetlane w rozdzielczości 800×600 pikseli i będzie miało identyfikator acme-modal-dialog.
Uwaga: pamiętaj, że dobrym pomysłem jest poprzedzenie elementów czymś związanym z nazwą wtyczki, aby nie powstawały żadne konflikty.
Stworzę więc kotwicę, która wygląda tak :
<?php
/**
* A basic plugin page that will eventually be used to demonstrate how to use the
* Thickbox library included with WordPress.
*
* @package Acme
*/
add_thickbox();
?>
<div id="acme-thickbox-demo" class="wrap">
<h1>Acme Thickbox Demo</h1>
<p>Provides an exmaple of how to use the thickbox library within a WordPress plugin page.</p>
<div id="acme-thickbox-content">
<a href="#">Display The Dialog</a>
</div><!-- #acme-thickbox-content -->
</div><!-- #acme-thickbox-demo -->A potem stworzę taki element :
<?php
/**
* A basic plugin page that will eventually be used to demonstrate how to use the
* Thickbox library included with WordPress.
*
* @package Acme
*/
add_thickbox();
?>
<div id="acme-thickbox-demo" class="wrap">
<h1>Acme Thickbox Demo</h1>
<p>Provides an exmaple of how to use the thickbox library within a WordPress plugin page.</p>
<div id="acme-thickbox-content">
<a href="TB_inline?width=600&height=550&inlineId=acme-modal-dialog" class="thickbox">Display The Dialog</a>
<div id="acme-modal-dialog" style="display:none;"></div><!-- #acme-modal-dialog -->
</div><!-- #acme-thickbox-content -->
</div><!-- #acme-thickbox-demo -->A powyższy kod będzie tak wyglądał ostateczna wersja strony wtyczki. Po kliknięciu na kotwicę powinno pojawić się puste okno dialogowe o określonych wymiarach (tj. 800×600 pikseli).
Oczywiście będzie pusty, ponieważ nie będzie wyświetlał żadnych danych.
Wyświetlanie danych
W następnym poście z tej serii omówię, jak wyświetlać dane w kontekście okna dialogowego.
Jest to łatwe, ale jest dobrym punktem wyjścia, jeśli chcesz rozpocząć włączanie danych dynamicznych za pośrednictwem interfejsu API REST lub Ajax. Ale omówię to przed końcem tego.