Додавання модальних діалогових вікон WordPress (з вбудованими бібліотеками)
Щоразу, коли мова заходить про розробку рішень для клієнтів, іноді вам доведеться відображати інформацію в модальних діалогових вікнах WordPress.
Існує багато доступних рішень для цього, і чим більше ви знайомі з JavaScript, різними бібліотеками та наявними в них бібліотеками, тим важче (або, можливо, навіть легше) вам вибрати, яке з них використовувати.
Але WordPress має вбудовану інфраструктуру, яка робить тривіальним інтегрувати функціональність у WordPress. Тож у трьох наступних публікаціях я розповім про наступне:
- Як включити модальні діалоги WordPress за допомогою вбудованих бібліотек,
- Заповнення модальних діалогів даними,
- Заповнення модального діалогу динамічними даними через Ajax.
Через характер серії дописи не будуть розміщуватися одна за одною, але всі вони використовуватимуть унікальний тег, який можна використовувати для створення закладок і посилатися на серію, коли дописи будуть завершені.
З огляду на це, давайте поговоримо про те, як легко об’єднати модальні діалоги WordPress із вбудованими бібліотеками.
Модальні діалоги WordPress, частина 1
Для початку я припускаю, що у вас є основні основи сторінки адміністрування.
На сторінках плагінів
Тобто у вас є все, що вам потрібно, щоб налаштувати плагін, активувати його, а потім сторінку відобразити в меню або підменю.
Якщо ні, перегляньте цю публікацію, щоб дізнатися, як почати.
Коли ви це зробите, вам знадобиться базова інфраструктура для сторінки плагіна. Цю сторінку можна використовувати для простого відображення інформації або її можна використовувати одночасно для відображення інформації та надання користувачеві можливості зберігати параметри.
Для цього підручника я не особливо зацікавлений у тому, щоб надати користувачеві можливість зберігати параметри. Замість цього нам потрібно створити прив’язку, яка відображатиме модальне діалогове вікно кожного разу, коли його клацнути.
А дані, які він міститиме, будуть розглянуті в наступному посібнику.
Зразок сторінки плагіна
На цьому етапі я припускаю, що у вас є сторінка плагіна. Його базова структура може виглядати так :
<?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 -->Звідси є дві необхідні речі:
- містить бібліотеку Thickbox
- додавання прив’язки та контейнера, який відображатиме модальне діалогове вікно
Щоб включити бібліотеку Thickbox на сторінку плагіна, просто додайте цей тег. Якщо ви дотримуєтеся будь-яких стандартів кодування, то ваша сторінка, швидше за все, має блок документів у верхній частині сторінки. Сюди я зазвичай додаю код.
Функція add_thickbox надається WordPress і виконує такі дії:
Ставить у чергу js і css ThickBox за замовчуванням.
Трохи розпливчасто, правда? Технічно довший опис:
ThickBox — це діалоговий віджет інтерфейсу веб-сторінки, написаний на JavaScript поверх бібліотеки jQuery. Його функція полягає в тому, щоб показати одне зображення, кілька зображень, вбудований вміст, вміст iframed або вміст, який подається через AJAX у гібридному режимі.
А якщо вас цікавить бібліотека Thickbox окремо, ви можете побачити її на цій сторінці.
У будь-якому випадку, повернемося до сторінки. Тепер, коли я додаю його на свою сторінку плагіна за допомогою функції WordPress API, моя сторінка виглядає приблизно так :
<?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 -->Далі створення прив’язки та елемента для відображення даних йдуть рука об руку одне з одним, а саме тому, що прив’язці потрібен ідентифікатор елемента, який слугуватиме модальним діалоговим вікном.
Якір потребує такої інформації:
- ID елемента, який відображатиме модальний,
- розміри згаданого модального діалогу
Для цього прикладу я збираюся налаштувати діалогове вікно з розміром 800 × 600 пікселів і матиме ідентифікатор acme-modal-dialog.
Примітка: пам’ятайте, що до ваших елементів варто додати префікс, пов’язаний із назвою плагіна, щоб не виникало конфліктів.
Отже, я створю прив’язку, яка виглядає так :
<?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 -->А потім я створю такий елемент :
<?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 -->Наведений вище код також показує, як виглядатиме остаточна версія сторінки плагіна. Коли ви натискаєте на прив’язку, має з’явитися порожнє діалогове вікно із зазначеними розмірами (тобто 800×600 пікселів).
Звичайно, він буде порожнім, оскільки не відображатиме жодних даних.
Відображення даних
У наступній публікації серії я розповім, як відображати дані в контексті діалогового вікна.
Це легко, але це гарна відправна точка, якщо ви хочете почати включати динамічні дані через REST API або Ajax. Але я розповім про це до кінця.