Тепер у нас є дизайн Photoshop, з якого можна працювати на домашній сторінці області фрагментів. Це набагато більше можливостей для перегляду, ніж було раніше, але зберігає райдужний дух, який був раніше. Тепер ми можемо перейти до його власного побудови в наших шаблонах WordPress. Написавши всі HTML і PHP і CSS, і ВИ ДОЗАЄТЕ ДРІЛЬ!
Крок перший переходить до нашого користувацького заголовка, який ми готові було виконати у нашому статичному дизайні. Це означає змінити трохи HTML, щоб мати правильні елементи обгортки. Це також означає переконатися в тому, що умовна логіка в заголовку є належною для завантаження CSS, специфічного для цієї області. Це завжди змушує мене думати про правило 1, 2 або 3, яке я маю для файлів CSS та файлів JavaScript на будь-якому веб-сайті. CSS-Tricks є прекрасним прикладом веб-сайту “2”, де ми маємо глобальні стилі та CSS для кожного спеціального розділу сайту, де він має досить багато унікальних стилів. Цей макет фрагментів, безумовно, унікальний.
Щоб отримати всі результати на цій сторінці, які нам потрібні, ми знову використовуємо купу викликів wp_list_pages (). Ми говоримо про те, як це може бути проблематично, оскільки це такий інтенсивний дзвінок, і ми мали з цим проблеми в минулому, коли створювали район Альманаху. Однак, оскільки ми збільшили використання пам’яті та використовуємо кешування, це не є великою проблемою.
Ми закінчуємо трансляцію екрану всім необхідним для виведення на сторінку та дуже базовою сіткою. Тепер ми можемо перейти до того, щоб зробити це схожим на наш макет і, зрештою, додати взаємодії.