Размещение формы поиска на сайте
Обращаем Ваше внимание:
Служба технической поддержки не предоставляет консультаций по редактированию шаблонов.
При необходимости Вы можете разместить на своем сайте (например, в "шапке", в "подвале" или в каком-либо из меню сайта: верхнем или боковом) форму поиска по сайту.
Для того чтобы самостоятельно разместить форму поиска на сайте, Вам необходимо получить расширенные права доступа к системе управления. Получить их Вы можете самостоятельно, следуя инструкции по ссылке.
После того как расширенные права доступа получены, можно приступать к работе.
Рассмотрим весь процесс размещения формы на примере верхнего меню.
Шаг 1
Прежде всего определитесь, в каком месте сайта Вы бы хотели разместить форму поиска. В нашем примере - это верхнее меню.
Шаг 2
Затем найдите нужное Вам место в коде страницы. Для этого, находясь на странице, нажмите F12 (в большинстве браузеров) в открывшейся рабочей области нажмите на иконку с изображением лупы или иным способом перейдите к выделению нужного элемента.
Выделите на странице то место, где Вы хотите разместить форму поиска. Обратите внимание - это место будет отмечено и в коде рабочей области ниже (в нашем случае это строка "<ul class="nav-top">).
Шаг 3
Перейдите к разделу "Настройки" - "Шаблоны и файлы".
Шаг 4
Выберите и откройте для редактирования нужный Вам шаблон. В нашем случае - это "_Главная. Верх".
Шаг 5
Найдите в открывшемся шаблоне то место, которые Вы отмечали в шаге 2 (у нас это строка <ul class="nav-top">). И над этой строкой вставьте следующий код:
<form id="form" class="search" name="poisk" method="get" action="/search">
<input type="search" value="Поиск по сайту" onfocus="this.value=this.value=='Поиск по сайту'?'':this.value;" onblur="this.value=this.value==''?'Поиск по сайту':this.value;" name="search">
<input type="submit" value="">
</form>
Шаг 6
Сохраните изменения в шаблоне.
Шаг 7
Можете перейти на сайт и посмотреть, что у Вас получилось. Должна отобразиться форма поиска.
Теперь необходимо выровнять форму и загрузить иконку для кнопки.
Шаг 8
Вернитесь в раздел "Шаблоны и файлы" системы управления и перейдите к "Файлам" дизайна.
Шаг 9
Далее Вам будет необходимо найти нужный файл стиля, это может быть: styles.less, styles.less.css или же styles.css. Найти нужный файл Вы можете в папке "images" или же в отдельной папке "css".
- Выберите styles.less и откройте для редактирования, если дата его изменения позднее, чем дата styles.less.css.
- Или же откройте для редактирования styles.less.css - если именно он был изменен позднее.
- Если же ни того, ни другого файла в папках нет - откройте для редактирования файл styles.css.
Шаг 10
В открывшемся файле вставьте стили для формы.
.search {
height:26px;
width:212px;
background:#ffffff;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:4px 17px 0;
float:right;
}
.search input[type="search"]::-webkit-search-cancel-button { display:none; }
.search input[type="search"] {
float:left;
height:26px;
width:170px;
margin:0;
padding:0 0 0 10px;
border:none;
font:normal 12px Arial;
line-height:26px;
color:#afaeae;
background:none;
outline:none;
-webkit-appearance:none;
-moz-appearance:none;
}
.search input[type="submit"] {
float:right;
height:26px;
width:22px;
margin:0 8px 0 0;
padding:0;
border:none;
background:url(../search-but.png) center center no-repeat;
cursor:pointer;
}
Обратите внимание!
- Вы можете изменять значения в стилях, если хотите отредактировать длину и отступы формы.
Шаг 11
И сохраните изменения в файле.
Шаг 12
Теперь снова откройте раздел "Шаблоны и файлы" системы управления и перейдите к "Файлам" дизайна, а затем в папку "Images".
Нажмите на кнопку "Обзор" и выберите файл с иконкой для кнопки поиска (его мы предлагаем Вам скачать по следующей ссылке - при необходимости Вы можете использовать и свое изображение).
И нажмите на кнопку загрузки.
Шаг 13
Перейдите на сайт. Форма поиска должна иметь примерно следующий вид.
Обратите внимание!
- Если иконка с изображением лупы не отображается - откройте файл стиля (Шаг 10) и в строке "background:url(../search-but.png) center center no-repeat;" укажите в скобках точный адрес до загруженного изображения с иконкой (Шаг 12). Строка должна принять примерно следующий вид "background:url(http://site/d/123456/t/search-but.png) center center no-repeat;" (курсивом выделен пример URL - в Вашем случае вместо него должен быть указан url загруженной Вами иконки).
- Для корректной работы поиска в Вашей системе управления должна быть создана страница вида "Поиск" с адресом "/search".
Обратите внимание!
- Данная инструкция является примером реализации описанного функционала. Показанные в инструкции результаты могут отличаться от реальных по причине специфики шаблонов конкретного сайта или иных технических нюансов.