Özel bir WordPress sayfa şablonu nasıl oluşturulur

Gerçekten profesyonel bir WordPress web sitesi neredeyse kesinlikle özel sayfa şablonları içerecektir. Gerçekten de, en yaygın web sitelerinin çoğu şablonlara güvenecektir. Bir emlak sitesi, evleri için bir şablona, ​​ürünleri için bir e-ticaret sitesine, üyeleri için bir üyelik sitesine vb. ihtiyaç duyacaktır.

Bir şablon, sayfaların ve gönderilerin ön uçta nasıl görüneceğini tanımlar. Plan, her gönderideki tüm içeriği nasıl ve nerede görüntüleyeceğinizi söylüyor. Örneğin, bir yemek pişirme web sitesinde yemek tarifleri için şablonunuzda yaptığınız herhangi bir değişiklik, tüm tariflerin ön uçta nasıl görüneceğini etkiler.

Üzerinden geçeceğim iki tür özel WordPress sayfa şablonu var:

1. Normal sayfalar için bir şablon
2. Tek gönderi sayfaları için bir şablon

Normal sayfalar için neden özel bir WordPress şablonuna ihtiyacınız olacak?

Bir şablonun benzer sayfaların aynı yapıyı izlemesini sağlamak kolaydır. Her sayfa için ayrı ayrı mizanpaj oluşturmak yerine, şablonu bir kez oluşturabilir ve istediğiniz sayfalara atayabilirsiniz. Bu sayfalar daha sonra şablonu izleyecektir.

Bir örnek hayal edelim. Bir yemek pişirme web sitesinde, "Mükemmel makarna nasıl yapılır", "Yumurta nasıl pişirilir" gibi yemek pişirme ipuçları içeren birçok sayfanız olabilir.

Tüm bu sayfalarda görüntülemek istediğim yemek pişirme üzerine bir e-kitabım var. Her sayfayı aynı içerikle düzenlemek (ki bu çok zaman alır) yerine sadece bir kez şablon oluşturup bu şablonu sayfalara atayabilirim. Bu şekilde, her sayfa e-kitabımı indirmek için bir harekete geçirici mesaj içerecektir.

Yukarıdaki sayfaların her ikisinde de sağ tarafta harekete geçirici mesajımı görebilirsiniz. Çünkü her iki sayfaya da aynı şablonu atadım.

Özel bir WordPress sayfa şablonu oluşturmanın iki yolu

Özel WordPress sayfa şablonunuzu oluşturmanın iki yolu vardır:

• Zor yol . Temalar, WordPress'teki şablonları tanımlayan PHP dosyalarını otomatik olarak sağlar. Özel bir gönderi türü (yemek tarifleri gibi) oluşturduğunuzda, web sitenizin gönderilerinizi görüntülemesini sağlamak için bu PHP alanlarını düzenlemeniz veya yenilerini oluşturmanız gerekir.
• Kolay yol. Şablonlarınızı oluşturmak için Araç Seti gibi bir WordPress eklentisi kullanabilirsiniz. Araç seti, herhangi bir kodlama yapmadan dakikalar içinde şablonlar oluşturur. Ayrıca, Araç Seti Blokları ile WordPress Gutenberg düzenleyicisine dinamik içerikli bloklar ekleyebilirsiniz.

Aşağıda size kolay yolu göstereceğim.

İlk olarak, sağ tarafta bir harekete geçirici mesaj içeren normal sayfalar için bir şablon oluşturacağım.

İkinci olarak, tariflerim özel yazı tipim için bir şablon oluşturacağım.

Normal sayfalar için özel bir WordPress sayfa şablonu nasıl oluşturulur

Adım 1: İçerik şablonu yapısını oluşturma

Öncelikle sayfalarınız için içerik şablonu oluşturmanız gerekir. Araç Seti yüklendiğinde yeni bir içerik şablonu açabilir ve bloklarınızı ekleyebilirsiniz.

İlk önce şablonun yapısını düzenliyorum. Aşağıda, Şablonumu bölümlere ayırmama izin veren Toolset'in ızgara bloğunu eklediğimi görebilirsiniz. Şablonu ikiye böldüm ve soldaki bölümü sayfanın %75'ini kaplayacak şekilde genişlettim.

