Alt Tema ile Gelişmiş Özelleştirmeler Nasıl Yapılır?

Bu eğitim herkes için değil.

Takip etmek için deneyimli bir geliştirici olmanıza gerek yok, ancak WordPress ve temaların nasıl çalıştığı hakkında daha fazla bilgi edinmek için gerçek bir ilgiye ihtiyacınız var.

Biraz kodla çalışmaktan ve bazı tema dosyalarıyla ellerinizi kirletmekten korkmuyorsanız, aramıza hoş geldiniz!

Bu kılavuzda, bir alt tema kullanarak WordPress sitenizi nasıl istediğiniz gibi özelleştireceğinizi öğreneceksiniz, ancak önce…

"Çocuk teması" denen bu garip şeyi neden kullanmanız gerektiğini tam olarak ele alalım.

Neden bir çocuk teması kullanıyorsunuz?

Benden sonra tekrar et:

Bir tema dosyasını asla düzenlemeyeceğime yemin ederim.

Kodla özelleştirme yapmakla ilgilenen yeni WordPress kullanıcıları genellikle temalarındaki dosyaları doğrudan düzenler. Bu büyük bir hayır-hayır.

Niye ya?

Bunun bir nedeni: temanızı güncellediğinizde, WordPress mevcut temanızı temanın yeni sürümüyle geçersiz kılar.

Peki bu neden önemli?

Challenger temasının 1.04 sürümünü kullandığınızı hayal edin. Menüyü header.php dosyasına taşıdınız ve style.css'ye yeni CSS eklediniz. Ardından 1.05 sürümü çıkıyor ve gösterge tablonuzda bildirimi görüyorsunuz.

v1.05'e güncelleme yaptığınızda, hem header.php hem de style.css dosyaları Challenger'ın v1.05'indekilerle değiştirilecektir. Yaptığınız düzenlemeleri içermeyecekler, bu nedenle çalışmanız kaybolacak ve geri almanın bir yolu yok. Özelleştirmelerinize saatler harcadıysanız, bu oldukça cesaret kırıcı olabilir.

Ancak, özelleştirmelerinizi bir Challenger alt temasına yerleştirirseniz, alt temada güvenli bir şekilde depolandığından, özelleştirmelerinizi kaybetmeden güvenle 1.05 sürümüne güncelleyebilirsiniz.

Gerçek bir örneğe geçtiğimizde bu biraz daha netleşecek, o yüzden şimdi devam edelim ve bir çocuk teması yapalım.

Bir çocuk teması nasıl oluşturulur

Burada tüm kodun nasıl çalıştığını ayrıntılı olarak açıklamayacak olsam da, başlamak için ihtiyacınız olan temel fikirler ve parçalar bunlar.

Temel kurulum

Masaüstünüzde boş bir klasör oluşturarak başlayın. Adını istediğiniz gibi verebilirsiniz, ancak standart adlandırma kuralı, temanın adını küçük harf ve ardından "alt" olarak kullanmak ve boşlukları kısa çizgi ile değiştirmektir.

Örneğin, Challenger teması için bir alt temanın klasör adı "challenger-child" olacaktır. Bu klasör, alt temanın tüm dosyalarını içerecektir.

Teknik olarak geçerli bir alt tema oluşturmak için yalnızca bir dosyaya ihtiyacınız var, style.css.

style.css dosyasını oluşturun

Seçtiğiniz kod düzenleyiciyi kullanarak alt tema klasörü içinde yeni bir dosya oluşturun ve ona style.css adını verin.

style.css dosyası, elbette, sitenizi özelleştirmek için tüm CSS'nizi ekleyeceğiniz yerdir. WordPress'in alt temanızı geçerli bir tema olarak tanıması için style.css'nin en üstüne bunun gibi bir stil sayfası başlığı eklemeniz gerekir:

 /*
 Tema Adı: Meydan Okuyan Çocuk
 Şablon: meydan okuyucu
 Yazar: Yarışma Temaları
 Sürüm: 1.0
 Yazar URI'si: https://www.competethemes.com
 Açıklama: Bu, Challenger WordPress temasını özelleştirmek için kullanılan bir alt temadır.
 Lisans: GNU Genel Kamu Lisansı v2 veya üstü
 Lisans URI'si: http://www.gnu.org/licenses/gpl-2.0.html
*/

Bu tam başlığı kopyalayabilir ve kendi alt temalarınız için kullanabilirsiniz. Özelleştirdiğiniz tema ne olursa olsun, temanın adını değiştirin.

En önemli kısım, ana temanın adına ayarlanması gereken “Şablon” değeridir. Özellikle, ana temayı içeren klasör için kullanılan ad.

Bu yerindeyken, alt temayı Görünüm menüsü aracılığıyla zaten etkinleştirebilir ve kullanabilirsiniz. Ancak, siteniz tamamen stilsiz olacak!

Bir alt tema etkinleştirildiğinde, WordPress artık ana temanın style.css dosyasını yüklemeyecek ve bunun yerine alt temanızın bunu yapmasına bağlı olacaktır.

