WordPress'te bir blok alt teması nasıl oluşturulur

Yayınlanan: 2023-07-14

Şu senaryoyu hayal edin: Web sitenizde kullanmak için mükemmele yakın bir tema buldunuz. İyi tasarlanmış, istediğiniz düzenleri içeriyor, ancak renk paletini değiştirmek ve istemcilerin bazı alanları değiştirmesini sınırlamak istiyorsunuz. Ne yazık ki, kullandığınız tema, varsayılan renkleri veya kilit bloklarını kaldırmanıza izin vermiyor.

Temanın dosyalarını doğrudan düzenleyebilmenize rağmen, tema güncellemelerini çalıştırdığınızda tüm değişiklikleriniz kaybolacaktır. Bir kod parçacığı eklentisi kullanarak biraz özel CSS ekleyebilirsiniz, ancak bu, oturum açmış kullanıcıların kullanabileceği stil seçeneklerini değiştirmez.

Ne yapabilirsin? Global Style kullanılabilir seçeneklerini nasıl değiştirirsiniz? Bunun için bir blok çocuk temasına ihtiyacınız var.

WordPress alt teması nedir?

WordPress Developer belgelerine göre:

Alt tema, ana temanın görünümünü ve hissini ve tüm işlevlerini devralır, ancak temanın herhangi bir bölümünde değişiklik yapmak için kullanılabilir. Bu şekilde, özelleştirmeler ana temanın dosyalarından ayrı tutulur. Alt tema kullanmak, sitenizde yaptığınız özelleştirmeleri etkilemeden ana temayı yükseltmenize olanak tanır.

Bu nedenle, WordPress'te bir alt temadan yararlanmak için ana temanın da kurulu olması gerekir. Alt temanız, eklenen birkaç varyasyonla birlikte her şeyi ebeveynden devralır.

Bir çocuk teması nasıl oluşturulur?

Sitenizdeki stili özelleştirmek için bir kod seçeneğini tercih eder miydiniz? Diğer WordPress temalarını geçersiz kılmak gibi, alt tema kullanmak kodu geçersiz kılmanın en iyi yoludur. Temanız güncellendiğinde, alt tema kodunuz kalacaktır.

Bu makalede, iyi bir WordPress alt teması yapan temel bileşenleri ele alıyoruz ve derinlemesine okuma kaynakları sağlıyoruz.

1. Blok alt teması ne zaman kullanılır?

Çocuk temaları genellikle harika bir çözümdür. Bununla birlikte, yalnızca biraz CSS kodu eklemek istiyorsanız, tüm bir alt tema gereksiz olabilir. Biraz özelleştirme eklemek için Kod Parçacıkları gibi bir eklenti düşünün.

İstemci sitelerini özelleştirme

Müşteriler için siteler oluştururken, sunmak isteyebileceğiniz bazı ek özelleştirmeler vardır.

Kullanıcıların yeni bloklar ekleme, mevcut blokları taşıma veya blokları silme yeteneğini kontrol etmek istiyorsanız, blok kilitleme uygulamak isteyebilirsiniz. Blokları nasıl kilitleyeceğinizi ve daha fazlasını bu giriş eğitiminde öğrenebilirsiniz.

Tema varyasyonları oluşturma

İstemcilerin tema düzeninin hangi bölgelerini değiştirebileceğini tanımlamanın yanı sıra, tema veya WordPress ile varsayılan olarak gelenleri çıkararak ve benzersiz seçenekler ekleyerek renk paleti seçeneklerini de değiştirmek isteyebilirsiniz. Ayrıca temanızda olması gereken degradeleri ve çift ton seçeneklerini de tanımlayabilirsiniz.

2. İyi bir WordPress teması seçin

Tüm temalar aynı şekilde oluşturulmaz. Tema tasarımında gördüklerinize ek olarak, bir ana tema seçmek, güncelleme sıklığı, destek kalitesi, dokümantasyon ve tema geliştiricisinin itibarı gibi ek faktörleri içerir. Bir web sitesi oluşturmak için WordPress temalarını kullanma konusunda daha fazla bilgi edinin.

