Пропустить

Как добавить полноэкранное поисковую систему на WordPress

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

fullscreensearch

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

Реализация процесса создания полноэкранного движка может быть немного сложной, поскольку требует некоторого кода. Вот почему процесс был упрощен с помощью простого плагина.

Добавление полноэкранного поискового движка на WordPress

Первое, что нужно сделать, это установить и активировать плагин WordPress Full Screen Search Overlay, Плагин WordPress Full Screen Overlay Searh работает без конфигурации и не имеет никаких настроек конфигурации. Вам просто нужно зайти на ваш сайт и нажать на поле поиска, чтобы увидеть плагин в действии.

fullscreensearchoverlay

Важно отметить, что этот плагин совместим с поисковыми функциями WordPress по умолчанию. Это также прекрасно работает с SearchWP, который является премиальным плагином, который улучшает поиск по умолчанию в WordPress.

Начните продвигать свой блог

Загрузите десятки логотипов, баннеров, шаблонов веб-сайтов и многих других маркетинговых инструментов для продвижения вашего блога WordPress. [Рекомендуется]

К сожалению, этот плагин не работает Google Custom Search.

Настройка поисковой системы на весь экран

Le плагин WordPress Full Screen Search Overlay предлагается с собственной таблицей стилей. Чтобы изменить внешний вид поисковой системы, вам нужно изменить CSS-файл плагина или использовать! Важно в языке CSS.

Во-первых, вам необходимо подключиться к вашему веб-сайту с помощью FTP-клиента. После того, как вы вошли в систему, вам нужно найти папку CSS плагина. Вы найдете его по следующему пути:

http://votresite.com/wp-content/plugins/full-screen-search-overlay/assets/css/

Вы найдете файл полноэкранный-search.css внутри папки " CSS». Затем загрузите файл на свой компьютер.

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

После открытия файла вы можете внести в него изменения. Например, мы хотели изменить фон и шрифт для нашего демонстрационного сайта.

/**
* Reset
* - Prevents Themes and other Plugins from applying their own styles to our full screen search
*/
#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;
}

/**
* Background
*/
#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;
}

/**
* Display Full Screen Search when Open
*/
#full-screen-search.open {
    /**
    * 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;
}

/**
* Search Form
*/
#full-screen-search form {
    position: relative;
    width: 100%;
    height: 100%;
}

/**
* Close Button
*/
#full-screen-search button.close {
    position: absolute;
    z-index: 999999;
    top: 20px;
    right: 20px;
    font-size: 30px;
    font-weight: 300;
    color: #999;
    cursor: pointer;
}

/**
* Search Form Div
*/
#full-screen-search form div {
    position: absolute;
    width: 50%;
    height: 100px;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -25%;
}

/**
* Search Form Input Placeholder Color
*/
#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;
}

/**
* Search Form Input
*/
#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. Теперь вы можете увидеть изменения, посетив ваш сайт.

fullscreensearchwp

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

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

Вот и все! Мы надеемся, что эта статья поможет вам добавить полноэкранный поисковый движок на ваш сайт WordPress. Пожалуйста, оставляйте свои комментарии и предложения в специальной области.

Эта статья содержит комментарии 0

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

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
2 акции
доля2
чирикать
Регистрация