SdelaemBlog

Создание Сайтов и их настройка

Как добавить форму поиска на сайт wordpress?

Главная Статьи WordPress Как добавить форму поиска на сайт wordpress?
#WordPress

11 октября 2012

Приветствую, всех посетителей блога — SdelaemBlog.ru.  Ковырялся на днях в стандартной теме вордпресс и заметил один маленький, но все же недостаток. Он заключается в том, что форму поиска в шаблоне можно вывести только с помощью виджета в сайдбар. Но если я хочу ее установить, например, в шапку сайта? Ведь с помощью виджетов этого не сделаешь. Поэтому я решил рассказать, как добавить форму поиска по сайту wordpress?

Как добавить форму поиска на сайт wordpress?

Как подобрать нужное место в коде, с помощью браузера?

Итак, чтобы добавить форму в нужное место, достаточно подобрать желаемое место и вставить туда код формы. Чтобы подобрать место в самом коде темы, достаточно воспользоваться интернет-браузером от Google или другими. Допустим я пожелал увидеть форму в шапке ресурса, или как она еще зовется — в хэдере (header). Но как найти нужное место в самом коде? Именно для того, чтобы подобрать расположение, как раз пригодится веб-браузер.

Нужно открыть сайт в браузере и навести курсор на ориентировочное место, потом кликнуть правой кнопкой мыши и выбрать «просмотр кода элемента» (если вы используете Google Chrome). В остальных браузерах эта фраза звучит по другому, но смысл ее понятен.

Как посмотреть код шаблона с помощью браузера?

После нажатие, внизу страницы, вы увидите, что представляет из себя код шаблона (примерно так).

Как подобрать нужное место в коде, с помощью браузера?

Теперь, если навести курсор на любой из дивов (div) — на странице будет подсвечена область в окне браузера, которую использует данный конкретный div. Также, если кликнуть на стрелочку рядом с дивом — откроются другие элементы блока, которые заключены в этот div-блок и т.д.

Как я уже говорил, я хочу, чтобы поиск по сайту wordpress находился в шапке, то есть в div-блоке header. Теперь я знаю какой нужен div для вставки кода — остается только расположить код в нужном месте.

Как добавить форму поиска wordpress?

Перед тем, как редактировать файлы темы, не забудьте сделать резервную копию сайта.

Для вставки, нужно открыть код самой темы wordpress и найти header. Находится он, как правило в файле header.php. Открыть его можно, либо в самой админке wordpress, либо с помощью редактора, например   Notepad++, вполне подойдет, для этого. Теперь нужно нажать комбинацию клавиш Ctrl+F и в поиск ввести название нужного блока, в моем случае — это header.

Как добавить форму поиска wordpress?

Нужный тег найден. Теперь нужно добавить код, после открывающего тега (<div id=»header»>) и перед закрывающим (/div). Чтобы это сделать, нужно вставить этот код внутрь блока div.

<form method="get" name="searchform" id="searchform" action="<?php bloginfo('siteurl')?>">
<input type="text" name="s" id="s" value="<?php echo wp_specialchars($s, 1); ?>"/>
<input id="btnSearch" type="submit" name="submit" value="<?php _e('Хочу найти'); ?>" />
</form>

После этого сохранить и проверить результат. Как видите поиск по сайту расположена там, где я и хотел. Если расположение и внешний вид вас не устроить, его можно поправить, с помощью файла стилей CSS (style.css).

Как добавить форму поиска wordpress?

Вот и все, что я хотел сегодня рассказать. Теперь форма поиска wordpress всегда будет расположена там, где нужно.

Удачи и до новых встреч, на страницах моего блога.

Оставьте свой коммент
ДОСТАВКА СТАТЕЙ ПОЧТОЙ, на дом

Ознакомьтесь с условиями хранения ваших данных

Комментарии

  1. Михаил Веб

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

    1 год назад14.04.2016 Ответить
  2. Анна

    Добрый день!

    Не получается вставить код на страницу сайта, либо не видно вообще поиска туров, либо наполовину. Напишите пошагово, пожалуйста. Мне нужно чтобы после формы онлайн заявки был поиск туров. Как мне правильно прописать в редакторе?

    
    Ставлю после онлайн-заявки:
     
     window.otJq = jQuery.noConflict(true);otJq(function(){OnlineTours.renderShowcase('ot-showcase','770PPg','+7 (4212) 24-92-64','Хабаровск')});Идет загрузка туров с сайта http://www.onlinetours.ru/.
    

    и не получается

    1 год назад11.04.2016 Ответить
  3. Роман

    А кто поделится скриптом, на добавление на ресурс предприятий и прочих организаций ?

    2 года назад13.08.2015 Ответить

Чтобы оставить комментарий, заполните, пожалуйста форму ниже:

Смайлы

Нажимая на кнопку "Комментировать" Вы согласшаетесь с условиями политики конфиденциальности

Обязательно для Заполнения!

Обязательно для Заполнения!

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.

Отправить жалобу разработчику сайта

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

[contact-form-7 404 "Not Found"]

Спасибо большое за поддержку проекта! :)

Для поддержки проекта, выберите убодный способ для оплаты: