WooCommerce Vitrin Alt Teması Nasıl Oluşturulur

Son güncelleme - 5 Mart 2021

Alt tema, temel stilini ve işlevlerini koruyan mevcut bir temanın bir modifikasyonudur. Orijinal temaya ana tema, yeni değiştirilen temaya ise alt tema adı verilir. Kendi WooCommerce Storefront alt temanızı oluşturmak, yeni bir tema satın almadan mağazanızı kişiselleştirmek istediğinizde gitmenin iyi bir yoludur.

WooCommerce Storefront'u edinin!

Çocuk teması – Genel bakış

Giriş bölümünde belirtildiği gibi, bir alt tema ana temayı temel olarak kullanacak ve temaya ek özellikler kazandıracaktır. Genellikle bu, bir tema için varyasyonlar yapmak istediğinizde iyi bir seçenektir. Storefront alt temaları dizininde, çeşitli sektörlere ve ürün türlerine uygun çok çeşitli premium alt temalar bulabilirsiniz. Bu şekilde, Storefront için kendi alt temanızı kolayca oluşturabilirsiniz.

Alt tema kullanmanın avantajları

Bir temayı doğrudan değiştirmek, güncelleme sırasında değişiklikleri kaybetme riskini taşır. Bir alt tema, değişikliklerin bozulmadan korunmasını sağlar. Genel olarak, bir alt tema geliştirmek, yeni bir tema oluşturmaktan daha hızlı bir süreçtir. Ek olarak, WordPress tema geliştirme ile ilgilenenler için bir alt tema oluşturmak, denemek ve öğrenmek için harika bir yoldur.

Bir alt tema oluşturmanın avantajlarından bazıları şunlardır:

• Aynı tema için farklı etki alanlarına uyacak şekilde farklı varyasyonlar oluşturmaya yardımcı olur.
• Ana temayı değiştirmeden tasarım özelleştirmelerini ayrı ayrı kaydedebilir.
• Özelleştirmeler, ana temanın veya WordPress veya WooCommerce'in çekirdek dosyalarının güncellenmesinden sonra bile korunabilir.

WooCommerce Vitrin Alt Teması Oluşturma

Bir temayı özelleştirmeye çalışmadan önce sitenizin uygun bir yedeğini almanız önerilir. Yeni alt temayı yüklemek için sunucunuza FTP erişimine ihtiyacınız var.

İşlemi başlatmak için, WooCommerce Belgelerinde verilen aşağıdaki örnek kodla alt tema için bir style.css dosyası oluşturun.

Ardından, şablon alanını Storefront'a işaret edecek şekilde değiştirin.

Burada fark etmiş olabileceğiniz bir fark, Storefront ile yirmi onbeş tema için bir alt tema oluştururken izlenen kuyruğa alma adımına ihtiyacınız olmamasıdır. Storefront kullanarak bir alt tema oluştururken, işlemi başlatmak için yalnızca boş bir function.php dosyasına ve bir style.css dosyasına ihtiyacınız vardır.

Dosyayı bir alt tema klasörüne aktarabilir, bir zip dosyası oluşturabilir ve karşıya yükleyebilirsiniz. Bu yapıldıktan sonra, yeni alt temayı Görünüm > Temalar'dan etkinleştirin.

Barındırma hizmetinize erişiminiz varsa, alt temayı FTP aracılığıyla da yükleyebilirsiniz. FileZilla gibi bir FTP programı kullanabilirsiniz.

Mac ve Windows için En İyi FTP İstemcileri.

Artık alt tema stil sayfasına ve şablon dosyalarına kodlar ekleyerek özelleştirebilirsiniz. Örneğin, herhangi bir şablon dosyasını Storefront tema klasöründen alt tema klasörüne kopyalayabilirsiniz. Alt tema klasöründeki bu dosya, ihtiyacınıza göre kodu değiştirerek özelleştirilebilir.

Bir alt temanın tasarımı ve işlevselliği nasıl özelleştirilir?

Yukarıdaki ayarlarla Storefront için bir alt tema oluşturdunuz. Ancak, henüz temanız için özel bir özellik yok. Ana temayı değiştirmeden alt temanıza işlevler ve tasarım özelleştirmeleri ekleyebilirsiniz.

Tasarım değişiklikleri

Örneğin, alt tema için oluşturduğunuz yukarıdaki stil sayfasında, aşağıdaki kodla site başlığının rengini özelleştirebilirsiniz:
.site-branding h1 a {
color: red;
}

Şablon değişiklikleri

Ayrıca tema klasöründeki şablon dosyalarını (*.php) değiştirebilirsiniz. Örneğin, header.php dosyasını wp-content/themes/storefront/header.php ana tema klasöründen wp-content/themes/storefront-child/header.php alt tema klasörüne kopyalayarak belirli bir kodu değiştirebilirsiniz.

Kopyalama işlemi tamamlandıktan sonra, header.php dosyasını düzenleyebilir ve herhangi bir kodu ihtiyaca göre özelleştirebilirsiniz. Alt temadaki header.php, ana temanın header.php'sinin yerine kullanılacaktır.

WooCommerce şablonlarında da bu şekilde değişiklik yapabilirsiniz. Alt temanızda yeni bir klasör oluşturun ve ona “WooCommerce” adını verin. Burada, site tasarımınızla uyumlu hale getirmek için WooCommerce şablonlarında değişiklik yapabilirsiniz.