2. Adım: Şablonunuza içerik ekleyin

Artık yapıya sahip olduğum için, görüntülemek istediğim içerikle blokları eklemem gerekiyor. Sol tarafta, gönderi içeriğini ekliyorum. Tek yapmam gereken, içerik için istediğim kaynağı seçmeme izin veren Toolset'in tek alan bloğunu eklemek.

Aşağıda, bloğun kaynağı olarak sağ taraftaki gönderi içeriğini seçiyorum.

Şablonun sağ tarafı için harekete geçirici mesajı ekleyeceğim. Tek yapmam gereken içeriğe bağlı olarak istediğim blokları seçmek. Aşağıda başlık bloğunu ve Toolset'in düğme bloğunu kullandım. Düğme bloğu için kitabın bağlantısını da ekliyorum.

3. Adım: Blokları şekillendirin

WordPress'i Araç Seti ile birleştirdiğinizde, şablonunuza eklediğiniz blokları şekillendirebilirsiniz. “Zor yoldan” bloklar oluşturmayı seçerseniz, iyi bir stil için kodlama becerilerinize güvenmeniz gerekir.

Bir bloğa tıkladığınızda, sağ tarafta şablonunuzu şekillendirmek ve geliştirmek için birçok seçenek göreceksiniz.

"Tipografi" altında aşağıdakileri değiştirebilirsiniz:

• Yazı tipi
• Yazı Boyutu
• boşluk
• stil
• Metin rengi

Hepsi bu değil. "Stil Ayarları" altında aşağıdakileri de değiştirebilirsiniz:

• Arka plan rengi
• Kenar boşluğu/dolgu
• Sınır
• kutu gölge

Aşağıda, harekete geçirici mesaj için yeni bir arka plan rengi ekledim. Herhangi bir değişikliği kodlamanız gerekmediğine dikkat edin, bunun yerine renkleri ve istediğiniz diğer stilleri seçmeniz yeterlidir.

4. Adım: Şablonu farklı ekran boyutları için ayarlayın

Şablonunuzu büyük olasılıkla bir dizüstü bilgisayarda veya masaüstünde oluşturuyorsunuz, ancak kullanıcılarınızın web sitesini aynı ekran boyutunda görüntülemeyebileceğini unutmamak önemlidir. Artan bir çoğunluk tabletlerinde veya mobil cihazlarında olacak.

Bu nedenle, her ekran boyutu için şablonu ayarlamanız gerekebilir. Bu, Toolset ve WordPress ile yapmak için yeterince kolaydır.

Her stil öğesinin yanındaki sağ kenar çubuğunda masaüstü, tablet ve mobil arasında geçiş yapma seçeneği vardır.

Gördüğünüz gibi, seçenekler arasında geçiş yaptığımda şablon kendini ayarlar, böylece şablonun her cihazda nasıl görüneceğini kontrol edebilirsiniz.

Adım 5: Şablonu sayfalarınıza atayın

Artık bir şablonum olduğuna göre onu doğru sayfalara atamam gerekiyor. Bunu yaptıktan sonra her sayfa aynı şablonu gösterecek.

Tek yapmam gereken her sayfayı düzenlemek ve doğru içerik şablonunu seçmek.

Ön uçta, şimdi hangi sayfada atadıysam şablonu göreceğim.

Tek gönderiler için neden özel bir WordPress sayfa şablonuna ihtiyacınız olacak?

Normal gönderiler için şablon oluşturmanın yanı sıra, büyük olasılıkla özel gönderi türündeki gönderilerin her biri için şablonlara da ihtiyacınız olacak.

Yemek pişirme web sitem için tariflerim için özel bir yazı tipi oluşturdum. Aşağıda arka uçta tariflerimden birini görebilirsiniz. Hazırlama Süresi, Pişirme Süresi ve Tarif Resmi gibi bunun için oluşturduğum tüm özel alanlara dikkat edin.

Tariflerime henüz bir şablon atamadım. Ön uçta bir şablon olmadan tarife baktığımızda ne olduğunu görün.

