Модальное окно на Easy FancyBox

Три способа подключения всплывающего (модального) окна на 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>

Обратите внимание на конструкцию

1

<?php echo do_shortcode(''); ?>

1

shortcode

Код формы 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>

Здесь

1

shortcode

Код формы Easy FancyBox в виджет

Готовую форму можно встраивать в виджет, но для этого сначала нужно включить поддержку shortcode в WordPress. Для этого в файле

1

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>

Здесь

1

shortcode

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

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

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

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

1

wp_head();

1

wp_footer();

В файле шапки сайта

1

header.php

1

</head>

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

В файле подвала сайта

1

footer.php

1

</body>

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

На этом все.