Виводимо форму пошуку WordPress
WordPress додає дефолтні CSS класи до HTML, згенеровані різними тегами шаблонів всередині теми. Теми WordPress використовують тег шаблону для виведення форми пошуку. Ця функція може виводити дві різних пошукових форми: одна для тих на HTML4, а друга - для тих з підтримкою HTML5. Якщо у вашій темі, в файлі functions.php є рядок add_theme_support ( 'html5', array ( 'search-form')). тоді цей тег шаблону виведе форму пошуку на HTML5. У будь-якому іншому випадку, відобразиться форма на HTML4.
Інший спосіб з'ясувати, яку форму генерує ваша тема, це подивитися в початкових код пошукової форми.
Наступний код відобразиться, якщо тег шаблону get_search_form () виводить її у форматі HTML4:
А цей код - буде результатом для теми з підтримкою HTML5.
У цьому уроці ми будемо використовувати форму пошуку на HTML5. Якщо ваша тема генерує форму на HTML4, тоді просто додайте наступний рядок коду в ваш файл functions.php теми:
Після цього переконайтеся, що тепер код віддається як на прикладі 2 вище. Наступним кроком буде розміщення пошукової форми в тому місці, де ваша тема найбільше її жадає.
Додаємо виїжджає ефект до форми пошуку WordPress
Перш за все нам потрібна картинка - іконка пошуку. Стандартна тема WordPress Twenty Thirteen містить в собі приємну невелику іконку, і її то ми і візьмемо для нашої статті. Однак не соромтеся себе в створенні свого власного, наприклад, в Photoshop або ж скачайте її з мережі. Тільки переконайтеся, що ім'я файлу у неї search-icon.png.
Тепер вам потрібно завантажити цю іконку в папку з зображеннями у вашій темі. Підключіться до свого сайту через FTP клієнт типу Filezilla або Total Commander і відкрийте директорію з вашою темою.
Тепер - останній і найважливіший крок. Необхідно додати наступні стилі CSS в файл таблиці стилів вашої теми:
Про це коді важливо знати те, що в ньому містяться CSS3 ефекти переходу, які і дозволяють нам створити виїжджає ефект для форми. Також варто зауважити, що вам все одно доведеться відкоригувати положення іконки пошуку і форми відповідно до розмітки вашої теми.