Как сделать всплывающее окно в wordpress?

В WordPress можно создать всплывающее окно с помощью плагинов или написать свой код. Рассмотрим оба варианта.

С использованием плагина:

1. Установите и активируйте плагин Popup Maker.
2. В меню WordPress выберите "Popup Maker" и "Add Popup".
3. Задайте название для всплывающего окна и выберите тип содержимого (HTML, WordPress Post, изображение и т.д.).
4. Создайте содержимое всплывающего окна, используя соответствующий редактор.
5. Выберите триггеры для всплывающего окна (например, открытие по клику на ссылку или при загрузке страницы).
6. Настройте стили и настройки всплывающего окна.
7. Сохраните изменения и опубликуйте всплывающее окно.

Написание своего кода:

1. Создайте новый файл в теме WordPress и назовите его "popup.php".
2. Вставьте следующий код в файл:

phpCopy code
<div class="popup-overlay"></div> <div class="popup">    <div class="popup-content">       <!-- здесь может быть ваш контент -->    </div> </div> 

3. Добавьте следующий CSS-код в файл "style.css" вашей темы:

cssCopy code
.popup-overlay {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    background: rgba(0, 0, 0, 0.7);    z-index: 9998;    display: none; }  .popup {    position: fixed;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    background: #fff;    padding: 20px;    z-index: 9999;    width: 500px;    max-width: 100%;    border-radius: 5px;    display: none; }  .popup .popup-content {    /* стили для контента всплывающего окна */ } 

4. Добавьте следующий JavaScript-код в файл "script.js" вашей темы:

javascriptCopy code
jQuery(document).ready(function($) {    $('.popup-overlay, .popup-close').click(function() {       $('.popup-overlay, .popup').fadeOut();    });     $('.popup-trigger').click(function() {       $('.popup-overlay, .popup').fadeIn();       return false;    }); }); 

5. Вставьте ссылку на всплывающее окно в нужном месте вашего сайта, например:

htmlCopy code
<a href="#" class="popup-trigger">Открыть всплывающее окно</a> 

Замените "Открыть всплывающее окно" на текст или изображение, которые будут использоваться в качестве триггера для открытия всплывающего окна.