Как разместить форму поиска в шапке сайта?

Как разместить форму поиска в шапке сайта?

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

И еще лучше, чтобы саму эту форму поиска не пришлось искать посетителю в сайдбаре или еще где-нибудь, чтобы она всегда была на самом видном месте, то есть в шапке сайта.

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

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

Итак, приступим к уроку...

Как разместить форму поиска в шапке сайта?

Первое, что нам нужно сделать:

Заходим в каталог шаблона Default, открываем там папку components, далее идем в файл logo-links.php, чтобы прописать вывод формы поиска.

В конце первой строчки файла logolinks.php закрываем код php с помощью

?>

Дальше сразу после первой строчки вставляем код формы поиска:

<form class="search_form" onsubmit="location.href='https://maxtest.ru/search/' + encodeURIComponent(this.s.value).replace(/%20/g, '+'); return false;" method="get" name="f_search">
	<input class="search_text" type="text" value="Что искать?" onblur="if (this.value == '') {this.value = 'Что искать?';}" onfocus="if (this.value == 'Что искать?') {this.value = '';}" name="s">
	<button class="search_submit" style="" name="Submit" type="submit">Поиск</button>
</form>

Cразу после этого кода (перед оператором echo) снова открываем код php с помощью

<?php

На скриншоте показано, что должно у вас получиться:

код формы поиска

Теперь, если мы обновим страницу сайта, то в в левом верхнем углу шапки мы уже можем лицезреть форму поиска.

форма поиска в левом верхнем углу

Чтобы форма поиска стояла точно там, где нам нужно и смотрелась ровно и аккуратно, нам нужно применить позиционирование, прописав его в файле стилей для блока шапки и для самой формы. А также задать необходимые отступы.

Для этого идем в папку css, активируем там файл _add-style.css, убрав из его названия нижнее подчеркивание.

Открываем add-style.css и вставляем в него код:

div.header{position: relative;}
form.search_form{position:absolute; bottom: 50px; right:10px;}

Вот и все! Теперь ваш посетитель и вы сами можете пользоваться формой поиска, которая расположена в шапке сайта!

готовая форма поиска

Примечания:

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

Также можно было все это прописать в файле var-style.css, не пользуясь файлом add-style.css, но я показала упрощенный вариант, который будет более наглядным и понятным для новичков.

Надеюсь,что информация о том, как разместить форму поиска в шапке, оказалась понятной и полезной для вас.

Автор статьи: Елена Лощилова.

Комментариев: 11 RSS

Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

Комментариев: 11
  •  Асылан | 9 января 2013 в 15:03:56

    Здраствуйте,Сергей!

    Не подскажите как сделать формочку как у Вас на сайте "Вход/Регистрация"? Какой для этого нужен плагин. У меня версия Maxsite 0.54.

    Или можно ли где-то прописать ссылку на регистрацию в файлах плагина login_form?

  •  Серёга | 9 января 2013 в 15:05:57

    Привет. Подскажу smile

    Обновите систему до последней версии, там все это есть.

    В 0.54 даже нет регистрации как таковой.

  •  Асылан | 9 января 2013 в 17:38:31

    Обновился, прописал в настройках плагина login_form, в поле "Текст после формы" ссылку Зарегистрироваться страница регистрации отображается. Спасибо!

  •  Andy Grand | 10 января 2013 в 00:47:34

    Сейчас так красиво и технично стало. Каждое обновление этого сайта - как новый виток развития. Рад, что записался в друзья к Серёге Кольту.

    Особенно фон - как миллиметровая бумага. Настраивает на рабочий лад. Хорошее решение!

  •  Серёга | 10 января 2013 в 01:22:13

    Это еще не все. Вскоре выложу полное описание новых возможностей.

    Пока что меня только комментарии почему напрягают, наверное надо сделать попроще их. Без черного фона.

    И я рад нашему знакомству. Кстати - ты мне про Кипр фотки присылал - зачем?

  •  Асылан | 10 января 2013 в 14:39:41

    Что касается урока то все получилось, спасибо автору.

  •  Елена | 10 января 2013 в 17:22:31

    Всегда пожалуйста! smile

  •  Andy Grand | 14 января 2013 в 21:08:14

    ну, хоть глаза должны радоваться....

    а рамки в комментах нормальные, разве на синий цвет поменять, как в шапке полоса.

    Да, надумаешь отдохнуть на Кипре - дам всестороннюю инфу и координаты различные.

  •  Andy Grand | 14 января 2013 в 21:09:05

    A Елена молодец - такие коды раскрутила. Браво.

  •  Серёга | 14 января 2013 в 23:41:10

    Буду иметь ввиду smile

  •  Елена | 15 января 2013 в 08:55:19

    Спасибо, все похвалы - моему учителю ;)