WordPress Alt Teması Nasıl Oluşturulur (Video)

WordPress’te bir alt tema oluşturmak mı istiyorsunuz? WordPress temellerini öğrendikten sonra, muhtemelen WordPress sitenizi nasıl özelleştireceğinizi öğrenmek istersiniz. Çocuk temalarının WordPress temalarını özelleştirmek isteyen herkes için harika bir başlangıç ​​noktası olduğuna inanıyoruz. Bu makalede, WordPress’te nasıl bir çocuk teması oluşturulacağını göstereceğiz.


Yirmi Onüç tabanlı basit bir WordPress alt teması

Video öğretici:

WPBeginner’a abone olun

Videoyu izlemek istemeyenler için aşağıdaki makaleyi okumaya devam edebilirsiniz.

Neden Bir Çocuk Teması Oluşturmanız Gerekiyor??

Alt temalar, WordPress temalarınızı özelleştirmenin en iyi yolu olarak kabul edilir. Bir alt tema, ana temasının tüm özelliklerini ve görünümünü devralır. Üst temayı etkilemeden özelleştirebilirsiniz. Bu, değişikliklerinizi kaybetme endişesi duymadan ana temayı kolayca güncellemenizi sağlar.

Çocuk temaları hakkında daha fazla bilgiyi WordPress Çocuk Teması nedir? Artıları, Eksileri ve Daha Fazlası.

Gereksinimler

Kendi değişikliklerinizi yapabilmeniz için temel bir CSS / HTML bilgisi gerekir. Bazı PHP bilgisi kesinlikle yardımcı olacaktır. Kod snippet’lerini diğer kaynaklardan kopyalayıp yapıştırma konusunda iyiyseniz, bu da işe yarayacaktır.

Yerel kalkınma ortamınız üzerinde pratik yapmanızı öneririz. Test amacıyla canlı bir WordPress sitesini yerel sunucuya taşıyabilir veya tema geliştirmek için kukla içerik kullanabilirsiniz.

Başlangıç

Herhangi bir iyi WordPress teması ana tema olarak kullanılabilir. Bununla birlikte, birçok farklı türde tema vardır ve bazıları en kolay çalışılamayabilir. Bu öğretici adına, varsayılan WordPress temalarından biri olan Yirmi Onüç kullanacağız.

İlk Çocuk Temanızı Oluşturma

Öncelikle WordPress kurulum klasörünüzde / wp-content / themes / dosyasını açmanız ve çocuğunuz için yeni bir klasör oluşturmanız gerekir. Bu klasörü istediğiniz herhangi bir adla adlandırabilirsiniz. Bu eğitim için wpbdemo adını vereceğiz.

Yeni bir WordPress Alt Teması Oluşturma

Not Defteri gibi bir metin düzenleyici açın ve şu kodu yapıştırın:

/ *
Tema Adı: WPB Çocuk Teması
Tema URI’si: https://www.wpbeginner.com/
Açıklama: Yirmi Onüç çocuk teması
Eser sahibi: WPBeginner
Yazar URI’si: https://www.wpbeginner.com
Şablon: yirmi onüç
Sürüm: 1.0.0
* /

@import url ("../twentythirteen/style.css");

Şimdi bu dosyayı oluşturduğunuz alt tema klasörüne style.css olarak kaydedin.

Bu dosyadaki şeylerin çoğu kendi kendini açıklamaktadır. Gerçekten dikkat etmek istediğiniz şey Şablon: yirmi onüç.

Bu WordPress’e temamızın bir alt tema olduğunu ve ana tema dizini adımızın yirmi onüç olduğunu söyler. Üst klasör adı büyük / küçük harfe duyarlıdır. WordPress’e Şablon: Yirmi Onüç sağlarsak, çalışmaz.

Bu koddaki son satır, ana temamızın stil sayfasını alt temaya aktarır.

Bu, bir alt tema oluşturmak için minimum gereksinimdir. Şimdi gidebilirsin Görünüm »Temalar WPB Çocuk Temasını göreceksiniz. Sitenizdeki alt temayı kullanmaya başlamak için etkinleştir düğmesini tıklamanız gerekir.

WordPress alt temanızı etkinleştirme

Alt temanızdaki hiçbir şeyi değiştirmediğiniz için, siteniz ana temasının tüm işlevlerini ve görünümünü kullanacaktır.

Çocuk Temanızı Özelleştirme

Her WordPress temasının ana dizinlerinde bir style.css dosyası vardır. Çoğunlukla bu, temanızın tüm CSS’nin gittiği ana stil sayfasıdır. Ancak, bazı temalarda yalnızca temanın başlık bilgileri bulunabilir. Bu temalarda genellikle ayrı bir dizinde bulunan CSS dosyaları bulunur.

