WordPress Alt Teması Nasıl Oluşturulur (2021)

nasıl yapıldığını biliyor musun Bir WordPress Çocuk Teması ?

Elbette temanız web sitenize uygun görünecek ancak bazı noktalarda onları düzenlemeniz gerekecek. Alt temada değişiklik yapmak, sitenizi düzenlemek için tercih edilen bir seçimdir. Ayrıca, alt temayı öğrenmek, bilmeniz gereken temel WordPress şeylerinden biridir. WordPress hakkında bilgi edinmeye buradan başlayabilirsiniz.

Bir WordPress alt teması oluşturma sürecini gözden geçirelim.

WordPress için Neden Alt Temalar Kullanmalısınız?

WordPress'te bir alt tema, ana temanın tüm özelliklerini, işlevlerini ve diğerlerini edinir. Öte yandan, ana temayı değiştirmeden alt temayı düzenlemek mümkündür. Siteyi sizin için düzenleme süresini ve çabasını kısaltacaktır. Ayrıca, WordPress tema güncellemeleriniz daha güvenli ve daha kararlı kalır. Alt öğeyi özelleştirdiğinizde, üst öğedeki tüm değişiklikler ve özelleştirmeler aynı kalır. Kullanıcılar bu alt temayı diğer WordPress web sitelerinde de kullanabilir.

Bir Çocuk Teması Yapmadan Önce Uyarılar

Bir alt temayı WordPress yapmak için HTML ve CSS ile çalışacağınız için kodlama becerisi gereklidir. Neyin değiştirileceğini bilmek önemli ölçüde önemlidir. Ayrıca, en azından diğer kaynaklardan kod parçacıklarını kopyalayıp/yapıştırarak temel bir PHP bilgisine ihtiyacınız olacak.

Geliştirme ortamında pratik yapmanızı içtenlikle tavsiye ederiz. Burası, ana sitenizi mahvetmekten korkmadan yapabileceğiniz bir yerdir. Bir taşla 2 kuş vurmuşsunuz gibi: biri onu test alanına taşıyor, diğeri ise tema geliştirme olarak kullanılıyor.

Bir şey daha, ana tema, görünüm ve işlevleri amaçlarınıza uygun olmalıdır. Gerçekten de, ne kadar az değişiklik yaparsanız, siteniz o kadar iyi olur.

Aşağıdaki bölümlerde, WordPress create child temasının daha iyi bir gösterimi için LearnPress temasını örnek olarak kullanacağız.

İlk Çocuk Temasını Oluşturma

Alt temaları WordPress yaparken 2 seçeneğiniz var. Tüm dosyalara aşina olmak için manuel yolu kullanabilirsiniz. Aksi takdirde, bir eklenti uygulamak karmaşık dosya ve klasörlerle çalışacaktır.

Şimdi özelleştirmeye başlayacağız.

Kodu Kullanma

Başlamak için, WordPress Kurulumunda /wp-content/themes/ dosyasını açacak ve alt temanız için yeni bir klasör oluşturacaksınız. İstediğiniz gibi adlandırın.

Ardından, alt temanız için ilk 2 dosyayı oluşturmanız gerekir. Bir metin düzenleyici açın ve aşağıdaki kodu boş dokümana yapıştırın:

 1 Theme Name: LP Child Theme 2 Theme URI: https://www.wpbeginner.com/ 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild

Bilgileri planladığınız gibi değiştirebilir ve bu dosyayı son alt tema klasöründeki style.css dosyanıza kaydedebilirsiniz. Pekala, az önce alt temanın ana stil sayfasını yaptınız.

