Sıfırdan Bir WordPress Genesis Özel Çocuk Teması Nasıl Oluşturulur

Yayınlanan: 2018-04-11
Nasıl-yaratılır-genesis-çocuk-teması-sıfırdan
@Cloudways'i takip edin

Konunun özüne girmeden ve şablonları düzenlemeden önce, basit ama önemli bir soruyu yanıtlayarak başlamak istiyorum: Neden kendi WordPress temanızı yaratıyorsunuz? Zaten birçoğu çok kaliteli olan birçok mevcut tema var.

Üstelik böyle bir maceraya atılmak çok fazla zaman ve enerji gerektirir. Evet, ancak kendi WordPress temanızı oluşturmanın da pek çok faydası vardır ve bunlar göz ardı edilemez. WordPress geliştiricilerine göre:

  • Ana tema güncellendiğinde özelleştirme etkilenmez.
  • Ana tema özelliklerini devralır.
  • Tüm temayı kodlamadan özelleştirme esnekliği.

Genesis çocuk temasını sıfırdan oluşturma adımlarını inceleyeceğiz. Tabii ki, bu WordPress'in genişliği göz önüne alındığında tam bir eğitim değil, ancak bu makale projenize sağ ayakla başlamanız için sağlam bir temel konusunda size rehberlik edecektir.

Genesis Alt Tema Dosyaları

Wp-content> temalar içinde yeni bir klasör oluşturun ve bu seçtiğiniz bir ad verin. Dosyamızı Custom olarak adlandırıyoruz.

Şimdi alt tema klasörünüzün içinde aşağıdaki üç yeni dosyayı oluşturun:

  • işlevler.php
  • stil.css
  • ön sayfa.php

1. Functions.php Dosyası

Bu dosya, Genesis'in varsayılan işlevlerini ve WordPress'in kendisini değiştirmek için Genesis alt temamızda oluşturacağımız özel işlevlerimizi içerir.

Bunun için dosyayı metin düzenleyicide açın ve doc bloğu biçiminde standart belgeler ekleyerek başlayın.

 <?php

/**
 * Tema özelleştirmeleri
 *
 * @paket Özel
 * @yazar Ibad Rehman
 * @link https://github.com/ibadrehman/custom
 * @copyright Telif hakkı (c) 2018, Ibad Rehman
 * @lisans GPL-2.0+
 */

Bu belge parçası, tema adımız, yazarı, barındırıldığı bağlantı ve lisans türü ile ilgili bilgileri içerir.

WordPress'teki function.php dosyası hakkında ayrıntılı bilgi için codex.wordpress adresini ziyaret edin.

Ekleyeceğimiz bir sonraki kod satırı Genesis çerçevesini başlatacak. Bunu yapmanın iki yöntemi vardır. İlk olarak, eğitimde kullanacak olan functions.php dosyasına ve ikinci iç ini.php dosyasını başvurarak Genesis kurulum fonksiyonu bizim kodu çengel gereğidir.

 add_action('Genesis_setup', 'custom_setup',15);

Bu işlev, ilk parametre olan Genesis kurulumuna bağlanır. Sonraki parametre, özel Genesis alt tema işlevlerimizi yürütmek için kullanacağımız işlevin adıdır. Son olarak, üçüncü parametre, işlev dosyamızın ana temadan sonra yürütülmesini sağlayan değerdir, böylece özel işlevimizi geçersiz kılabilir.

WordPress'teki metin alanı, WordPress'in yüklenen tüm çeviriler arasında tanımlama yapmasına yardımcı olan bir tanımlayıcıdır ve bunun için function.php dosyamıza aşağıdaki gibi başka bir işlev ekleyeceğiz:

 // Alt tema metin alanını yükle.
load_child_theme_textdomain('özel');

Genesis alt tema kurulum işlevimiz için özel bir sarmalayıcı işlevi başlatacağız.

 işlev custom_setup(){}

Ve bu fonksiyonun içinde aşağıdakileri başlatacağız:

  • sabitler
  • Tema Desteği

sabitler

Sabitler, Genesis alt temanızı değiştirmeniz gerektiğinde kullanışlıdır. Burada yapılan değişiklikler tema genelinde uygulanacaktır.

