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