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

 Menggali Into Theme Customizer: Berlatih I

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Digging Into the Theme Customizer.
Digging Into the Theme Customizer: Components
Digging Into the Theme Customizer: Practicing II

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

 Setelah melalui posting sebelumnya dalam seri ini, saya menganggap bahwa anda memahami Tema Customizer komponen dan bagaimana untuk menambah, menghapus dan mengkonfigurasi mereka.

Tampaknya ada banyak hal untuk mencari tahu, dan itu akan menjadi latihan yang baik untuk dimasukkan ke dalam tindakan segala sesuatu yang kita pelajari.

Dalam posting ini, saya akan membahas beberapa hal yang paling penting tentang Tema Customizer melalui beberapa contoh. Hal ini akan menghasilkan pemahaman yang lebih besar dari fitur dibandingkan dengan hanya membaca sebuah artikel yang tidak menyertakan kode apapun.


Sebelum Kita Mulai

  • Pastikan anda sudah membaca bagian sebelumnya meliputi rincian komponen dalam Tema Customizer. Tentu saja, merujuk untuk itu jika anda lupa sesuatu.
  •  Tema Customizer hubungan dengan tema, struktur, tentu saja, jadi cara terbaik untuk mengintegrasikan dengan tema anda adalah untuk melaksanakan hal itu benar ketika anda mengembangkan tema anda; namun, dalam posting ini, kita tidak akan membuat tema baru untuk melakukan itu, saya akan menggunakan TwentyEleven dan akan memodifikasi untuk tujuan demonstrasi.

Menambahkan Bagian Baru

Membuka functions.php file, menulis kode berikut di dalamnya:

 Pertama-tama, wptuts_theme_customizer fungsi akan menghubungkan ke customize_register tindakan yang penting action digunakan untuk mendaftarkan pilihan baru dalam Tema Customizer. Perhatikan bahwa fungsi ini memiliki satu parameter $wp_customize, seperti yang disebutkan sebelumnya, adalah variabel global dan contoh WP_Customize_Manager kelas yang mengelola semua komponen lain dalam Tema Customizer.

 Dalam rangka untuk menambahkan sebuah bagian baru, $wp_customize memiliki metode bernama add_section. Seperti yang anda lihat, "kami bagian berita" memiliki id wptuts, ini adalah suatu hal yang penting untuk mengingat nanti.

 Judul dan deskripsi atribut yang menunjukkan apa yang akan ditampilkan ketika rendering komponen.

 Perhatikan bahwa bagian baru akan pernah tampilan di menu bar dalam Tema Menyesuaikan halaman sampai memiliki setidaknya satu pengaturan dan satu kontrol.


Menyiapkan Opsi

Dalam wptuts_theme_customizer fungsi, menambahkan kode berikut:

 Kemudian, untuk mengintegrasikan pengaturan ini menjadi bagian kami, kami telah membuat kontrol baru yang menghubungkan bagian baru dan pengaturan baru:

 Dengan id wptuts_welcome_text, kontrol baru akan mengasosiasikan pengaturan yang memiliki id ini dengan bagian masing-masing. Dan hasilnya akan menjadi:

digging-into-theme-customizer-part-3-practicing-1

 Hal pertama yang perlu anda perhatikan adalah kita tidak perlu mendeklarasikan id baru kontrol adalah sama seperti id dari pengaturan. Kita juga dapat melakukan hal ini:

 Ia bekerja sama seperti pertama kali kita menggunakannya. Pada dasarnya, jika kita tidak lulus nilai untuk pengaturan properti, maka kontrol akan menggunakan id sebagai id dari pengaturan kontrol.

 Titik ini memungkinkan kita tahu bahwa setiap pengaturan yang dapat digunakan oleh banyak kontrol yang berbeda. Ini juga berarti bahwa setiap pengaturan dapat ditampilkan berkali-kali di berbagai bagian (meskipun hal ini tampaknya tidak perlu). Misalnya, mengganti kontrol kami dengan:

Memeriksa hasil, kita setting display di kedua Site title dan Tagline dan WPTuts bagian.

digging-into-theme-customizer-part-3-practicing-2

Masing-masing pengaturan yang dapat digunakan oleh banyak kontrol.

 Kedua, nilai default dari pengaturan ini diambil dari tema saat ini wptuts_welcome_text pilihan menggunakan get_theme_mod fungsi.

 Karena tema ini pilihan tidak ada, properti default akan digunakan. Jadi kita memiliki sebuah textbox dengan nilai "Hello world".  Untuk memeriksa apakah itu bekerja dengan Tema Customizer atau tidak, kita mungkin mencoba untuk output nilai dari pengaturan ini di suatu tempat di template kita.

Mari kita buka header.php file dan tambahkan kode berikut ke akhir dan simpan:

 Kembali ke Tema Customizer halaman, menyegarkan dan mencoba untuk mengubah beberapa nilai lain dari pengaturan kami, "Hi, terima kasih untuk membaca!", misalnya, dan melihat perubahan. Hasil tampilan langsung di Preview frame, jadi keren!

