Divi Çocuk Teması Oluşturmak İçin Nihai Kılavuz

Divi alt teması oluşturmak, Divi temasını her güncellediğinizde bu değişiklikleri silme konusunda endişelenmenize gerek kalmadan temanıza gelişmiş özelleştirme eklemenin harika bir yoludur. Aslında, Divi Child temasının birçok faydası vardır. Tüm özel CSS'lerinizi/Kodlarınızı tek bir yerde daha iyi organize etmenize olanak tanıyarak başkalarıyla işbirliği yapmayı kolaylaştırır. Bu, kodunuzu, tema özelleştirici ve ayarları içinde özel koda erişimi olan istemcilerden korumaya da yardımcı olacaktır.

Bu yazıda size Divi Çocuk Teması oluşturmayı göstereceğim. Umuyorum ki bu süreç Divi ile yeni başlayanlar ve müşterileri için eksiksiz Divi Çocuk Temaları yayınlamak isteyen geliştiriciler için faydalı olacaktır.

Başlayalım.

Neden Divi Çocuk Temasına İhtiyacınız Var?

Divi bir WordPress temasıdır. Herhangi bir WordPress temasında değişiklik yapmanız gerektiğinde, o ana temanın tasarımını ve işlevselliğini devralan bir alt tema oluşturmak en iyi uygulamadır. Alt tema oluşturmanın önemli bir nedeni, ana temayı güncellerken yaptığınız değişiklikleri korumaktır. Divi'yi her güncellediğinizde, tüm tema dosyaları güncellenir, bu dosyalarda herhangi bir değişiklik yaptıysanız, bu değişiklikler silinecektir. Bu nedenle, Divi'nin tema dosyalarını doğrudan değiştirmek yerine, bir alt tema içinde ek tema dosyaları oluşturabilirsiniz, böylece Divi güncellendiğinde bu alt tema dosyaları değişmeden kalır. Bu nedenle, temanızda sayfa şablonlarını değiştirmek ve/veya büyük miktarlarda CSS/JavaScript eklemek ve/veya yeni işlevler eklemek gibi gelişmiş özelleştirmeler yapmayı planlıyorsanız, bu değişiklikleri alt temanızda dokunmak zorunda kalmadan yapmak en iyisidir. ana tema dosyaları.

Divi'yi Çocuk Teması olmadan kullanmak mümkün mü?

Nedenini anladığınız sürece Divi Çocuk Teması oluşturmadan Divi'yi kullanmak mümkündür.

Divi, Divi Builder, Theme Customizer ve Theme Settings gibi yerlere özel CSS ve Kod eklemenize izin verir. Aslında Divi bu amaç için kod düzenlemeyi geliştirdi. Ve bu kod Divi teması güncellenirken korunur. Bu nedenle, bir kullanıcı yalnızca küçük değişiklikler yapacaksa, bir alt temanın gereksiz olduğuna dair bir argüman var. Ayrıca Divi, statik bir CSS dosyasını otomatik olarak küçültür ve önbelleğe alır, böylece sayfa yükleme hızında sorun olmaz.

İşleri sizin için basitleştirmek için, Divi Child temasını muhtemelen kullanmanız ve kullanmamanız gereken durumları açıklamama izin verin.

Muhtemelen bir Divi Çocuk Teması kullanmalısınız, eğer…

1. Belirli tema dosyalarının kodunda değişiklik yapmayı planlıyorsunuz (buna sayfa şablonları ve function.php gibi şeyler dahildir)
2. Yüzlerce kod satırı eklemeyi planlıyorsunuz (CSS, JavaScript, vb.). Bunu tema ayarlarınız gibi yerlere eklemek mümkün olsa da, çok fazla CSS ile yönetmek daha zor hale geliyor.
3. Her şeyi organize bir alanda tutarak başkalarıyla işbirliği yapmak ve geliştirme süresini hızlandırmak istiyorsunuz.
4. Müşterilerin Tema Özelleştirici/Ayarlar'da kurcalamalarını ve kodunuzu kırmalarını istemezsiniz. Bir çocuk temasına sokmak onu kesinlikle diğerlerinden koruyacaktır.

