Інтегруйте модальне діалогове вікно, використовуючи вбудований ThickBox у WordPress
Модальні діалоги іноді неодмінно потребують інтеграції з веб-сайтом WordPress. За допомогою модального діалогу ми можемо відображати вміст у верхній частині поточної сторінки.
Що стосується модальних спливаючих вікон, зазвичай люди воліють використовувати бібліотеку Lightbox або Fancybox. Це популярні бібліотеки і вони працюють досить добре.
Щоб включити ці бібліотеки в WordPress, нам потрібно завантажити файли JS та CSS бібліотеки та включити їх у проект стандартним способом. Після цього, згідно з бібліотечною документацією, нам потрібно обернути вміст, викликати метод, щоб відкрити модальне вікно.
WordPress включав ThickBox плагін JQuery зі зміненою версією в її ядрі. І його можна використовувати замість зовнішніх бібліотек. Використовуючи цю основну функцію, ми отримуємо той самий інтерфейс, що і модальні спливаючі вікна в адміністраторі WordPress, як на кнопці мультимедіа.
Ви можете спробувати цю вбудовану функцію. Якщо він відповідає вашим потребам, це економить час інтеграції зовнішньої бібліотеки.
Використовуючи ThickBox із вбудованим вмістом, ви отримаєте щось на зразок, як показано на знімку екрана нижче.
Модальне діалогове вікно з використанням ThickBox
WordPress ThickBox добре працює з вбудованим вмістом. Шорткод можна використовувати також у модальному діалозі. Як приклад, ви можете показати форму контакту у модальному вікні, використовуючи короткий код форми 7.
Сказавши це, давайте подивимося, як використовувати ThickBox у WordPress.
Наприклад, ми відображаємо фіктивний вбудований вміст після натискання анкерного тегу. Отже, розмістіть наведений нижче код там, де ви хочете використовувати 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>Щоб використовувати Thichbox, нам потрібно включити перший add_ThickBox()метод. Ця функція завантажує бібліотеку з ядра. Далі, в атрибуті href тегу прив’язки ми повинні передавати #TB_inline разом із шириною, висотою та ідентифікатором контейнера, в який загортається наш вбудований вміст.
Так само, якщо вам потрібно відобразити форму контакту в модальному діалозі, то замість фіктивного вмісту вам потрібно розмістити шорт-код, використовуючи do_shortcode()функцію WordPress.
<?php echo do_shortcode('[shortcode_here]'); ?>Це воно! Ми сподіваємось, ви розумієте, як додати модальне діалогове вікно за допомогою ThickBox у WordPress. Ми хотіли б почути ваші думки в коментарі нижче.
Ви також можете прочитати наші статті Сторінка переадресації на подяку після подання контактної форми 7 та Як зберегти подання контактної форми 7 до бази даних WordPress