Son ekran video çekiminde, iStockPhoto'dan karlı kulübenin ve ormanın o fotoğrafını yakaladık. Photoshop belgemizin ana içerik alanının ve kenar çubuğunun arkasına, arka plana bıraktık ve sitenin diğer alanlarının başlıklarının stiline benzer şekilde oraya güzelce sığdı. Ekran kayıtları arasında, sayfa için de bir kopya yazdım. Bunu ekran video kaydı yapmak isterdim, ancak metin yazmak, uzun zaman alan ve tasarım ayarlamasından daha titiz olan şeylerden biridir. Bununla ilgili biraz konuşuyoruz.
Photoshop'ta, görüntü maskelemesini biraz yakınlaştırarak "The Lodge" metnini ağaçların arkasına "gizledim". Süper ayrıntılı bir iş yapmadım, ancak yakınlaştırdığınızda gerçekten yapmak zorunda değilsiniz ve görüntü web'de de küçültülecek.
Sadece bu sayfa için benzersiz bir sayfa şablonu hazırlıyoruz (page-lodge.php). PHP yorum kuralını /* Template Name: The Lodge */kullandığınızda, bu şablon WordPress'te yeni bir Sayfa oluştururken Sayfa Şablonu açılır sayfamızda görünür. Bu bize ihtiyacımız olan tüm kontrolü verir. Bu şablondaki HTML'yi düzenleyebiliriz ve bu sayfa için benzersiz CSS'ye ihtiyacımız varsa, koşullu mantığı kullanabilir ve bunu header.php dosyasında bağlayabiliriz. Geçmişe bakıldığında, "view" ı (header.php) daha temiz tutmak için benzersiz CSS'yi bağlamak için functions.php dosyasını kullanmak daha mantıklıdır, ancak bu bir dahaki sefere yapılacak bir şeydir.
Bu başlığın arka plan grafiği "Kahraman Grafik" olarak adlandırılır - yani sayfanın görünümü / hissi / içeriği için önemli olan büyük (tam anlamıyla ve boyut açısından) bir grafik. Performanstan sorumlu olmaya çalıştığımız için (sitenin hızlı yüklenmesini istiyoruz), gerçekten bu devasa grafiği küçük ekranlara sunmamalıyız. Bu, CSS'de HTML'de olduğundan çok daha kolaydır. "Tersine" medya sorgularımızı ( min-widthyerine max-width) "ekran bu kadar geniş veya daha geniş olduğunda, bu grafiği kullanın ... daha geniş olduğunda, bu grafiği kullanın" vb. İçin kullanırız. Bu şekilde varsayılan olarak yalnızca en küçük resim kullanılır, ancak daha geniş bir tarayıcı sayfayı istediğinde bu geçersiz kılınır. Orada biraz mobil öncelikli düşünme.
Sonunda, tüm The Lodge sayfalarında (isterseniz) üzerinde çalışabileceğiniz güzel bir tuvalimiz var.