Всплывающее окно для вордпресс (программно)

remodal для wordpress

Я хочу поделиться легким и удобным способом внедрения модальных окон в CMS WordPress программно. 

Установка

  • скачиваем и распаковываем архив remodal.zip
  • в корне вашей темы создаем папки css и js — если их не было изначально
  • закидываем файлы стилей и скрипт в эти папки по FTP или через панель хостинга
  • в файл footer.php вашей темы прописываем код подключения
  • <link rel="stylesheet" href="<?= get_template_directory_uri(); ?>/css/remodal.css">
    <link rel="stylesheet" href="<?= get_template_directory_uri(); ?>/css/remodal-default-theme.css">
    
    <script src="<?= get_template_directory_uri(); ?>/js/remodal.min.js"></script>
     
    <div class="remodal" data-remodal-id="modal">
    <button data-remodal-action="close" class="remodal-close"></button>
    	<?php echo do_shortcode( '[contact-form-7 404 "Not Found"]' );?>
    </div> 
    

     

  • прописываем id к кнопке вызова модального окна или создаем саму кнопку
  • <a href="#modal"><div class="zakaz_but">Заказать звонок</div></a>

     

Таких кнопок можно создать несколько, только не забываем менять ID modal в футере и в новой кнопке

Преимущества

  1. Быстрое подключение
  2. Минимальное количество кода
  3. Легко расширяемый
  4. Адаптивный
Поделись с друзьями:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *