Cara Membuat Kontrol Kustom untuk Penyesuai Tema WordPress
Diterbitkan: 2015-06-17Fitur Penyesuai Tema WordPress (juga disebut sebagai "Penyesuai") memberi pengembang kemampuan untuk menyesuaikan tampilan tema mereka, dan bahkan membantu mereka melihat pratinjau perubahan yang dibuat pada tema secara real time. Di era saat ini, di mana persaingan untuk menarik pelanggan ke situs web semakin ketat, Anda akan sering merasa perlu untuk menyesuaikan desain situs web Anda. Dan terima kasih, kepada penyesuai tema, Anda dapat menghemat banyak waktu berharga Anda dengan melihat langsung perubahan yang dibuat pada desain WordPress Anda.
Penyesuai tema WordPress diperkenalkan sebagai bagian dari API Kustomisasi Tema (yang diperkenalkan di WordPress versi 3.4. Jika Anda ingin membuat perubahan pada pengaturan tema Anda, maka Anda harus menggunakan kontrol khusus yang disertakan bersama tema penyesuai seperti kotak centang, bidang teks, radio, dan beberapa lainnya.Tetapi, bagaimana jika Anda ingin menambahkan kontrol khusus Anda sendiri ke tema WordPress Anda?
Untuk membantu Anda memahami cara membuat dan menambahkan kontrol yang disesuaikan untuk memenuhi kebutuhan spesifik Anda, kami akan mendemonstrasikan pembuatan tiga kontrol kustom untuk membuat beberapa perubahan pada footer tema kami. Namun, untuk memulai prosesnya, Anda harus terlebih dahulu mengenal kelas WP_Customizer_Control.
Mengenal Tentang Kelas “WP_Customizer_Control”
Untuk menghasilkan kontrol khusus, Anda perlu membuat kelas baru dan memperluasnya menggunakan kelas WP_Customizer_Control. Kelas ini menggunakan metode “$wp_customize->add_control()” untuk menambahkan kontrol kustom Anda sendiri ke layar kustomisasi tema situs WordPress Anda. Selanjutnya, untuk mengakses metode ini, Anda perlu menggunakan objek $wp_customize yang tersedia di kait tindakan: customize_register.
Mari kita pertimbangkan contoh yang mengilustrasikan bagaimana Anda dapat menambahkan kontrol kustom yang ada ke bagian tema Anda (di kait tindakan 'customize_register') sebagai berikut:
$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );
Dalam contoh di atas, kami membuat kontrol yang akan memberi pengguna kemampuan untuk memilih gambar header baru.
Contoh Mendemonstrasikan: Bagaimana Cara Membuat Lebih Banyak Kontrol Kustom?
Bagian ini dibagi menjadi tiga langkah berbeda, di mana setiap langkah berisi kode yang akan menghasilkan kontrol kustom untuk area teks untuk penyesuai tema Anda. Kami akan menambahkan kode di file footer.php tema WordPress, untuk membuat perubahan pada footer melalui kontrol area teks baru.
Langkah1: Membuat Kontrol Area Teks Sederhana
Seperti yang telah kita bahas di atas, untuk membuat kontrol kustom baru, kita perlu mendefinisikan kelas yang akan digunakan untuk memperluas kelas WP_Customize_Control. Pada dasarnya, kelas ini digunakan bersama dengan API Kustomisasi Tema WordPress untuk menambahkan kontrol input (yaitu kontrol kustom) pada layar kustomisasi tema. Mari kita lihat kode untuk mengimplementasikan tugas ini:
/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));
Dalam kode ini, kait tindakan customer_register digunakan untuk memberi tahu WordPress tentang fungsi kustom, yang telah kami buat dengan nama: theme_footer_customizer. Seperti yang Anda ketahui, bahwa kelas WP_Customize_Manager membantu mengontrol Penyesuai Tema WordPress, sehingga kontrol khusus akan menjadi bagian dari kelas ini. Namun, untuk mengakses kontrol Anda, Anda harus menggunakan objek "wp_customize" yang merupakan turunan dari kait customize_register.
Dalam kasus kami, objek wp_customize digunakan untuk mendefinisikan bagian footer baru yang akan disertakan dalam area teks. Jadi, apa pun yang Anda ketik di bagian footer "text area" akan ditampilkan di footer tema Anda seperti yang ditunjukkan pada tangkapan layar di bawah ini:
Dalam tangkapan layar ini, Anda dapat melihat bahwa "bagian Teks Kaki" baru ditambahkan ke tema Anda. Teks yang ditulis di bagian ini akan ditampilkan di footer tema Anda.
Langkah 2: Menambahkan Kontrol Kustom untuk Mengubah Warna Latar Belakang
Jadi, sekarang kami telah membuat kontrol area teks, Anda dapat menambahkan banyak kontrol kustom yang berbeda ke dalamnya. Dalam contoh ini, kami akan menambahkan kontrol khusus ke bagian teks Footer baru kami yang akan membantu dalam mengubah warna latar belakang footer. Untuk melakukannya, cukup tambahkan cuplikan kode berikut di file footer.php tema Anda:
//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));
Seperti yang Anda dapat di tangkapan layar di atas, memilih warna yang sesuai dari "Pengaturan Warna Footer", warna latar belakang footer telah berubah menjadi abu-abu.
Langkah 3: Menambahkan Kontrol Kustom untuk Menambahkan Logo
Kontrol lain yang kami tambahkan ke bagian teks Footer adalah "Footer Logo". Sesuai dengan namanya, kontrol 'Footer Logo' akan membantu dalam menambahkan logo pada footer. Untuk menambahkan kontrol ini, Anda harus menyertakan cuplikan kode di bawah ini di file footer.php:
//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }
Mari Selesaikan!
Anda mungkin menemukan proses pembuatan kontrol kustom sedikit memakan waktu. Namun, Anda tidak dapat mengabaikan fakta bahwa kontrol yang lebih baik yang akan Anda tambahkan ke layar kustomisasi tema situs web Anda, semakin banyak waktu pengguna Anda dapat dihemat, sehingga mengarah pada peningkatan pengalaman pengguna. Jadi, jika Anda berencana untuk membangun beberapa kontrol kustom Anda sendiri untuk ditambahkan ke penyesuai tema WordPress, maka posting ini akan membuktikan panduan yang masuk akal untuk Anda.