3. Bir test ortamı oluşturun

Şimdiye kadar ana temayı seçtiniz, marka varlıklarını topladınız ve hangi ayarları geçersiz kılmak istediğinize karar verdiniz. Ardından, bir test ortamı oluşturmanız gerekir.

GoDaddy'nin Yönetilen WordPress Barındırma hizmeti gibi yönetilen bir WordPress barındırma sağlayıcısı kullanıyorsanız, tek tıkla hazırlama sitenizi bir geliştirme ortamı olarak kullanabilirsiniz. Barındırma için cPanel veya VPS gibi bir şey kullanıyorsanız, ayrı bir WordPress kurulumu kurabilir ve mevcut sitenizi yeni kuruluma klonlayabilir veya kopyalayabilirsiniz.

Alt temayı mevcut bir siteye uygulamıyorsanız veya sıfırdan oluşturmayı tercih ediyorsanız, ServerPress'ten MAMP veya DesktopServer gibi bir araç kullanarak bilgisayarınızda yerel bir WordPress geliştirme ortamı oluşturabilirsiniz.

4. Tema dizininizi oluşturun

Öncelikle ana temayı yüklemeniz gerekir. Ardından, bir FTP istemcisi kullanarak geliştirme ortamınıza bağlanın ve WordPress dosyalarınızın bulunduğu yere gidin.

Şu klasörü arıyorsunuz:

 /wp-içerik/temalar/

Yüklü tüm WordPress temalarınızı burada bulabilirsiniz. Her temanın, temanın tüm dosyalarını içeren kendi klasörü veya dizini vardır. Listeye alt temanızı tutacak yeni bir dizin ekleyeceksiniz. Sonunda şöyle bir şey olacak:

 /wp-content/themes/your-child-teması/

5. Tema dosyalarınızı oluşturun

Örneğimiz için, Twenty Twenty Two temasını kullandığımızı varsayacağız. Alt temanın ona geri dönmesi için o temayı yüklemiş olmanız gerekir.

Yeni alt tema dizini klasörünüzde iki yeni dosya oluşturacaksınız:

 stil.css
tema.json

Bu dosyaların her ikisi de belirli bir amaca hizmet eder. style.css dosyası, WordPress'e tema hakkında ad, yazar, etiketler ve ana tema kimliği gibi bilgiler sağlamak için kullanılır.

Theme.json dosyası, Global Stillerdeki birçok ayarı ve daha fazlasını tanımlamak için kullanılır. Geliştirici el kitabından theme.json hakkında daha fazla bilgi edinin.

Önceki Klasik temalarda, alt temalarda functions.php dosyası gerekliydi. Blok alt temaları bu adımı gerektirmez.

Stil.css

style.css dosyanızda neler var? Geliştirici belgeleri diyor ki:

Stil sayfanız, dosyanın en üstünde aşağıdaki gerekli başlık yorumunu içermelidir. Bu, WordPress'e belirli bir ebeveyni olan bir alt tema olduğu gerçeği de dahil olmak üzere tema hakkında temel bilgileri söyler.

Başlık bilgilerinizi içeren style.css dosyasına standart metni eklemeniz gerekir. Şablon Adı: üzerine oluşturduğunuz ana temanın klasör (dizin) adına karşılık gelir. Metin Etki Alanı : adı, WordPress alt temanıza özgüdür.

Aşağıda Twenty Twenty Two kullanan bir alt tema örneği verilmiştir:

 /*
Tema Adı: Yirmi Yirmi İki Çocuk
Tema URI'si: https://example.com/
Yazar: Adınız
Yazar URI'si: https://example.com/
Açıklama: Yirmi Yirmi İki Çocuk Teması
En az gerektirir: 5.8
Şuna kadar test edildi: 5.9
PHP gerektirir: 5.6
Versiyon: 0.1
Lisans: GNU Genel Kamu Lisansı v2 veya üstü
Lisans URI'si: http://www.gnu.org/licenses/gpl-2.0.html
Metin Etki Alanı: yirmitwentytwo-child
Şablon: yirmiyirmi iki
Etiketler: özel renkler, özel menü, özel logo, editör stili, öne çıkan resimler, tam site düzenleme, blok desenler

Yirmi Yirmi İki Çocuk WordPress Teması, (C) 2021 WordPress.org
Twenty Twenty-Two Child, GNU GPL koşulları altında dağıtılmaktadır.
*/

