WordPress Alt Temalarına Başlarken?

Bu eğitimde, bir WordPress alt temasının nasıl oluşturulacağını öğreneceksiniz. WordPress'te yeniyseniz ve WordPress alt temasının ne olduğunu bilmiyorsanız, her şeyi açıklayacağım.

WordPress temaları, bir grup PHP, JavaScript ve CSS dosyası koleksiyonudur. Basit bir deyişle, WordPress temalarıyla blogunuzun görünümünü ve verdiği hissi değiştirebilirsiniz. WordPress temaları çok güçlü olabilir.

Premium WordPress temaları, birçok gelişmiş özellik ve işlevsellik sunar. Binlerce ücretsiz ve premium WordPress teması mevcuttur.

Sıfırdan bir WordPress teması oluşturabilir veya başka bir temaya dayalı bir WordPress teması oluşturabilirsiniz. WordPress'in her sürümü önceden yüklenmiş WordPress temaları ile birlikte gelir ve önceden yüklenmiş WordPress temasını beğenmediyseniz, başka bir WordPress teması yükleyebilir veya bir alt tema oluşturabilirsiniz.

Neden WordPress alt temaları?

Bir WordPress alt teması oluşturmak, mevcut bir temayı almanız ve buna dayalı olarak kendi temanızı oluşturmanız anlamına gelir. Alt tema, özelliklerin çoğunu ana tema olarak bilinen orijinal temadan devralır.

Çocuk teması çok fazla iş ve zaman tasarrufu sağlar. Sıfırdan bir WordPress teması oluşturmak çok zaman alır ve bazen HTML, CSS, PHP bilgisini ilerletir ve gereklidir. Alt temalar ile birçok değişiklik yapabilirsiniz.

Kullanmakta olduğunuz WordPress temasının sağladığı özelleştirme, seçenekler ve özelliklerden memnun değilseniz, bir alt tema oluşturabilirsiniz. WordPress temanızda bir değişiklik yapmak isteseniz bile bir alt tema oluşturmalı veya CSS editör eklentisini kullanmalısınız.

Mevcut WordPress tema dosyalarınızı doğrudan düzenleyebilirsiniz, ancak daha sonra bir güncelleme yaptığınızda tüm özelleştirmelerinizi kaybedersiniz. Bu yüzden bir çocuk temasına ihtiyacınız var.

WordPress alt temalarıyla yapabilecekleriniz

WordPress alt temaları ile istediğiniz kadar özellik ekleyebilirsiniz. O size kalmış. Başlıklar veya bağlantılar için yazı tipi boyutunu veya rengini değiştirmek istiyorsanız, CSS ile çok kolay bir şekilde yapabilirsiniz.

Yeni gezinme menüleri ekleyebilir, yeni kenar çubukları kaydedebilir, ürünler için özel sayfalar oluşturabilir veya özel web yazı tipleri için destek ekleyebilirsiniz.

Neye ihtiyacınız olacak:

Artık WordPress alt temasının ne olduğunu ve neden alt temalar oluşturmanız gerektiğini biliyorsunuz, WordPress alt temasının nasıl oluşturulacağını öğrenmenin zamanı geldi.

Gerekli değildir, ancak geliştirme ve öğrenme amacıyla yerel bir WordPress kurulumu kurmanızı öneririz. Yerel WordPress kurulumu ile yeni eklentilerinizi ve temalarınızı hızlı ve çok kolay bir şekilde test edebilirsiniz.

WordPress'i yerel olarak kurmanın birçok yolu vardır, MAC kullanıcısıysanız, MAMP kullanabilirsiniz, Windows kullanıcıları XAMPP, WAMP veya Bitnami WordPress yükleyici kullanabilir.

• WAMP Sunucusu ile WordPress nasıl kurulur
• MAMP ile WordPress nasıl kurulur
• Bitnami Stack ile WordPress nasıl kurulur

