Adım Adım WordPress Eğitiminde Alt Tema Oluşturun

Bu yazıda, WordPress'te adım adım alt tema oluşturmayı öğreneceksiniz, WordPress Alt Temalarının tüm temelleri.

Ana Tema CSS stillerini nasıl içe aktaracağınızı, Ana Tema stillerini nasıl geçersiz kılacağınızı ve neden WordPress alt temaları oluşturmanız gerektiğini öğreneceksiniz.

WordPress alt temalarının neden önemli olduğunu öğrenmek için WordPress Ebeveyn ve Çocuk Tema Geliştirme Başlangıç ​​Kılavuzumuzu okumalısınız.

WordPress alt temalarıyla neler yapabilirsiniz?

WordPress alt temaları ile varsayılan aktif WordPress temanızı çok kolay bir şekilde özelleştirebilirsiniz. Alt temalar oluşturmak için gelişmiş HTML, CSS, PHP veya JavaScript bilmenize gerek yoktur.

HTML, CSS ve PHP'nin temel veya iyi anlaşılması çok yardımcı olabilir.

Daha Fazla Okuma: Mükemmel Bir Ücretsiz Veya Premium WordPress Teması Nasıl Seçilir

Sitenizi CSS ile değiştirmek, yeni widget alanları eklemek, ek gezinme menüleri eklemek, özel stille yeni sayfalar oluşturmak için özel dosyaları düzenlemek için bir WordPress alt teması kullanabilirsiniz.

Alt temalarla ayrıca site öğelerini yeniden sıralayabilir, yeni içerik/öğeler ekleyebilir ve herhangi bir işlevi değiştirebilirsiniz.

Neden Bir WordPress Alt Teması Oluşturmalısınız?

Alt temaların var olmasının nedeni, ana temayı güncellediğinizde değişikliklerinizi ve değişikliklerinizi kaybetmeden bir "ana" (mevcut/etkin) temanızı özelleştirebilmenizdir.

Örneğin, single.php dosyasını doğrudan değiştirdiyseniz, özelleştirmeleriniz ilk başta iyi çalışır.

Ancak temanızı değiştirdiğiniz temanın daha yeni bir sürümüne güncellediğinizde, tüm değişikliklerinizi kaybedersiniz ve özelleştirmenizi geri yüklemenin bir yolu olmaz.

Neye ihtiyacın var

Hızlı bir şekilde bir alt tema oluşturup sunucunuza yükleyebilirsiniz, ancak WordPress'i bilgisayarınıza yerel olarak yüklemeniz önerilir.

Yerel WordPress kurulumu ile temanızı hızlı bir şekilde oluşturup test edebilirsiniz, Her zaman internet bağlantısına ihtiyacınız yoktur.

Yerel WordPress sitesi ile, canlı sitenizi etkilemeden hata yapabilirsiniz ve bu çok daha hızlı ve daha iyi bir yoldur.

WordPress'i yerel olarak Windows, MAC veya Linux'a kurmanın birçok yolu vardır. Bitnami WordPress yığınıyla yerel PC'ye WordPress'in nasıl kurulacağını öğrenmek için bu öğreticiyi okuyun.

Yeni başlayanlar için adım adım öğreticiyi zaten yayınladık.

Windows 8'de WAMP Sunucusuna WordPress Nasıl Kurulur

Bitnami Stack Kullanarak Windows 8'e WordPress Nasıl Kurulur

WordPress adım adım kılavuzda alt tema nasıl oluşturulur?

WordPress'teki her alt tema için iki dosya gerekir.

• işlevler.php
• stil.css

style.css dosyasına alt temamız hakkında bilgi ekleyebiliriz, örneğin tema adı, tema açıklaması, yazar adı, ana tema detayları, etiketler vb.

Ayrıca ebeveyn ve alt tema stil sayfasını kaydetmek için bir function.php dosyasına ihtiyacımız var. Functions.php dosyası ile ayrıca yeni fonksiyonlar ekleyebilir, yeni navigasyon menüleri, widget alanları vb. kaydedebiliriz.

Öyleyse ilk çocuk temanızı oluşturmaya başlayalım. Bu alt temada, yeni widget alanları, gezinme menüleri vb. eklemeyeceğiz. Bazı basit CSS değişiklikleri yapmak için alt temamızı kullanacağız, Varsayılan CSS stillerini geçersiz kılacağız.

Herhangi bir WordPress temasını ana tema olarak kullanabilirsiniz, bu eğitim için TwentySixteen teması için bir alt tema oluşturacağım.

Yeni bir klasör oluşturun ve onu yirmi onaltı-çocuk olarak kaydedin veya istediğiniz herhangi bir ad verebilirsiniz, örneğin tasarım.

İki yeni dosya oluşturun ve bunları alt tema klasörümüze function.php ve style.css dosyası olarak kaydedin. Alt tema klasörümün adı designbomb.

Şimdi aşağıdaki bilgileri alt temanızın style.css dosyasına ekleyin ve dosyanızı kaydedin.

 /* Theme Name: Design Child Description: A simple child theme for design blog. Author: Tahir Taous Version: 0.1 Template: twentysixteen */

Şimdi WordPress kontrol panelinize giriş yapın. Görünüm > Temalar > Yeni Ekle'ye gidin ve bu yeni alt temayı yükleyin. Herhangi bir ekran görüntüsü olmadan yeni bir tema göreceksiniz. Farenizi temanın üzerine getirin ve Tema Ayrıntıları düğmesini tıklayın.

Yeni alt temanız için aşağıdaki ayrıntıları göreceksiniz.

Yukarıdaki ekran görüntüsünde, alt temamızla ilgili tüm temel bilgileri görebilirsiniz. Bu temanın yazarı olan çocuk temamızın adı, çocuk temasının açıklaması ve ayrıca görebilirsiniz Bu, Yirmi Onaltı'nın bir alt temasıdır. İleti.

Biz ekledik Şablon: yirmi altı alt temamızın style.css dosyasında. Bu satır, WordPress'e yirmi on altının ana tema olduğunu söylüyor.

Başka bir tema kullanıyorsanız, TwentySixteen'i ana tema adınızla değiştirin.

Şimdi yeni alt temanızı etkinleştirin ve ön sayfanızı yeniden yükleyin. Tüm içeriği herhangi bir stil olmadan görmelisiniz. Endişelenme, bu normal. Bunun nedeni, ana ve alt temamızın style.css dosyasını eklememiş olmamızdır.

Yeni alt temayı etkinleştirdikten sonra Görünüm > Düzenleyici'ye gidin ve function.php (Tema İşlevleri) dosyasını seçin, aşağıdaki kodu functions.php dosyasına ekleyin ve değişikliklerinizi kaydetmek için Dosyayı güncelle düğmesine tıklayın.

 <?php function theme_enqueue_styles() { $parent_; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Şimdi WordPress sitenizin ön ucunu ziyaret edin ve sayfanızı yeniden yükleyin, Normal siteyi tüm TwentySixteen stilleriyle görmelisiniz.

Mevcut stilleri değiştirme

Alt temamızın hazır olduğu anlamına geliyor, ana temamızı yeni CSS stilleriyle özelleştirmenin zamanı geldi. Şimdi Görünüm > Düzenleyici altında style.css dosyasını seçin. Bazı yeni stiller ekleyeceğiz.

Alt temanızın style.css dosyasına aşağıdaki stili ekleyin ve dosyanızı kaydedin.

 .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a { font-weight: 700; background: beige; border-radius: 5px; color: #D2691E; box-shadow: 2px 1px 8px #815317; }

sitenizin ön ucunu yeniden yükleyin ve herhangi bir sayfayı açın. Geçerli menü öğesi için varsayılan stilleri değiştirdik. Aşağıdaki ekran görüntüsüne bakın.

Geçerli menü öğesi için yeni bir arka plan rengi, kenarlık yarıçapı, renk ve kutu gölgesi ekledim. Chrome Dev araçlarıyla stilleri değiştirmek çok basit ve kolaydı.

Bu kadar

Artık alt temayı nasıl oluşturacağınızı biliyorsunuz. O kadar basit ve kolay değil miydi? WordPress alt temalarıyla, ana temanızın hemen hemen her dosyasını özelleştirebilirsiniz, ancak ana temanızın her dosyasını değiştirmeniz önerilmez.

Gerekli işlevleri, özellikleri veya özel sayfaları eklemek için her zaman alt temaları kullanın.

Tasarımlar alt temasını indirin