Недавно один из наших читателей спросил, не могли бы мы написать учебник о том, как добавить полноэкранную поисковую накладку в WordPress. Вы наверняка видели это на популярных сайтах, таких как Wired. Когда пользователь нажимает на значок поиска, поисковая строка открывается и занимает весь экран, что может улучшить работу пользователей на мобильных устройствах. В этой статье мы покажем вам, как добавить полноэкранное наложение поиска в WordPress.
Полноэкранный поиск постепенно становится трендом, потому что он значительно улучшает поисковый опыт для мобильных пользователей. Поскольку экраны мобильных устройств очень малы, предлагая полноэкранный поиск, вы облегчаете пользователям ввод текста и поиск на вашем сайте.
Когда мы впервые получили запрос на этот учебник, мы знали, что он потребует некоторого кода. Наша цель в WPBeginner — сделать все как можно проще.
Когда мы закончили писать учебник, мы поняли, что это слишком сложный процесс, и его лучше завернуть в простой плагин.
Чтобы упростить задачу, мы создали видеоурок о том, как добавить полноэкранную накладку поиска, который вы можете посмотреть ниже.
Подписаться на WPBeginner
Однако если вы просто хотите следовать текстовым инструкциям, то вы можете следовать нашему пошаговому руководству о том, как добавить полноэкранный поиск в WordPress.
Добавление наложения полноэкранного поиска в WordPress
Первое, что вам нужно сделать, это установить и активировать плагин WordPress Full Screen Search Overlay. Для более подробной информации смотрите наше пошаговое руководство о том, как установить плагин WordPress.
Плагин WordPress Full Screen Overlay Search работает «из коробки», и вам не нужно настраивать никаких параметров.
Вы можете просто посетить свой сайт и нажать на поисковую строку, чтобы увидеть плагин в действии.
Обратите внимание, что плагин работает с функцией поиска WordPress по умолчанию. Он также отлично работает с SearchWP, который является премиум-плагином, значительно улучшающим поиск WordPress по умолчанию.
К сожалению, этот плагин не работает с Google Custom Search.
Настройка наложения полноэкранного поиска
Плагин WordPress Full Screen Search Overlay поставляется с собственной таблицей стилей. Для того чтобы изменить внешний вид наложения поиска, вам придется отредактировать CSS файл плагина или использовать !важно в CSS.
Сначала вам нужно будет подключиться к вашему сайту с помощью FTP-клиента. Если вы новичок в использовании FTP, то ознакомьтесь с нашим руководством о том, как загружать файлы в WordPress с помощью FTP.
Как только вы подключитесь, вам нужно найти папку CSS плагина. Вы найдете его по следующему пути:
Вы найдете файл полноэкранного поиска.css внутри папки css. Вам нужно загрузить этот файл на свой компьютер.
Откройте файл, который вы только что скачали, в обычном текстовом редакторе, например, Блокноте. Вы можете внести любые изменения в этот файл. Например, мы хотели изменить фон и цвет шрифта, чтобы они соответствовали нашему демо-сайту.
/** * Сброс * - Предотвращает применение темами и другими плагинами своих собственных стилей к нашему полноэкранному поиску */ #full-screen-search, #full-screen-search button, #full-screen-search button.закрыть, #full-screen-search form, #full-screen-search form div, #full-screen-search form div input, #full-screen-search form div input.поиск < font-family: Arial, sans-serif; background:none; border:0 none; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; float:none; font-size:100%; height:auto; letter-spacing:normal; list-style:none; outline:none; position:static; text-decoration:none; text-indent:0; text-shadow:none; text-transform:none; width:auto; visibility:visible; overflow:visible; margin:0; padding:0; line-height:1; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; box-shadow:none; -webkit-appearance:none; transition: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; >/** * Фон */ #full-screen-search < visibility: hidden; opacity: 0; z-index: 999998; top: 0; left: 0; width: 100%; height: 100%; background: #1bc69e; /** * Add some CSS3 transitions for showing the Full Screen Search */ transition: opacity 0.5s linear; >/** * Отображение полноэкранного поиска при открытии */ #full-screen-search.открыть < /** * Because we're using visibility and opacity for CSS transition support, * we define position: fixed; here so that the Full Screen Search doesn't block * the underlying HTML elements when not open */ position: fixed; visibility: visible; opacity: 1; >/** * Форма поиска */ #full-screen-search form < position: relative; width: 100%; height: 100%; >/** * Кнопка закрытия */ #full-screen-search button.закрыть < position: absolute; z-index: 999999; top: 20px; right: 20px; font-size: 30px; font-weight: 300; color: #999; cursor: pointer; >/** * Форма поиска div */ #full-screen-search form div < position: absolute; width: 50%; height: 100px; top: 50%; left: 50%; margin: -50px 0 0 -25%; >/** * Цвет заполнителя формы поиска */ #full-screen-search form div input::-webkit-input-placeholder < font-family: Arial, sans-serif; color: #ccc; >#full-screen-search form div input:-moz-placeholder < font-family: Arial, sans-serif; color: #ccc; >#full-screen-search form div input::-moz-placeholder < font-family: Arial, sans-serif; color: #ccc; >#full-screen-search form div input:-ms-input-placeholder < font-family: Arial, sans-serif; color: #ccc; >/** * Ввод формы поиска */ #full-screen-search form div input < width: 100%; height: 100px; background: #eee; padding: 20px; font-size: 40px; line-height: 60px; /* We have added our own font color here */ color:#50B0A6; >
В этом коде мы только изменили цвет фона в строке 62 и добавили цвет шрифта в строке 150. Если вы хорошо разбираетесь в CSS, то смело меняйте и другие правила стиля.
Как только вы закончите, вы можете загрузить этот файл обратно в папку CSS плагина с помощью FTP. Теперь вы можете увидеть свои изменения, посетив свой сайт.
Важное замечание:
Если вы используете его в своей собственной теме, то лучше использовать !важные теги, чтобы обновления плагина не отменяли любые изменения.
Для разработчиков и консультантов вы также можете просто переименовать плагин и включить его в комплект вашей темы или услуги.
Мы создали этот плагин только потому, что все другие способы написания этого руководства были бы слишком сложными для начинающих пользователей.
Мы надеемся, что эта статья помогла вам добавить полноэкранное наложение поиска на ваш сайт WordPress. Вы также можете ознакомиться с нашим руководством о том, как добавить эффект переключения поиска в WordPress
Источник: www.wpbeginner.com