Yeni başlayan biriyseniz, MAC veya PC'nizde tamamen işlevsel bir WordPress web sitesi oluşturmak için Bitnami WordPress yığınını indirebilir ve yükleyebilirsiniz.

Ben şahsen yerel geliştirme için WAMP sunucusunu tercih ediyorum. WordPress'i WAMP'a kurmak zor değil, WAMP, XAMPP veya MAMP kullanarak WordPress'in nasıl kurulacağını öğrenmek için öğreticiyi okuyabilir veya videoları izleyebilirsiniz.

Tema dosyalarını düzenlemek için bir kod düzenleyiciye de ihtiyacınız olacak. Sublimetext, Brackets, Atom birkaç popüler kod editörüdür.

WordPress alt teması nasıl oluşturulur?

Yerel WordPress siteniz hazır olduğunda alt temamızı oluşturmaya başlayabiliriz. WAMP sunucusu kullanıyorsanız, WAMP kurulum dizininize > WWW > WordPress > wp-content > theme klasörüne gidin.

WordPress temaları klasöründe yeni bir klasör oluşturun ve onu yirmi altı çocuk veya istediğiniz herhangi bir şey olarak adlandırın, örneğin InstantShift. Ana tema olarak yirmi altı temayı kullanacağız. Bu, çocuk temamızın TwentySixteen temasına dayalı olacağı anlamına geliyor.

Her çocuk teması için iki dosyaya ihtiyacımız var.

• functions.php
• style.css

Yirmi on altı alt tema klasörünüzde bu iki dosyayı oluşturun. Şimdi dosyalarınızı Metin düzenleyicide açın, hızlı erişim için yirmi onaltılık alt klasörünüzü metin düzenleyici kenar çubuğunda sürükleyebilirsiniz. style.css dosyasını açın ve aşağıdaki kodu ekleyin.

[css]
/*
Tema Adı: InstantShift
Açıklama: InstantShift için Yirmi On Altı Alt Tema.
Yazarı: Tahir Taous
Yazar URI'si: http://www.instantshift.com
Şablon: yirmi altı
Sürüm: 0.1
*/
[/css]

Bir alt tema için yukarıdaki işaretleme gereklidir. Gerekli işaretlemeye sahip bir stil sayfası olmadan WordPress alt temanızı tanıyamaz.

Bence, her şeyi anlayabilirsin. Açıklanacak bir şey yok. Alt temamın adı InstantShift ama çocuğunuza istediğiniz ismi verebilirsiniz. En önemli şey Şablon: yirmi altı . Bu, ana temamızın adıdır. Doğru yazdığından emin ol.

Ana tema olarak başka bir tema kullanıyorsanız, Şablon: yirmi altı onaltını Template: parent-theme-name ile değiştirin.

Stil sayfası başlığında daha fazla bilgi de ekleyebiliriz, ancak bu gerekli değildir. Şimdi WordPress kontrol panelinize giriş yapın. Görünüm > Temalar'a gidin. Alt temamız için herhangi bir ekran görüntüsü eklemediğimiz için InstantShift temasını ekran görüntüsü olmadan görmelisiniz.

Farenizi InstantShift temasının üzerine getirin ve Tema Ayrıntıları düğmesini tıklayın. İşte benim çocuk tema ekran görüntüsü.

Bu ekranı görüyorsanız alt temanız hazır demektir. Artık temamızı özelleştirmeye başlayabiliriz. Bu yeni temayı etkinleştirin ve blogunuzun ön ucunu ziyaret edin. Tüm içeriğinizi herhangi bir stil olmadan göreceksiniz.

Merak etme. Bu normal. Ana temalar stil sayfası dosyasını dahil etmediğimiz için herhangi bir stil göremiyoruz. alt temamızın stil sayfasının çalıştığından emin olalım. Alt temanızın style.css dosyasına aşağıdaki kodu ekleyin.

[css]
gövde{
arka plan rengi: #E7F5FB;
}
[/css]