Gördüğünüz gibi, özel alanların hiçbiri ön uçta görünmüyor. Tüm görebileceğiniz, gönderi başlığı ve gönderi gövdesi gibi ana gönderi içeriğidir. Bu nedenle, özel alanlar da dahil olmak üzere tüm içeriğinizi görüntülemenize izin verdiği için bir şablon tek gönderileriniz için çok önemlidir.

Aşağıda, ön uçta tariflerimden ikisini görebilirsiniz. Onlara bir şablon atadığım için artık özel alanları görebilirsiniz.

Aşağıda tariflerim için bu şablonu nasıl oluşturduğumu göstereceğim.

Adım 1: Şablonu oluşturma

Yapmam gereken ilk şey, içeriğimi ekleyeceğim şablonu oluşturmak. Bunu, WordPress arka ucundaki Araç Takımı panosundan yapabilirim.

Şablonu bu şekilde seçerek oluşturduğum tüm reçetelere şablonu otomatik olarak atıyorum. Bu nedenle, her tarife geri dönüp şablonu manuel olarak atamama gerek yok.

Adım 2: İçeriği şablona ekleme

Artık içerik şablonunda, normal gönderilerim için önceki şablonda yaptığım gibi içeriği eklemeye ve yapılandırmaya başlayabilirim.

Bir kez daha, şablonun yapısını oluşturmak için Toolset Grid bloğunu ekleyebilirim.

Artık içeriğim için bloklarımı eklemeye başlayabilirim. Örneğin tariflerimde sol sütunda bir görselim var. Gutenberg'in blok setinden Toolset'in imaj bloğunu ekleyebilirim. Dinamik içerik eklememe izin verdiği için, Toolset'in bloğun sürümüne ihtiyacım var.

Dinamik içerik, resim gibi bir öğe oluşturabileceğiniz ve her gönderi için o gönderi için doğru içeriği çizeceği anlamına gelir. Örneğin, dinamik içerik, muzlu kek tarifimin gösterileceği anlamına gelir, tahmin etmişsinizdir, bir muzlu kek. Aksi takdirde içerik durağan olur ve muzlu kek yerine şablonda oluşturduğumda eklediğim resmi görürdünüz.

Araç Takımı ve WordPress kullanarak, ne görüntüleneceğini söylemek için her blok için dinamik kaynağı seçebilirim.

Örneğin, özel alanlarımdan birini, Hazırlık Süresini eklemek için yeni bir blok oluşturdum. Bloğu ekledikten sonra, sağ taraftaki blok için kaynak olarak Hazırlık Süresi alanını seçebilirim. Bu blok aynı zamanda dinamiktir, çünkü hazırlık süresi tarif gereksinimlerine göre değişir.

Birden çok öğe eklemek için yinelenen bir alan bloğu (bir tarif için birden çok satır gibi), bir görüntü kaydırma bloğu ve bir YouTube bloğu dahil olmak üzere birçok farklı blok türü ekleyebilirsiniz.

3. Adım: Bloklarınızı şekillendirin

Normal gönderiler için ilk şablonda olduğu gibi, her bloğa stil verebilirim.

4. Adım: Şablonu farklı ekran boyutları için ayarlayın

Yine, önceki şablona benzer şekilde, farklı ekran boyutları için yapıyı ayarlayabilirim.

Adım 5: Her bir gönderinizle şablonun nasıl göründüğünü kontrol edin

Son olarak, hepsine uyup uymadığını görmek için şablonunuzda hangi tarifi görüntüleyeceğinizi de seçebilirsiniz. Gönderiler arasında geçiş yapmak için sayfanın üst kısmındaki açılır menüyü kullanın.

Hazır olduğunuzda, şablonunuzu ön uçtan kontrol edebilirsiniz.

Ve aynen böyle, tariflerim için bir şablonum var. Yepyeni bir tarif oluşturduğumda hemen şablon yapısını takip edecek.

Bugün kendi özel WordPress sayfa şablonunuzu oluşturmaya başlayın

Şimdi WordPress sayfa şablonunuzu oluşturmanın ne kadar kolay olduğunu görme sırası sizde. Tek yapmanız gereken, Araç Setini indirmek ve yazılarınız için kodlama yapmadan ne kadar hızlı bir şablon oluşturabileceğinizi görmek için belgelerine göz atmak.