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. Надежда

    Написано подробно и понятно! Спасибо за информацию!

    5 лет назад27.10.2012 Ответить
    • Михаил Веб

      Не за что. Рад, что угодил.

      5 лет назад27.10.2012 Ответить
  2. Сергей

    Спасибо ОГРОМНОЕ, Михаил! Помогли нереально! Я уже думал плагин придется какой-то ставить, а оказалось всё очень легко! Спасибо!

    5 лет назад20.11.2012 Ответить
    • Михаил Веб

      Не за что, Сергей.

      5 лет назад21.11.2012 Ответить
  3. Roman

    Во, как раз это я и искал, спасибо!

    5 лет назад30.11.2012 Ответить
    • Михаил Веб

      Рад что нашли. Не за что.

      5 лет назад30.11.2012 Ответить
  4. Крута-ман

    скажите зачем 2 тега в коде?

    4 года назад11.02.2013 Ответить
  5. Михаил Веб

    @ Крута-ман: Спасибо за внимательность — исправлено

    4 года назад11.02.2013 Ответить
  6. Ольга

    Здравствуйте. Вы не знаете как сделать в поиске так, чтобы он искал только название поста. А то у меня вводишь в поле НЕО и он выдает все подряд — «ссылка удалена» а у меня на сайте все нужные запросы поиска стоят в названии поста. Поиск по контенту не нужен

    4 года назад20.02.2013 Ответить
  7. Михаил Веб

    @ Ольга: Можно сделать, чтобы поиск искал по заголовку поста. Вы это имели ввиду? Если да, то напишу небольшой пост об этом.

    4 года назад20.02.2013 Ответить
  8. Михаил Веб

    @ Ольга: Вот здесь ответ на ваш вопрос http://sdelaemblog.ru/poisk-wordpress-po-zagolovku/

    4 года назад21.02.2013 Ответить
  9. Капля Смысла

    Я опять всё напутала. 404 выскакивает, когда нет статьи на блоге, а по поисковику вордпресс пишет, что ничего не найдено по запросу. Для 404 есть специальный плагин, который перенаправляет запрос с внешнего поисковика на другие разделы блога. Даже на каком-то из блогов стоял у меня.

    4 года назад23.02.2013 Ответить
  10. Михаил Веб

    @ Капля Смысла: Честно говоря, не понял Вас.

    4 года назад23.02.2013 Ответить

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

Смайлы

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

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

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

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

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

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

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

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