Как добавить поле поиска в дополнительное меню Divi
Опубликовано: 2017-08-21В сегодняшнем руководстве по Divi мы покажем вам, как добавить поле поиска в дополнительное меню. Второстепенное меню также известно как заголовок вашей страницы и место, где вы пытаетесь уместить некоторую практическую информацию о своем веб-сайте или компании. Добавление в него поля поиска может быть запросом от клиента или потребностью в вашем собственном веб-сайте. В любом случае, мы покажем вам, как вы можете легко интегрировать это поле поиска во вторичную навигацию, когда вы используете тему Divi.
Результат
Прежде чем мы углубимся в различные шаги, которые вам нужно будет предпринять, чтобы добраться туда; может быть интересно заранее показать вам результат. Выполнив шаги, описанные в публикации, и добавив изменения внешнего вида CSS, вы получите следующий результат во вторичном меню по умолчанию:
Зачем добавлять поле поиска в дополнительное меню
Добавление возможности поиска в дополнительное меню - одна из вещей, которые вы, возможно, пытались сделать. Но в отличие от основного меню, заголовок не имеет отдельной страницы в WordPress, которая помогает вам добавлять вещи вручную, без необходимости добавлять строки кода PHP в файл header.php вашего веб-сайта.
Однако добавление возможности поиска во вторичное меню может быть интересной вещью. Давайте рассмотрим несколько причин, по которым вы хотите его добавить.
Предложите своим посетителям возможность поиска с самого начала
На ваш сайт приходят самые разные посетители. Некоторые из них хотят исследовать вещи и не торопиться, в то время как другие хотят сразу найти конкретную информацию. Добавив поле поиска во вторичное меню, вы гарантированно получите возможность сделать это сразу же у посетителей, которые ищут что-то конкретное. Поскольку вторичное меню расположено вверху страницы, спешащие посетители оценят усилия, направленные на улучшение их взаимодействия с пользователем.
Чтобы сохранить основное меню из поля поиска
Конечно, вы также можете добавить поле поиска в главное меню. Но в некоторых случаях вы можете не захотеть этого делать. Например; если вы хотите сосредоточиться на элементах меню или если вы не хотите смешивать элементы меню с полем поиска. Другая причина может заключаться в том, что у вас уже есть несколько пунктов меню, которые заставляют ваше основное меню выглядеть загруженным, и вы не хотите добавлять поле поиска поверх этого.
Подчеркните поле поиска без яркого основного меню
Большинство людей стараются сохранить основное меню трезвым и сделать второстепенное меню популярным. В первую очередь потому, что они хотят показать очевидную разницу между двумя меню. И второстепенное, потому что в дополнительном меню часто есть некоторые вещи, которые они хотят подчеркнуть (например, значки социальных сетей). Когда вы решите интегрировать поле поиска в свое дополнительное меню, оно также будет автоматически выделено, и это будет стимулировать ваших посетителей искать и находить именно то, что они ищут.
Как добавить поле поиска в дополнительное меню Divi
Подпишитесь на наш канал Youtube
Добавить поле поиска в заголовок PHP-файла
Теперь, чтобы фактически добавить поле поиска в заголовок, как показано на изображении ниже, вам в первую очередь нужно что-то добавить в файл header.php вашего веб-сайта. Вам понадобится следующая строка кода:
<? php get_search_form (); ?>
Скопируйте эту строку кода PHP и перейдите на панель управления WordPress. На панели инструментов WordPress перейдите в Внешний вид> Редактор> header.php.
Теперь вы можете разместить строку кода там, где хотите, чтобы отображалась строка поиска. Поскольку мы хотим, чтобы он отображался рядом со значками социальных сетей, мы покажем вам, где именно его разместить в коде. Нам нужно будет разместить его прямо перед закрытием второго меню, контейнера и верхнего заголовка.
Стиль вашего поля поиска
По умолчанию поле поиска выглядит немного устаревшим. Вы, вероятно, захотите изменить некоторые вещи, чтобы он выглядел так, как вы хотите, и чтобы он соответствовал внешнему виду остальной части вашего веб-сайта. Вы, вероятно, захотите изменить три вещи: метку поиска, поле поиска и кнопку ввода.
Если вы не вносите никаких изменений CSS в поле поиска, оно по умолчанию будет выглядеть так во втором меню:
Очевидно, что это не конечный результат, которого мы хотим достичь. К счастью, мы можем внести столько изменений в поле, сколько захотим. В следующей части этого поста мы покажем вам, как изменить все элементы поля поиска, а также поделимся строками кода CSS для достижения следующего результата:
Удалить / изменить метку поиска
Первый элемент, который является частью поля поиска, - это метка поиска. Это появляющийся текст, который объясняет людям, что они могут искать что угодно на веб-сайте, используя это поле. Однако в этом ярлыке нет необходимости. Сегодня все знают, как работает поле поиска. Вы всегда можете убрать метку поиска, добавив display: none; в CSS этого ярлыка. Или вы можете изменить внешний вид метки.
Класс, который вам понадобится для внесения каких-либо изменений в метку поиска, - «.screen-reader-text». Как показано в примере ниже, вы можете отключить его отображение.
.screen-reader-text {
display: none;
}Стиль ввода для поиска
Следующее, что вы, возможно, захотите стилизовать, - это поле поиска. Чтобы внести какие-либо изменения в этот ввод, поместите все строки кода CSS между следующими скобками:
input#s
{
}Стиль ввода вашей кнопки
И, наконец, у нас также есть стиль кнопки. Чтобы внести какие-либо изменения в эту часть поля поиска, поместите строки кода CSS между следующими скобками:
input#searchsubmit
{
}Необходимый CSS-код для нашего примера
После того, как вы внесли модификацию PHP, вы можете мгновенно достичь результата, показанного выше, перейдя в панель управления WordPress> Divi> Параметры темы> Общие> и добавив следующие строки кода CSS в поле Custom:
.screen-reader-text {
display: none;
}
input#s {
border-radius: 5px;
}
input#searchsubmit {
border: 1px solid #000000;
color: #FFFFFF;
background-color: #000000;
border-radius: 5px;
}
form#searchform {
float: right;
}
@media screen and (min-width: 480px) {
#top-header .container {
padding-bottom: 5px;
}
#et-secondary-menu .et-social-icons {
margin-top: 6px;
}}
Результат
Теперь, когда мы прошли все шаги, давайте еще раз посмотрим, как должен выглядеть ваш заголовок:
Последние мысли
В этом руководстве мы показали вам, как добавить поле поиска в дополнительное меню. Кроме того, мы также показали вам, как изменять элементы в этом поле поиска, и представили вам пример строк кода CSS, которые вы можете просто скопировать и вставить для собственного использования. Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже!
Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!
Изображение от D Line / shutterstock.com