Додавання модальних діалогових вікон WordPress (з використанням статичних даних)

Останнє оновлення Лис 15, 2022

Зміст

Модальні діалоги WordPress: статичні дані

У попередній публікації я описав процес, необхідний для того, щоб модальні діалогові вікна WordPress відображалися в контексті області адміністрування.

Це використовує:

вбудований API WordPress,
надана бібліотека Thickbox,
і кілька прикладів коду для його відображення.

У цьому посібнику я розповім про заповнення модального діалогового вікна даними. Після цього я розповім, як динамічно заповнювати дані за допомогою Ajax.

Модальні діалоги WordPress: статичні дані

Для цієї публікації я припускаю, що ви прочитали першу публікацію серії та розумієте, що робить код (хоча навіть краще, якщо у вас є робочий код у вашому локальному середовищі розробки).

Незважаючи на це, давайте поговоримо про заповнення мета поля інформацією. Тобто ми розглянемо:

розміщення інформації в тілі метабокса,
наповнення заголовка вмістом.

Коли ми це зробимо, ми перейдемо до захоплення інформації з сервера в асинхронному режимі, а потім заповнення коду, який ми маємо на даний момент.

1 Визначення даних

Додати вміст до метабокса дуже просто. Згадайте з попереднього посту; у нас є елемент HTML, який має display: none; значення атрибута стилю .

Ось оригінальна суть :

<?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 -->

Додати вміст до модального діалогу легко. Просто знайдіть елемент acme-modal-dialog, а потім заповніть його будь-якою інформацією, яку ви хочете показати користувачеві.

Наприклад, перегляньте цей приклад коду :

<div id="acme-modal-dialog" style="display:none;">
  <h2>Hello World</h2>
  <p>Lucas ipsum dolor sit amet ventress dak jusik chewbacca tenel beru bail anomid hapes mas.</p>
  <p>Fel kalee kyle desann. Ozzel p'w'eck jax castell saleucami. Thisspias veila mantell mccool garindan jax.</p>
  <p>Barriss kurtzen sing bertroff cody frozarns. Han koon miraluka vau.</p>
  <p>
    <ul>
      <li>Bajic asajj boba raymus dug piell moddell jax darth.</li>
      <li>Sio anakin naberrie shistavanen fisto utapau chewbacca aayla.</li>
    </ul>
  </p>
  <p>
    Corran axmis kor-uj hutt marek kenobi ansuroer echani. Mirax mara fisto bith tyranus kashyyyk farlander max b'omarr.
    Ben dodonna askajian teevan palpatine lobot beru.
  </p>
</div><!-- #acme-modal-dialog -->

Коли користувач натискає на прив’язку в попередній публікації (той, який читає «Показати діалогове вікно »), тоді буде відображено модальний вміст із вмістом, який ви бачите вище.

Загалом, це має виглядати так, як ви бачите вище, виходячи з коду, викладеного в суті.

2 Встановлення заголовка

Далі зауважте, що модальне діалогове вікно містить опцію закрити його щоразу, коли користувач закінчить його читати. Окрім цієї можливості, зверніть увагу, що область діалогового вікна має багато білого простору.

Ви розумієте, що я маю на увазі: це область, яка зазвичай використовується як рядок заголовка. Завдяки Thickbox API та його інтеграції з WordPress ми можемо легко додати його до свого заголовка. Він може бути динамічним (як якщо б інформація надходила через Ajax) або може бути статичним.

І оскільки ми працюємо зі статичною інформацією в цій конкретній публікації, давайте це налаштуємо. Для цього нам потрібно додати атрибут title до прив’язки, що відповідає за відображення модалу.

Коли ви знайдете прив’язку, відповідальну за запуск відображення (пам’ятайте, вона містить текст Display The Dialog ), додайте до неї атрибут title, щоб код виглядав так :

<a href="TB_inline?width=600&height=550&inlineId=acme-modal-dialog" title="Hello World" class="thickbox">Display The Dialog</a>

Тепер, коли ви натискаєте на прив’язку, щоб активувати дисплей, він не лише відображатиме діалогове вікно, як на знімку вище, але також міститиме назву:

Корисно, правда? Але що, якби він був більш динамічним?

Тепер до Ajax

І динамічний характер – це те, про що я хочу поговорити далі. Зокрема, я хочу пройти через процес взяття того, що ми тут маємо, тобто статичних даних, і замінити їх інформацією, отриманою асинхронно.

Тобто користувач натискає прив’язку «Показати діалогове вікно », а потім:

робиться запит на сервер,
дані витягуються,
а потім інформація передається в заголовок і області вмісту діалогового вікна.

Це трохи краще, ніж використання статичної інформації, і робить програму більш динамічною.

Джерело запису: tommcfarlin.com