Ardından, stil sayfalarını ana temadan içe aktarmak için ^2. bir dosya oluşturacaksınız. Metin düzenleyicinizde yeni bir belge oluşturun ve şu kodu kopyalayın:

 1 /* enqueue scripts and style from parent theme */ 2 3 function learnpress_styles() { 4 wp_enqueue_style( 'child-style', get_stylesheet_uri(), 5 array( 'learn-press-style' ), wp_get_theme()->get('Version') ); 6 ( 7 add_action( 'wp_enqueue_scripts', 'learnpress_styles');

LearnPress'i ana tema olarak kullandığınızda bu kod çalışmaya başlayacaktır. Böylece, çoğu tema bu şekilde çalışacaktır. Bu dosyayı kaydedin ve alt temanızın functions.php klasörü haline gelsin.

Bu adımlardan sonra temel bir çocuk temanız olacak. “Görünüm”de “Temalar” ve “Etkinleştir”i seçin. Bu nedenle siteniz alt temayı kullanmaya başlayacaktır. Özelleştirmeniz gerekiyorsa, bir sonraki bölüme geçin.

Eklentileri Kullanma

Child Theme Configurator eklentisini kullanmanızı öneririz. Kodlama gerektirmediği için kolayca değişiklik ve özelleştirmeler yapabilirsiniz.

Öncelikle eklentiyi sitenize kurun. Eklenti kurulumu hakkında daha fazla kılavuz için burayı tıklayın.

Etkinleştirirken, "Araçlar" -> "Alt Temalar"a gidin ve ana tema soran açılır pencerede LearnPress'i seçin. Ana tema olarak uyumluluğu kontrol etmek için “Analiz Et”i seçin. Ardından, dosyaları kaydetmek için alt temanın klasörünü ve bunları nereye kaydedeceğinizi adlandırmanız gerekecektir. Varsayılan ayarda, "Alt Tema Niteliklerini Düzenlemek İçin Tıklayın"ı seçin. Ardından çocuk temasının bilgilerini yerine getireceksiniz.

Bir alt temayı manuel olarak oluştururken, alt temanız ana temadan menüleri ve araçları devralmaz. Bunu çözmek için Child Theme Configurator'ı kullanın. Son olarak, bitirmek için “Yeni Tema Çocuğu Oluştur” seçeneğini seçin. Bu adımda, alt temanız daha fazla geliştirme için function.php ve style.css'ye sahip olacaktır. Görünüşe göre, çocuk eklentinizi önizlemeyi unutmayın. Ardından, alt temanızı yayınlamak için “Etkinleştir ve Yayınla”yı seçersiniz.

Şimdi, alt temanızı özelleştirmeye başlayacağız.

WordPress Alt Temasının Özelleştirilmesi

“style.css” dosyasına kod ekleyerek ana temadan biraz farklı alt tema WordPress oluşturacağız .

Firefox/Chrome Denetçisinden Kodu Kopyalayın

Gerekli CSS kodunu keşfetmek için Chrome ve Firefox'un Inspector widget'larını kullanabilirsiniz. Ayrıca tüm sitelerin CSS ve HTML öğelerine erişmek için bu araçları kullanabilirsiniz.

Bir gönderi veya sitenin CSS dosyasını görmek için sağ tıklayın ve "İncele"yi seçin. Ekranınız 2 yarıya bölünecek ve sayfanın CSS ve HTML'sini görebilirsiniz. Fareyi HTML satırlarının üzerine getirdiğinizde, denetçi aracı sizi üst pencerede gösterecektir. Ayrıca CSS kurallarını da yapar.

Arkada geçici bir renk değişimi olacaktır. Kalıcı hale getirmek için bu CSS kural satırını kopyalayın ve alt temanın style.css dosyasına yapıştırın:

 1 body { 2 background-color: #fdf8ef; 3 )

Değişiklikleri kaydedin ve siteyi önizleyin. Ayrıca, bunu temanın stil sayfasındaki herhangi bir öğe için yeniden başlatabilirsiniz. Pekala, burada size bir çocuk teması için tam bir stil sayfası veriyoruz:

 1 Theme Name: WPB Child Theme 2 Theme URI: https://www.thimpress.com 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://www.thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild 9 */ 10 11 .site-title { 12 color: #7d7b77; 13 ) 14 .site-description { 15 color: #aba8a2; 16 ) 17 body { 18 background-color: #fdf8ef; 19 color: #7d7b77; 20 ) 21 .entry-footer { 22 color: #aba8a2; 23 ) 24 .entry-title { 25 color: #aba8a2; 26 font-weight: bold; 27 ) 28 .widget-area { 29 color: #7d7b77; 30 )

Ana Temanın style.css Dosyasından Kodu Kopyalayın

Gördüğünüz gibi, ana tema'style.css dosyasından kopyalayıp alt temaya yapıştırmak ve özelleştirmek mümkündür.

Örneğin, sayfanın arka plan renginin kodu:

 1 background-color: var(--global--color-background);

'–global–color-background' temanın çeşitli yerlerinde kullanılan bir değişkendir. Bu yerlerde aynı anda rengi değiştirmeniz gerekiyorsa, değişkenin değerini değiştirmeniz gerekecektir. WordPress kurulum klasöründe /wp-content/themes/learnpress'e gidin ve –global–color-background'un yerini aramak için style.css dosyasını metin düzenleyicide açın. Bu değişken başka bir değişkenle değiştirilebilir. Ana temanın style.css dosyasında çok sayıda renk değişkeni bulabilirsiniz. Uygun renk seçeneklerini seçtikten sonra o kod satırını kopyalayıp alt temanın style.css dosyasına yapıştırırsınız ve renk eğiliminize göre eskileri yenileri ile değiştirirsiniz. Daha sonra renkler, planlanan renk şemalarına göre bölünecektir. Bu işlem, renk şemalarınızı tutarlı ve hızlı bir şekilde düzenlemenizi sağlayacaktır.

Şablon Dosyalarını Özelleştirme

Bir temada, bir web sitesindeki dosya işleme alanlarına şablon denir. Şablonlar genellikle ele aldıkları bölümden sonra adlandırılır. Böylece bazı önemli bölümler çeşitli dosyalar veya içerik şablonları tarafından yönetilir.

Bir şablonu özelleştirmek için, o dosyayı ana temada bulun ve alt temaya kopyalayın. Ardından, metin düzenleyicide açın ve değiştirmeye başlayın.

Bu işlem için size footer.php dosyasıyla bir eğitim göstereceğiz. Alt temanın klasörüne kopyalayın ve düz metin düzenleyicide açın. Örneğin, altbilgideki “Gururla WordPress ile güçlendirilmiştir” bağlantısını silip bir telif hakkı bildirimi ekleyelim. Başlamak için, <div class="powered-by"> etiketleri arasındaki tüm öğeleri silin.

 1 <div class="powered-by"> 2 <?php 3 printf( 4 /* translators: %s: WordPress. */ 5 esc_html__( 'Proudly powered by %s.', 'learnpress' ), 6 '<a href="' . esc_url( __( 'https://wordpress.org/', 7 'learnpress' ) ) . '">WordPress</a>' 8 ); 9 ?> </div><!-- .powered-by -->

Ardından, aşağıdaki örnekte bu etiketlerin altına bulduğunuz kodu yapıştıracaksınız.

 1 <div class="powered-by"> 2 <p>&copy; Copyright <?php echo date("Y"); ?>. All rights reserved.</p> 3 </div><!-- .powered-by -->

“Değişiklikleri Kaydet”i seçin ve siteye geri döndüğünüzde yeni telif hakkı bildirimini göreceksiniz.

WordPress Alt Temanıza İşlevler Ekleme

Sitenize bir fonksiyon eklemek veya değiştirmek için function.php dosyasını aramanız gerekecektir. Bu dosya, bu işlemi çalıştırmak için PHP kodunu kullanır.

Genellikle kod parçacıklarını function.php dosyasına kopyalayıp yapıştırmanız için yönlendirilirsiniz, ancak PHP'yi veya temanızı güncellediğinizde bunlar silinir. Bu nedenle, kod parçacıklarını eklemek için bir alt tema kullanmanızı öneririz. Peki, widget ekleme işlemine geçelim. Alt temanın functions.php dosyasına kod parçacığını ekleyin.

 1 <?php 2 // Register Sidebars 3 function custom_sidebars() { 4 5 $args = array( 6 'id' => 'custom_sidebar', 7 'name' => __( 'Custom Widget Area', 'text_domain' ), 8 'description' => __( 'A custom widget area', 'text_domain' ), 9 'before_title' => '<h3 class="widget-title">', 10 'after_title' => '</h3>', 11 'before_widget' => '<aside class="widget %2$s">', 12 'after_widget' => '</aside>', 13 ); 14 register_sidebar( $args ); 15 16 ) 17 add_action( 'widgets_init', 'custom_sidebars' ); 18 ?>

Yeni aracı görmek için kaydedin ve "Görünüm" -> "Widget'lar"a gidin. Ek olarak, bir işlev alanı ekleme hakkında daha fazla bilgi arayabilirsiniz. Sitenizin function.php dosyasına kod parçacıkları ekleyerek birçok özellik ekleyebilirsiniz.

Bu tamamen WordPress'te bir alt temanın nasıl oluşturulacağıyla ilgili. Düzeltme hatası kısmına geçelim.

Hataları Düzeltme

Bir çocuk teması yaparken herhangi bir sorunla her an karşılaşabilirsiniz. Bu nedenle kolay pes etmemelisiniz.

Sözdizimi sorunları, kodlama sürecindeki bazı eksikliklerden kaynaklanabilir. Ayrıca, tüm kullanıcıların karşılaşabileceği en popüler hatadır. Ayrıca, işler yolunda gitmezse, her zaman silebilir ve baştan başlayabilirsiniz.

WordPress Alt Teması Nasıl Oluşturulur: Sonuç

Umarız çocuk teması yapma hakkında bilgi sahibi olabilirsiniz. Okumalarınız için teşekkürler!

Devamını oku: HTTP Hatası 500 WordPress (2021) Nasıl Onarılır