Вы видели значок поиска переключения на многих популярных сайтах? Взгляните на наш дочерний проект List25, чтобы увидеть пример. Идея состоит в том, чтобы отобразить простой значок поиска, и когда пользователь нажимает на него, формы поиска выдвигаются, что также называется эффектом переключения. Это чистый эффект, который также экономит пространство и позволяет пользователям сосредоточиться на контенте. Не говоря уже о том, что это отлично подходит для тем, которые отвечают на мобильные устройства. В этой статье мы покажем вам, как добавить эффект переключения поиска в темы WordPress.
Примечание: Это руководство предназначено для пользователей среднего уровня, обладающих практическими знаниями тегов шаблонов WordPress, HTML и CSS. Пользователям начального уровня рекомендуется сначала потренироваться на локальном сервере.
Показать форму поиска WordPress
WordPress добавляет стандартные классы CSS в HTML, сгенерированный несколькими тегами шаблона в теме. Используйте шаблон тега темы WordPress для отображения формы поиска. Вы можете создать две разные формы поиска, одну для тем HTML4 и одну для тем, совместимых с HTML5. Если в вашей теме есть строка add_theme_support (‘html5’, array (‘search form’)) в файле functions.php, этот тег шаблона сгенерирует форму поиска HTML5. В противном случае он сгенерирует форму поиска HTML4.
Другой способ выяснить, какую форму генерирует ваша тема, – изучить исходный код формы поиска.
Это тег шаблона формы get_search_form (), который будет отображаться, когда ваша тема не совместима с HTML5:
И так будет сгенерировано для темы с поддержкой HTML5.
Для целей данного руководства мы будем использовать форму поиска HTML5. Если ваша тема генерирует форму поиска HTML4, добавьте эту строку кода в файл functions.php вашей темы:
add_theme_support (‘html5’, массив (‘форма поиска’));
Убедившись, что ваша форма поиска генерирует форму HTML5, следующим шагом будет размещение формы поиска там, где вы хотите отобразить ее с эффектом переключения.
Добавить эффект переключения в форму поиска WordPress
Первое, что вам нужно, это значок поиска. Тема Twenty Thirteen по умолчанию в WordPress поставляется с симпатичной маленькой иконкой, и мы будем использовать ее в нашем уроке. Тем не менее, не стесняйтесь создавать свои в Photoshop или загружать из Интернета. Просто убедитесь, что файл называется search-icon.png.
Теперь вам нужно загрузить этот значок поиска в папку изображений вашей темы. Подключитесь к своему веб-сайту с помощью FTP-клиента, такого как Filezilla, и откройте каталог тем.
Теперь это последний и самый важный шаг. Вам нужно добавить этот CSS в таблицу стилей вашей темы:
.site-header .search-form {
положение: абсолютное;
справа: 200 пикселей;
вверх: 200 пикселей;
}
.site-header .search-field {
цвет фона: прозрачный;
фоновое изображение: url (images / search-icon.png);
нижнее положение: 5 пикселей по центру;
повторение фона: без повтора;
размер фона: 24 px 24 px;
край: нет;
курсор: указатель;
высота: 37 пикселей;
поле: 3px 0;
отступ: 0 0 0 34px;
относительное положение;
-веб-переход: ширина 400 мс, глубина 400 мс;
переход: ширина установки 400 мс, нижняя установка 400 мс;
ширина: 0;
}
.site-header .search-field: focus {
цвет фона: #fff;
край: твердый 2px # c3c0ab;
курсор: текст;
схема: 0;
ширина: 230 пикселей;
}
Форма поиска
.search-submit {
Не показывать ни одного;
}
Важно помнить об этом CSS-эффектах перехода CSS3, которые позволяют нам легко создавать эффект переключения. Также обратите внимание, что вам все равно нужно будет настроить положение значка и формы поиска в соответствии с дизайном темы.
Мы надеемся, что эта статья помогла вам добавить эффект поиска переключения к вашей теме WordPress. Что вы думаете о форме поиска чередования? Мы видим все больше и больше сайтов, использующих этот эффект. Оставляйте свои комментарии и вопросы в комментариях ниже или присоединяйтесь к беседе в Google+.
