Устанавливаем всплывающую форму связи в шапку через виджет

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

1
<a class="fancybox" href="#contact_form_pop3"><img src="http://text-opt.ru/wp-content/uploads/2015/07/najti-optimizatora.png" alt="" width="205" height="157" /></a>

сохраняю, кликаю и вижу следующее

установка Easy FancyBox всплывающяя форма связи в шапку сайтаА вот не работает! Вместо формы связи появляется шорткод Contact Form 7! Я не на столько хорошо знаю все тонкости, чтобы понять причину, но ясно одно — метод неверный. А ранее я уже устанавливал всплывающую форму в шапке на сайте клиента, но, чтобы клиент мог самостоятельно изменять содержание ссылки — там вызов шел по клику на текст, я поставил виджет в шапку т.е. редактировать можно через панель виджетов, не влезая в сам код header.

Так и сделал — у меня в шапке такая вплывающая форма стоит первая слева. Как это сделать?

Как добавить свой виджет в шапку сайта вордпресс

В файл Функции темы (functions.php) ниже регистрации всех виджетов надо добавить еще один. Узнать регистрацию можно по следующему — register_sidebar

 

1
2
3
4
5
6
7
8
9
register_sidebar( array(
                'name'          => __( 'Виджет шапки', 'expound' ),
		'id'            => 'sidebar-15',
                  'description' => __( 'Область шапки', 'expound' ),
		'before_widget' => '<div class="sidebar-15">',
		'after_widget'  => '</div>',
		'before_title'  => '<h1 class="widget-title">',
		'after_title'   => '</h1>',
           ) );

Здесь обратите внимание на sidebar-15  — у меня в теме 14 виджетов  — пальцем посчитал. И, следовательно, последнему надо дать id 15. Но и до этого я не сразу дошел —  первый раз поставил 2, и у меня мой виджет занял место уже существующего (он просто исчез с панели), хотя по порядку он был вторым и сопоставить факты не составило труда. После этого виджет занял свое последнее место в списке виджетов на панели. И название у него «Виджет шапки»  — не перепутаешь с другими.

Далее, в шапке сайта надо указать место расположения виджета через css — у меня это blok1 и имеет следующие настройки

1
div.blok1 {position: relative; cursor:pointer; display: inline-block;  left: -570px; top:126px; }

Размер изображения (код выше) указан исключительно по картинке, которая стоит в виджете — ведь я не собираюсь менять её ежедневно, а если и понадобится, то всегда знаю где его изменить. Да и для sidebar-15 я указал тот же размер

1
2
3
4
5
6
7
8
9
.sidebar-15{
top: 0px;
left: 0px;
display: inline-block;
position: relative;
z-index: 1;
width:205px;
height: 157px;
}

Ну а дальше все просто — прописываю в блок виджет шапки

1
2
3
4
5
<div class="blok1">
< ?php if ( is_active_sidebar( 'sidebar-15' ) ) : ?>
<div id="primary">
<ul>< ?php dynamic_sidebar( 'sidebar-15' ); ?></ul></div>
< ?php endif; ?></div>

и уже в виджет, на панели виджетов, ставлю текстовый блок в который прописываю код Easy FancyBox с формой связи из Contact Form 7

 

2 comments on “Устанавливаем всплывающую форму связи в шапку через виджет”

Leave A Reply

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