Bu WooCommerce belgeleri, WooCommerce şablon yapısı hakkında daha fazla bilgi edinmenize yardımcı olacaktır.

İşlevselliği özelleştirme

Bir alt tema oluşturduğunuzda, onun da özel işlevselliğe sahip olmasını istersiniz. Bunun için öncelikle function.php dosyanızın boş olduğundan ve ebeveynin function.php dosyasından herhangi bir bilgi içermediğinden emin olmanız gerekir. Şimdi, ana temanın işlevindeki belirli bir işlev takılabilirse (bir koşullu if ifadesine sarılmış), o zaman bunu alt temaların function.php dosyasına kopyalayabileceksiniz. Takılabilir bir işlevi kopyaladıktan sonra, gerektiği gibi değişiklik yapabilirsiniz. Aşağıda takılabilir bir işlev için bir örnek verilmiştir:
if (!function_exists("parent_function_name")) {
parent_function_name() {
...
}
}

Genel bir çocuk teması oluşturma

Alt tema oluşturma süreci Storefront ile diğer temalara göre daha farklı ve basittir. Bu yazıda, genel yöntemin temel ayrıntılarına da bakacağız.

İlk adım bir tema dizini oluşturmaktır. Ardından, alt tema için bir stil sayfası (style.css dosyası) oluşturun. WooCommerce, stilleri doğru şekilde sıraya koymak için kullanışlı olan bir function.php dosyası oluşturmanızı önerir.

Genel bir çocuk teması oluşturma

Alt tema oluşturma süreci vitrinde diğer temalara göre farklı ve basittir. Bu yazıda, genel yöntemin temel ayrıntılarına da bakacağız.

İlk adım bir tema dizini oluşturmaktır. Ardından, alt tema için bir stil sayfası (style.css dosyası) oluşturun. WooCommerce, stilleri doğru şekilde sıraya koymak için kullanışlı olan bir function.php dosyası oluşturmanızı önerir.

Alt tema dizini oluşturma

Alt tema dizinini wp-content/themes içinde oluşturun ve yerleştirin. Alt tema dizininin adının '-child' ile eklenmesi zorunlu olmasa da önerilir. Herhangi bir sorun yaşamamak için alt tema dizini adında boşluk bırakmamaya özen gösterilmelidir.

Alt temanın stil sayfasını oluşturma

İşlemi başlatmak için bir stil sayfası başlığı oluşturun. Aşağıda, Yirmi Onbeş temasına dayalı bir alt tema için oluşturulmuş bir stil sayfası başlığının bir WordPress Kodeksi örneği verilmiştir.

Bir alt tema oluştururken, bu örnek metni referans noktası olarak kullanabilir ve onu temanızla ilgili ayrıntılarla değiştirebilirsiniz. Şablon satırı, ana temanın dizin adını verir. Çalıştığınız temaya göre ayarlamanız gerekir.

Ebeveyn ve çocuk temalarını kuyruğa alma

Üst ve alt temaları kuyruğa almak için alt temalar dizininde bir functions.php dosyası oluşturun. Bir wp_enqueue_scripts eylemi ekleyerek ve alt temanın function.php dosyasında wp_enqueue_style() işlevini kullanarak ana tema stil sayfasını sıraya koyun. Alt temanızın function.php dosyasını bir PHP etiketiyle (<?php) açın. Ardından, üst ve alt tema stil sayfalarını kuyruğa alın. Aşağıdaki ekran görüntüsü, yalnızca ana temanız CSS'yi tutmak için bir .css dosyası kullanıyorsa çalışacak bir örnektir. style.css, main.css, ie.css gibi birden fazla .css dosyası varsa, tüm ana tema bağımlılıklarını koruduğunuzdan emin olun. İyi düzeyde kodlama bilgisi, bunu ilk seferde doğru yapmak için açıkça önemli bir faktördür.

Ayrıca, alt tema style.css'nizdeki gerçek CSS kodunu da kuyruğa almanız gerekir. Alt tema stil sayfasının üst stil sayfasından sonra yüklenmesini sağlamak için üst stili bir bağımlılık olarak ayarlayabilirsiniz. Ek olarak, alt temanız için de önbelleği bozabilmenizi sağlamak için alt temanın sürüm numarasını ekleyin. Codex'te önerilen örnek aşağıda verilmiştir:

Çocuk temanızı etkinleştirme

Alt tema klasörünüzün bir zip dosyasını oluşturun ve Görünüm → Temalar → Yeni Tema Ekle bölümünde gezinerek yükleyin.

Artık yeni alt tema, temalar listesinde görünecek.

Etkinleştir düğmesine tıklayarak yeni alt temayı şimdi etkinleştirebilirsiniz.

• Storefront temasını şimdi indirin.
• WordPress Codex'ten Çocuk temaları hakkında daha fazla bilgi edinin.

Daha iyi bilmek için bu WooCommerce bağlantısından örnek bir alt tema da indirebilirsiniz. Veya ilgili makalelerimizden bazılarını okuyun:

1. WooCommerce Mağazanız için Doğru Temayı Nasıl Seçersiniz?
2. Storefront Nasıl Kurulur ve Yapılandırılır?
3. WooCommerce Temalarında Son Trendler.