Projenizde Kirki Çerçevesini Kullanarak Özelleştirici Ayarlarını Daha Hızlı Oluşturun

Yayınlanan: 2019-08-10

Kirki, temalarına veya eklentilerine Özelleştirici Kontrolleri eklemek isteyen geliştiriciler için oluşturulmuş ücretsiz bir açık kaynaklı (MIT lisanslı) çerçevedir.

Kirki'nin baş geliştiricisi Aristeides Stathopoulos, 2014'ten beri çerçeve üzerinde çalışıyor. Sürekli güncellemeler ve iyileştirmeler sayesinde Kirki, Github'da 1000'den fazla yıldız ve 300 çatal içeren bir topluluk oluşturdu.

Kirki'den önce özelleştiriciye hiç dokunmadım. Kirki, kişiselleştiriciyi anlamama ve daha kısa sürede çok şey yapmama yardımcı oldu!
LebCit – WordPress Tema Geliştiricisi

WordPress Çekirdek Özelleştirici Kontrolleri

WordPress Core, varsayılan olarak bir avuç temel Özelleştirici Kontrolü içerir. Örneğin: metin, metin alanı, onay kutusu, radyo, seçim, açılır sayfalar, e-posta, URL, numara, gizli ve tarih kontrolleri.

Kirki, Çekirdek Kontrolleri de destekler, artı yaklaşık yirmi tane daha. Genel olarak konuşursak, Kirki kontrolleri daha gelişmiş kullanım durumlarını kapsar. Örneğin:

tipografi
Renk Paletleri
TinyMCE Editörü
Sıralanabilir Alanlar

Kirki, CSS çıktınızın ve postMessage komut dosyalarının otomatik olarak oluşturulması gibi Core WordPress'te bulunmayan işlevler de sunar. Bu makalenin ilerleyen kısımlarında inceleyeceğimiz bu özellikler, geliştirme sürenizi kolayca yarıya indirebilir.

Kirki Yavaş

Kirki'ye karşı yaygın olarak yapılan eleştirilerden biri, yavaş olmasıdır. Aslında, bu eleştiri çoğu çerçeveye (WordPress dahil) karşı kullanılır. Mantıklı, değil mi? Hiç kullanmayacağınız bir sürü kod yüklüyorsunuz.

Bu durumda, gerçek şu ki, bunun tersi doğrudur. Çoğu zaman Kirki kullanılarak oluşturulan kontrol panelleri, Core Controls ile oluşturulan aynı panellerden daha hızlı olacaktır.

Bunun nedeni, Kirki'nin WordPress'te yerleşik olmayan bir optimizasyon katmanı eklemesidir.

Özelleştirici başlatıldığında, WordPress bir bölüm veya panel içinde olsalar ve kullanıcı henüz bunlarla etkileşime girememiş olsalar bile tüm kontrolleri anında yüklemeye çalışır. Karşılaştırıldığında, Kirki yüklemeyi, kullanıcının kontrolle etkileşime girmesinden hemen öncesine kadar erteler.

Bunun etkisini pratikte görmek için her yöntemi kullanarak 50 renk kontrolü eklemeyi deneyelim.

Çekirdek Yöntem:

 for ($i = 0; $i < 50; $i++){
	$wp_customize->add_setting( 'color_setting_hex_' . $i , dizi(
		'varsayılan' => '#0088CC'
	) );

	// renk seçici kontrolü ekle
	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'color_setting_hex_' . $i, dizi(
		'etiket' => 'Renk Kontrolü',
		'section' => 'title_tagline',
		'ayarlar' => 'color_setting_hex_' . $ ben,
	) ) );
}

Kirki ile:

 for ($i = 0; $i < 50; $i++) {
     Kirki::add_field( 'config_id', dizi(
         'tür' => 'renk',
         'ayarlar' => 'color_setting_hex_' . $ ben,
         'label' => __( 'Renk Kontrolü', 'kirki' ),
         'section' => 'title_tagline',
         'varsayılan' => '#0088CC',
     ) );
 }

