göz atacak olursak WordPress tema dizini, temaların çoğu kapak resimlerini sergiliyor. Popüler talep gören bir özelliktir. Kapak sayfası eğilimi, tema dizini engelle ekran görüntüleri de.
Aşağıdaki örneği ele alalım Yirmi yirmi (klasik bir tema) içeren bir kapak şablonu hem tek bir gönderide hem de sayfada görüntülemek için kullanılabilir; burada gönderinin öne çıkan resmi, tarayıcı ekranı boyunca uzanan en üstte görüntülenir, gönderi başlığı ve diğer istenen meta veriler aşağıdadır. Kapak şablonları, içeriği görüntülemenin geleneksel kısıtlamalarından sıyrılan içerik oluşturmaya olanak tanır.
Şu anda kapak şablonları oluşturmak için PHP kodunun burada, Yirmi Yirmi varsayılan temanın kapak şablonu. eğer bakarsak template-parts/content-cover.php dosya, içerir kod olduğunda içeriği görüntülemek için cover-template kullanıldı.
Bu nedenle, derin bir PHP bilgisine sahip değilseniz, özelleştirilmiş bir kapak sayfası oluşturmanız mümkün değildir. Birçok sıradan WordPress kullanıcısı için tek seçenek, aşağıdaki gibi bir eklenti kullanmaktır. Custom Post Type UI tarif edildiği gibi bu kısa video.
Blok temalardaki bölümleri örtün
Dan beri WordPress 5.8, tema yazarları, kullanarak en iyi kahraman bölümüyle özel şablonlar (tek gönderi, yazar, kategori ve diğerleri gibi) oluşturabilir. blok editörü kapak bloğu ve minimum kodla veya hiç kod olmadan temalarına dahil edilmiştir.
Blok tema şablonlarında en büyük kapak bölümlerinin nasıl oluşturulduğuna dalmadan önce, iki blok temasına kısaca göz atalım. yirmi yirmi iki ve Wabi Zengin Tabor tarafından (tam inceleme okuyun).
Perde arkasında, Twenty Twenty-Two, büyük bir başlık uygular. desen olarak saklanan gizli bir görüntü ekleme içinde header-dark-large parçalar. Oysa Wabi temasında, tek bir gönderideki büyük başlık arka plan rengi ile uygulanır. vurgulu arka plan renkleri ve 50 piksel yüksekliğinde bir boşluk bloğu (satırlar: 5-9). Vurgu renkleri tarafından yönetilir assets/js/accent-colors.js dosyası.
Pek çoğu, kullanarak bir üst kapak bölümü oluşturmayı seçti. kapak bloğuBu, kullanıcıların herhangi bir kod yazmadan arka plan rengini değiştirmesine ve Medya Kitaplığından statik bir görüntü eklemesine veya medya cihazlarından yüklemesine olanak tanır. Bu yaklaşımla, görüntülerden öne çıkan resim bloğu yayınla Gönderinin tek gönderilerde arka plan görüntüsü olarak öne çıkmasını istiyorsanız, her gönderiye manuel olarak eklenmesi gerekiyordu.
Dinamik gönderi özellikli resim içeren Kapak Blokları
WordPress 6.0 başka bir harikayı kullanıma sundu öne çıkan resim kapak blokları Herhangi bir yazının veya sayfanın öne çıkan görüntüsünün kapak bloğunda arka plan görüntüsü olarak kullanılmasına izin veren özellik.
Aşağıda kısa video, Automattic mühendisleri, aşağıdakilerden bir örnekle blokları kapsayacak şekilde öne çıkan görseller eklemeyi tartışıyorlar. arkeo tema:
Öne çıkan görüntü bloğunu içeren görüntü bloğu, aşağıdakiler kullanılarak daha da özelleştirilebilir: duotone renk vermek theme.json bu kısa yazıda tartışıldığı gibi Noktaları birleştirmek YouTube videosu (Automattic'ten Anne McCarthy).
Kullanım durumu örnekleri (Wei, Parlak mod)
Küçük resimlere göz atarsak, tema dizini engelle, çoğunluğunun büyük kapak başlık bölümleri içerdiğini görüyoruz. Şablon dosyalarına girersek, statik görüntü arka planına sahip kapak bloklarını kullanırlar.
Yakın zamanda geliştirilen bazı temalar, dinamik post özellikli görüntü arka planına sahip kapak blokları kullanıyor (örneğin, Archeo, Wei, Frost, Bright Mode, vb.). Yeni özelliğe kısa bir genel bakış şurada mevcuttur: bu kısa GitHub videosu.
Dinamik vurgulu renkler özelliklerini bir araya getiren Wabi kapak ve post özellikli resim blokları içeren tema, Rich Tabor yaratıcılığını yeni tasarımında daha da genişletiyor. Wei tema (tam inceleme mevcut okuyun) tek bir gönderiden dinamik kapak resimleri görüntülemek için.
Wei duyuru gönderisinde, Zengin Tabor yazıyor: “Perde arkasında, single.html şablon, gönderinin öne çıkan görselinden yararlanan bir Kapak bloğu kullanıyor. Ardından çift ton, gönderiye atanan renk şemasına göre uygulanır. Bu şekilde, hemen hemen her görüntü iyi görünecek ”.
Wei temasının başlık kapak bloğunu daha derine inmek ve kendinizinkini nasıl oluşturacağınızı öğrenmek istiyorsanız, işte size bir kısa video itibaren Frank Klein (WP Geliştirme Kursları) nasıl oluşturulduğunu adım adım açıklar.
Wei temasına benzer şekilde, Brian Gardner ayrıca son yayınlarında öne çıkan resim bloğuyla birlikte kapak bloğunu da kullanır. Parlak mod ile öne çıkan içerikleri görüntülemek için tema canlı renkli.
Brian, WPTavern'e şunları söyledi:: “Tema hakkında en çok sevdiği şey, Kapak Bloğunun tek sayfalar. Öne çıkan görüntüyü Kapak bloğuna çeker ve ayrıca gölgeler ve tam yükseklik seçenekleri için özel blok stilleri sunar. […] Sanki bu gerçekten modern WordPress ile mümkün olanı sunuyor gibi hissediyorum.”
Daha fazla ayrıntı için, burada onun demo sitesi ve Brian'ın Parlak Modu temasının tam incelemesi.
Blok düzenleyici ile karmaşık düzenler tasarlama
Son zamanlarda, WordPress tasarlanmış yeni bir blok düzenleyici başlattı açılış ana sayfası ve Sayfayı indirmek. Duyuru çekti karışık reaksiyonlar dahil olmak üzere okuyucularından Matt mullenweg (Automattic) böyle bir "basit sayfa" tasarlamak ve başlatmak için geçen 33 gün hakkında yorum yaptı. Bulabilirsin ek sahne arkası tartışmaları burada.
Buna karşılık, Pootlepress'ten Jamie Marsland, bu YouTube videosu neredeyse aynı ana sayfayı yaklaşık 20 dakikada yeniden ürettiği yer.
Marsland videosuna yorum yapan, WP Travern'den Sarah Gooding yazıyor: “O, blok düzenleyiciye sahip güçlü bir kullanıcı olarak tanımlanabilecek kişidir. Gerektiğinde dolgu ve kenar boşluklarını ayarlayarak satırları, sütunları ve grupları hızla karıştırabilir ve her bölüme tasarım için karşılık gelen rengi atayabilir. Bu noktada, çoğu ortalama WordPress kullanıcısının yapabileceği bir şey değil.”
Blok düzenleyici uzun bir yol kat etmiş olsa da, çoğu tema geliştiricisinin ve sıradan kullanıcının onunla karmaşık düzenler oluşturması ve tasarlaması için hala büyüyen acı noktaları var.
TT2 Gopher bloklarına geliştirme ekleme
Bu bölümde, geliştirmeleri nasıl eklediğim konusunda size yol göstereceğim. TT2 Gopher Blokları teması bir önceki yazımda bahsettiğim Daha önce tanımladığım temalardan gelen kapak bloklarından esinlenerek temaya üç kapak şablonu (yazar, kategori ve tek kapak) eklemek istedim.
Web sitelerine göz atarken, iki tür kapak başlığı görüyoruz. En çok gözlemlenen başlık, site başlığıyla (site başlığı ve üst gezinme) kapak bloğuna (örneğin, Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode, vb.) karıştırılmış kapak bölümüdür. Ayrıca, site başlığıyla karıştırılmamış ve hemen altına yerleştirilmiş başlık kapağı bölümünü de buluyoruz, bunun gibi BBC Geleceği İnternet sitesi. TT2 Gopher blok teması için ikincisini seçtim.
Kapak başlığı desenleri oluşturma
İlk olarak, kapak bloklarını kullanarak yazar, tek ve diğerleri (kategoriler, etiketler) şablonları için kapak başlığı kalıpları oluşturalım. Sonra onları kalıplara dönüştüreceğiz (açıklandığı gibi daha önce burada) ve ilgili başlık kapak desenlerini şablonlara çağırın.
Blok düzenleyiciyle çalışmaya alışkınsanız, site düzenleyicideki kapak bloklarını kullanarak başlık bölümünüzü tasarlayın ve ardından kapak başlık kodunu kalıplara dönüştürün. Ancak, eğer FSE editörüne aşina değilseniz, o zaman en kolay yol, şablonlardan kalıpları kopyalamaktır. desen dizini bir gönderide, gerekli değişikliği yapın ve bir kalıba dönüştürün.
Benim de önceki CSS-Tricks makalesi, blok kalıpları oluşturma ve kullanma hakkında ayrıntılı olarak tartıştım. Tek bir kapak sonrası başlık kalıbı oluşturmak için kullandığım iş akışına kısa bir genel bakış:
Tek direkli kapak başlığı deseni
1. Adım: FSE arayüzünü kullanarak yeni bir boş dosya oluşturalım ve sol panelde gösterildiği gibi blok yapısını oluşturmaya başlayalım.
Alternatif olarak, bu önce bir gönderide veya sayfada yapılabilir ve ardından işaretlemeyi kopyalayıp daha sonra bir kalıp dosyasına yapıştırabilir.
2. Adım: Ardından, yukarıdaki işaretlemeyi bir kalıba dönüştürmek için, önce kod işaretlemesini kopyalamalı ve yeni bir şablona yapıştırmalıyız. /patterns/header-single-cover.php kod düzenleyicimizde. Ayrıca gerekli kalıp dosyası başlık işaretlemesini de eklemeliyiz (örneğin, başlık, bilgi, kategoriler, yerleştirici, vb.).
İşte kodun tamamı /patterns/header-single-cover.php Dosya:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
3. Adım: Bu demo için kullandım bu resim fotoğraf dizininden dolgu arka plan görüntüsü olarak ve Geceyarısı çift ton renk. Öne çıkan görseli dinamik olarak kullanmak için şunu eklemeliyiz: "useFeaturedImage":true yukarıdaki dolgu görüntüsü bağlantısını değiştirerek kapak bloğunda "dimRatio":50 öyle ki 10 satırı aşağıdaki gibi görünmelidir:
Alternatif olarak, dolgu görüntüsü tıklanarak da değiştirilebilir. değiştirmek ve seçme Öne çıkan görseli kullan seçenek:
Artık, şablonlarda, gönderilerde ve sayfalarda herhangi bir yerde kullanım için üstbilgi kapak desenleri, desen ekleyici panelinde görünür olmalıdır.
Arşiv kapak başlıkları
Esinlenen bu WP Taverna gönderisi ve bir yazar şablonu başlığı oluşturmak için adım adım izlenecek yol, benzer bir kapak başlığı oluşturmak ve TT2 Gopher temasına da eklemek istedim.
İlk olarak, arşiv kapağı üstbilgi desenini oluşturalım. author.html yukarıdaki iş akışını izleyerek şablonu da. Bu durumda, bunu yeni bir boş sayfada blok ekleyerek oluşturuyorum (aşağıda liste görünümünde gösterildiği gibi):
Kapağın arka planında, tek post başlık kapağında kullanılan görselin aynısını kullandım.
Yazar bloğunda kısa bir yazar biyografisi göstermek istediğimizden, kullanıcı profili sayfasına bir biyografik ifade de eklenmelidir, aksi takdirde ön uçta bir boşluk görüntülenecektir.
Aşağıdaki işaretleme kodudur header-author-cover, bir sonraki adımda desen kullanacağız:
Published by:
İşaretlemeyi gizlemek için header-author-cover desen, daha önce açıklandığı gibi gerekli desen dosyası başlık işaretlemesini eklemeliyiz. düzenleyerek header-author-cover.php desen, etiketler, sınıflandırma ve diğer özel şablonlar için benzer başlık kapakları oluşturabiliriz.
The header-category-cover.php benim için desen category.html şablon GitHub'da mevcut.
Başlık kapak bloklarıyla Şablonlar Oluşturma
WordPress 6.0 ve en son Gutenberg 13.7 blok düzenleyiciye genişletilmiş şablon oluşturma özellikleri, böylece birçok WordPress kullanıcısının derin kodlama bilgisi olmadan özelleştirilmiş şablonlarını oluşturmasını mümkün kılar.
Daha ayrıntılı bilgi ve kullanım örnekleri için, burada bir Justin Tadlock tarafından kapsamlı özelleştirme notu.
Blok düzenleyici kapak şablonları da dahil olmak üzere çeşitli şablon türleri oluşturmaya izin verir. Birleştirmenin nasıl olduğunu kısaca gözden geçirelim. kapak bloğu ve öne çıkan resim bloğu yayınla yeni şablon kullanıcı arayüzü ile, kodlama becerileri düşük veya hiç olmasa bile çeşitli türde özel kapak şablonları oluşturmayı kolaylaştırır.
Gutenberg 13.7 ile şablon oluşturmak çok daha kolay hale getirildi. Blok şablonları nasıl oluşturulur kodlarla ve site düzenleyicide , Tema el kitabı ve önceki yazım.
Kapak bloklu yazar şablonu
Üst (başlık bölümü) işaretlemesi author.html şablon aşağıda gösterilmiştir (6. satır):
...
...
...
... İşte kapak başlıklarının ekran görüntüleri author.html ve category.html şablonlar:
Tüm her iki şablon için de kod GitHub'da mevcuttur.
Kapak bloğu ile tek gönderi
Tek gönderimizde kapak bloğunu görüntülemek için, header-cover-single pattern başlık bölümünün altında (3. satır):
....
....
....Başlık kapağı bölümüyle birlikte tek gönderinin ön uç görünümünü gösteren bir ekran görüntüsü:
Tüm single-cover.html şablon GitHub'da mevcut.
Oluşturma hakkında ek adım adım izlenecek yol eğitimlerini bulabilirsiniz. kahraman başlık gönderi bölümü ve öne çıkan resim arka plan kapak bloklarını kullanma on WP Tavern ve Tam Site Düzenleme adresinden özetlerini gönderebilirler.
İşte aldın!
Yardımcı Kaynaklar
Öne çıkan resim kapak bloğu
Blog gönderileri
Blok temalar genel olarak WordPress topluluk üyelerinden çok sayıda geri bildirim almak, Bence, onlar WordPress'in geleceği, fazla. Blok temalarla, PHP ve JavaScript dillerinde derin kodlama becerilerine ve ustalığına sahip olmayan amatör tema yazarları, artık bu makalede açıklandığı gibi bir kahraman kapağı bölümü ile karmaşık düzenler içeren temalar oluşturabilir. desen ve stil varyasyonları.
Erken bir Gutenberg kullanıcısı olarak, aşağıdaki gibi yeni tema araçlarıyla daha fazla heyecanlanamazdım. blok teması oluştur eklenti ve tema yazarlarının herhangi bir kod yazmadan doğrudan blok düzenleyici kullanıcı arayüzünden aşağıdakileri elde etmelerini sağlayan diğerleri:
- (i) yaratmak
- (ii) tema dosyalarının üzerine yaz ve dışa aktar
- (iii) boş veya alt tema oluşturmak ve
- (iv) mevcut temanın stil varyasyonunu değiştirmek ve kaydetmek
Ek olarak, Gutenberg eklentisinin son yinelemeleri, akışkan tipografi ve düzen hizalamaları ve yalnızca kullanarak diğer stilistik kontroller theme.json JavaScript ve bir satır CSS kuralı içermeyen dosya.
Okuduğunuz ve aşağıda yorum ve düşüncelerinizi paylaştığınız için teşekkür ederiz!
