WordPress alt teması nasıl oluşturulur

Yayınlanan: 2016-06-22

Genellikle mükemmel temayı bulmak neredeyse imkansızdır; her zaman yapılması gereken bazı değişiklikler vardır. Öyleyse neden Twenty Fifteen gibi güzel bir WordPress varsayılan temasını alıp istediğiniz gibi görünmesi ve çalışması için kendi temanız haline getirmiyorsunuz? Bir çocuk teması oluşturmak size çok fazla zaman kazandıracak ve yolda başınızı ağrıtacak (bana güvenin).

İlk elden deneyim konuşabilirim. Geliştiricinin ana temayı parçaladığı bir WordPress sitesini "miras aldım" ve siteye işlevselliğini veren özelleştirmeleri geçersiz kılma korkusuyla temayı gerçekten güncelleyememenin ne kadar sinir bozucu olduğunu hala hatırlıyorum. Orijinal kodun ve özel olanın ne olduğunu bilmiyordum, bu yüzden güncelleme olasılığı olmadan orada oturdu.

Yine de hikayenin mutlu bir sonu var. O zamanlar WordPress'te daha yeniydim, bu yüzden bana bir ana temayı değiştirmenin iyi bir fikir olmadığını erken öğretti. Site nihayet yeniden tasarlandığında, ilk iş, özelleştirmeleri alıp bir alt temaya koymaktı.

Alt tema, gelecekteki bir ana tema güncellemesi tarafından çalışmanızın üzerine yazılmadan ayrı bir yerde çalışmanıza olanak tanır. Teknik olarak konuşursak, bir alt tema oluşturduğunuzda, orijinal ana temayı etkilemeden temayı özelleştirmek için kullanabileceğiniz ayrı bir dosya grubu oluşturursunuz. Bir ana temanın dosyalarında değişiklik yaparsanız, temayı bir sonraki güncellediğinizde bu değişikliklerin üzerine yazılacaktır. Bu çok önemli çünkü güncellemeler özellik değişiklikleri, hata düzeltmeleri ve önemli güvenlik önlemlerini içerebilir. Ana temayı güncel tutmak ve herhangi bir özelleştirme için bir alt tema kullanmak çok önemlidir.

Çocuk temasıyla ilgili temel bilgiler

Alt temalar, temel işlevleri için bir ana temaya dayanan, oluşturduğunuz ayrı temalardır. Bir alt tema kullandığınızda, WordPress ona başvurmayı ve içerdiği herhangi bir işlevi aramayı bilir. Bu harika çünkü ana temanın yalnızca değiştirmeniz gereken kısımlarını değiştirmenize izin vererek WordPress sitenize özelleştirmeler eklemek için bunu çok verimli bir yol haline getiriyor.

Biraz daha derine inmek için, alt temaların dosya düzeyinde nasıl çalıştığı aşağıda açıklanmıştır. WordPress, alt temaya gerekli bir dosyanın eklenip eklenmediğini kontrol eder. Dahil edilmişse, o alt tema dosyası yüklenir. Alt temada yoksa ana temadaki dosya yüklenir. Bunun tek istisnası, hem üst hem de alt sürümlerin yüklendiği functions.php dosyasıdır. Tipik olarak, function.php dosyasında çok önemli bilgiler bulunur. WordPress yalnızca alt tema sürümünü yüklediyse (her şeyi kopyalamadığınız sürece), site düzgün çalışmaz. Neyse ki, WordPress her iki dosyayı da yükler, bu nedenle tüm function.php dosyasını alt temanıza kopyalama konusunda endişelenmenize gerek yoktur.

Unutmayın, her zaman alt temanızı kapatabilir ve gerekirse orijinaline geri dönebilirsiniz. Yine de tek yönlü bir cadde; ebeveyni kapatamaz ve alt temaya güvenemezsiniz.

Bir WordPress temasına özelleştirmeler ekliyorsanız, bir alt tema kullanmak en iyisidir. Kendinizinkini yaratmaya hazır mısınız? Şimdi süreci adım adım inceleyeceğiz.

Bir çocuk teması oluşturma

Bir tane oluşturmak göründüğü kadar karmaşık değil. Aslında, teknik olarak ihtiyacınız olan tek şey sadece iki dosyadır: bir style.css ve bir functions.php dosyası. Çoğu çocuk teması bundan daha fazlasına sahiptir, ancak teknik olarak konuşursak, bunlar gerekli olan tek ikisidir.

Bir alt tema oluşturmak için, kullanmak istediğiniz bir ana tema ile birlikte WordPress'in kurulu olması gerekir.

Unutmayın: Canlı bir sitede asla değişiklik yapmamalısınız. Ücretsiz yerel geliştirme uygulamamız Local, iş akışınızı basitleştirmenize ve sitenizi güvenle denemenize yardımcı olacaktır. Bugün deneyin!

Bir tema dizini oluşturun

İlk önce tema dizininize gidin ve yeni temanız için bir klasör oluşturun. Tanınabilir bir isim verin. Bu örnek için, temamı child-example olarak adlandıracağım, böylece bulması kolay olur.

wordpress-child-tema-çocuk-tema-dosyaları yarat

Alt tema stil sayfasını yapın

Sonraki, çok önemli adım, alt temanın stil sayfasını oluşturmaktır. Bir style.css dosyası oluşturun. İşlerin düzgün çalışması için style.css olarak adlandırılması gerektiğini unutmayın.