Sonuçlar:

Gördüğünüz gibi, Kirki kullanırken ilk yükleme hızı önemli ölçüde daha hızlıdır. Kontrolleri oluşturmak için gereken kod da daha kısadır.

Kirki'yi Projenize Entegre Etme

Kirki Çerçevesini projenize entegre etmenin birçok yolu vardır, resmi belgeler farklı yöntemleri açıklamak için iyi bir iş çıkarır.

Geliştiricilerin, çerçeveyi doğrudan projenizin koduna dahil etmek yerine, kullanıcıya Kirki'nin eklenti sürümünü kurması için rehberlik etmelerini öneririm. Bu, TGMPA veya sağlanan komut dosyası kullanılarak yapılabilir.

Eklenti yolunu izlemenin ardındaki sebep, Kirki'nin sık sık güncellenmesi ve iyileştirilmesidir. Eklenti sürümünü yükleyerek, kullanıcılarınız hata düzeltmelerine ve güvenlik güncellemelerine anında erişebilecek.

Buna karşılık, çerçeveyi projenizin bir parçası olarak eklediğinizde, kullanıcılar yalnızca temanızı veya eklentinizi güncellediğinizde gerekli olandan daha az sıklıkta güncelleme alırlar.

Hangi yöntemi kullanırsanız kullanın, ayarlarınızı eklemeden önce Kirki'nin başlatıldığını kontrol ettiğinizden emin olun:

 // Kirki yoksa erken çıkış.
if ( ! class_exists( 'Kirki' ) ) {
    dönüş;
}

Alanlar

Core Method örneğinde önce bir ayar oluşturduk ve ardından bunun için bir kontrol oluşturduk. Çoğu durumda, ikisi doğrudan bağlantılıdır. Kirki süreci basitleştirir ve bunun yerine bir 'Alan' oluşturmamıza izin verir. Bir alan oluşturulduğunda, bizim için arka planda ayar ve kontrolü oluşturur.

Alanlar, beklediğiniz tüm kontrol argümanlarını (etiket, açıklama, bölüm, varsayılan) ve ayrıca Kirki'ye özgü bazı argümanları destekler.

'Tür' argümanı, Kirki'nin 30 kontrol türünden birini seçmenize izin verir: https://kirki.org/docs/controls/

Bölümler

Özelleştirici Bölümleri, Kontrolleri birlikte gruplandırmanıza olanak tanır. WordPress, kontrollerinizi de ekleyebileceğiniz altı yerleşik bölüme sahiptir:

title_tagline – Site Kimliği
renkler – Renkler
header_image – Başlık Resmi
background_image – Arka Plan Resmi
static_front_page – Ana Sayfa Ayarları
custom_css – Ek CSS

Kirki'deki bölümler Core'dakiyle tamamen aynı şekilde çalışır, Kirki::add_section() yöntemi sadece $wp_customize->add_section() için bir sarmalayıcıdır ve aynı parametreleri ve bağımsız değişkenleri kabul eder.

 Kirki::add_section( 'section_id', dizi(
     'title' => esc_html__( 'Bölümüm', 'kirki' ),
     'description' => esc_html__( 'Bölüm açıklamam.', 'kirki' ),
 ) );

Paneller

Paneller, Bölümleri birlikte gruplayarak başka bir hiyerarşi düzeyi oluşturmanıza olanak tanır. WordPress Core, 'Menüler' olan bir yerleşik panele sahiptir.

