Всем читателям привет! На связи как всегда Денис Максимов!

Я сделал страницу со своими услугами, а также страницу портфолио с примерами моих работ, которую Вы можете увидеть на главной странице и в каждой статье в самом низу, выглядит она в виде баннера.

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

Вы наверное уже заметили, что при входе на мой сайт всплывает окно!? Так вот, не так давно Александр Крутицких задал мне вопрос, «Как сделать всплывающее окно для сайта, без плагина?», по другому его еще называют "модальное окно для WordPress сайта!

всплывающее окно для сайта

И вот, я решил написать для Вас статью, после того как проверил работу этого модального окна.

При заходе на сайт, всплывающее окно появляется один раз, и можно его закрыть и заниматься дальше своими делами на сайте, но после закрытия браузера в следующий раз при входе на сайт, окно появляется снова, я думаю, что это оптимальный вариант работы модального окна.

Всплывающее окно имеет несколько не сложных, но полезных настроек. Есть возможность изменить время до появления окна, сделать автоматическое закрытие через какое то время, добавить возможность сохранение куки (запоминает посетителя и не показывает ему больше окно). Все эти настройки делаются с помощью кусков кода. Дальше я подробнее опишу каждую настройку.

Создаем всплывающее окно для сайта.

Не забудьте сделать резервные копии файлов, в которые будете добавлять коды.

Для начала я Вам покажу рабочий вариант, который на данный момент стоит у меня.

Если хотите чтобы окно всплывало только на главной странице, то код, который ниже, ставите в файл index.php (основной шаблон сайта). Если хотите появление всплывающего окна на всех страницах сайта, тогда ставите код в файл header.php (заголовок, шапка сайта).

Этот код поставьте после тега <body> если в файле header.php.

Следующий код нужно поставить в файл footer.php (подвал сайта). Код ставим до тега </body>.

Время можете поставить свое, остальное не изменяйте.

Ну и последнее что нужно сделать, это присвоить модальному окну свои стили. Если Вы разбираетесь в CSS, то можете вообще все что угодно сделать, а если нет то будут стили как у меня.

Коды стилей соответственно ставим в файл style.css.

Есть код дополнительный, с помощью которого можно закрыть всплывающее окно не кнопкой закрыть, а щелкнув на любое место экрана.

Вот и весь процесс создания всплывающего окна на WordPress сайте. Все файлы сохраните и закиньте обратно в папку с вашей темой. Если у Вас установлен плагин кэширования, то зайдите в настройки и очистите весь кэш. Если окно не появляется, то закройте браузер, откройте заново и нажмите клавишу F5 для обновления страницы.

Не у всех шаблоны поддерживают такие скрипты, и я выкладываю еще несколько кодов, которые в случае не работающего модального окна, заменяем на другие и еще раз пробуем. Но, тот код, который я для Вас выложил выше, должен у Вас работать.

Вариант второй:

Вариант третий:

Вариант четвертый:

Надеюсь статья была полезной и понятной. Теперь Вы сможете сообщать посетителям о чем то важном, или предлагать им подписаться на обновление. Всплывающее окно для сайта может содержать любую информацию. Действуйте!

 

Предыдущая статья: «Микроразметка для изображений