Ну, для чего нужна форма связи в сплывающем окне я повторяться не буду — писал уже об этом в статье Плагин 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> |
сохраняю, кликаю и вижу следующее
А вот не работает! Вместо формы связи появляется шорткод 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 “Устанавливаем всплывающую форму связи в шапку через виджет”