<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

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

Также Вы получите и всю практику, поскольку прямо в курсе с нуля создаётся полноценный Интернет-магазин, который затем публикуется в Интернете. И всё это прямо на Ваших глазах.

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Обратная связь на WordPress

Обратная связь на WordPress

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

Мы научимся вставлять кнопку "Заказать обратный звонок" или "Напишите нам" на ваш WordPress сайт, кликнув по которой, всплывет модальное окно с формой обратной связи.

1. Комбинация (Contact Form 7 + FancyBox)

Для этого нам потребуется установить популярный jQuery плагин FancyBox, в котором будет выводиться форма плагина Contact Form 7.

Для примера разместим нашу кнопочку в сайдбаре. На данный момент у меня установлен Wordpress 4.9.1 c дефолтной темой Twenty Seventeen.

Давайте добавим новую контактную форму: Contact Form 7 -> Добавить новую. Вы увидите дефолтный шаблон формы, придумайте ему свое название и сохраните, как на скриншоте ниже.

Обратная связь на WordPress

Во вкладке Contac Form 7 -> Контактные формы, напротив созданной вами формы "Обратная связь" вы увидите шорткод: [contact-form-7 id="823" title="Обратная связь"], который можно вставить в нужное вам место на сайте.

Перейдем в меню Внешний вид -> Виджеты, добавим текстовый виджет в сайдбар и вставим туда шорткод с формой.

Обратная связь на WordPress

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

 <div id="customForm" style="display:none;"> /* скрыть форму */
 [contact-form-7 id="823" title="Обратная связь"] /* шорткод */
 </div>

где даем id произвольное имя customForm, в дальнейшем через него мы свяжем форму с модальным окном.

Добавим выше код кнопки:

 <a class="fancybox" href="#customForm"> /* связать ссылку с формой */
 Написать нам
 </a>

На данном этапе в текстовом виджете вы должны увидеть следующее.

Обратная связь на WordPress

Вы уже скачали плагин FancyBox и загрузили его на свой хостинг, теперь надо подключить файл CSS стилей и сам плагин. Для этого в файл function.php текущей темы, вставляем следующие строчки кода.

wp_enqueue_script( 'my-fb', get_template_directory_uri() . '/fancybox/jquery.fancybox.pack.js',
array('jquery') );
wp_enqueue_style( 'my-fb-css', get_template_directory_uri() . '/fancybox/jquery.fancybox.css' );

Обращаться к плагину мы будем через ранее прописанный класс – fancybox. В файл footer.php текущей темы перед закрывающимся тегом body вставляем код:

 <script type="text/javascript">
 $(document).ready(function() {
 $(".fancybox").fancybox();
 });
 </script>

Наконец-то мы получили нужный результат, при клике по ссылке "Написать нам" всплывает форма, которую можно заполнить и отправить администратору сайта. Сообщение приходит мгновенно на ваш емайл. Закрывается форма при клике по крестику или в любом месте экрана.

Обратная связь на WordPress

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

Обратная связь на WordPress

2. Комбинация (Contact Form 7 + Popup Maker)

Второй способ намного проще первого и реализуется он с помощью WordPress плагинов: Contact Form 7 и Popup Maker™ – Best Rated

Перед нами стоит все та же задача: Вывести текстовую ссылку или кнопку в сайдбаре "Заказать обратный звонок" при клике по которой, всплывет форма в модальном окне. Посетитель заполняет поля формы, жмет кнопку "Отправить" и закрывает форму. Администратор сайта получает на свой емайл контакты этого посетителя и связывается с ним.

Создаем новую форму с двумя полями для ввода имени, телефона и кнопкой "Отправить". Копируем оттуда шорткод.

Обратная связь на WordPress

Добавляем новое модальное окно: Popup Maker -> Add Popup, вставляем в текстовую область новый шорткод и обновляем. Плагин автоматически присвоил модальному окну CSS класс – popmake-833.

Обратная связь на WordPress

Запомним этот класс, в дальнейшем он свяжет форму с модальным окном. Вставляем следующий код в текстовый виджет сайдбара.

 <a class="button" href="#popmake-833">Заказать обратный звонок</a>

Вместо текстовой ссылки можно вставить кнопку, как это сделал я.

Обратная связь на WordPress

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (3):

petushinho petushinho 18.01.2018 01:05:04

Збс!

Ответить

petushinho petushinho 18.01.2018 01:06:01

Збс!

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.