Wordpress Child Theme Nedir Nasıl Yapılır?

Merhabalar, bu yazımda Wordpress Child Theme Nedir Nasıl Yapılır? konusuna bakacağız. Türkçesi çocuk teması ama alt tema da diyebiliriz. WordPress alt teması, WordPress temanızın kodunu özelleştirmeniz için size güvenli bir yol sunar . Temanızın CSS, HTML veya PHP’sinde doğrudan düzenleme yapmak istiyorsanız mutlaka bir WordPress alt teması kullanmalısınız. Aksi halde temanızı bir sonraki güncellemenizde değişikliklerinizi kaybedebilirsiniz.

Wordpress Child Theme Nedir Nasıl Yapılır?

index.php ve style.css dosyaları (sırasıyla ana şablon ve stil dosyaları) gerekli olan tek şablon dosyalarıdır. Ancak çoğu tema aynı zamanda PHP dosyalarını, yerelleştirme dosyalarını, grafikleri, JavaScript’i ve/veya metin dosyalarını da içerebilir. Alt temalar hariç tüm temalar ana temalar olarak kabul edilir. Çocuk temasının ne olduğuna ve WordPress site sahiplerine sunduğu avantajlara daha yakından bakalım.

Alt temada değişiklik yaptığınızda bunlar ana temanın dosyalarından ayrı tutulur. Yani ana temaya müdahele etmemiş olursunuz. Dahası, alt temada yapacağınız değişiklikler ana temadaki davranışa göre öncelikli olacaktır. Bir alt temanın kendi başına çalışmayacağını unutmamak önemlidir. Ana temanın yanına kurulmalıdır. Bir alt tema yüklediğinizde, WordPress kontrol panelinde bunun ana temaya bağlı olduğunu görebileceksiniz.

Çocuk Teması Oluşturmanın Faydaları

Bir alt tema oluşturmak, özelleştirmelerinizi kaybetmeden ana temayı değiştirmenize olanak tanır. Alt tema olmasaydı, değişiklik yapmak istediğinizde doğrudan ana temanın dosyalarını değiştirmeniz gerekirdi. Bu, ana temayı her güncellediğinizde tüm değişikliklerin üzerine yazılacağı anlamına gelir.

Sonuç olarak imkansız bir seçimle karşı karşıya kalacaksınız. Uyumluluk ve güvenlik sorunlarına neden olabilecek temanızdaki tüm güncellemeleri göz ardı edebilirsiniz. Veya özelleştirmelerinizi güncelleyebilir ve onları oluşturmak için harcadığınız zamanla birlikte kaybedebilirsiniz.

Bir alt tema oluşturmanın ve özelleştirmenin diğer iki faydası birincisiyle ilgilidir.

• Bu değişiklikleri temanızdan ayrı bir klasörde tutmak, bunların çoğaltılmasını veya bir siteden diğerine taşınmasını kolaylaştırır.
• Düşük riskli bir ortamda tema geliştirme hakkında bilgi edinmeye ve bununla uğraşmaya başlayabilirsiniz. Alt temanızı özelleştirmeye başladığınızda bir şeyler ters giderse veya memnun kalmazsanız alt temayı devre dışı bırakabilirsiniz. Bu, ana temayı ve web sitenizi olduğu gibi geri yükleyecektir.

Artık bir alt tema oluşturmak ve özelleştirmek için ideal kullanım örneklerini anladığınıza göre, süreci inceleyelim.

WordPress’te Çocuk Teması Nasıl Oluşturulur

WordPress’te bir alt tema oluşturmak yalnızca birkaç adım alır. Aşağıda her birini derinlemesine ele alacağım. Bu demo örnek olarak varsayılan WordPress teması Twenty Twenty-One’ı kullanacağım , ancak temel adımlar herhangi bir WordPress teması için geçerli olacaktır.

Genel olarak temel bir alt tema oluşturmak için yalnızca iki dosyaya ihtiyacınız vardır:

1. style.css
2. functions.php
3. screenshot.png / screenshot.jgp (Opsiyonel)

Bu bölümde size WordPress’te manuel olarak nasıl alt tema oluşturulacağını göstereceğim. Ancak biraz zaman kazanmak istiyorsanız süreci otomatikleştirecek bazı araçlar/stratejiler de vardır. Mesela bunu yapan bir kaç eklenti var. Bu diğer yöntemlerden birini kullansanız bile manuel yöntemi okumak yine de faydalıdır çünkü alt temaların nasıl çalıştığını daha iyi anlamanıza yardımcı olacaktır.