Sabitleri eklemek için aşağıdaki parçacığı ekleyin.

 // Tema sabitlerini tanımlayın.
define('CHILD_THEME_NAME', 'Özel');
define('CHILD_THEME_URL', 'https://github.com/ibadrehman/custom');
define('CHILD_THEME_VERSION', '1.0.0');

Tema Desteği

Sabitleri tanımladıktan sonra Genesis alt temamız için tema desteği eklemeye başlıyoruz. Menüler, gönderiler, galeri, başlık, yorumlar gibi çeşitli WordPress seçeneklerine tema desteği eklenebilir.

Bunu uygulamak için add_theme_support işlevini kullanacağız.

 // HTML5 işaretleme yapısı ekleyin.
	add_theme_support( 'html5', dizi( 'yorum-listesi', 'yorum-formu', 'arama-formu', 'galeri', 'başlık' ) );
	
	// Mobil tarayıcılar için görünüm meta etiketi ekleyin.
	add_theme_support('Genesis-responsive-viewport');
	
	// Erişilebilirlik için tema desteği ekleyin.
	add_theme_support('Genesis-erişilebilirlik', dizi(
		'404 sayfa',
		'Aşağıya doğru açılan menü',
		'başlıklar',
		'rem',
		'Arama Formu',
		'atlama bağlantıları',
	) );

Son olarak, tema desteğimiz için altbilgi widget'larımıza da destek ekleyeceğiz.

 // Altbilgi widget'ları için tema desteği ekleyin.
add_theme_support('Genesis-footer-widgets', 3 );

Ekstra Kenar Çubuğu Düzenlerinden Kurtulma

Genesis, varsayılan olarak altı düzen seçeneğiyle gelir ve bir tema geliştiricisi olarak, her biri için stil desteği vermek bizim sorumluluğumuzdur. Altı düzen seçeneğinin tümüne sahip olmak zorunlu olmasa da. Bu nedenle, üç seçeneği tamamen ortadan kaldıracağız, bu yüzden sadece üç seçeneğimiz kaldı.

Bunu yapmak için bu kodu function.php dosyasına ekleyin.

 // İkincil bir kenar çubuğu kullanan düzenlerin kaydını kaldırın.
Genesis_unregister_layout('içerik-kenar-kenar çubuğu');
Genesis_unregister_layout('kenar-içerik-kenar çubuğu');
Genesis_unregister_layout('kenar çubuğu-içeriği');

  // İkincil kenar çubuğunun kaydını sil.
unregister_sidebar('kenar çubuğu-alt');

2. Style.css Dosyası

Tema adı, yazar, sürüm, açıklama ve şablon vb. bilgileri içeren standart başlık metnini ekleyerek CSS dosyasını şekillendirmeye başlayacağız.

Stil sayfası özelleştirmesi

HTML'yi şekillendirme

Şimdi HTML5 Sıfırlama ve varsayılan HTML5 öğeleri için destek eklememiz gerekiyor. Yeni başlayanlar için, HTML5 herhangi bir varsayılan tarayıcı stilini sıfırlar ve HTML5 öğelerinin daha iyi oluşturulmasını sağlar.

Varsayılan HTML5 öğeleri, başlıklar, listeler, düğmeler, paragraflar vb. gibi temel öğeler için stil ekler.

Şekillendirme Tema Yapısı

Daha sonra Genesis alt tema yapımız için gerekli olan CSS'yi ekleyeceğiz. Bu bölümde, site başlığımızı, bölümümüzü ve alt bilgimizi biçimlendirmeyi amaçlıyoruz ve bunların ilgili sınıfları:

  • site_başlığı
  • site_inner
  • site_footer

Şekillendirme Tema Gezinme

Devam edersek, tema navigasyonumuza stil ekleyeceğiz. Bu özel çocuk temasında, sayfamızın üst kısmında ortalanmış sağlam bir gezinme çubuğumuz olacak.

stil gezinme çubuğu

Alt temanızı şekillendirirken kendinizi kaybolmuş hissediyorsanız Genesis örnek tema yapısına başvurabilirsiniz. Basit bir yapıya sahiptir ve kodun takibi kolaydır.

