Как добавить полноэкранный поиск в WordPress

Недавно один из наших читателей спросил, можно ли реализовать полноэкранный поиск в WordPress. Вы наверняка такое встречали на некоторых сайтах, например, на Wired. Когда пользователь нажимает на значок поиска, появляется форма поиска, которая перекрывает всю видимую область. В сегодняшней статье мы покажем вам как добавить полноэкранный поиск в WordPress.

Добавляем полноэкранный поиск в WordPress

Первым делом вам необходимо установить и активировать плагин WordPress Full Screen Search Overlay.

Плагин WordPress Full Screen Overlay Search работает из коробки, и нет необходимости настраивать его дополнительно.

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

Обратите внимание, что плагин работает с дефолтной функцией поиска WordPress, и, к сожалению, не умеет работать с Google Custom Search (Пользовательский поиск Google).

Изменяем внешний вид полноэкранного поиска

В плагине Full Screen Search Overlay есть собственная таблица стилей. Для того, чтобы изменить внешний вид, вам потребуется изменять таблицу стилей плагина или же использовать !important в CSS.

Для начала вам потребуется подключиться к своему сайту с помощью FTP клиента.

После подключения находим папку CSS плагина. Обнаружить ее можно по такому пути:

yourwebsite.com/wp-content/plugins/full-screen-search-overlay/assets/css/

Находим файл full-screen-search.css внутри папки css и скачиваем его на свой компьютер.

Открываем скачанный файл в текстовом редакторе типа Sublime или Notepad++. Теперь вносим необходимые правки. Для примера мы изменили цвет фона и шрифта:

/**
* Reset
*/
#full-screen-search,
#full-screen-search button,
#full-screen-search button.close,
#full-screen-search form,
#full-screen-search form div,
#full-screen-search form div input,
#full-screen-search form div input.search {
    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;

    /**
    * Добавляем небольшую CSS3 анимацию для отображения Full Screen Search
    */
    transition: opacity 0.5s linear;
}

/**
* Выводим Full Screen Search при открытии
*/
#full-screen-search.open {
    position: fixed;
    visibility: visible;
    opacity: 1;
}

/**
* Форма поиска
*/
#full-screen-search form {
    position: relative;
    width: 100%;
    height: 100%;
}

/**
* Кнопка Закрыть
*/
#full-screen-search button.close {
    position: absolute;
    z-index: 999999;
    top: 20px;
    right: 20px;
    font-size: 30px;
    font-weight: 300;
    color: #999;
    cursor: pointer;
}

/**
* Блок формы поиска
*/
#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;
    /* Здесь мы добавили свой собственный цвет шрифта */
    color:#50B0A6;
}

В этом коде мы только лишь изменили цвет фона и добавили цвет шрифта. Если вы дружите с CSS, то вам не составит труда адаптировать плагин под свой сайт.

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

Важное примечание:

Если вы используете это в своей собственной теме, тогда лучше использовать теги !important, чтобы при обновлении плагина изменения не были потеряны.

Мы надеемся, что эта статья помогла вам добавить полноэкранный поиск на свой WordPress сайт.

По всем вопросам и отзывам просьба писать в комментарии ниже.

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