WordPress'te Alt Tema Nasıl Oluşturulur (Adım Adım)

WordPress temanızı, yalnızca temanın kendisinde yaptığınız tüm özel değişikliklerin kaybolduğunu bulmak için güncellediniz mi? Bir WordPress Child teması, bu sorundan kaçınmanın çözümüdür ve bu makalede size tam olarak nasıl oluşturulacağını göstereceğiz.

Haydi gidelim!

WordPress Çocuk Teması Nedir?

Bir WordPress alt teması, WordPress tema dizininde bulunabilecekler gibi tam bir tema olarak kabul edilmez. Bunun yerine, etkinleştirilebilmesi ve düzgün çalışabilmesi için tamamen başka bir temaya (Ana Tema denir) bağlıdır.

Etkinleştirildiğinde, ana tema dosyalarında herhangi bir değişiklik yapmadan ana temasının tüm işlevlerini, özelliklerini ve kodunu devralır.

WordPress, alt temanın klasöründen sunulacak olan alt tema tarafından geçersiz kılınan kısımlar dışında ana temanın kodunu sunacaktır. Bunun sonucu, ana tema güncellendiğinde, alt temada yapılan herhangi bir değişiklik/ekleme vb.'nin kaybolmadığı anlamına gelir.

Alt tema oluşturma (Adım Adım)

Devam etmeden önce şunlardan emin olun:

• Bir FTP istemcisi (WinSCP veya Filezilla gibi) aracılığıyla web sitenizin dosyalarına erişebilirsiniz.
• Kullanılabilir bir metin düzenleyiciniz var (notepad++ gibi).

Başlamak için, Ana Tema olarak da adlandırılan varsayılan bir temayı etkinleştireceğiz. Bu örnekte bu, Yirmi Yirmi teması olacak. Web sitemizin ön ucuna gidersek şöyle bir şey görürüz:

Şimdi bir 'Yirmi Yirmi' alt teması oluşturup etkinleştirelim.

Dizini Ekle

Öncelikle /wp-content/themes içinde yeni bir 'twentytwenty-child'' dizini oluşturmalıyız. Boşluk veya noktalama kullanmadığınız sürece alt klasöre istediğiniz şekilde adlandırılabileceğini unutmayın.

style.css dosyasını ekleyin

Ardından, bir style.css dosyası oluşturmalı ve uygun tema başlıklarını eklemeliyiz. Devam etmeden önce ana temanın style.css dosyasına bir göz atalım.

Bakalım bu bilgiler admin alanında nereye yansımış.

İlk olarak Görünüm > Temalar kısmından tema detaylarını açın ve sağdaki sütuna yakından bakın.

Bunu stil sayfasıyla karşılaştırırsak, bu bilginin çeşitli öğelerinin nereden alındığını göreceğiz.

Bu bilgilerin bir kısmını alt tema stil sayfamıza eklemeye başlamamız gerekiyor. Başlık olarak eklenmesi gereken minimum bilgi 'Tema Adı' ve 'Şablon'dur.

 /* Theme Name: Twenty Twenty - Child Template: twentytwenty */

• Tema Adı: WordPress'in arka ucunda görüntülenecek olan Alt Temanızın istenen adı.
• Şablon: Bu, ana temanın dizin adıyla aynı olmalıdır. Alt tema için en önemli başlıktır, çünkü WordPress'e hangi temanın ebeveyn olduğunu söyler ve böylece bağımlılığı tanımlar. Onsuz, çocuk temanız çalışmaz.

Alt tema etkinleştirildiğinde, arka uçta göreceğiniz şey şudur:

Ayrıca aşağıdaki isteğe bağlı bilgileri de girebilirsiniz:

• Sürüm (temanın sürümü)
• En azından gerektirir (temanın düzgün çalışması için gereken minimum WP sürümü)
• PHP gerektirir (temanın düzgün çalışması için minimum WP PHP sürümü)
• Açıklama (temayla ilgili ayrıntılar)
• Etiketler(temanın etiketleri)
• Yazar(Temanın geliştiricisinin adı)
• vb.

Bu noktada, web sitenizin ön ucunu açarsanız, bozuk olduğunu ve şöyle göründüğünü görebilirsiniz:

WordPress'in şu anda başvurduğu stil sayfası (style.css) artık alt temadan olduğundan ve bu stil sayfası boş olduğundan, yukarıda girdiğiniz bilgileri engellediğinden bu tamamen normaldir. Kendi stilinizi sıfırdan başlatabilir veya ana temanın stilini yükleyip oradan başlayabilirsiniz. Ana tema stil sayfasını içe aktarmak istiyorsanız, bunu iki yoldan biriyle yapabilirsiniz.

Birinci Seçenek: Ana Stil sayfasını Klasik Yolla içe aktarın

Tek yapmanız gereken, bu satırı alt temanızın style.css dosyasına eklemek:

 @import url('../twentytwenty/style.css');