Her iki stil sayfasını da nasıl yükleyeceğiniz aşağıda açıklanmıştır…

Functions.php dosyasını oluşturun

Kod düzenleyicinizde, alt temada ikinci bir dosya oluşturun ve bunu function.php olarak adlandırın.

Ardından, dosyaya aşağıdaki kodu ekleyin:

 <?php 
function my_theme_enqueue_styles() { 
  $ebeveyn_; 
  wp_enqueue_style( $parent_style, get_template_directory_uri() .'/style.css'); 
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version')
  );
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

Bu işlev, WordPress'e ana temanın style.css dosyasını yüklemesini ve ardından alt temanın style.css dosyasını yüklemesini söyler. Alt temanın stil sayfasını sonradan yüklemek, ana temanın CSS seçicilerini geçersiz kılmayı kolaylaştırır.

Daha önce de belirttiğim gibi, bu kodu satır satır ele almayacağım, ancak bu snippet'in daha ayrıntılı bir açıklamasını WordPress Codex'te bulabilirsiniz.

Yeni çocuk temanızla özelleştirme

Çalışan bir çocuk teması oluşturmak için yapmanız gereken tek şey bu!

Alt tema kurulumuyla, sitenizi onunla özelleştirmenin üç yolu vardır.

Stilleri ekle ve geçersiz kıl

Alt temanın style.css dosyasına istediğiniz kadar yeni CSS ekleyebilirsiniz.

CSS'nizde kullanılacak seçicileri bulurken ana temanın style.css dosyasını kontrol etmeyin. Tüm temalarımız bir "CSS ön işlemcisi" kullanır, bu nedenle o dosyaya bakmayız bile! Bunun yerine, CSS seçicileri bulmak için bu daha akıllı süreci takip edin ve sitenizi özelleştirme konusunda çok daha başarılı olacağınızı düşünüyorum.

Fonksiyonları geçersiz kıl

İyi kodlanmış bir ana temayla, function.php dosyasında bulunan herhangi bir işlevi geçersiz kılabilirsiniz.

Örneğin, Mission News'deki her işlev bir function_exists() denetimiyle sarılır. Bu, işlevi alt temanızın functions.php dosyasına kopyalayabileceğiniz anlamına gelir. Daha sonra oradaki fonksiyonda istediğiniz düzenlemeleri yapabilirsiniz.

Şablonları geçersiz kıl

Alt tema gerektiren yaygın bir özelleştirme, öğelerin yeniden sıralanmasıdır. Örneğin, gönderi başlığını Öne Çıkan Görselin önüne değil arkasına taşımak isteyebilirsiniz.

Ana temada bulunan şablon dosyalarından herhangi birini alabilir ve bir kopyasını alt temanıza yerleştirebilirsiniz. Bunun yerine alt temadaki sürüm yüklenecektir. Bu, sitenin herhangi bir bölümünde istediğiniz öğeleri eklemenize, yeniden sıralamanıza ve kaldırmanıza olanak tanır.

Alt temayı yükleme

Düzenlemelerinizden memnun kaldığınızda, alt temayı sitenize yükleyebilirsiniz.

Alt temalar, normal WordPress temaları gibi yüklenebilir, bu nedenle sitenizde etkinleştirilmeleri yalnızca bir veya iki dakika sürer. Alt temanızın yüklenmesini sağlamak için bu eğiticiyi takip edin:

WordPress Alt Teması Nasıl Kurulur

Hangi araçları kullanmalıyım?

Tüm bunlarda tamamen yeniyseniz, işte size yardımcı olacak birkaç ücretsiz araç.

İlk olarak, bir kod düzenleyiciniz yoksa Visual Studio Code'a bakın. Bu basit ama esnek. Aynı zamanda tamamen ücretsizdir ve onunla birlikte birçok profesyonel yazılım yapılmıştır. Burada, Rekabet Temaları'nda tema oluşturmak için kullandığım şey.

İkincisi, yerel bir WordPress sitesi (çevrimdışı) oluşturmak, gerçek canlı web sitenizi etkilemeden kodu denemenin harika bir yoludur. Geçmişte MAMP kullanıp tavsiye etsem de, Local by Flywheel çok kolay ve kullanımı basit onu seviyorum. Tema geliştirme için kullandığım şey bu ve aynı zamanda ücretsiz.

Güncellemeleriniz güvende

Daha önceki örneğe dönersek…

Challenger temasını (veya herhangi bir temayı) güncellerken, "zorlayıcı" dizinin tamamı değiştirilir, bu da alt temayı etkilemez çünkü artık "challenger-child" klasöründe kendi dizini vardır.

Alt temanız yerindeyken, istediğiniz özelleştirmeleri güvenle yapabilir ve ana temanızı güncel tutabilirsiniz.

CSS ve PHP'de yeniyseniz, özelleştirmelerinizi istediğiniz şekilde elde etmeniz biraz zaman alabilir, ancak bir alt tema ile çalışmak için harika bir temeliniz olur. Kullanılacak CSS seçicileri bulmak için bu adımları izlemeyi unutmayın; yaptığınız herhangi bir stil özelleştirmesi oldukça basit olacaktır.