Zintegruj modalne okno dialogowe za pomocą wbudowanego ThickBox w WordPress
Modalne okna dialogowe czasami muszą być zintegrowane z witryną WordPress. Za pomocą modalnego okna dialogowego możemy wyświetlić zawartość na górze bieżącej strony.
Jeśli chodzi o wyskakujące okienka modalne, zwykle ludzie wolą używać biblioteki Lightbox lub Fancybox. Są to popularne biblioteki i działają całkiem dobrze.
Aby włączyć te biblioteki do WordPressa, musimy pobrać pliki JS i CSS danej biblioteki i w standardowy sposób włączyć ją do projektu. Następnie, zgodnie z dokumentacją biblioteki, musimy zawinąć zawartość, wywołać metodę, aby otworzyć okno modalne.
WordPress zawierał w swoim rdzeniu wtyczkę ThickBox jQuery ze zmodyfikowaną wersją. I może być używany zamiast bibliotek zewnętrznych. Korzystając z tej podstawowej funkcji, otrzymujemy interfejs, który jest taki sam jak wyskakujące okienka modalne w administratorze WordPress, jak na przycisku mediów.
Możesz spróbować tej wbudowanej funkcji. Jeśli spełnia Twoje potrzeby, oszczędza czas integracji zewnętrznej biblioteki.
Używając ThickBox z zawartością w wierszu, otrzymasz wynik podobny do pokazanego na poniższym zrzucie ekranu.
Modalne okno dialogowe za pomocą ThickBox
WordPress ThickBox dobrze współpracuje z treścią wstawianą. Shortcode można używać również w oknie modalnym. Jako przykład możesz wyświetlić formularz kontaktowy w oknie modalnym za pomocą formularza kontaktowego 7.
Powiedziawszy to, zobaczmy, jak korzystać z ThickBox w WordPressie.
Na przykład wyświetlamy fikcyjną zawartość w wierszu po kliknięciu tagu kotwicy. Dlatego umieść poniższy kod w dowolnym miejscu, w którym chcesz użyć ThickBox.
<?php add_ThickBox(); ?>
<div id="dummy-content-id" style="display:none;">
<p>
Lorem 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.
</p>
</div>
<a href="#TB_inline?width=600&height=350&inlineId=dummy-content-id" title="Inline Content" class="ThickBox">View dummy content!</a>Aby skorzystać z Thichbox, musimy dołączyć pierwszą add_ThickBox()metodę. Ta funkcja ładuje bibliotekę z jądra. Następnie w atrybucie href tagu anchor musimy przekazać #TB_inline wraz z szerokością, wysokością i id kontenera, w którym zawinięta jest nasza treść inline.
W ten sam sposób, jeśli chcesz wyświetlić formularz kontaktowy w modalnym oknie dialogowym, zamiast fikcyjnej treści musisz umieścić shortcode za pomocą do_shortcode()funkcji WordPress.
<?php echo do_shortcode('[shortcode_here]'); ?>Otóż to! Mamy nadzieję, że rozumiesz, jak dodać modalne okno dialogowe za pomocą ThickBox w WordPress. Chcielibyśmy usłyszeć Twoje przemyślenia w poniższym komentarzu.
Możesz również przeczytać nasze artykuły Przekieruj na stronę z podziękowaniami po przesłaniu formularza kontaktowego 7 i jak zapisać formularz kontaktowy 7 Zgłoszenia do bazy danych WordPress