Лучшая форма поиска для блога на CSS3

В этой статье рассматривается пример создания формы поиска для блога на WordPress, с использованием HTML5 и CSS3.

Форма будет одинаково отображаться во всех браузерах, и иметь валидный HTML5 и CSS3 код.

Созданная форма будет обладать такими качествами, как:

  • закругленные уголки,
  • изображение внутри input,
  • размер input изменяется при щелчке на нем,
  • кнопка для очистки формы.

Шаг 1. Настройки functions.php

Для начала, в папке с вашей темой найдите файл functions.php. Убедитесь, что функции get_search_form там нет. Это можно сделать через поиск. Теперь добавьте следующее:

Мы создали HTML5-код формы поиска.

Обратите внимание на 4-5 строки: там используется новый HTML5 атрибут placeholder, который добавляет замещающий текст для строки поиска input.

Также, в 4 строке для input задан тип type=”search”. Это добавляет кнопку-крестик, при помощи которой можно быстро очистить форму поиска.

Теперь давайте создадим стиль CSS3 для формы.

Шаг 2. Добавляем стили формы

Откройте файл style.css. Если в нем уже прописаны какие-то свойства для формы поиска, то их надо удалить.

Теперь надо добавить следующий код:

Сейчас вы создали стиль для самой формы. Теперь надо добавить стили для полей.

Шаг 3. Добавляем стили полей

Сначала пропишем основные стили input:

Теперь добавим изображение лупы внутрь формы:

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

Сейчас сделаем уголки закругленными:

В итоге, стили для поля input должны выглядеть так:

Шаг 4. Настройка активного поля input

Сейчас, если вы откроете вашу форму в браузере, то увидите, что при нажатии на нее, она будет подсвечиваться по контуру. Давайте уберем рамку у активного input:

Далее, можно сделать изменяющийся размер input, когда при нажатии на него мышкой, он будет увеличиваться влево:

Помните, когда в самом начале написали float: right? Так вот, кроме выравнивания, это свойство дает эффект увеличения влево.

Шаг 5. Последние штрихи

И последнее, уберем отображение кнопки “Поиск” и надписи “Найти:”.

Шаг 6. Вставим форму поиска в шаблон

Вставить форму поиска в шаблон можно такой функцией:

Также вы можете использовать виджет “Поиск”.

Форма будет выглядеть так:

Если у вас появились какие-то вопросы, пишите, я обязательно отвечу 🙂




