Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Theme Development
Code

Kontrol Kustom di Theme Customizer

by
Length:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Dalam artikel terakhir, kami menjelajahi kontrol lanjutan yang tersedia di Theme Customizer, dan cara menerapkannya.

Kami akan melihat cara membuat kontrol kustom kami sendiri, memungkinkan Anda memilih Kategori Posting mana yang ditampilkan di beranda.

Untuk memulai, unduh versi 0.6.0 dari Contoh Theme Customizer kami.

Kontrol Theme Customizer yang Ada

WordPress menyediakan beberapa kontrol, masing-masing dengan kelas PHP mereka sendiri. Kami menjelajahi ini di bagian terakhir dari seri kami:

  • Masukan Teks Biasa: WP_Customize_Control
  • Pemilih Warna: WP_Customize_Color_Control
  • Unggahan File: WP_Customize_Upload_Control
  • Gambar: WP_Customize_Image_Control
  • Gambar Latar Belakang: WP_Customize_Background_Image_Control
  • Gambar Header: WP_Header_Image_Control

Terlepas dari Masukan Teks Biasa, semua Customizer Controls memperluas kelas WP_Customize_Control.

Memperluas WP_Customize_Control

Setiap Customizer Control akan menentukan beberapa atau semua fungsi kelasnya sendiri untuk menimpa yang disediakan oleh WP_Customize_Control.

Sebagai contoh, WP_Customize_Control berisi fungsi berikut untuk menampilkan HTML yang digunakan dalam Theme Customizer:

Fungsi mendeteksi $type yang ditentukan untuk menentukan apa yang akan dikeluarkan(masukan teks biasa, kotak centang, tombol radio, dropdown pilih atau dropdown dari Pages WordPress).

Namun, tidak ada jenis di atas yang berguna untuk WP_Customize_Color_Control, yang perlu membuat pemilih warna. Karena semua Customizer Controls memperluas WP_Customize_Control, kontrol warna dapat menggantikan fungsi di atas dengan keluarannya sendiri:

Ini adalah konsep penting, yang sekarang akan kami terapkan saat membuat kontrol kustom kami.

Membuat Kontrol Kategori

Di bagian bawah functions.php, tambahkan blok kode berikut:

Ini menciptakan Kontrol Theme Customizer baru yang disebut WP_Customize_Category_Control, yang mendefinisikan fungsi render_content() sendiri untuk menggantikan fungsi render_content() default dari WP_Customize_Control.

Kami awalnya memeriksa apakah kelas WP_Customize_Control ada, karena jika tidak kami akan menerima kesalahan berikut pada layar non-Theme Customizer:

Theme Customizer Error

Mari melalui fungsi ini untuk memahami apa yang dilakukannya.

Kami menggunakan fungsi wp_dropdown_categories WordPress untuk membuat elemen HTML, mencantumkan semua Kategori Posting yang memiliki satu atau lebih Posting yang ditugaskan kepada mereka.

Selanjutnya, kami menambahkan parameter data-link ke elemen HTML. Ini khusus untuk Theme Customizer dan penting karena ia memberitahu Theme Customizer bahwa perubahan telah dibuat, memungkinkan tombol Save & Publish untuk bekerja.

Akhirnya, kami menampilkan dropdown yang dipilih di dalam label.

Menerapkan Kontrol Category

Seperti halnya kontrol Theme Customizer, kita perlu menerapkannya, sehingga akan ditampilkan dalam Theme Customizer.

Tambahkan kode berikut ke ujung fungsi tcx_register_theme_customizer(), untuk menambahkan bagian baru ke Theme Customizer:

Selanjutnya, tambahkan kode berikut tepat setelah kode yang kami definisikan di atas:

Terakhir, mari kita tambahkan WP_Customize_Category_Control baru kami, mengikatnya ke setelan dan bagian di atas:

Simpan file functions.php Anda, dan lihat Theme Customizer Anda. Anda seharusnya melihat bagian Kategori baru, dengan kotak dropdown berlabel Category:

Theme Customizer: Category Dropdown

Pilih kategori dari daftar dropdown, dan klik Save & Publish.

Membaca Pengaturan Kategori

Saat ini, kode di atas tidak mengubah tampilan tema kami. Mari tambahkan beberapa kode ke index.php, di bawah get_header(), untuk menampilkan daftar Posting:

Pastikan Anda memiliki beberapa Posting yang ditugaskan ke sebuah Kategori. Anda kemudian akan melihat sesuatu seperti ini:

Theme Customizer: Posts Loop

Jika Anda telah mengikuti tutorial kami yang lain dalam seri ini, Anda akan tahu bahwa kami dapat menggunakan get_theme_mod() untuk mendapatkan nilai pengaturan untuk pengaturan Theme Customizer tertentu.

Ubah kode di atas untuk membaca nilai dropdown Kategori kami, jadi kami hanya menampilkan Posting yang ditetapkan untuk Kategori yang dipilih:

Jika tidak ada kategori yang dipilih di Theme Customizer, semua Posting akan ditampilkan, terlepas dari kategori.

Jika kategori telah dipilih, hanya Posting yang ditetapkan untuk Kategori itu yang akan ditampilkan.

Dalam contoh kami, saya memilih ‘News’ sebagai Kategori yang akan ditampilkan:

Theme Customizer: Posts from News Category

Ringkasan

Theme Customizer adalah alternatif yang bagus untuk panel opsi tema berdaya-berat atau Plugin, dan memungkinkan pemilik situs untuk melihat, secara real time, bagaimana berbagai pengaturan mengubah perilaku dan gaya situs web WordPress mereka.

Kami telah menjelaskan kontrol default dan kustom yang tersedia, serta bagaimana kontrol kustom dapat memperluas kelas Theme Customizer default.

Tutorial ini juga mencakup beberapa aspek yang lebih maju dalam menggunakan Theme Customizer, dengan memperluasnya dan memungkinkan Anda untuk menyesuaikan kategori posting mana yang akan ditampilkan di halaman beranda Anda.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.