Від автора: У цьому уроці я покажу в деталях процес створення красивої форми реєстрації для WordPress, «Register» з використанням Fancybox, jQuery, CSS. Ви побачите, що ця процедура насправді досить проста.
Крок 1. Розмітка форми реєстрації WordPress
По-перше, давайте розмістимо кнопку вгорі сторінки, замінивши в основі набір за умовчанням.
Register
Зверніть увагу, що гіперпосилання href (#register-form) кнопці реєстрації має той же ID, що і форму нижче. Також ми користуємося класом “.show” для виклику FancyBox за допомогою jQuery.
Нам потрібна основа; давайте створимо розмітку. Відкрийте header.php і куди завгодно помістіть наступний фрагмент.
Register your Account
Sign Up with us and Enjoy!
A password will be e-mailed to you.
Зауважте, що я користуюся display:none, щоб спочатку сховати форму.
Крок 2. CSS
CSS досить простий; я всього лише швидко моделюю форму в PhotoShop’.
Форма за винятком дизайну виглядає наступним чином: (зверніть увагу, для перевірки стилів я перемістив display:none у розмітці)
Воля! Ось наша форма. Тепер давайте за допомогою jQuery просувати функціональність.
Крок 3. jQuery
Спочатку потрібно включити jQuery в WordPress. Щоб зробити це, ми повинні помістити наступну порцію коду перед тегом всередині файлу header.php. Пам’ятайте про те, що сам по собі WordPress використовує jQuery, і нам потенційно не потрібно завантажувати двічі!
Скачайте Fancybox і помістіть його в папку з WordPress. Аби ще краще все упорядкувати, я створив папку “Includes”.
Далі, відкрийте файл footer.php і помістіть перед тегом наступне
Від автора: іконки зараз дуже популярні, вони доповнюють контент (в більшості випадків). Але з іншого боку вони можуть доставити чимало клопоту. Якщо ви визначилися з форматом (SVG або шрифти-іконки?) і створили самі іконки, все одно по мірі розробки будуть спливати різні моменти.