Верстка темы WordPress — Стилизация виджета поиска

Автор Denis Lisitsin
Верстка темы WordPress — Стилизация виджета поиска

Приветствую вас следующем видео уроки по создание темы для WordPress и сегодняшнее видео мы с вами будем заниматься виджетом поиска мы с вами добавим заголовок для виджета и также стилизуем поля ввода для поискового запроса HTML версия он выглядит вот данным образом.

Давайте посмотрим как выглядит WordPress сейчас в данный момент смотрим. Что у нас здесь есть небольшое маленькое поле и также есть ещё и кнопка кнопку нам придётся и оставить только одно поле на всю ширину сайдбара, а также нам нужно ещё добавить заголовок заголовок добавить на. Проще простого нам всего лишь нужно зайти в админ панель WordPress и виджетах сайдбаре виджет поиска здесь написать Search A нажимаем сохранить и.

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

ТО использовать фильтр для перенести или изменить разметку поля поиска фильтр наподобие того которую мы использовали прошлом уроке чтобы стерилизовать виджет категории и так можно создать здесь в теме файл который называется силач форма. PHP и там написать разметку для виджета поиска сейчас перейдем снова в папку виджеты VPN Cloud и посмотрим. Из чего состоит виджет поиска. Давайте найдём его здесь вот он виджет поиска переходим смотрим здесь идёт класс. Так во всех виджетах и так же есть функция которая формирует разметку здесь у нас идёт вызов функции Get Search form по сути сам виджет здесь не формирует разметку поля этого формирует функция государства которая просто здесь вызывается и перед формируется разметка которую мы задаем в параметрах когда определяем виджеты, а также здесь форма ввода данных которое отображается в админке функция. Объект который обновляет данные. Давайте теперь перейдем функцию GPS завершён документ от Apple, что в ней содержатся идём в поиске переходим на всё тот же сайт. ВПК мы не смотрим форм — это функция которая подключает форму поиска из файла тема Search form PHP. Если такого файла в шаблоне нет то будет использован код для формы поиска по умолчанию здесь идёт примеры кода формы поиска ниже идет описание. Как вызывать функцию и мы пройдемся вот до этого пункта смотрите мы можем разметку форму поиска изменить с помощью фильтра. Как называется GTA4 здесь мы принимаем форму HTML и эту переменную просто-напросто заменяем на нашу и просто её здесь возвращаем аналогия с тем, что мы делали в прошлом уроке с виджетом категории. В этом уроке мы не будем использовать фильтр, а воспользоваться вторым вариантом — это File Search form прямо сейчас создадим этот файл и добавим туда разметку на поиск формы поиска смотрим. Что у нас содержит здесь функция функция есть строчка вот здесь смотрите в подключается файл CSS в PHP его содержимое записывается в переменную Search form есть эта переменная не пуста то есть какая-то разметка то здесь — это разметка вызывается переменная пустота отрабатывает дальше этот апельсин. Где формируется HDMI в зависимости от параметров обычные или html5 я предлагаю скопировать данные HTML код который здесь Wheels. Давайте выделим возьмём Control C и перейдём в. Редактор редакторе здесь мы сейчас сдадим Far создать файл всё Search phone. печки теперь ставим разметку которую мы скопировали и сейчас моё немного под редактируем так как мы скопировали с PHP нам нужно заменить здесь конкатенация строки и PHP кода заменяем на теги PHP с кавычкой. Так теперь еще здесь здесь так и последняя, что осталось так всё теперь я предлагаю взглянуть как будет выглядеть на форма поиска. После добавления нашего файла смотрим. Что убрался здесь placeholder и название кнопки в принципе название кнопки на не интересуют только кнопку мы сейчас и уберём отсюда так как у нас её нет в HTML просто-напросто удаляем эту строчку и добавим ещё placeholder сейчас давайте зайдем в HTML нашей странице Solid так Block HTML и здесь найдём поиск наверху видим здесь данные импорт и мы его здесь просто ставим из классы который здесь находится так копируем класс и также placeholder мыс копируем и вставляем его здесь в конце так placeholder mia2 функция перевода чтобы можно было переводить текст так ставим Solid и закрываем PHP также здесь. Давайте поменяем перемену перевода на салют был на свадьбе так поменяли класс добавили. Теперь давайте посмотрим на результат обновляем страницу виден всё отлично только не отработал у нас происходит потому, что здесь нужно наверное поставить эхо. Давайте онлайн можно было их поставить всё отлично. Первое, что я вижу это. Нет отступа сверху и внутри отступы у того чтобы не такие как на HTML. Давайте взглянем. Что у нас там по верхнему отступом и здесь у нас есть BR наводи тоже там и поставим не будем через CSS добавлять здесь после волейбола так обновляем отступ добавился. Теперь нужно добавить отступ внутри Input. А давайте посмотрим какие тут классы так import eu import API 16 и 12, а здесь у нас здесь тоже инпуты. У нас дефолтные стили для Input. А есть p13 forestall CSS. Давайте перейдём в столбце ссы добавим стилистов CSS по поиску найдём вот данные стиле и там был ли у нас 6 значений 6 и 12 пикселей так обновляем и всё отлично теперь у нас выглядит поля поиска как их разметки. Давайте теперь его ещё проверим на работоспособность в объём какое-нибудь ключевое слово нажимаем и поиск.

0 комментариев
0

Читайте также