Bu bölüm için biraz CSS uzmanlığına ihtiyacınız olacak.

Google Chrome ve Firefox yerleşik denetçi araçlarıyla birlikte gelir. Bu araçlar, bir web sayfasının herhangi bir öğesinin arkasındaki HTML ve CSS’ye bakmanıza olanak tanır.

Gezinme menüsü için kullanılan CSS’yi görmek istiyorsanız, farenizi gezinme menüsüne götürün ve Öğeyi Denetle öğesini seçmek için sağ tıklayın.

Google Chrome'da Elemanları Denetle aracını kullanma

Bu, tarayıcı ekranınızı iki parçaya böler. Ekranın alt kısmında, sayfanın HTML ve CSS’sini göreceksiniz.

Oluşturulan HTML ve CSS stil kurallarını gösteren Chrome denetçisi

Farenizi farklı HTML satırlarında hareket ettirdiğinizde, Chrome denetçisi bunları üst pencerede vurgulayacaktır. Gördüğünüz gibi yukarıdaki ekran görüntüsünde navigasyon menüsü seçildi.

Ayrıca sağdaki pencerede vurgulanan öğeyle ilgili CSS kurallarını gösterecektir..

Nasıl görüneceğini görmek için CSS’yi orada düzenlemeyi deneyebilirsiniz. .Navbar’ın arka plan rengini # e8e5ce olarak değiştirmeyi deneyelim.

Chrome Inspector'da CSS ile oynamak

Gezinme çubuğunun arka plan renginin değişeceğini göreceksiniz. Bunu beğendiyseniz, bu CSS kuralını kopyalayıp Çocuk Temanızın style.css dosyasına yapıştırabilirsiniz.

.navbar {
arka plan rengi: # e8e5ce;
}

Style.css dosyasında yaptığınız değişiklikleri kaydedin ve ardından sitenizi önizleyin.

Temanızın stil sayfasında değiştirmek istediğiniz herhangi bir şey için işlemi tekrarlayın. Alt tema için oluşturduğumuz tam stil sayfası. Denemek ve değiştirmek için çekinmeyin.

/ *
Tema Adı: WPB Çocuk Teması
Tema URI’si: https://www.wpbeginner.com
Açıklama: Yirmi Onüç çocuk teması
Eser sahibi: WPBeginner
Yazar URI’si: https://www.wpbeginner.com
Şablon: yirmi onüç
Sürüm: 1.0.0
* /

@import url ("../twentythirteen/style.css");

.Site Başlığı {
dolgu: 30 piksel 0 30 piksel;
}

.site başlığı .home-link {
min. yükseklik: 0 piksel;
}

.navbar {
arka plan rengi: # e8e5ce;
}

.Araç {
arka plan rengi: # e8e5ce;
}
.site altbilgisi {
arka plan rengi: # d8cdc1;
}
.site-altbilgisi .sidebar-container {
background-color: # 533F2A
}

Şablon Dosyalarını Düzenleme

Yirmi Onüç Düzen

Her WordPress temasının farklı bir düzeni vardır. Yirmi Onüç temasının düzenine bakalım. Üstbilgi, gezinme menüleri, içerik döngüsü, altbilgi widget alanı, ikincil widget alanı ve altbilginiz var.

Bu bölümlerin her biri yirmi onüç klasördeki farklı dosyalar tarafından işlenir. Bu dosyalara şablon denir.

Çoğu zaman bu şablonlar, kullanıldıkları alandan sonra adlandırılır. Örneğin, altbilgi bölümü genellikle footer.php dosyası, üstbilgi ve gezinme alanları header.php dosyası tarafından işlenir. İçerik alanı gibi bazı alanlar, içerik şablonları adı verilen birden fazla dosya tarafından işlenir.

Öncelikle değiştirmek istediğiniz tema dosyasını seçip alt temanıza kopyalamanız.

Örneğin, ‘WordPress tarafından desteklenmektedir’ bağlantısını altbilgi alanından kaldırmak ve buraya bir telif hakkı bildirimi eklemek istersiniz. Footer.php dosyasını alt temanıza kopyalayın ve not defteri gibi düz bir metin düzenleyicide açın. Kaldırmak istediğiniz satırları bulun ve kendi satırlarınızla değiştirin. Bunun gibi:

<?php
/ **
* Altbilgiyi görüntüleme şablonu
*
* Altbilgi içeriği ve #main ve #page div öğelerinin kapanışını içerir.
*
* @paket WordPress
* @subpackage Yirmi_Üçüncü
* @since Yirmi Onüç 1.0
* /
?>

