Genesis için Özelleştirici aracılığıyla HTML Duyarlı Logo Başlığı/Resim Ekleyin
Bu öğretici, tüm cihazlarda duyarlı tasarım için daha iyi olan gerçek HTML işaretleme görüntü etiketiyle Genesis Framework başlığında logoyu/görüntüyü görüntülemek için kullanılan CSS arka plan tekniklerinin değiştirilmesini tartışır. Bu, biri filtreli, diğeri eylemli çeşitli şekillerde elde edilebilir. Ama önce birkaç yaygın bilgi … Görüntü/logo başlığı örneğinin teması ve Genesis örnek temasında kullanılan teknik, Genesis ayarlarında ‘dinamik metin’ veya ‘logo’ görüntüsüne bağlı olup olmadığınıza bağlıdır. Başlık.
‘Dinamik metin’ seçildiyse, ‘site başlığı’ ve ‘slogan’ WordPress> ayarları alanında öngörüldüğü gibi kullanılır. ‘Görüntü logosu’ seçilirse, görüntüye logo.png adlı tema görüntüsünüzün dizininde referans verilir ve 360x164px adresinde varsayılan olarak vardır. Bu, 2.2.3’ten itibaren en son örnek olayların temasında silinmiştir. 360px * 154px varsayılanGörüntü, HTML tarafından işaretlenen görüntü etiketi yerine CSS’nin arka planı olarak yerleştirilir. Kodda, görüntünün H1’deki bağlantının CSS’sinin arka planı olduğunu görebilirsiniz. Thistitle bölgesi çoğu için işlev görür, ancak duyarlı sorunlara sahiptir ve ana şirket sitesinin markası için gerçekten uygun değildir veya SEO. Duyarlı sorunlar, arka plan boyutu için CSS kuralları kullanılarak ele alınabilir. Ancak HTML görüntüsünün bu alanda tamamen kullanılması gerektiğini hissediyorum.
CSS, 2.2.3’teki Genesis Sample temasından farklıdır ve bu nedenle, resimde varsayılan logoya işaret eden hiçbir arka planın olmadığı yerlerde. Genesis Özel Başlık Genesis Örneği Dışında Özel Başlık Studiopress çalışmalarının çoğu, Functions.php temasında bulacağınız aşağıda benzer bir şey (News Pro’dan alındı) özel başlıklar için destek ekleyin. Özel başlıklar etkinleştirildiğinde, resimler/logolar eklersiniz Görünüm> başlık aracılığıyla ve teknik olmayan kullanıcıların ana görüntüyü değiştirmesini kolaylaştıran bir özelleştiriciye konulursunuz.
Özel başlığın değerinin değerinde belirtilen görüntünün boyutu durumunda, ihtiyaçlarınıza göre değiştirin, ancak her şeyin yolunda gittiğinden emin olmak için CSS işaretlemesindeki öğeleri de ayarlayın. Özel başlık desteği özellikle Genesis için değildir, bu herhangi bir temada kullanılabilen bir WordPress özelliğidir. Genesis’in özel bir ayarlaması, CSS arka plan görüntülerini uygulayacak HTML öğelerini hedeflemek için kullanılan başlıkların kullanılmasıdır. Bu, Genesis_Custom_Header ve Genesis_custom_Header_Style’deki Genesis/Header.php’de kodlanmıştır, Genesis_custom_header_style burada tamamen kontrol çıktısı ve kaldırılabilir. Alternatif Yollar … Eylemleri Kullanma, Genesis_Site_Title, CSS arka plan ödünç almak yerine görüntüleri kullanarak _S’den CSS arka planını kullanmak yerine, görüntü öğeleri içeren bazı HTML işaretlemelerini kullanalım. İşareti alt çizgilerden sıkıştırabiliriz.
Row _S/Inc/Custom-Header.php 7-11
Böylece kendi özel gölgelik temamızın desteğini ekleyebilir, Genesis_Custom_Edy_Style Action’ı silebilir ve başlık işaretlememizi bağlayabiliriz. Kod görüntülerinde function.php eklenecek şekilde, temamız için özel başlık desteği ekliyoruz, varsayılan Genesis’in davranışını kaldırıyoruz ve yeni başlık işaretlememizi ilişkilendiriyoruz. Mark Up, başlığın erken ve üstünde çalıştırıldığından emin olmak için yüksek öncelikli (5) Genesis_Site_Title kancaları ile ilişkilidir. Boyutu ihtiyaçlarınıza göre değiştirin ve şimdi özelleştirici veya görünüm> başlık aracılığıyla görüntüler ekleyebilirsiniz.
Bunun iyi olanı şudur …
Bu bir görüntü ve daha kontrollü
Görüntüler ayarlamalarla kolayca değiştirilebilirGörüntü seçilmezse, sitenin başlığı ve açıklaması görüntülenir, site logosu ve başlık ve site açıklaması görüntülenirse, özel başlığın desteğinde başlık metninin değerini true olarak değiştirin.
CSS Temizleme CSS’mizin ayrıca CSS arka planı ile ilgili bazı CSS’leri silmesi gerekir. Başlık-image .Site-title> a, silin veya yorum. Başlık-görüntü.
şamandıra: sol;
Minimum yükseklik: 150 piksel;
Genişlik:%100;
} Filtreler kullanarak, Genesis_seo_Title (daha iyi bir yol!) Genesis, işaretleme düzenini değiştirmeden içeriğini değiştirebileceğiniz bir filtre ile birlikte gelir, söz konusu filtre 932 satırından Genesis/Header.php’de görebileceğiniz Genesis_seo_title’dir.
Yukarıda hala alt çizgiyi kullanıyorum ve gölgelik ayarlanırsa bir logo veriyorum, ayarlanmazsa sitenin adını veriyorum. Bu kodun geri kalanı, burada yayınlanan Tony Eppright’ın yükseltilmiş bir çıktısıdır. İstediğim (Tonys yönteminden) görüntünün görünüm> başlık seçeneği ile ele alınmasıdır. Ayrıca, sayfadaki çıkış görünür olmaması için özelleştirici üzerinde düzenlenmişse, ekran okuyucu sınıfını site açıklamasına ekledim, ancak ekran okuyucu tarafından görülür. Ancak, görüntü özelleştiricide düzenlenmemişse, site açıklaması normal olarak görüntülenir. Şimdi görüntü varsayılan düzeni eklemeden ve değiştirmeden düzene yerleştirilir. Filtre seçeneğini daha iyi hale getirin. CSS Temizleme Başlığı gizleme ile ilgili birkaç CSS’yi de silmemiz gerekir.
.Header-image .Site-Title {
Ekran bloğu; Metin girinti: -9999px;
Bunun için.
Ekran bloğu;
Metin girinti: -9999px;
} ve silinmeye devam edin …
şamandıra: sol;
Minimum yükseklik: 150 piksel;
Genişlik:%100;
} Ve tema resim klasörünüzde depolanan logo.png kullanan eski bir binanız varsa – CSS’yi silin
.title-alan {
Arka plan: URL (Images/Logo.png) Yok Merkezi;
Rulman: 0;
}