digging-into-theme-customizer-part-3-practicing-3

 Ketiga, kita tidak menetapkan setiap nilai untuk pengaturan jenis, maka nilai default untuk theme_mod akan diterapkan, hal ini menjelaskan alasan mengapa kita menggunakan get_theme_mod fungsi untuk mendapatkan nilai dari pengaturan ini.  Anda bisa mengubah nilai ini pilihan, dan penggunaan get_option untuk mendapatkan nilai, bukan get_theme_mod. Cobalah untuk menambahkan berikut cuplikan ke ujung atas wptuts_theme_customizer fungsi:

digging-into-theme-customizer-part-3-practicing-4

Output nilai wptuts_welcome_again tepat setelah get_theme_mod( 'wptuts_welcome_text' ) header.php.

Cek hasilnya:

digging-into-theme-customizer-part-3-practicing-5

Bagus, mari kita coba contoh yang lain dengan menambahkan satu lebih banyak pengaturan:

 Kami baru saja menambahkan opsi baru untuk menampilkan kotak centang yang memungkinkan kita untuk memilih apakah atau tidak untuk menyembunyikan bagian footer. Selanjutnya, buka footer.php file, cari kode berikut:

 dan ganti dengan:

 Kode di atas akan memeriksa apakah get_theme_mod('wptuts_footer') mengembalikan false (nilai 0), kemudian menampilkan style='display:none;' atribut-nilai pasangan yang menyembunyikan elemen div yang mengandung itu, jika tidak, output apa-apa. Akhirnya, kita memiliki sederhana centang pilihan, cobalah untuk klik itu, bagian footer konten akan menyembunyikan langsung.

digging-into-theme-customizer-part-3-practicing-10

 Jadi apa yang terjadi jika pengaturan id kami berniat untuk menggunakan ada? Nah, pengaturan hanya akan menggunakan opsi yang ada tanpa menambahkan opsi baru masuk. Di bagian berikutnya, kita akan menunjukkan demo sederhana tentang itu.


Menggunakan Opsi Yang Ada

Pengaturan -> Diskusi di admin dashboard memiliki opsi yang judulnya adalah Default Avatar. Aku akan membawa opsi ini untuk Customizer Tema halaman. Pilihan ini memiliki id avatar_default, sehingga:

Di atas kontrol mendefinisikan pengaturan jenis konten seperti radio, dan radio harus memiliki daftar pilihan. Saya lulus nilai-nilai dan judul dari masing-masing pilihan meskipun pilihan atribut mana kuncinya adalah nilai pilihan (akan digunakan sebagai nilai atribut dalam tag HTML), dan nilai kunci adalah judul yang ditampilkan setelah tombol radio.

Hasilnya:

digging-into-theme-customizer-part-3-practicing-6

Cobalah untuk mengubah nilai:

digging-into-theme-customizer-part-3-practicing-7

 atau

digging-into-theme-customizer-part-3-practicing-8

 Anda juga bisa mengubah jenis kontrol untuk memilih. Dan kita akan memiliki:

digging-into-theme-customizer-part-3-practicing-9

 Mari kita mencoba jenis lain dari kontrol: dropdown-halaman sendiri. Anda akan melihat pilihan yang mengandung semua halaman dan nilai dari pengaturan akan menjadi ID dari halaman yang dipilih saat mengambil itu.


Aman Membuat Komponen Baru

 Menambahkan komponen baru dan id adalah duplikat dari yang sudah ada dapat menyebabkan kesalahan yang serius, dan bahkan dapat mempengaruhi komponen lainnya dalam kegiatan dan data.

Jadi sebelum menciptakan sesuatu yang baru, memeriksa apakah atau tidak suatu komponen dengan id yang sama ada.

$Wp_customize->bagian() metode ini akan mengembalikan array yang berisi id-obyek pasang semua bagian dalam Tema Customizer. Dengan menggunakan array_keys fungsi, saya mendapatkan sebuah array baru yang berisi semua Id dari array yang lama.

 Selanjutnya, memeriksa apakah id komponen yang kita kira untuk menambahkan adalah bahwa array baru atau tidak, kemudian memutuskan untuk menambahkan komponen baru atau melakukan apa-apa.


 Menciptakan Kelompok Pengaturan

 Seperti dengan Pengaturan API, ketika anda membuat pilihan pengaturan, itu akan tertulis menjadi pilihan tabel database sebagai sebuah entri. Jika kita memiliki 10 pilihan pengaturan, maka kita akan memiliki 10 entri baris di meja pilihan, tampaknya jadi boros.  Mengapa kita tidak meletakkan semua pengaturan pilihan menjadi hanya satu entri. Membuat database rapi dan mudah untuk mengelola. Di bawah ini adalah contoh:

 Seperti yang anda lihat, sekarang, kami memiliki wptuts kelompok pilihan yang mengandung kami yang lain pilihan pengaturan. Untuk mendapatkan nilai tertentu pengaturan, kita dapat melakukannya seperti ini:

 Kemudian menggunakan variabel-variabel mana saja yang anda inginkan. Tampaknya sederhana, saya sangat merekomendasikan untuk melakukannya dengan cara ini.


Kesimpulan

 Kita telah membahas banyak, tapi itu tidak cukup. Di bagian berikutnya, kita akan melihat beberapa faktor-faktor penting lainnya seperti Sanitasi, Transportasi atribut dan Diperpanjang komponen.

 Lagi, aku melihat ke depan untuk mendengar dari anda, setiap komentar akan dihargai!

Advertisement
Advertisement
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.