style.css dosyanızı kaydedin, yerel WordPress sitenizin ön sayfasını yeniden yükleyin ve açık mavi bir arka plan rengi görmelisiniz.

Ana temanın stil sayfasını kaydetme

Tüm stilleri sıfırdan yaratmak istemiyoruz. Alt temanın style.css dosyasıyla sadece birkaç yeni stil ekleyeceğiz. Şimdi ana temanın sty.css dosyasını alt temamıza ekleyelim.

Functions.php dosyasını açın ve aşağıdaki kodu alt temanın functions.php dosyasına ekleyin.

[php]
<?php

// Ana Tema Stilleri //
// https://codex.wordpress.org/Child_Themes //

function theme_enqueue_styles() {
$parent_style = 'ebeveyn tarzı';
ks29so_enqueue_style( $parent_style, get_template_directory_uri() .'/style.css');
ks29so_enqueue_style('çocuk stili',
get_stylesheet_directory_uri() . '/style.css',
dizi( $parent_style )
);
}
add_action('ks29so_enqueue_scripts', 'theme_enqueue_styles');
[/php]

Şimdi yerel WordPress sitenizi yeniden yüklerseniz, tüm TwentySixteen stilleriyle normal temayı göreceksiniz.

Bu kadar. İlk alt temanızı başarıyla oluşturdunuz. Ayrıca gövde için yeni bir arka plan rengi eklediniz.

Ancak alt temamızı yalnızca gövdenin arka planını değiştirmek için oluşturmadık. Temamızı özelleştirmeye başlayalım.

Üst Tema Stillerini Geçersiz Kılma

Özelleştirme Başlığı:

Varsayılan olarak, Twenty Sixteen temasının başlığında çok fazla dolgu vardır. Doldurmayı değiştirelim ve site başlığı için yeni arka plan rengini ekleyelim. Alt temanızın style.css dosyasına aşağıdaki kodu ekleyin, dosyanızı kaydedin ve değişiklikleri görmek için sitenizin ön ucunu yeniden yükleyin.

[css]
.site başlığı {
dolgu: 0 4.5455%;
arka plan: #CDDC39;
kenar boşluğu-alt: 2em;
}
[/css]

Burada yeni stillerimizi eklemeden önce ve sonra site başlığının ekran görüntüsünü görebilirsiniz.

Ana Navigasyonu Özelleştirme

Şimdi ana gezinme menüsü öğeleri için arka plan rengini değiştirelim. CSS stillerimi düzenlemek için Chrome geliştirici araçlarını kullanmayı seviyorum.

Web sayfalarını Chrome geliştirme araçlarıyla düzenledikten sonra, yeni kodu Chrome geliştirme araçlarından kopyalayabilir ve alt temanızın style.css dosyasına yapıştırabilirsiniz.

Alt temanızın style.css dosyasını açın ve içine aşağıdaki kodu ekleyin.

[css]
#menü-başlık &gt; ben {
arka plan: rgba(185, 202, 22, 0.97);
kenar-sağ: 4px !important;
sınır yarıçapı: 5 piksel;
}
[/css]

Burada yeni başlığımızın ekran görüntüsünü görebilirsiniz. Temamızı çocuk temasıyla çok kolay bir şekilde özelleştirdik.

Son sözler

Artık WordPress alt temalarını nasıl oluşturabileceğinizi biliyorsunuz. Çok basit ve kolaydır. Temel HTML ve CSS anlayışı ile sitenizin tasarımını tamamen değiştirebilirsiniz.

Ayrıca alt tema ile yeni gezinme menüleri, widget alanları, yeni biz yazı tipleri için destek vb. ekleyebilirsiniz. Ancak her şeyi tek bir makalede ele alamayız.

WordPress tema geliştirmeyi öğrenmek istiyorsanız, WordPress alt temaları ile başlamalısınız. Tema özelleştirmenin temellerini öğrenin.