Poslední zbývající hlavičky přišly! Nyní je můžeme dokončit a nechat si udělat všechny naše vlastní záhlaví. V tomto screencastu budeme pracovat na vlastních záhlavích ukázkové sekce provedených Johnem Neinerem.
Zajímavé je, že John byl jediným ilustrátorem, který poskytl kresbu v Illustratoru. To je pro nás v tomto případě hezké, protože jej můžeme v plné kvalitě rozšířit na libovolnou velikost, kterou potřebujeme. Při zpětném pohledu jsme pravděpodobně měli nechat vektor (jako SVG) a možná použít záložní rastr. Ale v tomto screencastu prozkoumáme různé možnosti ukládání rastru a nakonec skončíme s JPG.webp.
Došlo k určitému zmatku v ukládání, kdy jsem uložený soubor nemohl najít, protože jsem hledal špatné jméno. Skutečná situace DUH v reálném světě.
Poté přejdeme do WordPressu a opakujeme náš postup pro přípravu šablon ke stylu. Zajistíme, aby ukázkové stránky načetly speciální soubor CSS právě k nim. To znamená přidat logiku do našeho souboru header.php ( is_page_template()). Našli jsme správnou šablonu pro ukázkovou oblast (pomocí klasického testu, kde provedeme zřejmou změnu šablony a uvidíme, jak se to odráží na skutečném webu.
Z této šablony odstraníme všechny staré odpadky a přeneseme je do našeho nového stylu. Napíšeme trochu značek potřebných k tomu, aby byla stránka v mřížce a měla oblast záhlaví jen pro tuto novou vlastní záhlaví a tak dále.
Nakonec použijeme naši vlastní grafiku záhlaví jako obrázek na pozadí na obalový prvek s dostatečným polstrováním nahoře (na základě procent), aby se vešel nahoře (velikost, aby se vešel). Dokonce jsme umístili gradient za obraz, který mizí ze sytě zelené do černé, takže to vypadá, jako byste se při procházení dolů dostali hlouběji do oceánu.
Na této stránce je třeba ještě pracovat, ale záhlaví a šablona jsou v dobrém stavu!