Adım 1: Bir alt tema klasörü oluşturun.

Öncelikle alt temanızın tüm şablon dosyalarını ve varlıklarını yerleştirebileceğiniz bir klasör oluşturmak isteyeceksiniz.

Şimdilik bu klasörü bilgisayarınızda oluşturabilirsiniz. Bu eğitimin ilerleyen kısımlarında, dosyaları bir Zip klasörüne ekleyip WordPress kontrol paneliniz aracılığıyla yükleyerek sitenize alt temayı nasıl yükleyeceğinizi öğreneceksiniz.

NOT: *.zip olmasına dikkat edin.

Bu klasörü ana temanın klasör adını kullanarak adlandırın ve sonuna “-child” ekleyin. Yani Twenty Twenty-One’in bir alt temasını oluşturuyorsanız, klasöre “twentytwentyone-child” adını verirsiniz.

Adım 2: Alt temanız için bir stil sayfası oluşturun.

Daha sonra, alt tema klasörünüzün içinde, alt temanız için tüm CSS kurallarını ve bildirimlerini içerecek olan “style.css” dosyasını oluşturmanız gerekecektir. Bu dosya aynı zamanda WordPress’e hangi ana temanın kullanılacağını söylemek için kullandığınız dosyadır, dolayısıyla oldukça önemlidir. 

NOT: “style.css” ciddi anlamda çok önemlidir. Düzgün ayarlanmamış bir style.css tema yükleme esnasında hatalara sebep olacaktır ve tema kurulmayacaktır.

En önemlisi, stil sayfasının gerçekten çalışması için dosyanın en üstüne gerekli bir başlık yorumunu eklemeniz gerekecek. Bu yorum, belirli bir ana temaya sahip bir alt tema olması da dahil olmak üzere, alt tema hakkında temel bilgileri içerir.

Gerçekten yalnızca iki öğeyi eklemeniz gerekir:

1. Tema Adı . Bu, çocuk temanızın adıdır. Bu, sitenizin adı veya “[tema adı] Child” gibi bir şey olabilir. Örneğimiz için bunu “MB Twenty Twenty-One” yapacağız.
2. Şablon. Bu, ana temanızı içeren dizinin adıdır. Alt temayı ana temaya bağlayan şeyin büyük bir kısmı budur. Yirmi Yirmi Bir teması için bu “Twenty Twenty-One”dir. Diğer temalar için bu genellikle tema adı olacaktır ancak tekrar kontrol etmek isteyebilirsiniz. Bunu wp-content/themes klasörüne bakarak veya temanızı indirip Zip dosyasını açarak yapabilirsiniz .

Yine, çocuk temanızın çalışması için yukarıdaki iki öğe %100 gereklidir.

Ancak açıklama, yazar adı, sürüm ve etiketler dahil diğer bilgileri eklemekte özgürsünüz. Bunlar, alt temanızın Görünüm > Temalar kontrol panelinde nasıl görüntüleneceğini etkiler ve ayrıca alt temanızı yayınlayacak veya satacaksanız da yararlı olabilirler.

Bir sürüm numarası da eklemenizi öneririz çünkü bu, temanızın stil sayfalarını sıraya koymayı kolaylaştıracaktır.

Twenty Twenty-One alt teması için tam başlık yorumuna bir örnek:

/*
Theme Name: MB Twenty Twenty-One
Theme URI: https://example.com/twenty-twenty-one-child/
Description: Twenty Twenty-One Child Theme
Author: Mustafa BÜKÜLMEZ
Author URI: https://example.com
Template: twentytwentyone
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-column, responsive-layout
Text Domain: twentytwentyonechild
*/

Eğik çizgilere ve yıldız işaretlerine dikkat edin. Bunlar, bu kodun CSS’de “yorum satırı” olarak görecektir, dolayısıyla WordPress’in onu çalıştırmaya çalışmadığını gösterir. Daha sonra alt temanızı özelleştirmeye hazır olduğunuzda özel CSS ekleyebilirsiniz. Şimdilik Kaydet’e tıklayın, böylece bu stil sayfası alt temanızın dizinine kaydedilecektir.

Adım 3: Ana ve alt temaların stil sayfalarını sıraya alın.

Şimdi ebeveyn ve alt temalarınızın stil sayfalarını sıraya koymanın zamanı geldi. Bu iki şeyi sağlayacaktır:

1. Alt temanın ana temanın stilini devralması. Yani, çocuk temanızı etkinleştirdiğinizde yalnızca bir sürü biçimsiz metne bakmıyorsunuz.
2. Alt temanın stil sayfasının, ana temanın stil sayfasının onu geçersiz kılmadan önce yüklenmesi. Bu şekilde, özel CSS eklediğinizde ve alt temanızı başka şekilde değiştirdiğinizde, bu değişiklikler ana temanın belirli stillerini ve işlevlerini artıracak veya değiştirecektir.

Maalesef bu adım biraz daha yanıltıcı olabilir çünkü kullanmanız gereken kod kısmen ana temanızın nasıl kodlandığına bağlı olacaktır.

Çoğu tema için bu kodu kullanabilmeniz gerekir:

<?php
add_action( 'wp_enqueue_scripts', 'hubspot_blog_theme_enqueue_styles' );
function hubspot_blog_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

Ancak bu kod çalışmıyorsa temanız farklı şekilde kodlanmış olabilir veya WordPress kod kurallarına uymuyor olabilir. Bu durumda WordPress Kodeksine başvurabilir veya bu yazının ilerleyen kısımlarında paylaşacağımız diğer yöntemlerden birini deneyebilirsiniz.

Adım 4: Alt temanızı kurun ve etkinleştirin.

Gerekli iki dosyayı (style.css ve functions.php) oluşturduğunuzda, temel bir alt tema için ihtiyacınız olan her şeye sahip olursunuz.

Alt temayı WordPress kontrol paneliniz aracılığıyla yükleyebileceğiniz bir dosyaya paketlemek için alt tema klasörünü Zip dosyası olarak sıkıştırmanız gerekir. Hem Windows hem de macOS’ta, yerel bilgisayarınızdaki klasöre sağ tıklayıp Zip dosyası olarak sıkıştırma seçeneğini seçerek bunu yapabilmeniz gerekir. Artık bu Zip dosyasını tıpkı diğer WordPress temalarında olduğu gibi yükleyebilirsiniz.

Dosyayı yüklemek için WordPress kontrol panelinize gidin ve Görünüm > Temalar > Tema Yükle seçeneğine tıklayın . Ardından, yeni oluşturduğunuz Zip dosyasını seçmek için dosya seçiciyi kullanın ve Şimdi Yükle’yi tıklayın .

Yükledikten sonra, WordPress’ten size bir ana tema gerektirdiğini söyleyen ve ana temanın yüklendiğini onaylayan bir mesaj görmelisiniz.

Her şey yolunda görünüyorsa Etkinleştir düğmesine tıklayın.

Not: Temanız için görünen küçük resmi kontrol etmek için alt temanın klasörüne screenshot.jpg veya screenshot.png adlı bir resmi yükleyebilirsiniz . Bu tamamen isteğe bağlıdır; bu sadece kontrol panelinizin daha güzel görünmesini sağlar. Örnek aşağıdadır.

Ancak şu anda tek sorun, alt temanızın tam olarak ana temanıza benzemesidir. Artık temanıza eklemeniz gereken php kodlarını, çocuk temanın funcitons.php dosyasına eklersiniz. Eklenecek bir css’, yine çocuk temanın sytle.css dosyasına eklersiniz. Böyle ana temanızın kodlarına dokunmadan işlerinizi çözersiniz.

Burada bir tüyo vereyim. Özel bir tema dosyasını düzenlemek istiyorsanız, düzenlemek istediğiniz dosyanın tam yoluna uyacak şekilde çocuk temanıza yol ekleyin ve dosyayı oluşturun. Mesela single.php dosyasında kod düzenlemesi yapmak istiyorsunuz. Ana temanın single.php dosyasını kopyalayın ve çocuk temanıza alın. Kod düzenlemelerini yapın ve tekrar zip dosyası yapıp yükleyin. Mesela şöyle;

görselde görebildiğiniz gibi sitenin ön yüzünde “Next Post” olarak görülecek labele bla bla bla eklemek istedim.

gördüğünüz gibi yaptığım eklemeler gön yüzde görünmektedir. Bu değişiklikleri child theme dosyası içerisinde yaptığımızı unutmayın. Ana temaya asla dokunmadık.

Wordpress Child Theme Nedir Nasıl Yapılır? yazımda bu kadardı arkadaşlar. Diğer yazılarda görüşmek üzere. Aşağıdaki bağlantılara tıklamayı unutmayın. :D

PHP Dersleri için başlattığım repoya bağlantıya tıklayarak ulaşabilirsiniz. Tüm PHP yazılarım için tıklayabilirsiniz.

Discord sunucuma katılmayı unutmayın. :D Diğer tüm bağlantılar için Linktree…

Kodla kalın. :)