32 комментария к “Лучшая форма поиска для блога на CSS3”

  1. Евгений

    Мило. Но зачем задействовать functions.php, если можно просто в sidebar.php вставить html код поиска?

    Ответить
    • oriolo

      Через functions получается универсальнее – можно в виджет вставить, а можно через get_search_form вызывать.

      Еще можно в папке с темой создать файл searchform.php, и в нем код формы прописать, но мне через functions больше нравится.

      Ответить
  2. Синтия

    Хочу спросить – а в php Вы тоже разбираетесь и где Вы этому всему научились – самостоятельно или на курсах каких-то?

    Ответить
    • oriolo

      Синтия, в php я разбираюсь не настолько хорошо, как хотелось бы. Впрочем, знаний хватает, чтобы редактировать и создавать темы для WordPress и писать не очень сложные функции.

      Всему училась самостоятельно; html+css изучила, еще когда училась в школе, просто нашла в интернете учебник (про него я писала немного в статье про дизайн), потом сделала свой первый сайт.

      Вообще, я думаю, что освоить html+css может каждый, в этом нет ничего трудного.

      С php все сложнее – я до сих пор, к своему стыду, не прочитала ни одного учебника, и чтобы сделать что-то более-менее серьезное, обычно использую справочники или гугл)))

      Ответить
  3. Синтия

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

    Ответить
    • oriolo

      Обычно все коды которые надо вставлять – можно вставлять в конец файла functions.php, я еще добавляю комментарии в начале и конце вставляемого кода, чтобы не запутаться потом.

      Еще можно найти место, где заканчивается php-код – это до ?>, и вставить код туда. Я по php читала вот этот учебник: http://pyramidin.narod.ru/php42/index.html. Правда уже вышла версия 5, а учебник написан про 4.2, но изучить азы и научиться разбираться в коде можно.

      Ответить
  4. Landorn

    Как по мне, так лучше использовать стандартный поиск от Яндекса или от Гугла.

    Ответить
    • oriolo

      Да, но никто не мешает сделать форму поиска от Яндекса или Гугла соответствующей общему стилю сайта 😉

      Ответить
  5. Денис

    не подскажите как встроить поиск в строку меню?

    Ответить
    • oriolo

      Денис, зависит от того, какая у Вас тема. Я свою верстала сама, поэтому сделала так: для div в котором содержится меню, задала float: left; для div с поиском float: right; и display: block; для обоих элементов.

      Ответить
  6. Олег

    Как только вставляю код в functions.php, мой wordpress вываливается с ошибкой Parse error: syntax error, unexpected T_VARIABLE in Z:\home\localhost\www\wordpress\wp-content\themes\sibintech2\functions.php on line 40.

    Все перепробовал – не хочет работать. Убираю код – работает. Но при этом описанные выше стили работают только наполовину. То есть, надпись “Поиск”, кнопка “Искать”, подсветка поля исчезли, но новые размеры поля, скругление и картинка лупы не появились… ((( Что я делаю не так?

    Ответить
    • Denys

      Попробуйте вставить в самый конец файла functions.php По форме- в теме есть файл searchform.php?Если нет то создайте и вставте в него
      ——————————————————————————-
      <form method="get" id="searchform" action="/”>

      ——————————————————————————-
      Должно работать,у меня и без этого файла работало но с ним лучше

      Ответить
  7. Denys


    <form method="get" id="searchform" action="/">


    код не влез весь

    Ответить
  8. Олег

    Код у меня и так в конце стоял. Создал searchform.php, в functions.php снова вставил приведенный код, на всякий случай заменил все кавычки руками. Результат тот же. ((

    Ответить
  9. Denys

    напиши мне на почту denyscomp@yandex.ru я вышлю файл searchform.php

    Ответить
    • Олег

      Спасибо за правильную наводку. Я взял searchform.php из стандартной темы, подправил по изложенным в статье рекомендациям Ирины – и все заработало!

      Ответить
  10. алексий

    то что искал

    Ответить
  11. Александр

    Как ни странно, но я “споткнулся” на самом ерундовом пункте – вывод изображения лупы внутри формы. Перепробовал все варианты относительных-абсолютных ссылок, с одиночными кавычками и без них – нет картинки и всё тут (всё остальное чудесно работает).
    Чтобы не плодить лишних сущностей – подскажите, куда в Вашем примере ведёт ссылка “images/search.png” – где лежит эта папка, мне проще сделать такую же.

    Ответить
    • oriolo

      Здравствуйте! В моем примере файл search.png лежит в папке “/wp-content/themes/название-темы/images”

      Ответить
  12. Iglous

    Мне очень нравится CSS3 вот не знаю почему, но шаблоны на HTML5 и различные формы на CSS3 более симпатизируют, все таки 21 век, самое свежее.
    А форма очень даже красивая, могли бы написать, как совместить форму + форму поиска от поисковиков, как бы создать красоту на максимум и функциональность на высшем уровне =)

    Ответить
  13. Denys

    что нужно дописать в функцию чтоб при фокусе в форму пропадал текст в ней?

    Ответить
  14. Филипп

    В целом тру, но не понял следующего:

    > Мы создали HTML5-код формы поиска.
    > … submit” value=”Поиск” />

    Если уж по полной ехать, то в HTML5 одиночные теги не закрываются, ну да ладно, это придирки.

    > кнопка для очистки формы.

    Вы про стандартную от web-kit? А как-же другие браузеры?
    А если это не критично, то непонятно, зачем мы тогда вообще создаем label и submit, если их потом просто display: none; ?
    я бы еще понял растянуть на всю строку и visibility отключить, хотя это тоже надо знать толк в извращениях. Да и событие submit будет по нажатию Enter’a в любом случае.

    Но лупа крутая такая, да… простая и почти стандартная.
    Такие элементы хорошо воспринимаются глазом, а потому я бы не советовал другим отключать стандартный outline.

    Ответить
    • Ирина

      >в HTML5 одиночные теги не закрываются
      Знаю 🙂 Признаю свою ошибку, посту уже почти год. Исправила.

      >непонятно, зачем мы тогда вообще создаем label и submit, если их потом просто display: none;
      display: none, потому что вордпресс имеет привычку подставлять недостающие элементы (в стандартном виде).
      А в примере вверху я их просто для наглядности оставила.

      Ответить
      • Филипп

        после прочтения статьи еще раз, я подумал, что так у нас нет функциональности обычной формы из 90-х :))

        Потому я сделал так:

        – к форме position: relative
        – Добавляем input [type=image] + position: absolute
        – У input [type=search] как в статье padding’и
        – Выравниваем input [type=image] поверх поиска input [type=search], если надо, то через z-index, но вроде и так наедет, т.к. absolute;

        Получаем лупу, на которую можно кликать для отправки данных формы.

        – Точно также делаем с крестиком для очистки, type=reset или какой-там, я не помню
        – а у хрома скрываем стандартный, чтобы не накладывался, через псевдо-класс в css.
        – Ну и добавляем атрибуты speech и x-webkit-speech для микрофона,
        – тогда справа сначала должен быть микрофон, потом крестик для очистки, чтобы все сошлось и там, где микрофон не будет отображаться.
        – придаем микрофону стиль под тему сайта через псевдо-класс css
        – PROFIT.

        Может имеет смысл вам написать и о таком способе 🙂

        Ответить
  15. Василий

    Куда надо вставить эту функцию чтобы поиск отображался на главной странице

    Ответить
  16. Виктор

    У меня почему-то не работает vkusnoteewo.ru поиск на главной

    Ответить
    • Ирина

      Я у Вас на главной вообще поиск не вижу, поэтому не могу подсказать.

      Ответить
      • Denis

        Был поиск в средней колонке, даже работал в принципе статьи по запросу находил без проблем

        Ответить
  17. Алекс

    Нужна форма поиска по трем полям

    Фамилия Имя Отчество, три отдельных прямоугольника и одна кнопка поиск )
    Посоветуйте что нибудь. Заранее благодарен!

    Ответить

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