Tema.json

theme.json ile ilgili daha ayrıntılı bilgi için geliştirici belgelerine bakın. Twenty Twenty Two theme.json dosyasına bir göz atalım:

 {
 "versiyon 2,
 "ayarlar": {},
 "stil": {},
 "özel Şablonlar": {},
 "templateParts": {}
}

Bunların her birinde size sunulan başka stiller de vardır. Örneğin, stil alanında Twenty Twenty Two şunları kullanır:

 {
 "ayarlar": {
 "görünüm Araçları": doğru,
 "renk": {
 "çift ton": [
 {
 "renkler": [
 "#000000",
 "#ffffff"
 ],
 "slug": "ön plan ve arka plan",
 "name": "Ön plan ve arka plan"
}

theme.json dosyası oluşturmak için yardıma mı ihtiyacınız var? theme.json dosyanız için pek çok seçeneği oluşturan bir kılavuz için themegen.app'e bakın.

6. Blok alt temanızı özelleştirme

theme.json dosyanızı kolayca oluşturup temanıza ekleyebilecek olsanız da, yapmanız gereken birkaç seçenek daha var. Alt temalar ve hatta blok temalar, WordPress için yeni bir alandır. Bu gönderi sırasında Site Düzenleyicinin üzerinde açıkça bir beta etiketi bulunuyor. Şablon parçaları gibi alt temalarda neyin işe yarayıp neyin işe yaramadığını görmek için geri dönmek isteyeceksiniz.

Ek olarak, Global Styles ve theme.json'un henüz desteklemediği ayarlar da bulabilirsiniz. Kutu gölgeli grup bloğu kenarlığı gibi ek CSS ekliyorsanız, bunu style.css dosyanıza eklemek isteyebilirsiniz.

 .has-birincil-kenarlık-rengi {
 kutu gölgesi: .1rem .1rem .05rem #647BAF ;
}

7. Çocuğunuzun temasını test edin

Sitenizin mevcut geliştirme ortamınızda iyi göründüğünü hissettiğinizde, canlı bir siteye yüklemeden önce sitenizi test etme zamanı gelmiştir.

  • Mobil görüntü alanları gibi çeşitli tarayıcı boyutlarında test edin
  • Farklı tarayıcılarda test edin veya BrowserStack gibi bir araç kullanın
  • Erişilebilirlik standartlarını gözden geçirin. WebAim'i kullanmaya başlayın

8. Blok alt temanızı yüklemeye hazırlanın

Bir hazırlama sitesinde geliştirme yapıyorsanız, dosyalarınız tam olarak olmaları gereken yerdedir. Hazırlama sitesini hayata geçirmek için barındırma seçeneklerinizi ziyaret edebilirsiniz. Yerel bir geliştirici ortamında dosya oluşturuyorsanız, style.css ve theme.json dosyalarını tek bir zip dosyası olarak sıkıştırıp sitenize yüklemenin zamanı geldi.

Blok alt temanızı oluşturmaya ilişkin özet

  1. Bir blok çocuk temasına ihtiyacınız olduğuna karar verin
  2. Bir ana tema seçin
  3. Test ortamınızı yapılandırın
  4. Tema dizininizi oluşturun
  5. Tema dosyalarınızı oluşturun
  6. Blok alt temanızı özelleştirin
  7. Çocuğunuzun temasını test edin
  8. Bunları canlı siteye yükleyin

WordPress'teki Klasik temalar gibi, Blok temalarının da, ana tema bir güncelleme aldığında üzerine yazılmayacak özelleştirmeleri depolamak için bir yere ihtiyacı vardır. Bir blok alt teması oluşturmak, sitedeki diğer kullanıcıların kullanabileceği seçenekleri eklemenizi, kilitlemenizi ve çıkarmanızı sağlar.