Bu komut, WordPress'e orijinal CSS dosyasını almak için nereye bakacağını söyler. Şimdi ana sayfanızı yenilerseniz normale dönmüş gibi görünüyor. Şimdi style.css dosyasına ne eklerseniz ekleyin, içe aktarılan ana stili geçersiz kılacaktır. Örneğin, “Merhaba dünya!” h2 başlığı için farklı bir yazı tipi boyutu eklemeyi deneyin.

Sayfayı yenileyin ve geliştirici sekmelerinin öğe denetçisine bakın.

Eklenen değerin sayıldığını ve varsayılanın (ana stil) “font-size: 6.4rem;” olduğunu fark edeceksiniz. geçersiz kılındı.

Ancak göz önünde bulundurmanız gereken, dosyalar paralel değil de birbiri ardına yüklenmeye zorlandığından bu yöntemi kullanmanın sitenizin hızı üzerinde olumsuz bir etkisi vardır. Daha spesifik olarak, tarayıcının ikinci dosyayı indirmesi gerektiği "bilgilendirilmeden" önce ilk dosyayı indirmesi, ayrıştırması ve yürütmesi gerekir.

Bu nedenle, ana style.css dosyasının bu şekilde içe aktarılması artık önerilmemektedir.

İkinci Seçenek: Ana Stil Sayfasını Doğru Şekilde İçe Aktarın

Ana style.css dosyasını 'doğru yoldan' içe aktarmak için, alt temanızın klasörünün içine boş bir functions.php dosyası eklememiz gerekiyor.

Bunu yaptıktan sonra, düzenleyicinizle açın ve bir açılış PHP etiketi (<?php) ekleyin, ardından aşağıdaki PHP kodunu ekleyebilirsiniz:

 function twentytwenty_scripts() { wp_enqueue_style('parent-theme-style', get_template_directory_uri() . '/style.css'); } add_action('wp_enqueue_scripts', twentytwenty_scripts);

Tarayıcınızın geliştirici araçlarını şimdi kontrol ederseniz, sonuçların yukarıdaki Birinci Seçenek'te özetlenen 'geleneksel' yöntemle aynı olduğunu fark edeceksiniz, ancak şimdi çok daha hızlı.

PHP koduyla ilgili bazı ek notlar:

• 'parent-theme-style' tanıtıcı adıdır ve benzersiz olmalıdır
• get_template_directory_uri() . '/style.css' get_template_directory_uri() . '/style.css' WordPress'e üst style.css konumunun kaynak konumunu söyler
• get_template_directory_uri() , ana temamız için şablon dizin URI'sini alır. Bizim durumumuzda 'http://mywebsite.onpressidium.com/wp-content/themes/twentytwenty' çıktısı veriyor.

Alt Temanıza İşlevsellik Katın

Artık bir Alt Tema oluşturdunuz, bazı ek işlevler eklemeye başlayabilirsiniz. İlk önce, alt temanızdaki functions.php dosyasını nasıl düzenleyeceğinizi ve bunun pratikte nasıl çalıştığını görelim.

Alt Tema function.php

style.css dosyasının aksine, alt temaya functions.php eklediğinizde, ana temanın functions.php kodu çalışmaya devam eder. Çocuğun functions.php dosyasına ne eklerseniz, ebeveynin functions.php içeriğine ek olarak yürütülür.

Örneğin, gönderiler görünümü için “Devamını Oku” Metnini nasıl değiştirebileceğimizi görelim:

Birinci Adım: Bir test gönderisi kategorisi oluşturun:

İkinci Adım: Bu kategori altında iki yeni gönderi oluşturun. Biraz örnek içerik ekleyelim. Bu noktada, kategori sayfasını ziyaret ederseniz şunu göreceksiniz:

Bu örnekte, tüm gönderiyi yükleyen düğmede görüntülenen 'Okumaya Devam Et' metnini değiştirmek istiyoruz.

Bu metnin nasıl görüntülendiğini anlamak için biraz geriye gidelim. WordPress'te belirli bir işlevi değiştirmek için filtreler kullanırız.

Bu örnekte, istediğimizi elde etmek için, wp-includes/post-template.php çekirdek dosyasında 369. satırda tanıtılan 'the_content_more_link' filtresini şu şekilde özelleştirmemiz gerekiyor:

 $output .= apply_filters( 'the_content_more_link', ' <a href="' . get_permalink( $_post ) . "#more-{$_post->ID}\" class=\"more-link\">$more_link_text</a>", $more_link_text );

Bu, şu anda function.php dosyasındaki (satır 571) yirmi yirmi ana tema tarafından bu kod parçası tarafından geçersiz kılınmıştır:

 function twentytwenty_read_more_tag( $html ) { return preg_replace( '/<a(.*)>(.*)<\/a>/iU', sprintf( '<div class="read-more-button-wrap"><a$1><span class="faux-button">$2</span> <span class="screen-reader-text">"%1$s"</span></a></div>', get_the_title( get_the_ID() ) ), $html ); } add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );

Bu nedenle, düğmedeki 'Okumaya Devam Et' metnini değiştirmek isterseniz, bu kod parçasını eklerseniz, alt temanızın functions.php dosyasında bu geçersiz kılınabilir:

 function modify_read_more_link() { return '<a class="more-link" href="' . get_permalink() . '">My Custom Read More text</a>'; } add_filter( 'the_content_more_link', 'modify_read_more_link' );

''the_content_more_link'' kancası bu dosyalar arasında yaygındır, bu durumda çocuğun kancası her zaman geçerli olur.

Ardından sayfayı yenileyin ve işte:

PHP Şablonları Nasıl Özelleştirilir

Yukarıdaki ekran görüntüsü, yazı kategorisi görünümü için yirmi yirmi tema şablonunun içeriğini gösterir. Peki, alt temayı kullanarak tasarımını nasıl değiştirebilir veya bilgi ekleyebilir/kaldırabiliriz?

Bunu şu şekilde yapabilirsiniz:

1. İlgili php dosyasını bulun
2. Uygun dosyayı alt tema klasörüne kopyalayın ve düzenleyin
3. Uygun gördüğünüz gibi özelleştirin

Buradaki ilk ve en yaygın sorun, düzenlemek istediğimiz çıktıyı hangi php dosyasının içerdiğini bulmamız gerektiğidir. Bu konuda yolunuzu bulmanıza kesinlikle yardımcı olacak bir şey WordPress şablon hiyerarşisidir.

Özetle, bir WordPress temasının gerçekten ihtiyaç duyduğu tek dosya index.php ve style.css dosyalarıdır. Fazladan dosya ve klasörler aslında index.php içinden çağrılan dosyalardır. Bunlar, sonunda index.php dosyasının çıktısı olarak göreceğiniz şeyin parçalarıdır.

Twenty Twenty temasıyla ilgili olarak, onun index.php dosyasını görüntülersek, 79. satırda, içerik bir veya daha fazla gönderi olduğunda, template-parts/ dizinindeki php dosyalarının kullanıldığını görebiliriz.

 if ( have_posts() ) { $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

Bizim durumumuzda, template-parts temasının alt klasörünün içinden content.ph p dosyasını kopyalamamız gerekecek.

Ayrıca, yalnızca özelleştirmeyi planladığınız PHP dosyalarını kopyaladığınızdan emin olun. Her PHP dosyasını ana temaya kopyalamayın.

NOT: Değişikliklerin ön uca yansıması için alt temada klasör yapısı aynı olmalıdır.

Bu yüzden önce 'template-parts' alt klasörünü oluşturuyoruz ve buna content.php bir kopyasını koyuyoruz.

Artık dosyayı düzenleyicinizde açabilir ve özelleştirebilirsiniz.

Her şeyin yolunda gittiğinden emin olmak için ilk başta önemsiz bir şeyi değiştirmeyi deneyin, örneğin, bir div sınıfını değiştirin ve sonuçları kontrol etmek için ön ucunuzu yenileyin.

Gönderi Kategorisi Şablonunu Özelleştirin

'Test kategorisi' kategorisi altında zaten iki yazımız var. Artık bir "Kategori Gönder" öğe menüsü oluşturabilir ve bunu "test kategorisine" bağlayabilirsiniz. Yeni menü öğesini tıklarsanız, kategori sonrası görüntüleme sayfasını görmelisiniz.

Artık content.php dosyasını daha fazla değiştirebilir ve yazı kategorisi görünümünü kendi stilinize göre değiştirebilirsiniz. İpucu olarak, 23. satırdaki gibi ekstra dahil edilen dosyaların referanslarını bulun:

 get_template_part( 'template-parts/featured-image' );

Bu, öne çıkan görüntünün çıktısını veren dosyanın template-parts/featured-image.php olduğu anlamına gelir.

Böylece dosyayı alt tema dizininize kopyalayabilir ve düzenleyebilirsiniz. Harika!

Çözüm

Alt tema, kullanıcıların ana temayı güncelleme yeteneğini kaybetmeden ana temanın düzenini, stilini ve işlevselliğini değiştirmesine olanak tanır. Sıklıkla, web tasarımcıları web sitelerinin temasını güncelleme konusunda isteksizdirler çünkü bunu yaparlarsa doğrudan ana temada yapılan değişiklikleri kaybederler. Bu, eklentileriniz ve WordPress çekirdeğiniz kadar temanızı güncel tutmak kadar önemli olduğu için ciddi bir sorundur. Bir alt tema ile çalışmak en başından bu sorunu ortadan kaldırır ve temada bir bütün olarak yaptığınız tüm düzenlemelerin üzerine yazma korkusu olmadan ana temayı gerektiği gibi güncellemenize olanak tanır.