WordPress Tema Özelleştirici

WordPress Tema Özelleştirici
  1. 1. WordPress Tema Özelleştiricisine Giriş
  2. 2. WordPress Tema Özelleştiricisi ile Etkileşim
  3. 3. Şu Anda Okuma: WordPress Tema Özelleştirici
  4. 4. WordPress Teması Özelleştiricisinin Genişletilmesi
  5. 5. Tema Özelleştirici Boilerplate – Koşullu Seçenekler, Alt Temalar ve Eklentiler

Güncelleme: Bu makale, Theme Customizer Boilerplate’te yapılan değişiklikleri yansıtacak şekilde 19 Şubat 2013 tarihinde düzenlendi..


Umarım Tema Özelleştirici serisinin ilk iki gönderisini okudunuz ve keyif aldınız – WordPress Tema Özelleştiricisine Giriş ve Tema Özelleştirici ile Etkileşim. Şimdi ana kursa geçme ve temalarınızda kullanabileceğiniz Tema Özelleştirici şablon plakası oluşturmaya başlamanın zamanı geldi. Bu gönderi birkaç uzun kod bloğu içeriyor, bu nedenle satır içi yorumlara dikkat edin.

Not: Isı levhasını hemen kullanmayı tercih ediyorsanız, ith thsp_cbp_options_array ’filtre kancasına bağlayarak Github’dan indirebilir ve $ options dizisindeki alanları değiştirebilirsiniz.

Neler Yaratıyoruz

Tema Özelleştirici Boilerplate dizin yapısı

Tema Özelleştirici Boilerplate dizin yapısı

  • customizer.php – Bu, seçenekler dizisindeki verileri kullanarak bölümler, ayarlar ve kontroller ekleyen ana Tema Özelleştirici demirbaş dosyasıdır
  • özel controls.php – Özel kontrol sınıfları ve kendi özel kontrollerinizi eklemenizi sağlayan bir eylem kancası
  • helpers.php – Tema seçenekleri, seçenek varsayılanları vb..
  • options.php – Örnek seçenekler ve seçenekler dizisini düzenlemenize ve kendi alanlarınızı kullanmanıza izin veren bir filtre kancası
  • özelleştirme aracı-controls.css – Görüntü yerine radyo özel kontrolü için temel CSS

Tüm fikir, bu dosyaları tema dizininizdeki bir alt dizine kopyalayabilmeniz, işlevlerinizden customizer.php dosyasını dahil edebilmeniz ve Theme Customizer Boilerplate kancalarını (açıklanmış seçenekler dahil olmak üzere özellikle seçenekler dizisi gibi) Bölüm 4’te). Güncelleme: Önceden, sadece options.php dosyasını düzenlersiniz, ancak kancaları kullanmak işleri daha temiz hale getirir.

Şimdi gerçek bir örnek kullanalım – yeni bir Tema Özelleştirici bölümüne bir metin kontrolü ekleyeceğiz. Dizi bir yardımcı işleve yerleştirilir ve döndürüldüğünde uygulanan bir filtreye sahiptir. Bu şekilde, bir alt tema veya eklentiden daha fazla seçenek ekleyebilirsiniz. İşte burada:

/ **
* Tema seçenekleri dizisini tutan yardımcı işlevi.
*
* @return array $ options Tema seçenekleri dizisi
* @ customizer / helpers.php içinde tanımlanan thsp_get_theme_customizer_fields () kullanır
* /
işlev thsp_get_theme_customizer_fields () {

/ *
* Varsayılan gerekli yeteneği almak için yardımcı işlevini kullanma
* /
$ required_capability = thsp_settings_page_capability ();

$ options = dizi (


// Bölüm Kimliği
'new_customizer_section' => dizi (

/ *
* Bunun mevcut bir bölüm olup olmadığını kontrol ediyoruz
* veya kaydedilmesi gereken yeni bir tane
* /
'varolan_section' => yanlış,
/ *
* Bölümle ilgili argümanlar
* Kodeks - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => dizi (
'title' => __ ('Yeni Bölüm Başlığı', 'alan_metin_alanim'),
'description' => __ ('Yeni bölüm açıklaması', 'my_theme_textdomain'),
'öncelik' => 10
),

/ *
* 'fields' dizisi olması gereken tüm alanları içerir
* bu bölüme eklendi
* /
'fields' => dizi (

/ *
* ==========
* ==========
* Metin alanı
* ==========
* ==========
* /
// Alan Kimliği
'new_text_field' => dizi (
/ *
* İlgili argümanların belirlenmesi
* Kodeks - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => dizi (
'default' => __ ('Varsayılan metin değeri', 'my_theme_textdomain'),
'type' => 'seçenek',
'capability' => $ required_capability,
'transport' => 'yenile',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* Kontrol ile ilgili argümanlar
* Kodeks - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => dizi (
'label' => __ ('Yeni metin kontrol etiketi', 'my_theme_textdomain'),
'type' => 'metin', // Metin alanı denetimi
'öncelik' => 1
)
)

)

),

);

/ *
* 'thsp_customizer_options' filtre kancası,
* bu seçeneklerden bazılarını alt temaya ekleyin / kaldırın
* /
return_filters ('thsp_customizer_options', $ seçenekleri);

}

Güncelleme: Dizi aynı kalır, ancak artık seçenekler dizisini bir filtre kancasına geçirebilirsiniz, daha fazla ayrıntı için Bölüm 4’e bakın..

İlk bakışta karmaşık görünüyor, biliyorum, ama açıklamama izin ver.

$ seçenekleri dizisi bölümlerden oluşur (bu durumda yalnızca bir tanesidir – new_customizer_section), her bölümün argümanları, alanları ve yeni bir bölüm olup olmadığını belirtmek için bir boole değeri (mevcut_seksiyon) vardır, yoksa yalnızca mevcut bir alana bazı alanlar ekliyoruz bir. Bağımsız değişkenler dizisi, geçtiğinizle aynı $ Wp_customize-> add_section yöntem. Fields dizisi biraz daha karmaşık.

Güncelleme: kontrol bağımsız değişkenlerindeki seçimler dizisi artık çok boyutlu bir dizidir.

Her alan bir Özelleştirici ayarı ve bir Özelleştirici denetiminden oluşur. Bu yüzden setting_args ve control_args dizilerine sahibiz. Bunlar, ileteceğiniz argümanlar dizileriyle neredeyse tamamen aynı $ Wp_customize-> add_setting ve $ Wp_customize-> add_control yöntemleri. Tek fark kontrol argümanlarındaki ‘seçimler’ dizisidir, $ wp_customize-> add_control bunun basit bir anahtar => değer çifti dizisi olmasını gerektirir ve bunun yerine çok boyutlu bir dizi kullanıyoruz.

Bu şekilde, seçeneklerin her birine daha fazla veri aktarabilirsiniz, bu nedenle, örneğin, Google Yazı Tiplerini temanıza yüklüyorsanız, seçenekler dizisine doğru yazı tipini yüklemenize izin veren dizelere sahip olabilirsiniz. . Bunun bir örneğini görebilirsiniz Özelleştirici Boilerplate kullanan tema.

Yani, bu üç yöntemin zaten farkındaysanız, hepsi çok tanıdık.

Bir onay kutusu denetimi eklemek neredeyse aynıdır, sadece ‘control_args’ dizisindeki ‘type’ seçeneğini ‘checkbox’ olarak değiştirmeniz yeterlidir:

/ *
* ==============
* Onay kutusu alanı
* ==============
* /
'new_checkbox_field' => dizi (
'setting_args' => dizi (
'default' => doğru,
'type' => 'seçenek',
'capability' => $ required_capability,
'transport' => 'yenile',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => dizi (
'label' => __ ('Yeni radyo kontrol etiketi', 'my_theme_textdomain'),
'type' => 'onay kutusu', // Onay kutusu alan kontrolü
'öncelik' => 2
)
),

Radyo ve seçim kontrolleri hemen hemen aynıdır, sadece verilen seçenekleri belirtmeniz gerekir:

/ *
* ===========
* ===========
* Radyo alanı
* ===========
* ===========
* /
'new_radio_field' => dizi (
'setting_args' => dizi (
'varsayılan' => 'seçenek-2',
'type' => 'seçenek',
'capability' => $ Instagram Hesabındaki Resim ve Videoları thsp_cbp_capability,
'transport' => 'yenile',
),
'control_args' => dizi (
'label' => __ ('Yeni radyo kontrol etiketi', 'my_theme_textdomain'),
'type' => 'radyo', // Radyo kontrolü
'choices' => dizi (
'option-1' => dizi (
'label' => __ ('Seçenek 1', 'my_theme_textdomain')
),
'option-2' => dizi (
'label' => __ ('Seçenek 2', 'my_theme_textdomain')
),
'option-3' => dizi (
'label' => __ ('Seçenek 3', 'my_theme_textdomain')
)
),
'öncelik' => 3
)
),

/ *
* ============
* ============
* Alan seçin
* ============
* ============
* /
'new_select_field' => dizi (
'setting_args' => dizi (
'varsayılan' => 'seçenek-3',
'type' => 'seçenek',
'capability' => $ Instagram Hesabındaki Resim ve Videoları thsp_cbp_capability,
'transport' => 'yenile',
),
'control_args' => dizi (
'label' => __ ('Yeni seçim alanı etiketi', 'my_theme_textdomain'),
'type' => 'select', // Kontrolü seçin
'choices' => dizi (
'option-1' => dizi (
'label' => __ ('Seçenek 1', 'my_theme_textdomain')
),
'option-2' => dizi (
'label' => __ ('Seçenek 2', 'my_theme_textdomain')
),
'option-3' => dizi (
'label' => __ ('Seçenek 3', 'my_theme_textdomain')
)
),
'öncelik' => 4
)
)

Ve son olarak, WordPress’te yerleşik olarak bulunan iki karmaşık kontrol türü – dosya yükleme ve görüntü yükleme:

/ *
* ===========
* ===========
* Dosya yükleme
* ===========
* ===========
* /
'new_file_upload_field' => dizi (
'setting_args' => dizi (
'varsayılan' => '',
'type' => 'seçenek',
'capability' => $ Instagram Hesabındaki Resim ve Videoları thsp_cbp_capability,
'transport' => 'yenile',
),
'control_args' => dizi (
'label' => __ ('Dosya yükleme', 'alanım_etkialanı'),
'type' => 'upload', // Dosya yükleme alanı kontrolü
'öncelik' => 5
)
),

/ *
* ============
* ============
* Resim Yükleme
* ============
* ============
* /
'new_image_upload_field' => dizi (
'setting_args' => dizi (
'varsayılan' => '',
'type' => 'seçenek',
'capability' => $ Instagram Hesabındaki Resim ve Videoları thsp_cbp_capability,
'transport' => 'yenile',
),
'control_args' => dizi (
'label' => __ ('Resim yükleme', 'my_theme_textdomain'),
'type' => 'image', // Resim yükleme alanı kontrolü
'öncelik' => 6
)
)

Kullandığımı unutmayın “Tür” => “seçenek” tüm bu alanlar için bağımsız değişkenler ayarlamada. Bu, tüm değerlerin veritabanınızda tek bir değer olarak depolanmasına olanak tanır. Alternatif ‘Yaz’ => ‘theme_mod’ ama şimdilik ‘seçenek’ ile devam edelim.

Özelleştirici Bölümleri, Ayarlar ve Kontroller Eklemek için Seçenekler Dizisini Kullanma

WordPress Tema Özelleştirici ile nasıl etkileşim kuracağınızdan emin değilseniz gidin ve kontrol edin, çünkü şimdi yapacağımız şey budur. Tek fark, bölümleri, ayarları ve kontrolleri teker teker eklemek yerine, oluşturduğumuz seri diziyi kullanarak işlemi otomatik hale getireceğimizdir. Sadece içine atlayalım:

işlev thsp_cbp_customize_register ($ wp_customize) {

/ **
* Özel kontroller
* /
gerektirir (dirname (__ FILE__). '/custom-controls.php');


/ *
* Bir yardımcı işlevi kullanarak tüm alanları alın
* /
$ thsp_sections = thsp_cbp_get_fields ();


/ *
* Hangi seçeneklerin saklanacağı DB girişinin adını alın
* /
$ thsp_cbp_option = thsp_cbp_option ();


/ **
* Dizi boyunca döngü ve Özelleştirici bölümleri ekleyin
* /
foreach ($ thsp_sections $ thsp_section_key => $ thsp_section_value olarak) {

/ **
* Gerekirse Özelleştirici bölümü ekler
* /
if (! $ thsp_section_value ['mevcut_seksiyon']) {

$ thsp_section_args = $ thsp_section_value ['args'];

// Bölüm ekle
$ Wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // biterse

/ *
* Her bölümde 'alanlar' dizisi üzerinden döngü
* ve ayarlar ve kontroller ekleyin
* /
$ thsp_section_fields = $ thsp_section_value ['alanlar'];
foreach ($ thsp_section_fields, $ thsp_field_key => $ thsp_field_value olarak) {

/ *
* Seçeneği saklamak için 'seçenek' veya 'theme_mod' kullanılıp kullanılmadığını kontrol edin
*
* Hiçbir şey ayarlanmadıysa, $ wp_customize-> add_setting yöntemi varsayılan olarak 'theme_mod' olarak ayarlanır
* Ayar türü olarak 'seçenek' kullanılırsa değeri bir girişte saklanır.
* {prefix} _options tablosu. Seçenek adı thsp_cbp_option () işlevi ile tanımlanır
* /
if (isset ($ thsp_field_value ['setting_args'] ['type']) && 'seçenek' == $ thsp_field_value ['setting_args'] ['type']) {
$ setting_control_id = $ thsp_cbp_option. '['. $ thsp_field_key. ']';
} Başka {
$ setting_control_id = $ thsp_field_key;
}

/ *
* Hiçbiri tanımlanmadıysa varsayılan geri arama işlevi ekle
* /
if (! isset ($ thsp_field_value ['setting_args'] ['sanitize_cb'])) {
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
* Özelleştirici ayarları ekler
* /
$ Wp_customize-> add_setting (
$ setting_control_id,
, $ Thsp_field_value [ 'setting_args']
);

/ **
* Özelleştirici kontrolü ekler
*
* 'control_args' dizisine 'section' değeri eklenmelidir
* kontrol geçerli bölüme eklenebilir
* /
$ thsp_field_value ['control_args'] ['bölüm'] = $ thsp_section_key;

/ *
* $ wp_customize-> add_control yöntemi, 'seçimlerin' basit bir anahtar olmasını gerektirir => değer çifti
* /
if (isset ($ thsp_field_value ['control_args'] ['seçimler'])) {
$ thsp_cbp_choices = dizi ();
foreach ($ thsp_field_value ['control_args'] ['seçimler'] olarak $ thsp_cbp_choice_key => $ thsp_cbp_choice_value) {
$ thsp_cbp_choices [$ thsp_cbp_choice_key] = $ thsp_cbp_choice_value ['etiket'];
}
$ thsp_field_value ['control_args'] ['seçimler'] = $ thsp_cbp_choices;
}


// Kontrol türünü kontrol edin
if ('color' == $ thsp_field_value ['control_args'] ['tür']) {
$ Wp_customize-> add_control (
yeni WP_Customize_Color_Control (
$ wp_customize,
$ setting_control_id,
, $ Thsp_field_value [ 'control_args']
)
);
} elseif ('image' == $ thsp_field_value ['control_args'] ['tür']) {
$ Wp_customize-> add_control (
yeni WP_Customize_Image_Control (
$ wp_customize,
$ setting_control_id,
, $ Thsp_field_value [ 'control_args']
)
);
} elseif ('upload' == $ thsp_field_value ['control_args'] ['tür']) {
$ Wp_customize-> add_control (
yeni WP_Customize_Upload_Control (
$ wp_customize,
$ setting_control_id,
, $ Thsp_field_value [ 'control_args']
)
);
} Başka {
$ Wp_customize-> add_control (
$ setting_control_id,
, $ Thsp_field_value [ 'control_args']
);
}

} // sonu her biri

} // sonu her biri

}
add_action ('özelleştirmek_kaydı', 'thsp_cbp_customize_register');

Tüm bölümleri inceleyerek, henüz mevcut olmayan bölümleri ekleyerek, her bölümdeki tüm alanları inceleyerek her biri için bir ayar ve bir kontrol ekler. Burada olanların hepsi bu.

Tüm ayarlar için ‘yaz’ => ‘seçenek’i kullandığımızı hatırlıyor musunuz? Bu yüzden şimdi “My_theme_options [$ thsp_field_key]” hem ayarlar hem de bölümler için. Bu, tüm değerleri kullanarak alabileceğiniz bir seri dizi olarak saklar. get_option (“my_theme_options”). Veya yalnızca helpers.php tüm alanlar için hem geçerli değerleri hem de varsayılan değerleri almak için:

/ **
* Seçenek Değerlerini Alın
*
* Tüm seçenek değerlerini tutan dizi
* Kullanıcı bir değer belirtmediyse seçeneğin varsayılan değeri kullanılır
*
* @uses /customizer/options.php içinde tanımlanan thsp_get_theme_customizer_defaults () kullanır
* @return array Tüm seçenekler için geçerli değerler
* @since Theme_Customizer_Boilerplate 1.0
* /
işlev thsp_cbp_get_options_values ​​() {

// Seçenek varsayılanlarını alın
$ option_defaults = thsp_cbp_get_options_defaults ();

// Saklanan seçenekleri varsayılanlarla ayrıştır
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option (), dizi ()), $ option_defaults);

// Ayrıştırılan diziyi döndür
return $ thsp_cbp_options;

}


/ **
* Seçenek Varsayılanlarını Al
*
* Tüm seçenekler için varsayılan değerleri tutan bir dizi döndürür
*
* /customizer/options.php içinde tanımlanan @uses thsp_get_theme_customizer_fields ()
* @return array $ thsp_option_defaults Tüm seçenekler için varsayılan değerler
* @since Theme_Customizer_Boilerplate 1.0
* /
işlev thsp_cbp_get_options_defaults () {

// Tüm tema seçeneği alanlarını içeren diziyi al
$ thsp_sections = thsp_cbp_get_fields ();

// Tüm tema seçeneklerinin varsayılan değerlerini tutmak için diziyi başlatın
$ thsp_option_defaults = dizi ();

// Opsiyon parametreleri dizisini döndürün
foreach ($ thsp_sections $ thsp_section olarak) {

$ thsp_section_fields = $ thsp_section ['alanlar'];

foreach ($ thsp_section_fields, $ thsp_field_key => $ thsp_field_value olarak) {

// parametre dizisindeki her seçenek için varsayılan diziye ilişkilendirilebilir bir dizi anahtarı ekleme
if (isset ($ thsp_field_value ['setting_args'] ['varsayılan'])) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['varsayılan'];
} Başka {
$ thsp_option_defaults [$ thsp_field_key] = yanlış;
}

}

}

// Varsayılanlar dizisini döndür
return $ thsp_option_defaults;

}

Bahsetmemiz gereken sadece bir şey daha var – ‘ayar_dizileri’ dizisinde belirttiğimiz sanitizasyon geri arama işlevi. İşlev, length.php içinde tanımlanır ve verileri wp_kses_post fonksiyon:

/ **
* Tema Özelleştirici sanitizasyon geri arama fonksiyonu
* /
işlev thsp_sanitize_cb ($ input) {

dönüş wp_kses_post ($ input);

}

Buradan Nereye?

Şimdilik, bu Tema Özelleştirici Boilerplate’i temalarınızda kullanabilirsiniz, tek yapmanız gereken bunu Github’dan indirmek, temanızın dizinine kopyalamak ve ana dosyayı function.php’den dahil etmek.% 100 fonksiyonel ve çoğu için yeterince iyi temalar.

Temanız “çoğu tema gibi” olmadığından, önümüzdeki hafta filtre plakasını ve işlem kancalarını kullanarak ortak plakanın nasıl genişletileceğini göreceğiz.

Bu kazan plakasının nasıl geliştirilebileceğini veya genişletilebileceğini düşündüğünüzü duymak isterim, bu yüzden lütfen yorumlarda ateş edin.

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