<?php get_sidebar (‘ana’); ?>

© Telif Hakkı <?php eko tarihi (Y); ?> <?php bloginfo (‘ad’); ?> Tüm hakları Saklıdır.



<?php wp_footer (); ?>

Bu kodda, Yirmi Onüç krediyi bir telif hakkı bildirimi ile değiştirdik.

Alt temalar oluştururken sorun giderme çok daha kolaydır. Örneğin, ana temanızın gerektirdiği bir şeyi yanlışlıkla sildiyseniz, dosyayı alt temanızdan silebilir ve baştan başlayabilirsiniz..

Çocuk Temasına Yeni İşlevler Ekleme

Temanızın function.php dosyasına kod snippet’ini kopyalayıp yapıştırmanızı isteyen birçok WordPress öğreticisi bulacaksınız..

Bir ana temanın function.php dosyasına kod parçacıkları eklemek, ana tema için yeni bir güncelleme olduğunda değişikliklerinizin üzerine yazılacağı anlamına gelir. Bu nedenle her zaman bir alt tema kullanılması ve tüm özel kod snippet’lerinizi alt temanın işlevlerine eklemeniz önerilir. Php dosyası.

Alt temanızın klasöründe yeni bir dosya oluşturalım ve işlevlerini adlandıralım. Php. Bu örnekte, varsayılan başlık resmini kendi özel yaptığımız resmimize değiştirecek küçük bir kod snippet’i ekleyeceğiz.

Yirmi Onüç’ün varsayılan başlık resmini düzenleyerek bir başlık resmi ve bir küçük resim oluşturduk. Ardından, / images / headers / folder içindeki alt temamıza yükledik.

Bundan sonra WordPress’e bu görüntüyü temamız için varsayılan başlık resmi olarak kullanmasını söylemeliyiz. Bunu, bu kod pasajını alt temamızın function.php dosyasına ekleyerek yapabiliriz:

<?php
işlev wpbdemo_custom_header_setup () {

add_theme_support (‘özel başlık’, dizi (‘varsayılan resim’ => ‘% s / images / headers / circle-wpb.png’));

register_default_headers (dizi (
‘karamel’ => dizi(
‘url’ => ‘% 2 $ s / images / başlıklar / daire-wpb.png’,
‘thumbnail_url’ => ‘% 2 $ s / images / başlıklar / daire-WPB-thumbnail.png’,
‘description’ => __ (‘Karamel’, ‘Karamel başlığı’, ‘yirmi onüç’)
),
));

}
add_action (‘after_setup_theme’, ‘wpbdemo_custom_header_setup’);
?>

Şimdi ziyaret edersen Görünüm »Başlık, eklediğimiz resmi varsayılan resim olarak görebileceksiniz.

WordPress Çocuk Temanızdaki tema başlığını değiştirme

İhtiyacınız olan herhangi bir özel kod snippet’ini alt temanızın function.php dosyasına ekleyebilirsiniz. WordPress fonksiyonlar dosyası için bu 25+ son derece kullanışlı numaraya göz atın.

Sorun giderme

Yeni başlayanlar olarak, ilk çocuk temanız üzerinde çalışırken hata yapmanız bekleniyor. Çok çabuk pes etmeyin. Düzeltme bulmak için en yaygın WordPress hataları listemize göz atın.

Göreceğiniz en yaygın hata, muhtemelen kodda bir şey kaçırdığınızda ortaya çıkan sözdizimi hatasıdır. WordPress’de sözdizimi hatasının nasıl bulunacağını ve düzeltileceğini açıklayan hızlı bir kılavuz.

Son sonuç

Yirmi Onüç tabanlı basit bir WordPress alt teması

Demo Temasını İndir

WordPress çocuk teması eğiticimizin son sonucunu buraya tıklayarak indirebilirsiniz. Bunun Yirmi Onüç temasına dayanan çok temel bir çocuk teması olduğunu unutmayın.

Yirmi Onüç Temelli Diğer Çocuk Temaları

İşte Yirmi Onüç tabanlı diğer WordPress alt temaları. Onlara bir göz atın ve bu tema geliştiricilerinin Yirmi Onüç’ü nasıl özelleştirdiğini görün.

kutsal

Holi - Yirmi Onüç tabanlı bir WordPress alt teması

Kiraz çiçeği

Cherry Blossom - Yirmi Onüç Çocuk Teması

2013 Mavi

2013 Mavi

Düz Portföy

Düz Portföy

Bu makalenin bir WordPress alt teması oluşturmayı öğrenmenize yardımcı olmasını umuyoruz. İhtiyacı olanlar için bol miktarda destek olduğunu unutmayın.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map