W ostatnim screencastie zrobiliśmy zdjęcie z iStockPhoto zaśnieżonej chaty i lasu. Umieściliśmy go w tle, za głównym obszarem zawartości i paskiem bocznym naszego dokumentu Photoshopa i ładnie pasował tam, w stylu nagłówków innych obszarów witryny. Pomiędzy screencastami napisałem również kopię strony. Chciałbym to zrobić screencast, ale pisanie kopii jest jedną z tych rzeczy, które zajmują dużo czasu i są nawet bardziej skomplikowane niż ulepszanie projektu. Chociaż trochę o tym rozmawiamy.
W Photoshopie „ukryłem” tekst „The Lodge” za drzewami z niewielkim powiększeniem maskowania obrazu. Nie wykonałem bardzo szczegółowej pracy, ale tak naprawdę nie musisz tego robić, gdy jesteś powiększony, a obraz zostanie również zmniejszony w Internecie.
Tworzymy unikalny szablon strony tylko dla tej strony (page-lodge.php). Korzystając z konwencji komentarzy PHP /* Template Name: The Lodge */, szablon ten pojawia się na naszej stronie rozwijanej Szablon strony podczas tworzenia nowej strony w WordPress. To daje nam pełną kontrolę, jakiej potrzebujemy. Możemy edytować kod HTML w tym szablonie, a jeśli potrzebujemy unikalnego CSS dla tej strony, możemy użyć logiki warunkowej i połączyć ją w pliku header.php. Z perspektywy czasu bardziej sensowne jest użycie pliku functions.php do połączenia unikalnego kodu CSS, aby „widok” (header.php) był bardziej przejrzysty, ale to coś na następny raz.
Grafika tła dla tego nagłówka byłaby nazywana „grafiką bohatera” - to znaczy dużą (dosłownie i pod względem rozmiaru) grafiką, która jest ważna dla wyglądu / zachowania / zawartości strony. Ponieważ staramy się odpowiadać za wydajność (chcemy, aby strona ładowała się szybko), naprawdę nie powinniśmy udostępniać tej gigantycznej grafiki na małych ekranach. Jest to o wiele łatwiejsze w CSS niż w HTML. Używamy naszych zapytań o media „reverseo” ( min-widthzamiast max-width), aby powiedzieć „kiedy ekran jest tak szeroki lub szerszy, użyj tej grafiki… jeśli jest jeszcze szerszy, użyj tej grafiki” i tak dalej. W ten sposób domyślnie używany jest tylko najmniejszy obraz, ale jest on zastępowany, gdy szersza przeglądarka żąda strony. Trochę myślenia mobilnego.
Na koniec mamy ładne płótno (jeśli chcesz) do pracy na wszystkich stronach The Lodge.