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

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

Bir şablon, sayfaların ve gönderilerin ön uçta nasıl görüneceğini tanımlar. Her gönderideki tüm içeriği nasıl ve nerede görüntüleyeceğinizi söyleyen plandır. Ö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?

Şablon, benzer sayfaların aynı yapıyı izlemesini sağlamanın kolay bir yoludur. 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ının yer aldığı çok sayıda 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 yerine (ki bu çok zaman alır) sadece bir kez şablon oluşturup, ş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österdiğinden emin olmak 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 için özel yazı tipi 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ı eklemeye başlayabilirsiniz.

İlk olarak, şablonun yapısını düzenliyorum. Aşağıda, Şablonumu bölümlere ayırmama izin veren Toolset'in kendi ı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ı yerleştirmem gerekiyor. Sol tarafta, yazı 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 bloklara stil verebilirsiniz. “Zor yoldan” bloklar oluşturmayı seçtiyseniz, 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 dizi seçenek göreceksiniz.

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

• Yazı tipi
• Yazı Boyutu
• aralık
• 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üleyemeyebileceğini unutmamak önemlidir. Aslında, 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 olacaktır.

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. Aslında, tüm görebileceğiniz, yazı başlığı ve yazı gövdesi gibi ana yazı 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.

2. Adım: İç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 görüntü 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 gönderilerin her biri için söz konusu 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 statik olurdu ve muzlu kek yerine şablonda oluşturduğumda eklediğim resmi görürdünüz.

Araç Takımı ve WordPress'i kullanarak, ne görüntüleneceğini söylemek için bloklarımın her biri 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 reçete gereksinimlerine göre değişir.

Birden çok öğe eklemek için yinelenen bir alan bloğu (bir yemek tarifi için birden çok satır gibi), bir görüntü kaydırma bloğu, YouTube bloğu ve çok daha fazlası dahil olmak üzere ekleyebileceğiniz çok sayıda farklı blok türü vardır.

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

Normal gönderiler için ilk şablonda olduğu gibi, bloklarımın her birine 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, şablonunuzda hangi tarifi görüntüleyeceğinizi de seçebilirsiniz, böylece hepsine uyup uymadığını görebilirsiniz. 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. Artık yepyeni bir tarif oluşturduğumda şablon yapısını hemen takip edecek.

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

Şimdi kendi WordPress sayfa şablonunuzu oluşturmanın ne kadar kolay olduğunu görme sırası sizde. Tek yapmanız gereken Araç Seti'ni indirmek ve ardından 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.