Kustomizer Boilerplate Tema WordPress

Kustomizer Boilerplate Tema WordPress
  1. 1. Pengantar Penyesuai Tema WordPress
  2. 2. Berinteraksi dengan WordPress Theme Customizer
  3. 3. Sedang membaca: Kustomizer Boilerplate Tema WordPress
  4. 4. Memperluas Plating Kustomizer Tema WordPress
  5. 5. Tema Customizer Boilerplate – Opsi Bersyarat, Tema dan Plugin Anak

Pembaruan: Artikel ini telah diedit pada 19 Februari 2013, untuk merefleksikan perubahan yang dilakukan pada Theme Customizer Boilerplate.


Semoga Anda membaca dan menikmati dua posting pertama dari seri Theme Customizer – Pengantar WordPress Theme Customizer dan Berinteraksi dengan Theme Customizer. Sekarang saatnya untuk pindah ke hidangan utama dan mulai menyusun pelat Tema Penyesuai yang dapat Anda gunakan dalam tema Anda. Posting ini berisi beberapa blok kode yang panjang, jadi perhatikan komentar inline.

catatan: Jika Anda lebih suka langsung menggunakan boilerplate, Anda dapat mengunduhnya dari Github dan mengubah bidang dalam array $ options dengan menghubungkan ke ‘thsp_cbp_options_array’ hook filter.

Apa Yang Kami Ciptakan

Struktur direktori Tema Customizer Boilerplate

Struktur direktori Tema Customizer Boilerplate

  • customizer.php – Ini adalah file boilerplate Tema Penyesuai utama, yang menambahkan bagian, pengaturan, dan kontrol menggunakan data dari array opsi
  • custom-controls.php – Kelas kontrol khusus dan hook tindakan yang memungkinkan Anda untuk menambahkan kontrol kustom Anda sendiri
  • helpers.php – Fungsi pembantu, digunakan untuk mengambil opsi tema, opsi default dll.
  • options.php – Opsi sampel dan kait filter yang memungkinkan Anda untuk mengedit array opsi dan menggunakan bidang Anda sendiri
  • customizer-controls.css – CSS dasar untuk kontrol radio kustom gambar yang diganti

Seluruh ide adalah untuk dapat menyalin file-file ini ke subdirektori di direktori tema Anda, termasuk file customizer.php dari functions.php Anda dan mengubah apa pun yang Anda suka, termasuk dan terutama array pilihan, dengan menggunakan kait Theme Customizer Boilerplate (dijelaskan dalam Bagian 4). Memperbarui: Sebelumnya, Anda hanya mengedit options.php, tetapi menggunakan kait membuat segalanya jauh lebih bersih.

Sekarang mari kita gunakan contoh nyata – kami akan menambahkan kontrol teks ke bagian Customizer Tema baru. Array ditempatkan dalam fungsi pembantu dan memiliki filter yang diterapkan ketika dikembalikan. Dengan cara ini Anda dapat menambahkan lebih banyak opsi dari tema anak atau plugin. Ini dia:

