Всякий раз, когда дело доходит до разработки решений для клиентов, будут моменты, когда вам, вероятно, придется отображать информацию в модальных диалоговых окнах 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 и делает следующее:
Ставит в очередь по умолчанию ThickBox js и css.
Немного расплывчато, да? Технически более длинное описание:
ThickBox — это виджет диалогового окна пользовательского интерфейса веб-страницы, написанный на JavaScript поверх библиотеки jQuery. Его функция состоит в том, чтобы показывать одно изображение, несколько изображений, встроенный контент, контент в iframe или контент, обслуживаемый через 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. Но я расскажу об этом до конца.