Три способа подключения всплывающего (модального) окна на WordPress, созданного с помощью плагинов Easy FancyBox и Contact Form 7.
Данная статья посвящена вопросу создания всплывающего (модального) окна на WordPress. Такие окна еще называются модальными и их также можно создавать на CSS.
Этой статьи очень легко могло бы не быть, если бы не две причины.
Первая причина – Сеть буквально завалена статьями и статейками на эту тему, но все они одна в одну повторяют друг друга. И только в одной я нашел грамотное, точное и краткое описание, как выполнять подключение модального окна в WordPress.
Вторая причина – у меня первоначально созданное модальное окно не заработало. И только на одном из форумов я нашел ответ на свой вопрос.
Ниже привожу описания решения обоих вопросов.
Три способа подключения модального окна Easy FancyBox
Итак, как я уже говорил выше, статей по вопросу создания модального окна с помощью плагинов Easy FancyBox и Contact Form 7 существует огромное количество. Поэтому здесь я его описывать не буду. А коснусь вопроса – как подключить уже созданную форму в WordPress.
Код формы Easy FancyBox в шаблон
Если готовая форма встраивается непосредственно в шаблон, то код должен быть таким:
// HTML
<a class="fancybox" href="#contact_form_pop">Контактная форма</a>
<div class="fancybox-hidden" style="display:none">
<div id="contact_form_pop">
<?php echo do_shortcode('[contact-form-7 id="" title=""]'); ?>
</div>
</div>
Обратите внимание на конструкцию
<?php echo do_shortcode(''); ?>
в которую вставлен shortcode, созданный в плагине Contact Form 7.
Код формы Easy FancyBox на страницу
Если готовая форма встраивается в запись или на страницу, то код должен быть таким:
// HTML
<a class="fancybox" href="#contact_form_pop">Контактная форма</a>
<div class="fancybox-hidden" style="display:none">
<div id="contact_form_pop">
[contact-form-7 id="" title=""]
</div>
</div>
Здесь shortcode вставляется “как есть” – как его создал плагин Contact Form 7.
Код формы Easy FancyBox в виджет
Готовую форму можно встраивать в виджет, но для этого сначала нужно включить поддержку shortcode в WordPress. Для этого в файле functions.php нужно добавить строку:
// PHP
add_filter('widget_text', 'do_shortcode');
Теперь виджет “Текст” имеет поддержку shortcode и вставить готовую форму в виджет “Текст” нужно таким образом:
// HTML
<a class="fancybox" href="#contact_form_pop">Контактная форма</a>
<div class="fancybox-hidden" style="display:none">
<div id="contact_form_pop">
[contact-form-7 id="" title=""]
</div>
</div>
Здесь shortcode вставляется точно также – без изменений, как есть из плагина Contact Form 7.
Модальное окно Easy FancyBox не работает
Перехожу ко второму вопросу – все настроено, но ничего не работает. Такое было у меня и было связано с тем, что мною была сверстана и создана тема под Worpdress с нуля.
Проблема заключалась в том, что я “забыл” добавить в созданную тему две функции, которые обязательно должны присутствовать в любой WordPress-теме –
wp_head(); и wp_footer();
В файле шапки сайта header.php перед закрывающим тегом
</head>
необходимо вставить запись, которая будет выглядеть таким образом:
// PHP ... <?php wp_head(); ?> </head>
В файле подвала сайта footer.php перед закрывающим тегом
</body>
необходимо вставить запись, которая будет выглядеть таким образом:
// PHP ... <?php wp_footer(); ?> </body>