Nadeszły ostatnie pozostałe nagłówki! Teraz możemy je zakończyć i mieć gotowe wszystkie niestandardowe nagłówki. W tym screencastie będziemy pracować nad niestandardowymi nagłówkami sekcji Demo wykonanymi przez Johna Neinera.
Co ciekawe, John był jedynym ilustratorem, który dostarczył grafikę w programie Illustrator. W tym przypadku jest to dla nas miłe, ponieważ możemy go skalować do dowolnego rozmiaru, którego potrzebujemy, przy pełnej jakości. Patrząc z perspektywy czasu, prawdopodobnie powinniśmy zostawić to wektor (jako SVG) i być może użyć rezerwy rastrowej. Ale w tym screencastie badamy różne opcje zapisywania rastrów i kończymy na JPG.webp.
Nastąpiło pewne zamieszanie, gdy nie mogłem znaleźć zapisanego pliku, ponieważ szukałem niewłaściwej nazwy. Sytuacja DUH w świecie rzeczywistym.
Następnie wskakujemy do WordPress i powtarzamy nasz proces przygotowania szablonów do stylizacji. Dbamy o to, aby strony demonstracyjne ładowały specjalny plik CSS tylko do nich. Oznacza to dodanie logiki do naszego pliku header.php ( is_page_template()). Znajdujemy właściwy szablon dla obszaru demonstracji (za pomocą klasycznego testu, w którym dokonujemy oczywistej zmiany w szablonie i widzimy, jak odzwierciedla się to w prawdziwej witrynie).
Usuwamy wszystkie stare śmieci z tego szablonu i dostosowujemy go do naszego nowego stylu. Piszemy trochę znaczników potrzebnych, aby strona była w siatce i miała obszar nagłówka tylko dla tego nowego niestandardowego nagłówka i tak dalej.
Ostatecznie zastosujemy naszą niestandardową grafikę nagłówka jako obraz tła do elementu opakowania z wystarczającym dopełnieniem na górze (w procentach), aby dopasować grafikę do góry (dopasowana do rozmiaru). Umieściliśmy nawet za obrazem gradient, który przechodzi od głębokiej zieleni do czerni, więc wygląda to tak, jakbyś wchodził głębiej w ocean podczas przewijania w dół.
Więcej pracy do wykonania na tej stronie, ale mamy gotowy nagłówek i szablon w dobrym stanie!