Genesis için Özelleştirici aracılığıyla Duyarlı bir HTML Logosu/Görüntü Başlığı Ekleme

Bu öğretici, Genesis çerçeve başlığında bir logo/görüntü görüntülemek için kullanılan CSS arka plan tekniğini, tüm cihazlarda duyarlı tasarım için daha iyi olan gerçek bir HTML biçimlendirme satır içi görüntü etiketiyle değiştirmeye bakar. Bu, biri filtreli ve diğeri eylemli olmak üzere birkaç yolla başarılabilir. Ama önce genel bir bilgi…

Genesis Örnek Teması

Genesis Örnek Teması'nda kullanılan başlık resmi/logo yerleşimi ve tekniği, Genesis Ayarları > Başlık'ta ' Dinamik Metin ' veya Görüntü ' Logosu 'nun seçili olmasına bağlıdır.

' Dinamik metin ' seçilirse, ' Site Başlığı ' ve ' Etiket Satırı ', WordPress > Ayarlar alanlarında ayarlandığı gibi kullanılır. ' Resim Logosu ' seçilirse, temanızın resimler dizininde logo.png adlı bir resme başvurulur ve 360×164 piksel boyutunda varsayılan bir resim yerinde bulunur. Bu, en son Genesis Sample temasında 2.2.3'ten itibaren kaldırılmıştır.

Resim, HTML olarak işaretlenmiş bir resim etiketi yerine bir CSS arka planı olarak yerleştirilir.

Kodda, resmin, .title alanının H1 içindeki bağlantının bir CSS arka planı olduğunu görebilirsiniz.

Bu, çoğunlukla işe yarar, ancak duyarlı sorunları vardır ve bir sitenin ana kurumsal markalaşması için anlamsal olarak veya SEO için gerçekten uygun değildir. Duyarlılık sorunları, arka plan boyutundaki CSS kuralı kullanılarak çözülebilir. Ancak, bu alanda bir resim HTML işaretlemesinin gerçekten kullanılması gerektiğini düşünüyorum.

CSS, 2.2.3'ten itibaren Genesis Sample temasından farklıdır; bu nedenle, görüntülerde varsayılan bir logoya işaret eden bir arka plan yoktur.

Genesis Özel Başlıkları

