В останній трансляції ми зачепили цю фотографію із iStockPhoto засніженої каюти та лісу. Ми опустили його у фоновому режимі, за основну область вмісту та бічну панель нашого документа Photoshop, і він чудово вписався туди, в якомусь стилі заголовків інших областей сайту. Між екранізаціями я також написав копію для сторінки. Я хотів би продемонструвати це, але написання копії - це одна з речей, яка просто займає багато часу і навіть більш вибаглива, ніж це налаштування дизайну. Ми все ж трохи про це говоримо.
У Photoshop я "сховав" текст "The Lodge" за деревами, трохи збільшивши маскування зображень. Я не робив надто детальної роботи, але вам не потрібно робити це, коли вас збільшують, і зображення також буде зменшено в Інтернеті.
Ми робимо унікальний шаблон сторінки саме для цієї сторінки (page-lodge.php). Використовуючи конвенцію коментарів PHP, /* Template Name: The Lodge */цей шаблон відображається на нашій спадній сторінці Шаблон сторінки при створенні нової сторінки в WordPress. Це дає нам весь необхідний контроль. Ми можемо редагувати HTML у цьому шаблоні, і якщо нам потрібен унікальний CSS для цієї сторінки, ми можемо використовувати умовну логіку та зв’язати його у файлі header.php. Ретроспективно, має сенс використовувати файл functions.php для зв’язування унікального CSS, щоб зберегти «view» (header.php) чистішим, але це щось на наступний раз.
Фонову графіку для цього заголовка називали б «Графікою героя» - тобто великою (буквально та розміром) графікою, яка важлива для зовнішнього вигляду / відчуття / змісту сторінки. Оскільки ми намагаємося нести відповідальність за продуктивність (ми хочемо, щоб сайт завантажувався швидко), ми справді не повинні подавати цю гігантську графіку на крихітні екрани. Це набагато простіше в CSS, ніж у HTML. Ми використовуємо наші «зворотні» медіа-запити ( min-widthзамість max-width), щоб сказати «коли екран такий широкий або ширший, використовуйте цю графіку ... коли вона ще ширша, використовуйте цю графіку» тощо. Таким чином за замовчуванням використовується лише найменше зображення, але воно замінюється, коли ширший браузер запитує сторінку. Трохи мобільного мислення там.
Врешті-решт, ми маємо гарне полотно (якщо хочете), над яким можна попрацювати для всіх сторінок The Lodge.