Три способа подключения всплывающего (модального) окна на WordPress, созданного с помощью плагинов Easy FancyBox и Contact Form 7.

Данная статья посвящена вопросу создания всплывающего (модального) окна на WordPress. Такие окна еще называются модальными и их также можно создавать на CSS.

Этой статьи очень легко могло бы не быть, если бы не две причины.

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

Вторая причина - у меня первоначально созданное модальное окно не заработало. И только на одном из форумов я нашел ответ на свой вопрос.

Ниже привожу описания решения обоих вопросов.

Три способа подключения модального окна Easy FancyBox

Итак, как я уже говорил выше, статей по вопросу создания модального окна с помощью плагинов Easy FancyBox и Contact Form 7 существует огромное количество. Поэтому здесь я его описывать не буду. А коснусь вопроса - как подключить уже созданную форму в WordPress.

Код формы Easy FancyBox в шаблон

Если готовая форма встраивается непосредственно в шаблон, то код должен быть таким:

<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 на страницу

Если готовая форма встраивается в запись или на страницу, то код должен быть таким:

<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 нужно добавить строку:

add_filter(widget_text, do_shortcode);

Теперь виджет “Текст” имеет поддержку shortcode и вставить готовую форму в виджет “Текст” нужно таким образом:

<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.

Все три способа были “подсмотрены” мною здесь - “Контактная форма (Contact Form 7) во всплывающем окне”.

Модальное окно Easy FancyBox не работает

Перехожу ко второму вопросу - все настроено, но ничего не работает. Такое было у меня и было связано с тем, что мною была сверстана и создана тема под Worpdress с нуля.

Проблема заключалась в том, что я “забыл” добавить в созданную тему две функции, которые обязательно должны присутствовать в любой WordPress-теме - wp_head(); и wp_footer();.

В файле шапки сайта header.php перед закрывающим тегом </head> необходимо вставить запись, которая будет выглядеть таким образом:

...
<?php wp_head(); ?>
</head>

В файле подвала сайта footer.php перед закрывающим тегом </body> необходимо вставить запись, которая будет выглядеть таким образом:

...
<?php wp_footer(); ?>
</body>

На этом все.