Berinteraksi dengan WordPress Theme Customizer

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

Di bagian 1 dari seri WordPress Theme Customizer saya sebutkan bahwa untuk berinteraksi dengan Theme Customizer Anda perlu memuat $ wp_customize objek, yang merupakan turunan dari WP_Customize_Manager kelas. Untuk melakukan itu, Anda harus menggunakan custom_register kait tindakan:


add_action ('custom_register', 'my_theme_customize_register');
function my_theme_customize_register ($ wp_customize) {

// Berinteraksi dengan objek $ wp_customize

}

Anda dapat menempatkan kode ini di functions.php tema Anda atau file yang disertakan darinya.

Menambah atau menghapus elemen Customizer Tema (bagian, pengaturan dan kontrol)

Setelah Anda memuat $ wp_customize objek Anda dapat menggunakan salah satu metode untuk menambah, mendapatkan atau menghapus pengaturan, kontrol dan bagian di dalamnya (add_setting, get_setting, remove_setting, add_control … Anda mendapatkan intinya).

Jadi, jika Anda mau Dapatkan atau menghapus bagian, kontrol atau pengaturan, yang Anda butuhkan adalah ID-nya. Baris ini akan menghapus bagian Warna (letakkan di dalam fungsi my_theme_customize_register dari cuplikan kode pertama):

$ wp_customize-> remove_section ('colors');

Menambahkan bagian, kontrol, atau pengaturan sedikit berbeda karena memerlukan beberapa parameter lagi. Saya tidak akan membahas semuanya di sini karena dua alasan:

  1. Bukan itu tujuan dari seri ini, kami akan membuat pelat Customizer Tema yang bisa Anda masukkan ke dalam tema Anda saja
  2. Alex Mansfield sudah menutupinya dengan 6000 kata monster dari a Tutorial Penyesuai Tema yang harus dibaca oleh setiap pengembang tema WordPress dan kemudian berkicau (serius, jika belum, baca sekarang).

Tapi tetap saja, mari kita lihat bagaimana Anda dapat menambahkan pengaturan Anda sendiri dengan kontrol di bagian Customizer Tema baru, serta beberapa argumen. Karena jauh lebih mudah untuk bekerja dengan contoh nyata, inilah yang kami kejar:

  • Bagian baru, berlabel “Layout”
  • Pengaturan baru yang menyimpan tata letak tema Anda
  • Kontrol radio baru dengan dua opsi – sidebar di kiri dan sidebar di kanan

Hal pertama yang ditambahkan ke Customizer Tema adalah bagian “Layout”:

$ wp_customize-> add_section (
// INDO
'layout_section',
// Susunan argumen
Himpunan(
'title' => __ ('Layout', 'my_theme'),
'kapabilitas' => 'edit_theme_options',
'description' => __ ('Memungkinkan Anda mengedit tata letak tema Anda.', 'my_theme')
)
);

Jangan mencoba melihatnya di penyesuai, bagian tidak akan ditampilkan kecuali ada pengaturan dan kontrol yang ditambahkan padanya. Jadi mari kita tambahkan keduanya:

$ wp_customize-> add_setting (
// INDO
'my_theme_settings [layout_setting]',
// Susunan argumen
Himpunan(
'default' => 'sidebar kanan',
'type' => 'option'
)
);
$ wp_customize-> add_control (
// INDO
'layout_control',
// Susunan argumen
Himpunan(
'type' => 'radio',
'label' => __ ('Tata letak tema', 'my_theme'),
'section' => 'layout_section',
'pilihan' => array (
'sidebar kiri' => __ ('Sidebar kiri', 'my_theme'),
'sidebar kanan' => __ ('Sidebar kanan', 'my_theme')
),
// Yang terakhir ini harus cocok dengan ID pengaturan dari atas
'settings' => 'my_theme_settings [layout_setting]'
)
);

Anggap Anda membaca tutorial Alex dan / atau halaman Codex hanya ada satu parameter dalam array argumen add_setting – ‘ketik’ – yang ingin saya fokuskan. Anda memiliki dua kemungkinan di sini, ‘opsi’ dan ‘tema_mod’ dan Anda dapat mengambilnya dengan menggunakan get_option dan get_theme_mod, masing-masing. Saya selalu menggunakan ‘opsi’ hanya karena memungkinkan Anda untuk membuat serialisasi nilai pengaturan tema Anda dengan memberikannya seperti ID my_theme_settings [setting_1], my_theme_settings [setting_2] dll. Dengan begitu semua nilai akan disimpan sebagai satu entri basis data di tabel wp_options Anda.

Dan akhirnya, setelah Anda menambahkan dua potongan kode tersebut agar berfungsi, Anda terhubung ke dalamnya custom_register kait tindakan (cuplikan kode pertama dalam posting ini), Penyesuai Tema telah disesuaikan:

Bagian baru ditambahkan ke Customizer Tema

Bagian baru ditambahkan ke Customizer Tema

Menggunakan nilai pengaturan Customizer Tema di tema Anda

Setelah Anda memberikan kemampuan kepada pengguna untuk menyimpan pengaturan ini, Anda dapat mengambil nilainya, terhubung ke dalamnya body_class filter hook dan tambahkan ke array kelas tubuh yang ada:

add_filter ('body_class', 'my_theme_body_classes');
function my_theme_body_classes ($ kelas) {

/ *
* Karena kami menggunakan 'opsi' dalam array argumen add_setting
* kami mengambil nilai dengan menggunakan fungsi get_option
* /
$ my_theme_settings = get_option ('my_theme_settings');

$ class [] = $ my_theme_settings ['layout_setting'];

mengembalikan $ kelas;

}

Ini akan menambahkan .left-sidebar atau .right-sidebar ke array kelas tubuh di tema Anda. Dengan menggunakan dua kelas ini di file style.css tema Anda, Anda akan dapat membuat dua tata letak yang berbeda. Sebagai contoh:

/ * Sidebar di sebelah kanan adalah tata letak default * /
#kandungan {
mengapung: kiri;
lebar: 60%;
}
#sidebar {
mengapung: benar;
lebar: 30%;
}

/ * Menggunakan kelas .left-sidebar untuk mengganti tata letak default * /
.sidebar kiri #isi {
mengapung: benar;
}
.sidebar kiri # sidebar {
mengapung: kiri;
}

Yang terbaik dari semuanya, berkat WordPress Theme Customizer, pengguna dapat melihat pratinjau kedua tata letak sebelum menyimpan apa pun. Ambil itu, halaman pengaturan tema!

Ringkasan dan Bacaan Lebih Lanjut

TL; DR versi posting ini akan seperti ini: Anda bisa mendapatkan $ wp_customize objek dan kemudian menambahkan sesuatu (bagian, pengaturan atau kontrol) atau menghapusnya. Segala sesuatu yang lain bermuara pada parameter pengaturan.

Bagian Tiga adalah tempat seri ini menjadi menarik karena kami akan mulai mengotomatiskan seluruh proses dan bekerja di Theme Customizer Boilerplate yang dapat Anda masukkan ke dalam tema Anda dan segera mulai digunakan. Tetap disini!

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