Yazı Tipi Ekleme

Tema stilinde önemli bir unsur, başlıkları ve gövde metni için kullanılan yazı tipidir. Alt temamıza font eklemek için Google fontlarından faydalanacağız. Bunu yapmak için iki dosyayı düzenlememiz gerekiyor: sırasıyla function.php ve style.css.

function.php dosyasında, özel fonksiyonumuzun içinde wp_enqueue_style fonksiyonunu kullanacağız.

 function custom_equeue_styles() {

	wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic|Istakoz');

}

URL'ye bakarak da görebileceğiniz gibi, iki popüler yazı tipi kullandık; Gövde metni için Roboto ve başlıklar için Lobster.

Şimdi yazı tiplerimizi alt temamıza bağlamak için bir eylem de eklemeliyiz.

 // Google Yazı Tipi stil sayfası ekleyin.
add_action('wp_enqueue_scripts', 'custom_equeue_styles');

3. Ön sayfa.php Dosyası

Çoğu WordPress temasının, genellikle kullanıcı tercihlerine göre statik gönderileri veya en son gönderileri görüntüleyen bu şablonu kullandığını fark etmiş olabilirsiniz. Bu, bir tema için gerekli bir şablon dosyası değildir, ancak bunu alt temamızda en son gönderileri veya özel widget'ları görüntülemek için kullanacağız (bu makalenin kapsamı dışında).

Şimdi kök dizinde yeni bir sayfa oluşturalım ve onu front-page.php olarak adlandıralım . Tıpkı style.css ve function.php dosyaları gibi, burada da PHP'nin başlangıç ​​etiketinden sonra dokümantasyon doc bloğunu ekleyeceğiz.

 <?php

/**
 * Tema özelleştirmeleri
 *
 * @paket Özel
 * @yazar Ibad Rehman
 * @link https://github.com/ibadrehman/custom
 * @copyright Telif hakkı (c) 2018, Ibad Rehman
 * @lisans GPL-2.0+
 */

Ardından, sayfamızda görüntülenen gönderileri kaldıracak bir işlevi başlatacağız.

 function custom_home_page_setup() {

	// Gönderileri kaldır.
	remove_action('Genesis_loop', 'Genesis_do_loop');
}

Temamızın konumunu belirtmek için WordPress eylemini tanımlamazsak bu işlev işe yaramaz.

 add_action('Genesis_meta', 'custom_home_page_setup');

Son olarak, Genesis çerçevesini başlatacağız.

Yaratılış(); (Oluşturduğumuz herhangi bir şablon için gerekli)

Örnek veri

Şu anda temamız ham ve çekici görünmüyor. Bu nedenle, işleri renklendirmek için WordPress tarafından sağlanan örnek verileri kullanabilir ve örnek sayfalar, yorumlar ve gönderiler yükleyebiliriz.

WordPress tema birimine gidin, test sayfasına gidin ve xml dosyasını indirmek için git deposuna tıklayın. İndirdikten sonra, WordPress panosuna gidin, Araçlar altında, içe aktarma işlemini başlatmak için WordPress'in hemen altında bulunan İçe Aktar > İçe Aktarıcıyı Çalıştır'a tıklayın.

Tamamlanıyor!

Genesis çocuk temamızı pratik olarak sıfırdan yarattık. Gelecekteki değişiklik ve hata ayıklama için kodunuzu anlamada size veya başka bir geliştiriciye yardımcı olacağından, gerektiğinde yorum eklediğinizden emin olun. Tepkisini sağlamak için temanızı çeşitli ekran boyutlarında test edin ve olası hataları arayın. Çocuğunuzun teması için çekici bir küçük resim tasarlayın.

Kaynak kodu: https://github.com/ibadrehman/custom

Meydan okuma

Alt temayı oluşturduktan sonra daha da ileri gittik ve Genesis alt temamız için birkaç özel alt öğe oluşturduk.

Genesis alt temamız, özel widget'ları ekledikten sonra böyle görünüyor.

özel alt widget'larla tema

Bu iki makaleyi takip ederek bir Genesis alt teması oluşturun ve nihai ürününüzü paylaşın. İyi şanlar!