Интегрировать модальное диалоговое окно с помощью встроенного ThickBox в WordPress
Модальные диалоги иногда обязательно нужно интегрировать с веб-сайтом WordPress. Используя модальный диалог, мы можем отображать контент вверху текущей страницы.
Когда дело доходит до модального всплывающего окна, обычно люди предпочитают использовать библиотеку Lightbox или Fancybox. Это популярные библиотеки, которые работают очень хорошо.
Чтобы включить эти библиотеки в WordPress, мы должны загрузить файлы JS и CSS библиотеки и включить их в проект стандартным способом. После этого, согласно документации библиотеки, нам нужно обернуть контент, вызвать метод, чтобы открыть модальное окно.
WordPress включил плагин jQuery ThickBox с модифицированной версией в его ядро. И его можно использовать вместо внешних библиотек. Используя эту основную функцию, мы получаем интерфейс, аналогичный модальным всплывающим окнам в админке 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».