Muhtemelen bir Divi Çocuk Teması KULLANMAMALISINIZ…

1. Küçük tema değişiklikleri yapmayı planlıyorsunuz. Tema Ayarları/Özelleştirici'ye az miktarda CSS (örneğin 100 satırdan az) veya birkaç komut dosyası eklemek, yapmayı planladığınız TÜM buysa, bir Alt tema oluşturma ihtiyacını haklı çıkarmaz.
2. Bir ekiple işbirliği yapmayı planlamıyorsunuz. Diyelim ki sitenizde çalışması için bir geliştirici kiralıyorsunuz, bu kişi Divi'ye aşina olabilir veya olmayabilir ve şüphesiz yine de değişiklik yapmak için bir alt tema oluşturmaya başvuracaktır.
3. Müşterilerin tema ayarlarında/özelleştiricide kod değişikliklerinizi görmesine aldırmazsınız.

Divi Çocuk Teması Oluşturmak için Neye İhtiyacınız Var?

Divi Child temanızı oluşturmak için aşağıdakilere ihtiyacınız olacak:

• Divi Teması Yüklendi ve Etkinleştirildi
• Tema dosyalarını düzenlemek için Metin Düzenleyici. Windows veya Mac ile birlikte gelen metin düzenleyiciyi kullanabilirsiniz, ancak bu dosyaları düzenlemeyi alışkanlık haline getirmeyi planlıyorsanız, Atom, Sublime, Notepad++ vb. gibi daha güçlü bir metin düzenleyici edinmenizi öneririm.
• FTP İstemcisi – Alt temanızı WordPress'e bir zip dosyası olarak yüklemeyi planlıyorsanız bu gerekli değildir. Ancak, canlı bir sitenin tema dosyalarına erişmeye çalışıyorsanız, tema dosyalarına erişmek, bunları düzenlemek, eklemek veya silmek için FileZilla gibi bir FTP istemcisine ihtiyacınız olacaktır. Yerel bir yükleme üzerinde çalışıyorsanız, tema dosyalarına doğrudan sabit sürücünüzden erişebilmelisiniz.
• Bir Fincan Kahve veya Çay (isteğe bağlı)

Bir Çocuk Temasının Yapı Taşları

En temel düzeyde, bir çocuk teması üç şeyden oluşmalıdır:

1. Bir alt tema dizini (veya klasörü). Tüm temalar gibi, alt tema klasörünüz de alt tema dosyalarınızı içeren WordPress Temaları klasörünüzde bulunacaktır.
2. Bir style.css dosyası (alt temanızın CSS'sini depolamak için kullanılacak)
3. Bir function.php dosyası – Temel düzeyde bu dosya, ana tema stil sayfasını kuyruğa alacak wp_enqueue_scripts eylemini tutacaktır (bununla ilgili daha fazla bilgi ileride anlatılacaktır)

Alt Tema Dizininizi Oluşturun (Klasör)

Alt tema dosyalarınızı WordPress'e eklemenin iki yolu vardır. Alt tema klasörünü WordPress tema dosyalarına doğrudan (FTP aracılığıyla veya yerel olarak) ekleyebilirsiniz. Veya daha sonra sıkıştırılıp WordPress'e yeni bir tema olarak yüklenmek üzere WordPress dışında bir klasör oluşturabilirsiniz.

Alt temanız için doğrudan WordPress'te yeni bir klasör oluşturmak için, wordpress Temalar klasöründe (wp-content/themes/) bulunan tema dosyalarınıza erişmeniz gerekir. Ardından temalar klasörü içinde yeni bir klasör oluşturun ve ona “divi-child” adını verin. Böylece yeni alt tema dizini wp-content/themes/divi-child olacaktır.

Ancak daha sonra sıkıştırılıp WordPress'e yüklenmek üzere alt tema klasörü oluşturuyorsanız, bilgisayarınızda yeni bir klasör oluşturabilir ve ona "divi-child" adını verebilirsiniz.

Özel CSS Eklemek için Alt Tema Style.css Dosyanızı Oluşturun

Yeni tema klasörünüzde style.css adlı bir dosya oluşturmak için bir metin düzenleyici kullanın (ad tam olarak bu olmalıdır, aksi takdirde WordPress onu tanımaz) ve aşağıda özetlendiği gibi bilgileri doldurun.

/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/


/* =Theme customization starts here
------------------------------------------------------- */

Alt temanızı yayınlamayı planlamıyorsanız, gerçekten yalnızca Tema Adını ve bir Şablonu girmeniz yeterlidir. Bu nedenle, tüm bu bilgileri nasıl dolduracağınızı bilmekte zorlanıyorsanız, bunun için endişelenmeyin.

“Şablon:” parametresinin, ana temanızın “Divi” olan dizin adını doğru bir şekilde tanımladığından emin olmalısınız. Tema Adı, URI, Açıklama ve Yazar tamamen size kalmış. Bu başlık bilgisini müşteri ihtiyaçlarınıza uyacak şekilde özelleştirebilirsiniz. Örneğin, WordPress Dashboard'da temanızı ziyaret ederken görünen ad bu olduğundan, tema adınız için müşterinizin şirketinin adını eklemek isteyebilirsiniz.

Ana Tema Stil Sayfanızı Sıralamak için Functions.php'nizi Oluşturun

Artık alt temamız için style.css dosyamız hazır olduğuna göre, Divi'nin (ana tema) içinde zaten mevcut olan stili tamamen dışarıda bırakmadığımızdan emin olmamız gerekiyor. Bu, önce Divi's Parent stil sayfasını kullandığımızdan emin olmamız ve ardından yeni stil sayfamızı tanıtmamız gerektiği anlamına gelir. Bu sıralama önemlidir çünkü CSS hakkında bilginiz varsa, en alta girdiğiniz kod her zaman en üstteki koda göre öncelikli olacaktır. Bu nedenle, bizim durumumuzda, önce ana stil sayfası kodunun yüklenmesini ve ardından alt stil sayfası kodumuzun en son yüklenmesini istiyoruz.

Bunu yapmak için, ana temanın (Divi'nin) stil sayfasını kuyruğa almamız gerekiyor. Sıraya alma, kelimenin tam anlamıyla "kuyruğa ekle" anlamına gelen süslü bir kelimedir, bu durumda, alt tema stil sayfasından önce kuyruğa alınacak ana stil sayfasını ekliyoruz. Başka bir deyişle, alt tema stil sayfamıza eklediğimiz her şey ana temaya eklenecek ve onun yerini alacaktır.

Divi ilk piyasaya sürüldüğünden beri, orijinal WordPress tarafından önerilen bir alt tema kurma yöntemine bağlı kalacak şekilde ayarlandı. Alt temalar oluşturmanın bu orijinal yöntemi, alt tema style.css dosyası içinden ana temanın stil sayfasının bir CSS @import işlemini yapmayı içeriyordu. Birçok tema hala bu şekilde ayarlanmıştır, alt temaya kendi style.css ve @import -ing Divi'nin style.css'sini tanımlamak gibi basit bir görev bırakır ve Divi bu dosyayı otomatik olarak yükler. Bu, Divi tarafından, ana stil sayfası kuyruğa alındığında get_stylesheet_directory_uri() işlevini kullanarak çalışır. Bunun anlamı, Divi'nin ya kendi stil sayfasını ya da alt temanın stil sayfasını (hangisi etkinse) çağırmak üzere ayarlanmış olmasıdır. Temel olarak, get_stylesheet_directory_uri() ile, bir Alt Temayı etkinleştirdiyseniz, WordPress uri'yi ana tema dizini yerine alt tema dizinine döndürür.

WordPress buna yaklaşmanın önerilen yolunu güncelledi, yine de Divi alt temanız için stilleri kolayca ayarlayabilirsiniz. Divi zaten alt temanın style.css dosyasını kuyruğa alacak şekilde ayarlandığından, yapmanız gereken tek şey Divi'nin ana style.css dosyasını açıkça sıraya koymaktır.

Bunu yapmak için, alt tema klasörü içinde başka bir dosya oluşturmak için metin düzenleyicimizi kullanmamız gerekecek. Dosyayı Name function.php (ad tam olarak bu olmalıdır) ile kaydedin ve ardından aşağıdaki kodu dosyaya ekleyin:

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

Ardından dosyayı kaydedin.

Bu kod Divi'ye özeldir ve WordPress Codex tarafından önerilen yöntemin değiştirilmiş bir versiyonudur.

İpucu: PHP kapanış etiketine ihtiyacınız yok. Bunun gibi PHP belgeleri her zaman açık bir php etiketi ile başlamalıdır (kod onsuz çalışmayacaktır). Ancak, php kapanış etiketini eklememek en iyi uygulamadır. Bu, php kodunuzun hiçbirinin yanlış yerleştirilmiş bir kapanış etiketi tarafından kesilmemesini veya eklemeye çalışırken kodunuzu bozabilecek korkak istenmeyen alanlar oluşturmamasını sağlayacaktır.

Bu arada, bunun çalışması için bu php kodunun iç işleyişini anlamanıza gerek yok (tabii ki). Yani kafanız tamamen karıştıysa endişelenmeyin. Yukarıdaki kodu kopyalayıp alt temanızın function.php dosyasına yapıştırabilir ve onunla işiniz bitebilir.

Divi Child Temanız İçin Bir Küçük Resim Oluşturun (isteğe bağlı)

WordPress, WordPress Kontrol Panelinde görüntülerken temanız için bir tema ekran görüntüsü veya marka imajı olarak hizmet edecek bir küçük resim sağlamanıza olanak tanır.

Alt temanız için bir küçük resim oluşturmak için önce bir resim oluşturun (WP, 1200 piksel genişliğinde ve 900 piksel yüksekliğinde bir boyut önerir) ve onu ekran görüntüsü.png dosya adıyla kaydedin (WP'nin onu tanıması için dosya adı tam olarak bu olmalıdır). Ardından, zaten orada olan iki dosyanın yanındaki alt tema klasörüne ekleyin.

İşte oluşturduğum bir Divi Child küçük resmi:

Alt tema klasörünüzün sahip olması gereken üç dosya:

Alt Temanızı Yükleyin ve Etkinleştirin

Alt tema klasörünüzü, style.css dosyanızı ve functions.php dosyanızı oluşturduktan sonra alt temanız yükleme ve aktivasyon için hazırdır.

Bu noktada, Divi temanızın yüklendiğinden emin olun, böylece Child Theme etkinleştirildikten sonra çalışacaktır.

Alt tema klasörünü ve dosyalarını doğrudan WordPress Temaları dizinine eklediyseniz, temayı WordPress'e yüklemenize gerek yoktur. Zaten orada. Tek yapmanız gereken WordPress panosuna gidip Görünüm > Tema seçeneğine gitmek, farenizi alt temanızın üzerine getirmek ve Etkinleştir düğmesini tıklamaktır.

Bilgisayarınızda alt tema klasörünü ve dosyalarını basitçe oluşturduysanız, WordPress'e yüklemek için uygun biçimde olması için önce sıkıştırmanız (ZIP) gerekir. Mac ve Windows'un her ikisi de yerel ZIP işlevine sahiptir. Sıkıştırıldıktan sonra, bir alt temayı yüklemek ve etkinleştirmek normal bir temadan farklı değildir, WordPress Panonuzdaki Görünümler > Temalar sayfasından yüklemeniz ve etkinleştirmeniz yeterlidir.

Ardından temayı normal şekilde etkinleştirin.

Alt temanızın düzgün çalışıp çalışmadığını test etmek için alt tema style.css dosyanıza biraz CSS ekleyin ve değişikliklerinizi kaydedin. Bu değişiklikleri canlı sitede görmelisiniz. Önbelleğe alınması durumunda sayfanızı özel bir tarayıcıda açmanız gerekebilir.

Divi'nin Functions.php Dosyasını Düzenleme

Functions.php dosyası, Divi'nin ana işlevlerinin depolandığı yerdir. Alt temamıza özel işlevler eklemek için alt tema klasörümüzde bir function.php dosyası oluşturduk. Ancak bu dosya, ana temanın işlevlerini tamamen geçersiz kılmaz. Ana stil sayfası için style.css dosyasının yaptığı gibi ona yeni işlevler ekleyecektir.

Bu bir php dosyası olduğundan, tüm php kodunuzun uygun php etiketlerine sarılması önemlidir. Ancak, alt temayı oluştururken function.php dosyasını zaten eklemiş ve düzenlemiş olacağınız için, mevcut kodun hemen ardından herhangi bir yeni işlevi ekleyebilirsiniz.

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


//add new code here

Divi'nin Şablon Dosyalarını Düzenleme

Yalnızca style.css ve function.php dosyalarını düzenlemekle sınırlı değilsiniz. Şablon dosyaları veya PHP dosyaları dahil olmak üzere ana temanızın herhangi bir dosyasını ekleyebilir ve düzenleyebilirsiniz. Burası, temanızın herhangi bir bölümünü tamamen yeniden yapılandırabileceğiniz ve ayarlayabileceğiniz yerdir (bunu büyük bir dikkatle yapın). Function.php dosyasını düzenlemekten farklı olarak, şablon dosyaları tamamen yenisiyle değiştirilmelidir. Bunun nedeni, ana temanın (Divi'nin) orijinal dosyasının yok sayılması ve bunun yerine yenisinin kullanılmasıdır. Bir şablon dosyasını düzenlemek için, biz onu değiştirmeye başlamadan önce eski dosyayı kopyalamalısınız. Bunu yapmak için, temanın orijinal dosyasını kopyalayın (kesmeyin!) ve dosya adı ile konumun tam olarak aynı olduğundan emin olarak alt tema klasörünüze yapıştırın. Örneğin, Divi/includes/navigation.php dosyasını değiştirmek istiyorsak, bu dosyayı kopyalayıp divi-child/includes/navigation.php dizinine yapıştırırız.

Ad ve konum, ana temadakiyle tamamen aynı olduğu sürece, WordPress, eski temanın yerine Alt tema dosyasını kullanır.

Mevcut Özel CSS'yi / Kodu Yeni Alt Temanıza Taşıma

Divi Child temanızı oluşturduktan sonra her şeyin tek bir yerde olduğundan emin olmak isteyeceksiniz. Bu nedenle, Divi'ye zaten eklenmiş özel CSS veya kodunuz varsa, bunu alt temanıza taşıyacaksınız. Örneğin, Divi > Tema Özelleştirici > Ek CSS altında özel CSS'niz varsa, tek yapmanız gereken CSS'yi alt temanızın style.css dosyasına taşımaktır (kesip yapıştırmaktır).

Alt Temanızı Güncelleme

Divi ve WordPress sürekli olarak gelişiyor ve uyarlanıyor. Bu nedenle, (birçok Divi güncellemesinden sonra) Divi'nin bazı tema dosyalarının değişeceği bir zaman gelebilir. Ve değiştirilen dosyayı geçersiz kılan bir alt temanız varsa, alt temanız bir şekilde bozulabilir. Bunun nedeni, alt temanızda eski kod kullanmanız ve Divi tarafından kullanılan yeni kodla eşleşecek şekilde güncellenmesi gerekmesidir. Bu nedenle, bir süredir alt tema kullanıyorsanız ve işler bozulmaya başlıyorsa, kodunuzu güncellemeniz gerekebilir.

Son düşünceler

Bir alt tema oluşturmanın birçok başarılı yolu olduğundan eminim. Ancak birçok WordPress teması farklı şekilde ayarlandığından, özellikle Divi Teması için bir alt tema oluşturmaya odaklanmanın en yararlı olacağını düşündüm. Geliştiriciler için, daha iyi performans için üst ve alt stil sayfalarını kuyruğa almaya yönelik en iyi uygulamaları bilmek faydalı olabilir. Yeni başlayanlar için, bu öğretici veya bir eklenti ile bir alt tema oluşturmak için her şeyin nasıl çalıştığını anlamak zorunda değilsiniz ve bu da sorun değil. Ve bir çocuk temasının gerekli olmadığını fark edebilirsiniz çünkü Divi'nin yerleşik stil ayarları ihtiyacınız olan tek şey Ne olursa olsun, umarım bu yazı size iyi hizmet eder.

Yorumlarda sizden haber bekliyorum.

Şerefe!