Ardından, temanız hakkında bazı bilgiler eklemeniz gerekecek.

Bunu kopyalayıp style.css file yapıştırın:

/*
 Theme Name:   Child Example
 Theme URI:    http://example.com/child-exxample/
 Description:  Child Example Twenty Fifteen Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
 Text Domain:  twenty-fifteen-child
*/

Bu çok görünebilir, ancak gerçekten gerekli olan sadece ikisi var, bunlar Theme Name ve Template . Theme Name , WordPress'e alt temanın adını söyler. Template , WordPress'e hangi temayı ana tema olarak düşünmesi gerektiğini söyler ki bu çok önemlidir.

wordpress-çocuk-tema-listesi oluştur

Diğerlerinin çoğu oldukça açıklayıcı, ancak biraz daha açıklamaya ihtiyaç duyabilecek birkaç tane var. Text Domain ve Tags biraz kafa karıştırıcı olabilir. Text Domain , uluslararasılaştırma amacıyla dizeleri çevirmek için kullanılır. Bu, temanız için benzersizdir ve çeviri işlevlerini her kullandığınızda kullanılmalıdır. Codex'te çok daha fazla bilgi var ve WordPress Geliştiricileri için I18n konusunda bulunabilir. Tags bölümü, WordPress temasına özel etiketlerin bir listesidir. Bu örnek için Twenty Fifteen parent style.css dosyasına baktım, etiketleri oradan aldım ve onları alt temaya yerleştirdim.

Ebeveyn stillerini kullanın

WordPress'in önce alt tema dosyalarını nasıl aradığını hatırlıyor musunuz? Şu anda alt tema çalışıyor, ancak henüz herhangi bir stil oluşturmadığınız için pek parlak görünmüyor. Etkinleştirir ve sayfayı yeniden yüklerseniz, biraz dağınık görünecektir. Muhtemelen şöyle bir şeye benzeyecektir:

oluştur-wordpress-çocuk-teması-stilsiz-metin

Bunu düzeltelim, böylece ana temaya geri döner ve en azından bazı stiller uygulanmış olur. Özel stiliniz için alt temanızı kullanmaya devam edeceksiniz, ancak önce ana stilin gösterilmesini sağlayalım.

Ana dosyanın stil sayfasını yüklediğinizden emin olmak için onu alt temada kuyruğa almamız gerekecek. Aşağıdaki parçacığı yerleştirmek için alt temada bir functions.php dosyasına ihtiyacınız olacak.

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
oluştur-wordpress-alt-tema-ebeveyn-tema-styling

CSS özelleştirmesi yapma

Artık ana stiller gösterildiğine göre, alt tema özelleştirmeniz için bazı CSS'leri değiştirelim. Bu örnekte, sayfa içeriği için bir arka plan öğesinin stilini belirlemek, alt temayı çalışırken görmenin iyi bir yoludur. Ana tema CSS'de beyaz olarak stillendirilmiştir, ancak alt temanızda bunu mavi olarak değiştirelim. Unutmayın, önce ana stiller yüklenir ve özelleştirmeleriniz daha sonra yüklenir, bu yüzden göreceğimiz şeyler bunlar olacaktır.

Bir Chrome kullanıcısıysanız, Geliştirici Araçları, tarayıcıda stil ve denemeyi görmek için çok yararlıdır. Görünüm > Geliştirici > Kaynağı Görüntüle'ye gidin ve sayfa öğelerini seçin. Stiller sağda gösterilecektir. Beyaz bir arka plana sahip bir .hentry sınıfı olan makaleyi inceledim. Önce tarayıcıda test etmek için bir onaltılık değer yapıştırdım.

create-wordpress-child-theme-chrome-dev-tool

Bu değişikliği yapmak için alt temadaki CSS dosyasını açın ve CSS bilgilerini ekleyin.

wordpress-child-theme-child-css-dosyası oluştur

Görüldüğü gibi alt temada stil değişiklikleri kolaylıkla yapılabilmektedir.

oluştur-wordpress-alt-tema-arka plan-değiştir

Alt temanızın işlevselliğini değiştirme

Stili ayarlamak oldukça kolaydır, peki ya üst bilgi, alt bilgi, kenar çubuğu vb. gibi diğer şeyler? Diyelim ki altbilgide yapılacak bazı değişiklikler var. Alt bilgiyi ana temadan kopyalayıp alt öğeye yapıştırın. footer.php dosyası istediğiniz metin düzenleyicide açılabilir ve değiştirilebilir. “WordPress tarafından gururla desteklenmektedir” satırını kaldırmaya karar verdim, bu yüzden bunu alt temamdaki dosyadan sildim. Bu, şimdi WordPress'in ilk yükleyeceği dosyadır, böylece bu metin satırı gösterilmeyecektir.

create-wordpress-child-theme-footer-modifikasyonu

Bir alt tema oluşturmak, WordPress temaları oluştururken iyi bir alışkanlıktır. Sadece birkaç basit adımda, oluşturulması ve bakımı kolaydır. Özelleştirmeleri ana temalardan ayrı tutmak hem organizasyon amaçları hem de her şeyi güncel tutmak için iyidir, bu da yolda çok fazla baş ağrısından kurtaracaktır.