/ **
* Fungsi pembantu yang menyimpan berbagai opsi tema.
*
* @return array $ options Array opsi tema
* @menggunakan thsp_get_theme_customizer_fields () didefinisikan dalam customizer / helpers.php
* /
function thsp_get_theme_customizer_fields () {

/ *
* Menggunakan fungsi helper untuk mendapatkan kemampuan standar yang diperlukan
* /
$ required_capability = thsp_settings_page_capability ();

$ options = array (


// ID Bagian
'new_customizer_section' => array (

/ *
* Kami sedang memeriksa apakah ini bagian yang ada
* atau yang baru yang perlu didaftarkan
* /
'existing_section' => false,
/ *
* Bagian argumen terkait
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => array (
'title' => __ ('Judul Bagian Baru', 'my_theme_textdomain'),
'description' => __ ('Deskripsi bagian baru', 'my_theme_textdomain'),
'priority' => 10
),

/ *
* Array 'bidang' berisi semua bidang yang harus diisi
* ditambahkan ke bagian ini
* /
'bidang' => array (

/ *
* ==========
* ==========
* Bidang teks
* ==========
* ==========
* /
// ID Field
'new_text_field' => array (
/ *
* Pengaturan argumen terkait
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => array (
'default' => __ ('Nilai teks default', 'my_theme_textdomain'),
'type' => 'option',
'kapabilitas' => $ diperlukan_kemampuan,
'transport' => 'refresh',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* Kontrol argumen terkait
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => array (
'label' => __ ('Label kontrol teks baru', 'my_theme_textdomain'),
'type' => 'text', // Kontrol bidang teks
'priority' => 1
)
)

)

),

);

/ *
* Kait filter 'thsp_customizer_options' akan memungkinkan Anda untuk melakukannya
* tambahkan / hapus beberapa opsi ini dari tema anak
* /
return apply_filters ('thsp_customizer_options', $ options);

}

Memperbarui: Array tetap sama, tetapi sekarang Anda juga bisa meneruskan array opsi ke hook filter, lihat Bagian 4 untuk lebih jelasnya.

Terlihat rumit pada pandangan pertama, saya tahu, tapi biarkan saya jelaskan.

Itu $ options array terdiri dari bagian (hanya satu dalam hal ini – new_customizer_section), setiap bagian memiliki argumen, bidang dan nilai boolean (existing_section) untuk menunjukkan apakah itu bagian baru, atau kami hanya menambahkan beberapa bidang ke yang sudah ada satu. Array argumen identik dengan apa yang Anda sampaikan $ wp_customize-> add_section metode. Fields array sedikit lebih kompleks.

Memperbarui: array pilihan dalam argumen kontrol sekarang array multi-dimensi.

Setiap bidang terdiri dari pengaturan Customizer dan kontrol Customizer. Itu sebabnya kami memiliki array setting_args dan control_args. Mereka hampir persis sama dengan array argumen yang Anda terima $ wp_customize-> add_setting dan $ wp_customize-> add_control metode. Satu-satunya perbedaan adalah array ‘pilihan’ dalam argumen kontrol, $ wp_customize-> add_control mengharuskannya menjadi kunci pasangan kunci = = sederhana dan kami menggunakan array multi-dimensi sebagai gantinya.

Dengan cara ini, Anda dapat meneruskan lebih banyak data ke masing-masing pilihan, jadi jika Anda, misalnya, memuat Google Fonts di tema Anda, Anda dapat memiliki string yang memungkinkan Anda memuat font yang benar di dalam array pilihan . Anda dapat melihat contohnya tema yang menggunakan Customizer Boilerplate.

Jadi, jika Anda sudah mengetahui ketiga metode itu, semuanya sangat familier.

Menambahkan kontrol kotak centang hampir sama, Anda hanya perlu mengubah ‘tipe ’ke‘ kotak centang ’dalam array‘ control_args ’:

/ *
* ==============
* Kolom kotak centang
* ==============
* /
'new_checkbox_field' => array (
'setting_args' => array (
'default' => true,
'type' => 'option',
'kapabilitas' => $ diperlukan_kemampuan,
'transport' => 'refresh',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => array (
'label' => __ ('Label kontrol radio baru', 'my_theme_textdomain'),
'type' => 'checkbox', // Kontrol kotak centang
'priority' => 2
)
),

Radio dan kontrol pilih hampir sama, Anda hanya perlu menentukan pilihan yang diberikan:

/ *
* ===========
* ===========
* Bidang radio
* ===========
* ===========
* /
'new_radio_field' => array (
'setting_args' => array (
'default' => 'option-2',
'type' => 'option',
'kapabilitas' => $ thsp_cbp_capability,
'transport' => 'refresh',
),
'control_args' => array (
'label' => __ ('Label kontrol radio baru', 'my_theme_textdomain'),
'type' => 'radio', // Kontrol radio
'pilihan' => array (
'option-1' => array (
'label' => __ ('Opsi 1', 'my_theme_textdomain')
),
'option-2' => array (
'label' => __ ('Opsi 2', 'my_theme_textdomain')
),
'option-3' => array (
'label' => __ ('Opsi 3', 'my_theme_textdomain')
)
),
'priority' => 3
)
),

/ *
* ============
* ============
* Pilih bidang
* ============
* ============
* /
'new_select_field' => array (
'setting_args' => array (
'default' => 'option-3',
'type' => 'option',
'kapabilitas' => $ thsp_cbp_capability,
'transport' => 'refresh',
),
'control_args' => array (
'label' => __ ('Label bidang pilih baru', 'my_theme_textdomain'),
'type' => 'select', // Pilih kontrol
'pilihan' => array (
'option-1' => array (
'label' => __ ('Opsi 1', 'my_theme_textdomain')
),
'option-2' => array (
'label' => __ ('Opsi 2', 'my_theme_textdomain')
),
'option-3' => array (
'label' => __ ('Opsi 3', 'my_theme_textdomain')
)
),
'priority' => 4
)
)

Dan akhirnya, dua tipe kontrol kompleks yang dibangun di WordPress – unggah file dan unggah gambar:

/ *
* ===========
* ===========
* Unggah File
* ===========
* ===========
* /
'new_file_upload_field' => array (
'setting_args' => array (
'default' => '',
'type' => 'option',
'kapabilitas' => $ thsp_cbp_capability,
'transport' => 'refresh',
),
'control_args' => array (
'label' => __ ('Upload file', 'my_theme_textdomain'),
'type' => 'unggah', // Kontrol bidang unggahan file
'priority' => 5
)
),

/ *
* ============
* ============
* Unggah Gambar
* ============
* ============
* /
'new_image_upload_field' => array (
'setting_args' => array (
'default' => '',
'type' => 'option',
'kapabilitas' => $ thsp_cbp_capability,
'transport' => 'refresh',
),
'control_args' => array (
'label' => __ ('Upload gambar', 'my_theme_textdomain'),
'type' => 'image', // Kontrol bidang unggahan gambar
'priority' => 6
)
)

Perhatikan bahwa saya menggunakan ‘Ketik’ => ‘opsi’ dalam menetapkan argumen untuk semua bidang ini. Ini akan memungkinkan semua nilai disimpan sebagai satu nilai dalam database Anda. Alternatifnya adalah ‘Ketik’ => ‘theme_mod’ tetapi untuk sekarang mari kita tetap dengan ‘opsi’.

Menggunakan Pilihan Array untuk Menambahkan Bagian, Pengaturan dan Kontrol Customizer

Jika Anda tidak yakin bagaimana berinteraksi dengan WordPress Theme Customizer, buka dan periksa, karena itulah yang akan kami lakukan sekarang. Satu-satunya perbedaan adalah bahwa alih-alih menambahkan bagian, pengaturan, dan kontrol satu per satu, kami akan mengotomatiskan proses menggunakan array serial yang kami buat. Mari kita lompat ke dalamnya:

function thsp_cbp_customize_register ($ wp_customize) {

/ **
* Kontrol kustom
* /
membutuhkan (dirname (__ FILE__). '/custom-controls.php');


/ *
* Dapatkan semua bidang menggunakan fungsi pembantu
* /
$ thsp_sections = thsp_cbp_get_fields ();


/ *
* Dapatkan nama entri DB di bawah opsi mana yang akan disimpan
* /
$ thsp_cbp_option = thsp_cbp_option ();


/ **
* Ulangi array dan tambahkan bagian Customizer
* /
foreach ($ thsp_sections sebagai $ thsp_section_key => $ thsp_section_value) {

/ **
* Tambahkan bagian Customizer, jika perlu
* /
if (! $ thsp_section_value ['existing_section']) {

$ thsp_section_args = $ thsp_section_value ['args'];

// Tambahkan bagian
$ wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // berakhir jika

/ *
* Ulangi array 'bidang' di setiap bagian
* dan menambahkan pengaturan dan kontrol
* /
$ thsp_section_fields = $ thsp_section_value ['fields'];
foreach ($ thsp_section_fields sebagai $ thsp_field_key => $ thsp_field_value) {

/ *
* Periksa apakah 'opsi' atau 'theme_mod' digunakan untuk menyimpan opsi
*
* Jika tidak ada yang ditetapkan, $ wp_customize-> metode add_setting akan default ke 'theme_mod'
* Jika 'opsi' digunakan sebagai jenis pengaturan nilainya akan disimpan dalam entri masuk
* {awalan} _options table. Nama opsi ditentukan oleh fungsi thsp_cbp_option ()
* /
if (isset ($ thsp_field_value ['setting_args'] ['type']) && 'option' == $ thsp_field_value ['setting_args'] ['type']) {
$ setting_control_id = $ thsp_cbp_option. '[' $ thsp_field_key. ']';
} lain {
$ setting_control_id = $ thsp_field_key;
}

/ *
* Tambahkan fungsi panggilan balik default, jika tidak ada yang ditentukan
* /
if (! isset ($ thsp_field_value ['setting_args'] ['sanitize_cb']))) {
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
* Menambahkan pengaturan Customizer
* /
$ wp_customize-> add_setting (
$ setting_control_id,
$ thsp_field_value ['setting_args']
);

/ **
* Menambahkan kontrol Customizer
*
* Nilai 'bagian' harus ditambahkan ke array 'control_args'
* jadi kontrol dapat ditambahkan ke bagian saat ini
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key;

/ *
* $ wp_customize-> metode add_control membutuhkan 'pilihan' untuk menjadi kunci sederhana => pasangan nilai
* /
if (isset ($ thsp_field_value ['control_args'] ['choices'])) {
$ thsp_cbp_choices = array ();
foreach ($ thsp_field_value ['control_args'] ['choices'] sebagai $ thsp_cbp_choice_key => $ thsp_cbp_choice_value) {
$ thsp_cbp_choices [$ thsp_cbp_choice_key] = $ thsp_cbp_choice_value ['label'];
}
$ thsp_field_value ['control_args'] ['choices'] = $ thsp_cbp_choices;
}


// Periksa tipe kontrol
if ('color' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
WP_Customize_Color_Control baru (
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} elseif ('image' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
WP_Customize_Image_Control baru (
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} elseif ('unggah' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
WP_Customize_Upload_Control baru (
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} lain {
$ wp_customize-> add_control (
$ setting_control_id,
$ thsp_field_value ['control_args']
);
}

} // akhiri foreach

} // akhiri foreach

}
add_action ('sesuaikan_register', 'thsp_cbp_customize_register');

Menelusuri semua bagian, menambahkan yang belum ada, lalu menelusuri semua bidang di setiap bagian, menambahkan pengaturan dan kontrol untuk masing-masing. Hanya itu yang terjadi di sini.

Ingat bahwa kami menggunakan ‘ketik’ => ‘opsi’ untuk semua pengaturan? Itu sebabnya sekarang kita miliki “My_theme_options [$ thsp_field_key]” untuk pengaturan dan bagian. Ini akan menyimpan semua nilai sebagai satu array serial yang dapat Anda ambil dengan menggunakan get_option (‘my_theme_options’). Atau Anda bisa menggunakan fungsi pembantu yang didefinisikan dalam helpers.php untuk mengambil nilai saat ini dan nilai default untuk semua bidang:

/ **
* Dapatkan Nilai Opsi
*
* Array yang menampung semua nilai opsi
* Nilai default opsi digunakan jika pengguna belum menentukan nilai
*
* @menggunakan thsp_get_theme_customizer_defaults () didefinisikan dalam /customizer/options.php
* @return array Nilai saat ini untuk semua opsi
* @since Theme_Customizer_Boilerplate 1.0
* /
function thsp_cbp_get_options_values ​​() {

// Dapatkan opsi default
$ option_defaults = thsp_cbp_get_options_defaults ();

// Parsing opsi yang tersimpan dengan default
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option (), array ()), $ option_defaults);

// Kembalikan array yang diuraikan
mengembalikan $ thsp_cbp_options;

}


/ **
* Dapatkan Default Opsi
*
* Mengembalikan array yang menyimpan nilai default untuk semua opsi
*
* @menggunakan thsp_get_theme_customizer_fields () didefinisikan dalam /customizer/options.php
* @return array $ thsp_option_defaults Nilai default untuk semua opsi
* @since Theme_Customizer_Boilerplate 1.0
* /
function thsp_cbp_get_options_defaults () {

// Dapatkan larik yang menampung semua bidang opsi tema
$ thsp_sections = thsp_cbp_get_fields ();

// Inisialisasi array untuk menyimpan nilai default untuk semua opsi tema
$ thsp_option_defaults = array ();

// Loop melalui array parameter opsi
foreach ($ thsp_sections sebagai $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['fields'];

foreach ($ thsp_section_fields sebagai $ thsp_field_key => $ thsp_field_value) {

// Tambahkan kunci array asosiatif ke larik default untuk setiap opsi di larik parameter
if (isset ($ thsp_field_value ['setting_args'] ['default'])) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['default'];
} lain {
$ thsp_option_defaults [$ thsp_field_key] = false;
}

}

}

// Kembalikan array default
mengembalikan $ thsp_option_defaults;

}

Hanya ada satu hal lagi yang harus saya sebutkan – fungsi panggilan balik sanitasi yang kami tentukan dalam array ‘setting_args’. Fungsi didefinisikan dalam extended.php dan hanya menjalankan data wp_kses_post fungsi:

/ **
* Fungsi panggilan balik sanitasi Kustomisasi Tema
* /
function thsp_sanitize_cb ($ input) {

return wp_kses_post ($ input);

}

Di mana Dari Dari Sini?

Untuk saat ini, Anda dapat menggunakan Tema Customizer Boilerplate ini di tema Anda, yang perlu Anda lakukan adalah mengunduhnya dari Github, menyalin ke direktori tema Anda dan memasukkan file utama dari functions.php, yang 100% fungsional dan cukup baik untuk sebagian besar tema.

Karena tema Anda bukan “seperti kebanyakan tema”, minggu depan kita akan melihat cara memperpanjang pelat dengan menggunakan filter dan kait tindakan.

Saya akan senang mendengar pendapat Anda tentang boilerplate ini yang dapat ditingkatkan atau diperluas, jadi silakan tinggalkan komentar.

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