Yine, Kirki uygulaması, Çekirdek işlevi için bir paketleyicidir.

 Kirki::add_panel( 'panel_id', dizi(
     'öncelik' => 10,
     'title' => esc_html__( 'Panel'im', 'kirki' ),
     'description' => esc_html__( 'Panel açıklamam', 'kirki' ),
 ) );

'taşıma' => 'otomatik'

Geleneksel olarak, Özelleştirici Kontrolleri oluştururken, taşıma argümanı için iki seçeneğiniz vardır:

Yenile – Kullanıcı her değişiklik yaptığında, değişiklikleri göstermek için önizleme bölmesi yenilenir. Bu birkaç saniye sürebilir.
postMessage – Kullanıcı her değişiklik yaptığında, önizleme bölmesi, yenileme gerektirmeyen ve neredeyse anında olan Javascript kullanılarak güncellenir.

postMessage, şüphesiz önizleyiciyi güncellemek için en üstün yöntemdir ve mümkün olduğunda kullanılmalıdır. Ancak, bir dezavantajı vardır, postMessage kullanmak, kontrollerinizin her biri için özel JS kodu yazmanız gerektiği anlamına gelir. Basit bir uygulama şuna benzer:

 // Site başlığını gerçek zamanlı olarak güncelle...
wp.customize('blogadı', function(değer ) {
    değer.bind( işlev( yeni değer ) {
        $( '#site-başlığı a' ).html( yenival );
    } );
} );

Çok fazla ayarınız olduğunda, bu hızla tekrarlanabilir hale gelebilir.

Kirki'nin parladığı yer burasıdır, üçüncü bir seçenek ekler: 'ulaşım' => 'otomatik'.

'transport' => 'auto', Kirki'nin eklediği 'output' adlı başka bir argümanla birlikte çalışır. Her iki değer de tanımlandığında, Kirki sizin için postMessage komut dosyalarını otomatik olarak oluşturacaktır. Bu, herhangi bir Javascript kodu yazmak zorunda kalmadan postMessage kullanmanın tüm avantajlarından yararlanabileceğiniz anlamına gelir.

transport => 'auto' kullanan bir alan şöyle görünür:

 Kirki::add_field( 'config_id', dizi(
     'tür' => 'renk',
     'ayarlar' => 'color_setting_hex',
     'label' => __( 'Renk Kontrolü', 'kirki' ),
     'bölüm' => 'renkler',
     'varsayılan' => '#0088CC',
     'taşıma' => 'otomatik',
     'çıktı' => dizi(
         sıralamak(
             'eleman' => 'vücut',
             'özellik' => 'arka plan rengi',
         ),
     ),
 ) );

Kirki'nin bu zaman kazandıran özelliği, çoğu zaman kendi postMessage komut dosyalarınızı yazmanız veya sıraya koymanız gerekmeyeceği anlamına gelir.

Ön Uç CSS Çıktısı

Özelleştirici ayarları oluşturmanın bir başka parçası da ön uçta CSS çıktısı oluşturmaktır. Basit bir örnek şöyle görünebilir:

 /**
 * Özelleştirici CSS'nin çıktısını wp_head'e alın
 */
function wptavern_customizer_css() {
	$bg_color = get_theme_mod('color_setting_hex');
	?>
	<stil>
		gövde {
			arka plan rengi: <?php echo sanitize_hex_color( $bg_color ); ?>;
		}
	</style>
	<?php
}
add_action('wp_head', wptavern_customizer_css);

PostMessage örneğinde olduğu gibi, çok fazla ayarınız varsa, bu kodu yazmak hızlı bir şekilde tekrarlanabilir.

Neyse ki, 'transport' => 'auto' sizin için ön uç çıktısını da halleder. Basitleştirilmiş örneğimizde bile, 'transport' => 'auto' yazmamız gereken kodu ~%50 azalttı.

Çözüm

Bu makalede, Kirki Framework'ün sadece temellerine ve iki argümanına baktık, şimdiden bunun nasıl daha hızlı ve performanstan ödün vermeden Özelleştirici Kontroller oluşturmamıza izin verdiğini görebiliyoruz.

Kirki'ye daldığınızda, Özelleştirme API'sinin üzerine eklediği işlevsellik zenginliğini hızla keşfedeceksiniz. 300.000'den fazla web sitesinde ve piyasadaki en büyük WordPress temalarından bazılarının temel bir parçasında kullanılıyor olması şaşırtıcı değil.