Genesis Örnek Teması dışında StudioPress temalarının çoğu Özel Başlıklar için aşağıdakine benzer bir destek ekler (News Pro'dan alınmıştır), bunu temanın function.php dosyasında bulabilirsiniz.

Özel Başlıklar etkinleştirildiğinde, Görünüm > Başlık aracılığıyla görüntüyü/logoyu eklersiniz ve teknik olmayan bir kullanıcının ana görüntüyü değiştirmesini kolaylaştıran Özelleştirici'ye girersiniz.

Özel Başlığın değer dizisinde tanımlanan görüntü boyutu açısından, bunları yalnızca ihtiyacınız olanla değiştirin, aynı zamanda hepsinin iyi bir şekilde oynatıldığından emin olmak için CSS işaretlemesindeki çevreleyen öğeleri ayarlayın.

Özel Başlık desteği Genesis'e özgü değildir, herhangi bir temada kullanılabilen bir WordPress özelliğidir. Genesis'e özgü ayarlamalardan biri, kendisine CSS arka plan görüntüsü uygulanacak olan HTML öğesini hedeflemek için kullanılan başlık seçicinin kullanılmasıdır.

Bu, genesis_custom_header ve genesis_custom_header_style işlevlerinde genesis/header.php'de kodlanmıştır, genesis_custom_header_style , buradaki çıktıyı gerçekten kontrol eder ve kaldırılabilir.

Alternatif yollar…

Bir eylem kullanma, genesis_site_title

CSS arka planı yerine Resim kullanma – _s'den ödünç alma

Bu nedenle, bir CSS arka planı kullanmak yerine, görüntü öğesini içeren bazı HTML işaretlemelerini kullanalım. İşareti Alt Çizgilerden sıkıştırabiliriz.

_s/inc/custom-header.php satırlarında 7-11

Böylece kendi özel başlık tema desteğimizi ekleyebilir, genesis_custom_header_style eylemini kaldırabilir ve _s başlık işaretimizi ekleyebiliriz. Functions.php'ye eklenecek

Kod pasajında, temamız için özel başlık desteği ekliyoruz, varsayılan Genesis başlık davranışını kaldırıyoruz ve yeni başlık işaretimizi takıyoruz.

İşaretleme, erken yürütüldüğünden ve başlığın üzerinde oturduğundan emin olmak için yüksek öncelikli (5) genesis_site_title kancasıyla bağlanır.

Boyutu ihtiyaçlarınıza uyacak şekilde değiştirin ve şimdi Özelleştirici veya Görünüm > Başlık aracılığıyla resmi ekleyebilirsiniz.

Bunun iyi yanı şu ki…

• Bu bir görüntü ve daha kontrol edilebilir
• Görüntü, özelleştirici aracılığıyla kolayca değiştirilebilir
• Hiçbir resim seçilmezse, Site başlığı ve açıklaması görüntülenir, hem logonun hem de site başlığının ve site açıklamasının gösterilmesini istiyorsanız, özel başlık desteğindeki başlık-metnin değerini değiştirin true .

CSS Temizleme

Ayrıca .header-image .site-title > a için arka plan CSS'si ile ilişkili bazı CSS'leri kaldırmamız gerekecek, kaldır veya yorum yap

 .header-image .site-title > a {
 yüzer: sol;
 minimum yükseklik: 150 piksel;
 genişlik: %100;
}

Bir filtre kullanarak, genesis_seo_title (daha iyi bir yol!)

Genesis, biçimlendirme düzenini değiştirmeden içeriği değiştirebileceğiniz bir filtre ile birlikte gelir, söz konusu filtre, 932 satırından genesis/header.php içinde görebileceğiniz genesis_seo_title'dır .

Bu nedenle, yukarıda hala Alt Çizgi başlık kodunu kullanıyorum ve başlık ayarlanmışsa logoyu çıkarıyorum, ayarlanmamışsa Site Name çıktısını alıyorum. Kodun geri kalanı, burada yayınlanan Tony Eppright'ın geliştirilmiş bir çıktısıdır.

Farklı yapmak istediğim (Tonys yönteminden), görüntünün Görünüm > Başlık seçeneğiyle işlenmesiydi. Ayrıca, görüntü Özelleştirici'de ayarlanmışsa , sayfadaki çıktısı görünmez – ancak ekran okuyucular tarafından görülebiliyorsa, site açıklamasına .screen-reader sınıfını da eklerim. Ancak, görüntü Özelleştirici'de ayarlanmamışsa Site Açıklaması normal şekilde görüntülenecektir.

Artık görüntü, varsayılan düzene ekleme yapılmadan ve değiştirilmeden düzende konumlandırılmıştır. Filtre seçeneğini daha iyi hale getirmek.

CSS Temizleme

Ayrıca, başlığı gizlemekle ilişkili bazı CSS'leri kaldırmamız gerekecek.

 .header-image .site-açıklama,
.header-image .site-title {
 Ekran bloğu;
 metin girintisi: -9999 piksel;
}

buna

 .header-image .site-description { 
 Ekran bloğu; 
 metin girintisi: -9999 piksel; 
}

ve yine de kaldır..

 .header-image .site-title > a {
 yüzer: sol;
 minimum yükseklik: 150 piksel;
 genişlik: %100;
}

Ve tema resim klasörünüzde dosyalanmış bir logo.png kullanan eski bir yapınız varsa – CSS'yi kaldırın

 .title-alanı {
 arka plan: url(images/logo.png) tekrarsız merkez;
 dolgu: 0;
}

Tarayıcı desteği yaygın olduğundan, logolar gibi şeyler için de svg formatına geçmelisiniz, SVG'nin en güzel yanı, çözünürlükten bağımsız bir format olması ve her ekranda harika görünmesi ve sadece tek bir versiyona ihtiyacınız olmasıdır. Geri dönüşler de hala başarılabilir.

6 Mart 2016 Güncellemesi – Buna ek olarak , başlık Özelleştirici'de ayarlanmışsa, . site açıklaması işaretlemesi çıktı – Başlık Özelleştirici'de seçilirse, onu gizlemek için @alphablossom kodunu değiştirdim, Özelleştirici'de seçilmediyse açıklama görüntülenecektir.