Divi çocuk teması yapmak için ana rehber
Divi Children’ın teması oluşturmak, Divi temasını her güncellediğinizde bu değişiklikleri silmek konusunda endişelenmek zorunda kalmadan temanıza daha fazla ayarlama eklemenin iyi bir yoludur.Aslında, Divi Child temasının birçok faydası vardır.Bu, tüm özel CSS/kodlarınızı tek bir yerde daha iyi ayarlamanıza olanak tanır ve başkalarıyla işbirliği yapmayı kolaylaştırır.Bu aynı zamanda kodunuzu, temaları ayarlama ve ayarlama konusunda özel kodlara erişimi olan istemcilerden korumaya yardımcı olacaktır.Bu yazıda size nasıl divi çocuk teması yapacağınızı göstereceğim.Umudum, bu sürecin Divi ile yeni başlayanlar ve müşterileri için eksiksiz bir Divi çocuk teması yayınlamak isteyen geliştiriciler için yararlı olacağıdır.
Başlayalım.Neden divi çocuk temalarına ihtiyacınız var
Nedeni anladığınız sürece Divi çocuk teması oluşturmadan Divi’yi kullanabilirsiniz. DIVI, Divi Builder, özelleştirici temaları ve tema ayarları gibi yerlere CSS ve özel kodlar eklemenizi sağlar. Divi bile bu amaç için kod düzenlemesini artırdı. Ve bu kod Divi temasını güncellerken korunur. Dolayısıyla, kullanıcı yalnızca küçük bir değişiklik yapacaksa, çocuğun temasına ihtiyaç duyulmadığına dair bir argüman vardır. Ayrıca, Divi statik CSS dosyalarını otomatik olarak azaltır ve kaydeder, böylece yükleme sayfalarının hızında sorun olmayacaktır. Sizin için bir şeyler basitleştirmek için, Divi Çocuk Temasını kullanmanız ve kullanmamanız gereken durumu belirtmeme izin verin. Eğer belirli bir tema dosya kodunda değişiklik yapmayı planlıyorsanız, divi çocuk temasını kullanmanız gerekebilir (bu, sayfa şablonları ve functions.php gibi şeyleri içerir)
Yüzlerce kod satırı (CSS, JavaScript, vb.) Eklemeyi planlıyorsunuz. Bunu temanızı ayarlamak gibi yerlere eklemek mümkün olsa da, birçok CSS ile yönetmek zorlaşır.
Başkalarıyla işbirliği yapmak ve her şeyi bir normal alanda saklayarak geliştirme süresini hızlandırmak istiyorsunuz.
Müşterilerin ayarlamada/temayı ayarlamasını ve kodunuza zarar vermesini istemezsiniz. Bir çocuğun temasına kaymak kesinlikle başkalarından korunacaktır.
Divi çocuk temasını kullanmanız gerekmeyebilir …
Küçük bir tema değişikliği yapmayı planlıyorsunuz. Tema/ayarlama ayarlarına küçük bir CSS (örneğin 100’den az satır gibi) veya birkaç komut dosyası ekleyin, sadece yapmayı planlıyorsanız bir çocuğun teması yapma ihtiyacını haklı çıkarmaz.
Ekiple işbirliği yapmayı planlamıyorsunuz. Sitenizde çalışmak için bir geliştirici kiraladığınızı, bu kişi Divi ile tanıdık gelebilir veya tanımayabilir ve şüphesiz çocuğun temasını değişiklik yapmak için kullanacaktır.
İstemcinin, tema/ayar ayarlarında kod değişikliğinizi görmesi umrumda değil.
Divi çocuk temanızı oluşturmak için bir divi çocuk teması oluşturmak için neye ihtiyacınız var, aşağıdakilere ihtiyacınız var:
Divi temaları yüklendi ve etkinleştirildi
Tema dosyalarını düzenlemek için metin düzenleyicisi. Windows veya MAC ile dahil olan metin editörlerini kullanabilirsiniz, ancak bu dosyaları düzenleme alışkanlığını almayı planlıyorsanız, atomlar, yüce, not defteri ++, vb. Gibi daha güçlü metin editörleri almanızı öneririm. Çocuğunuzun temasını bir zip dosyası olarak WordPress’e yüklemeyi planlıyorsanız gereklidir. Ancak, Site için tema dosyalarına doğrudan erişmeye çalışırsanız, tema dosyalarına erişmek, düzenlemek, eklemek veya silmek için FileZilla gibi bir FTP istemcisine ihtiyacınız vardır. Yerel bir kurulum üzerinde çalışıyorsanız, tema dosyasına doğrudan sabit sürücünüzde erişebilmeniz gerekir.
Bir fincan kahve veya çay (isteğe bağlı)
Çocukların yapı bloğu bloğu
En temel düzeyde, çocuk teması üç şeyden oluşmalıdır:
Çocuk Teması Dizini (veya klasör). Tüm temalar gibi, çocuğunuzun tema klasörü, çocuğunuzun tema dosyasını depolayan WordPress tema klasörünüzde olacaktır.
Style.css dosyası (çocuğunuzun teması css saklamak için kullanılacaktır) Dosya Functions.php – Bu dosyanın temel seviyesinde, ana tema stili sayfası için sıraya girecek wp_enqueue_scripts’in eylemini barındıracak (daha sonra bununla ilgili)
Çocuğunuzun Tema Dizini (Klasör) Oluşturun
WordPress’e çocuğunuzun tema dosyasını eklemenin iki yolu vardır. Kilit tema klasörünü doğrudan WordPress tema dosyasına (FTP aracılığıyla veya yerel olarak) ekleyebilirsiniz. Veya WordPress dışında bir klasör oluşturabilir ve ardından yeni bir tema olarak WordPress’e yükleyebilir.
Çocuğunuzun teması için doğrudan WordPress’e yeni bir klasör oluşturmak için, WordPress tema klasöründe (WP-Concent/Themes/) bulunan tema dosyalarınıza erişmeniz gerekir. Ardından tema klasöründe yeni bir klasör oluşturun ve “Divi-Child” adını. Böylece yeni Çocuk Tema Dizini WP-Concent/Themes/Divi-Child olacak. CSS Custom eklemek için bir Style.css Dosyayı Çocuk Temanızı Oluşturun
Yeni tema klasörünüzde, style.css adlı bir dosya oluşturmak için metin düzenleyicisini kullanın (adı tam olarak bu olmalı veya WordPress bunu tanımayacaktır) ve aşağıda açıklandığı gibi bilgileri doldurun. /*
Tema Adı: Divi Child Tema Uri: https://www.elegantthemes.com/gallery/divi/ Açıklama: Divi Çocuk Teması
Yazar: Zarif Temalar
Yazar uri: https://www.eleganthemes.com
Şablon: Divi
Sürüm: 1.0.0
*/
/* = Tema özelleştirme burada başlar
————————————————— – */
Çocuğunuzun temasını yayınlamayı planlamıyorsanız, yalnızca temaların ve şablonların adını girmeniz gerekir. Yani, tüm bilgileri nasıl dolduracağınızı bilmekte sorun yaşıyorsanız, endişelenmeyin.
“Şablon parametresi:” nin ana temanızın dizininin adını doğru bir şekilde tanımlamanız gerekir. “Divi”. Temanın adı, Uri, Açıklama ve Yazar tamamen size kalmış. Bu başlık bilgilerini müşterinizin ihtiyaçlarını karşılayacak şekilde ayarlayabilirsiniz. Örneğin, müşterinizin şirket adını tema adınıza eklemek isteyebilirsiniz, çünkü bu, temanızı WordPress kontrol panelinde ziyaret ederken görünen bir addır. Function.php’nizi anne teması stil sayfanız için sıraya koyun.
Artık çocuğumuzun teması için bir dosya stilimiz olduğuna göre, zaten divi’de (ebeveynin teması) olan stili tam olarak bırakmamamız gerektiğinden emin olmalıyız. Bu, önce Divi ana stil sayfasını kullanmamız ve daha sonra yeni stil sayfamızı tanıtmamız gerektiği anlamına gelir. Bu sipariş önemlidir, çünkü CSS’ye alışkınsanız, altta girdiğiniz kod her zaman üstteki koddan öncelikli olacaktır. Dolayısıyla, bizim durumumuzda, ana stil sayfası kodunun önce ve daha sonra son çocuğun stil sayfası kodunun yüklenmesini istiyoruz.
Bunu yapmak için, ana temanın (DIVI) stil sayfasını sıralamamız gerekir. Enqueue, kelimenin tam anlamıyla “kuyruğa ekle” anlamına gelen lüks bir kelimedir, bu nedenle bu durumda çocuğun tema stili sayfasından önce teslim edilecek bir ana stil sayfası ekleriz. Başka bir deyişle, stil sayfasına ne ekleseyelim, çocuğumuzun teması ana temayı ekleyecek ve değiştirecektir.
Divi ilk başlatıldığından beri, bir çocuğun temasını hazırlamak için önerilen orijinal WordPress yoluna uymak için düzenlenmiştir. Bu çocuğun temasını oluşturmak için orijinal yöntem, Style.css Child’ın temasından ana tema stil sayfasından @import css içerir. Birçok tema hala bu şekilde düzenlenmiştir, Style.css’in kendisini tanımlamak için çocukların basit görevlerinin temasını bırakır ve @Import -ing Divi’nin Style.css ve Divi dosyayı otomatik olarak yükleyecektir. Bu, ana stil sayfası olduğunda get_stylesheet_directory_uri () işlevini kullanarak Divi tarafından çalışır. Bu, Divi’nin Styles sayfasını kendisi veya stil sayfası bir çocuğun temasını (herhangi bir aktif) çağırmak için düzenlendiği anlamına gelir. Temel olarak, get_stylesheet_directory_uri () ile, çocuk temasını etkinleştirdiyseniz, WordPress URI’yi üst tema dizini yerine alt tema dizine iade edecektir. Şimdi WordPress, buna yaklaşmanın önerilen yolunu güncelledi, yine de Divi Çocuk Teması için stil ayarlayabilirsiniz. Tek yapmanız gereken stil için açıkça kuyruk. Bunu yapmak için, alt tema klasöründe başka dosyalar oluşturmak için metin düzenleyicimizi kullanmamız gerekir. Dosyayı ad fonksiyonu ile kaydedin. wp_enqueue_style (‘ebeveyn tarzı’, get_template_directory_uri (). ‘/style.css’);
} Add_action (‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’);
Ardından dosyayı kaydedin. Bu kod özellikle Divi içindir ve WordPress Codex tarafından önerilen yöntemin bir değişiklik versiyonudur. İpucu: Bir PHP kapak etiketine ihtiyacınız yok. Bunun gibi PHP belgeleri her zaman açık bir PHP etiketi ile başlatılmalıdır (kod onsuz çalışmaz). Ancak, en iyi uygulama PHP kapak etiketlerini dahil etmek değildir. Bu, yanlış kapanış etiketi ile kesilen veya girmeye çalışırken kodunuza zarar verebilecek istenmeyen bir korkak alan oluşturma PHP kodu olmamasını sağlayacaktır. Bu arada, PHP kodunun bir kısmının nasıl çalıştığını anlamanıza gerek yoktur, böylece bunun çalışması (net). Yani gerçekten kafası karışmışsanız, endişelenme. Yukarıdaki kodu dosya işlevine kopyalayıp ekleyin. Divi Çocuk Teması (isteğe bağlı) WordPress için bir küçük resim oluşturun WordPress, WordPress Gösterge Tablosu’nda gördüğünüzde temanız için temaların veya marka görüntülerinin ekran görüntüsü olarak kullanılacak küçük resimler vermenizi sağlar. Çocuğunuzun teması için bir küçük küçük resim oluşturmak için önce bir görüntü oluşturun (WP, 900 piksel yükseklikte 1200 piksel bir genişlik önerir) ve ekran görüntüsü ile kaydedin. Ardından, zaten orada olan iki dosyanın yanındaki Children’s Tema klasörüne ekleyin. Bu yaptığım mini bir divi çocuk görüntüsü:
İşte çocuğunuzun tema klasörünün sahip olması gereken üç dosya:
Bir alt tema klasörü, style.css dosyası ve functions.php dosyası oluşturduktan sonra çocuğunuzun temasını yükleyin ve etkinleştirin, çocuğunuzun teması yüklenmeye ve etkinleştirilmeye hazırdır. Bu noktada, divi temanızın yüklendiğinden emin olun, böylece çocuğunuzun teması aktivasyondan sonra çalışır. Çocuğun klasörünü ve tema dosyasını doğrudan WordPress tema dizinine eklerseniz, temayı WordPress’e yüklemeye gerek yoktur. Zaten var. Tek yapmanız gereken WordPress kontrol paneline gitmek ve görünüm> temaya gitmek, imleci çocuğunuzun temasına yönlendirmek ve Etkinleştir düğmesini tıklamaktır. Bilgisayarınızda bir alt klasör ve tema dosyası oluşturduysanız, önce WordPress’e yüklemek için doğru formatta (ZIP) sıkıştırmanız gerekir. Mac ve Windows’un her ikisi de orijinal zip işlevine sahiptir. Zip olduktan sonra, çocuğun temasını yüklemek ve etkinleştirmek her zamanki temadan farklı değildir, WordPress kontrol panelinizdeki Görünümler> Temalar sayfası aracılığıyla oldukça yükleyin ve etkinleştirin ve daha sonra temayı her zamanki gibi etkinleştirin.
Çocuğunuzun temasının doğru çalışıp çalışmadığını test etmek için, Style.css çocuğunuzun temasına biraz CSS ekleyin ve değişikliğinizi kaydedin. Bu değişikliği doğrudan sitede göreceksiniz. Önbellek varsa sayfanızı kişisel bir tarayıcıda açmanız gerekebilir. Dosya Function.php Divi Dosya Functions.php, Divi’nin ana işlevini depolamak için bir yerdir. Çocuk teması için özel bir işlev eklemek için, çocuğumuzun tema klasöründe bir function.php dosyası oluşturduk. Ancak, bu dosya ana tema işlevini tam olarak değiştirmez. Bu, ana stil sayfası için style.css dosyası gibi yeni bir işlev ekleyecektir. Bu bir PHP dosyası olduğundan, tüm PHP kodunuzun uygun PHP etiketine sarılması önemlidir. Ancak, bir çocuk teması oluştururken function.php dosyasını eklediğiniz ve düzenlediğiniz için, kod zaten oradaydıktan hemen sonra yeni bir işlev ekleyebilirsiniz. <? Phpfunction my_theme_enqueue_styles () {
wp_enqueue_style ('ebeveyn tarzı', get_template_directory_uri (). '/style.css');
}
Add_action ('wp_enqueue_scripts', 'my_theme_enqueue_styles');
