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

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

Источник