Всплывающая форма в меню сайта WordPress

forma

Приветствую вас, дорогие друзья!
В одной из прошлых статей я рассказывала о том, как сделать всплывающую форму обратной связи на сайте WordPress. Если вы её ещё не читали, то вот ссылка.
Как оказалось, у многих читателей возник вопрос: «Как сделать чтобы форма обратной связи открывалась при нажатии на меню?» Я несколько раз отвечала на этот вопрос через форму комментариев и личную переписку, а теперь решила написать статью с инструкцией и скриншотами чтобы подробнее разъяснить этот вопрос и больше к нему не возвращаться.

Как работает всплывающая форма?

Напомню что для создания вслывающей формы или любого другого контента, который должен открываться во всплывающем окне нам понадобится плагин Easy FancyBox.
Работает он так: мы оборачиваем блок с контентом отдельный блок и делаем его невидимым приписав ему style=»display:none».

скрыть блок

Далее мы пишем в нужном нам месте код ссылки и присваиваем ей класс «fancybox-inline».

При этом у вас должны быть выставлены соответствующие настройки плагина Easy FancyBox. Подробнее о них написано в этой статье.

Так вот в любом месте темы этот способ срабатывает без проблем, а вот с меню есть небольшая загвоздка. И заключается она в том, что нам как то нужно присвоить нужному нам пункту меню класс «fancybox-inline».

Как присвоить класс меню WordPress?

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

Для того чтобы это сделать нужно:

  1. 1.Переходим в раздел «Внешний вид» => «Меню».
  2. 2.В верхней части экрана нажимаем кнопку «Настройки экрана».
  3. открываем настройки экрана
  4. 3.В открывшейся панели ставим галочку возле пункта «Классы CSS».
  5. Включаем рассшыренные свойства меню
  6. 4.Нажимаем пункт меню для которого мы хотим добавить всплывающую форму и видим что теперь у него помимо стандартных полей есть ещё и поле «Классы CSS».
  7. поле для ввода названия класса
  8. 5.Вписываем в это поле название класса «fancybox-inline» и сохраняем меню.

Куда же тогда вставить код с формой?

Сам блок с формой или другим контентом, который должен открываться во всплывающем окне, можно вставить на страницу или запись.

Если нужно чтобы форма всплывала на всех страницах, то можно добавить этот код в область виджетов подвала или сайдбара вашего сайта.

Для этого можно использовать виджет «Текст». На сайте этот виджет отображаться не будет, так как в нём находится скрытый блок.

использование виджета "Текст"

Также данный блок можно вывести в шаблоне темы. Например, вставить в шаблон «footer.php» перед закрытием тега body.

Не забывайте, что для вывода шорткода в шаблон темы нужно использовать специальную функцию! Подробнее об этом можно узнать здесь.

Вот и всё! После этих нехитрых махинаций ваша всплывающая форма должна срабатывать при нажатии на определённом пункте меню. Если возникнут ещё какие то вопросы – не стесняйтесь и задавайте их в комментариях.

! Если вы планируете использовать несколько всплывающих форм на вашем сайте, то обязательно прочитайте эту статью. Без этого формы не будут работать!

На этом сегодня всё! Буду очень признательна, если вы поделитесь ссылкой на данную статью в соцсетях. Подписывайтесь на мой канал YouTube! До новых встреч!

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

6 комментариев

  1. Здравствуйте, у меня в теме присутствует кнопка в меню, но к меню она не относиться, но в настройках темы есть блок, называется header menu section, вот документация: http://sktthemesdemo.net/documentation/movers_documentation/

    там можно поменять название кнопки и назначить на нее ссылку, я туда вставлял: #contact_form_pop_up но ничего не происходит, но когда меняешь display:none на display:yes, форма появляется и кнопка работает но, (конечно без фансибокса) при нажатии на кнопку, просто тупо перематывает на то место, где прилеплена форма.

    В остальных местах все работает как надо, но я упрямый и хочется прибить форму именно на эту кнопку.

    Спасибо.

    • Здравствуйте, Михаил!
      Для того чтобы всплывающая форма работала у ссылки должен быть обязательно класс «fancybox-inline». Посмотрите в настройках кнопки, о которой Вы пишите, есть ли там возможность задать для неё класс? Если да, то припишите ей класс «fancybox-inline»

  2. Нет, к сожалению, а как мне найти ее в коде?

    • Это зависит от особенностей Вашей темы. Нужно смотреть в файлах темы и вникать в код.

  3. Вот нашел через очередное ваше видео такой вот код на эту кнопку:

    <div class=»getaquote»>

    <ul>

    <li class=»»>

    <a href=»#contact_form_pop_up»>—</a>

    </li>

    </ul>

    </div>

    <!—getaquote—>

    А в вордпресс в редакторе в style css:

    .getaquote{ position:absolute; top:0; right:0;}

    .getaquote ul li{ padding:0 !important; margin:0 !important;}

    .getaquote ul li a{ background:#ffb400; border:none !important; padding:15px 42px !important;}

    .getaquote ul li a:hover{ color:#fff !important;}

    • А зачем Вы мне этот код прислали?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif