Menggunakan Kawalan Media Customizer Tema WordPress

Penjelasan terperinci mengenai Kawalan Media Customizer Tema WordPress: Kelas WP_Customize_Media_Control baru

Kemas kini WordPress baru -baru ini telah mengubah APInya. Sesetengah fungsi dan kelas ditambah, yang lain ditutup. Artikel ini membincangkan Kawalan Media Customizer Topik. Dalam versi terdahulu, kawalan ini tersedia, tetapi hanya dalam kelas WP_Customize_Upload_Control. Sekarang kami telah menemui kelas baru untuk menguruskan media yang dipanggil WP_Customize_Media_Control.

Pertama, saya akan menerangkan cara menggunakan kelas baru ini untuk menguruskan kawalan media dalam penyesuai tema. Kami kemudian akan memperkenalkan contoh kelas konkrit yang meluas WP_Customize_Media_Control untuk membolehkan kawalan imej tanaman.

Mata utama:

• Kawalan Media Customizer Tema WordPress telah dikemas kini untuk memasukkan fungsi dan kelas baru, termasuk kelas WP_Customize_Media_Control baru, yang membolehkan pengurusan media yang lebih baik.
• WP_Customize_Media_Control boleh digunakan untuk membolehkan pengguna memilih fail audio yang boleh diakses di semua halaman. Kawalan ini boleh ditambah ke fail functions.php tema atau ke pemalam baru.
• WP_Customize_Media_Control boleh diperluaskan untuk menambah lebih banyak ciri, seperti kelas WP_Customize_Cropped_Image_Control, yang membolehkan pengguna memilih dan menanam imej sebelum menggunakannya.
• Kawalan baru menjadikan tema customizer lebih serba boleh, yang membolehkan pemaju menambah kawalan media mereka sendiri dan mengambil nilai yang paling berguna: ID media. Kelas asas ini boleh diperluaskan kepada kawalan yang lebih spesifik.

Kelas asas baru untuk menguruskan kawalan media

Mengapa memperkenalkan kelas baru?

Sebelum versi 4.3, WordPress menyediakan kami dengan WP_Customize_Upload_Control, kelas yang menguruskan muat naik fail media dalam customizer tema. Walau bagaimanapun, kelas ini tidak menyimpan ID media yang dimuat naik, tetapi hanya URLnya. Oleh kerana ID adalah cara yang lebih biasa untuk mendapatkan maklumat mengenai fail media, ia telah memutuskan untuk menyediakan kelas baru WP_Customize_Media_Control.

Jika anda digunakan untuk menggunakan WP_Customize_Upload_Control, anda masih boleh menggunakannya tanpa sebarang masalah, kerana ia kini memanjangkan kelas WP_Customize_Media_Control, dengan itu memastikan keserasian. Walau bagaimanapun, mengemas kini kod anda dan menggunakan WP_Customize_Media_Control pasti idea yang lebih baik.

cara menggunakan kawalan media ini

Kawalan media baru ini digunakan dengan cara yang sama seperti pendahulunya, kecuali nilai yang disimpan. Oleh kerana ia tidak lagi URL, ia tidak boleh dibersihkan dengan cara yang sama.

Untuk memahami cara menggunakan kawalan ini, kami akan mengkaji contoh khusus. Kami akan melihat bagaimana untuk mendapatkan pengguna untuk memilih fail audio yang boleh didengar oleh pelawat di semua halaman. Anda boleh menulis kod ke fail functions.php topik atau ke dalam pemalam baru. Kedua -duanya boleh diterima, dan kedua -dua pilihan mempunyai kelebihan mereka sendiri.

Perhatikan bahawa kerana topik Customizer API bukanlah tumpuan utama artikel ini, saya tidak akan menerangkan semua pilihan yang tersedia untuk fungsi yang akan kami panggil di sini.

Penggunaan Asas

Pertama, kita mulakan dengan fungsi WordPress yang akan dipanggil oleh WordPress apabila pengguna ingin memaparkan penyesuai tema. Fungsi ini akan menambah elemen tersuai kami ke customizer ini. Untuk memaklumkan WordPress bahawa kami mahu ia memanggil fungsi kami pada masa yang tepat, kami menggunakan tindakan customize_register.

<code class="language-php">function add_my_media_controls($wp_customize) {
}
add_action('customize_register', 'add_my_media_controls');</code>

Parameter

(dinamakan di sini $wp_customize) adalah objek yang mewakili penyesuai tema. Ia mengandungi semua kaedah yang anda perlukan untuk menambah tetapan.

Oleh kerana tidak ada bahagian lalai yang benar -benar sesuai untuk menambah bunyi tersuai kami, kami akan menambah bahagian kami sendiri, hanya dinamakan "bunyi".

<code class="language-php">$wp_customize->add_section('sound', array(
    'title' => 'Sound',
    'description' => 'Add a sound to your website',
    'capability' => 'edit_theme_options'
));</code>

Seperti yang dijangkakan, kaedah ini mewujudkan seksyen baru yang disebut "bunyi". Apabila pengguna membukanya, mereka akan melihat arahan di bahagian atas. Oleh kerana pilihan ketiga, bahagian ini hanya dapat dilihat oleh pengguna yang sudah dapat mengedit pilihan topik. Akhirnya, perhatikan parameter pertama sebelum pilihan array: Ia mentakrifkan ID bahagian, yang mesti kita gunakan semula apabila kita mahu menambah kawalan dalam bahagian ini.

Jika anda membuka penyesuai tema sekarang, anda tidak akan melihat bahagian ini. Ini adalah perkara biasa: WordPress tidak memaparkan bahagian kosong, jadi untuk melihatnya, kita perlu mengisi dengan sekurang -kurangnya satu kawalan.

Tema Customizer API membahagikan kawalan ke dalam dua bahagian: kawalan UI yang membolehkan pengguna memilih atau menaip data yang betul, dan tetapan yang mengambil nilai semasa dan menjimatkan nilai baru. Rawat tetapan sebagai antara muka antara kawalan UI dan pangkalan data.

kita perlu membuat tetapan sebelum membuat kawalan.

<code class="language-php">$wp_customize->add_setting('music', array(
    'type' => 'theme_mod',
    'capability' => 'edit_theme_options',
    'sanitize_callback' => 'absint'
));</code>

Kami menentukan "muzik" sebagai ID yang kami tetapkan. Ia adalah pengubahsuaian tema seperti yang ditunjukkan dalam pilihan pertama. Pilihan keupayaan adalah sama dengan kaedah add_section(). Akhirnya, kami menentukan absint() sebagai fungsi panggilan balik pembersihan. Fungsi WordPress ini adalah jalan pintas untuk abs(intval()) untuk memastikan bahawa nilai itu adalah integer positif. Seperti yang kita lihat di atas, WP_Customize_Media_Control akan menyimpan ID, jadi ia adalah fungsi yang kita mahu gunakan untuk membersihkan nilai -nilai.

kami kini bersedia untuk menambah kawalan UI yang dapat dilihat oleh pengguna.

<code class="language-php">$wp_customize->add_control(new WP_Customize_Media_Control($wp_customize, 'music', array(
    'section' => 'sound',
    'label' => 'Music',
    'mime_type' => 'audio'
)));</code>

Untuk membina objek WP_Customize_Media_Control, tiga parameter diperlukan: Contoh Penyesuaian Tema Semasa, ID Set yang sepadan (kami hanya dibuat di atas), dan pelbagai pilihan.

Pilihan bahagian

digunakan untuk menunjukkan bahagian yang kita mahu meletakkan kawalan. Kami berada di sini menggunakan bahagian yang kami buat khusus untuk tujuan ini. Kemudian kami menunjukkan label medan. Anda boleh meletakkan nilai yang anda mahukan di sini.

Akhirnya, di sini kami akan menyediakan pengguna dengan cara untuk memilih fail media. Oleh kerana kami mahu mereka hanya memilih fail audio, kami menentukan audio sebagai jenis MIME yang dikehendaki. Dengan cara ini, WordPress tidak akan membenarkan jenis fail lain dipilih.

Ini semua tentang membuat kawalan. Sekarang anda boleh membuka Tema Customizer: Anda harus melihat bahagian dan kawalan kami.

lebih banyak pilihan

Perhatikan bahawa pelbagai pilihan yang kami sediakan sebagai parameter ketiga pembina WP_Customize_Media_Control boleh menerima lebih banyak pilihan.

Di samping tagnya, anda juga boleh memaparkan lebih banyak maklumat mengenai kawalan melalui pilihan description. Malah, dengan menyediakan rentetan yang tidak kosong untuk pilihan description, anda boleh memaparkan arahan di bawah label, sebagai contoh, menerangkan di mana ia akan dipaparkan.

anda boleh menetapkan keutamaannya melalui pilihan priority. Nombor ini mentakrifkan urutan di mana objek mesti dipaparkan. Secara lalai, keutamaan ditetapkan kepada 10 dan objek dipaparkan dalam susunan di mana ia dicipta. Tetapi anda boleh mengubahnya. Sebagai contoh, jika anda membuat dua objek, anda boleh menetapkan keutamaan objek pertama kepada 10 dan keutamaan objek kedua ke 0: cara ini, objek kedua akan dipaparkan terlebih dahulu. Pilihan ini mungkin berguna jika plugin atau tema anda menyediakan pelbagai kawalan yang mesti dipaparkan dalam susunan tertentu.

Dapatkan tetapan yang disimpan

Untuk mengambil tetapan yang disimpan oleh pengguna, kami akan membuat fungsi baru yang dipanggil echo_theme_sound(). Fungsi ini akan dipanggil di mana anda ingin memaparkan dalam topik untuk memaparkan tag audio yang sepadan dengan media yang dipilih.

Pertama sekali, ingat bahawa tetapan kami adalah pengubahsuaian tema, jadi untuk mendapatkan nilainya, kami perlu menggunakan fungsi get_theme_mod().

<code class="language-php">function add_my_media_controls($wp_customize) {
}
add_action('customize_register', 'add_my_media_controls');</code>

Jika pengguna telah membuat pilihan, pembolehubah ini akan mengandungi ID media yang dipilih. Dalam erti kata lain, untuk memeriksa sama ada pilihan telah dibuat, kita hanya perlu menyemak sama ada ID ini berbeza daripada sifar.

<code class="language-php">$wp_customize->add_section('sound', array(
    'title' => 'Sound',
    'description' => 'Add a sound to your website',
    'capability' => 'edit_theme_options'
));</code>

Untuk membina tag audio, kami akan menggunakan wp_audio_shortcode(), yang memerlukan parameter: pelbagai pilihan yang sebenarnya akan menjadi atribut tag.

Arahan ini mesti mengandungi pilihan yang dinamakan src yang merupakan URL fail audio. Untuk mengambil URL ini, kita boleh menggunakan wp_get_attachment_url() dan ID yang diambil sebelum ini. Jika anda ingin menggunakan sifat lain yang anda boleh, tetapi tidak wajib. Untuk maklumat lanjut mengenai sifat yang ada, lihat WordPress Codex.

Kami kini bersedia untuk memaparkan tag audio kami. Saya di sini untuk membungkusnya ke dalam div, tetapi anda boleh memilih tag lain dan gaya lain. Anda juga boleh, sebagai contoh, menentukan dua parameter echo_theme_sound() dan $before untuk fungsi $after anda untuk membolehkan pengguna menyediakan teks yang dipaparkan sebelum dan selepas tag audio.

<code class="language-php">function add_my_media_controls($wp_customize) {
}
add_action('customize_register', 'add_my_media_controls');</code>

Sekarang, hubungi fungsi echo_theme_sound() di mana sahaja anda mahu dan nikmati hasilnya! Ambil perhatian bahawa sebaik sahaja anda menggunakan fungsi ini dalam fail tema, anda dapat melihat perubahan yang anda buat dalam customizer tema secara langsung selepas membuat perubahan tanpa menyegarkan halaman.

Mengurus imej yang dipotong

boleh dilanjutkan WP_Customize_Media_Control untuk menambah lebih banyak ciri. Jika anda memerlukan contoh khusus tentang ciri -ciri yang boleh ditambah seperti ini, anda boleh mencari satu di WordPress Core sendiri, menggunakan kelas WP_Customize_Cropped_Image_Control.

Seperti yang anda fikirkan dari namanya, ini berguna apabila anda ingin memberikan cara bagi pengguna untuk memilih dan menanam imej sebelum menggunakannya.

di sini, kami akan menggunakannya untuk menambah imej sari kata kepada tema WordPress lalai semasa (dua puluh lima belas). Saya memilih untuk menunjukkan imej ini di bahagian atas tajuk, tepat di atas tajuk laman web, tetapi, sekali lagi, anda boleh meletakkannya seperti yang anda suka: Matlamat artikel ini hanya untuk menunjukkan contoh khusus API baru.

Pertama, kami membuat tetapan kami. Oleh kerana kami akan menyimpan ID media, tetapan ini pada dasarnya sama seperti tag audio yang ditambah sebelumnya.

<code class="language-php">$wp_customize->add_section('sound', array(
    'title' => 'Sound',
    'description' => 'Add a sound to your website',
    'capability' => 'edit_theme_options'
));</code>

Kemudian, bahagian yang menarik: kawalan itu sendiri. Seperti WP_Customize_Media_Control, pembina WP_Customize_Cropped_Image_Control memerlukan tiga parameter, yang sama persis: contoh castance tema, ID set, dan pelbagai pilihan.

<code class="language-php">$wp_customize->add_setting('music', array(
    'type' => 'theme_mod',
    'capability' => 'edit_theme_options',
    'sanitize_callback' => 'absint'
));</code>

di sini, saya tidak membuat bahagian baru: kami menggunakan semula bahagian yang telah digunakan oleh WordPress untuk memberikan kawalan, yang membolehkan pengguna memilih tajuk imej latar belakang. Pilihan label adalah pilihan yang sudah diketahui dan anda akan lebih berminat dengan dua pilihan lain: lebar dan ketinggian.

Pilihan ini digunakan untuk mengawal saiz imej akhir. Pengguna memilih imej yang mereka mahu, dan kemudian alat grafik membolehkan mereka menanam imej yang mereka mahu. WordPress akan menanam imej berdasarkan pemilihan ini dan mengubah saiz imej yang dipotong ke saiz yang anda pilih dengan pilihan ini.

Apabila pengguna menanam imej, kekangan perkadaran imej ada di sini, dan mereka tidak dapat memilih sebahagian imej dengan perkadaran lain. Tetapi ini boleh berubah.

Malah, kelas ini menawarkan dua pilihan lain: flex_width dan flex_height. Secara lalai, kedua -dua pilihan ditetapkan kepada palsu, dan nisbah aspek yang diberikan oleh dimensi yang anda nyatakan adalah kekangan: Pengguna mesti memilih kawasan dengan perkadaran yang sama.

Walau bagaimanapun, jika anda menetapkan salah satu pilihan untuk benar, kekangan ini akan dikeluarkan dan pengguna akan dapat memilih sebahagian daripada imej dengan skala mana -mana. Ambil perhatian bahawa WordPress masih akan mengubah saiz hasil kepada saiz yang anda minta, jadi ia mungkin cacat.

Apabila menggunakan

dan flex_width, nisbahnya penting. Malah, pada mulanya, WordPress menyediakan pengguna dengan kawasan tanaman lalai. Kawasan ini sepadan dengan kawasan terbesar yang tersedia dalam imej dengan skala yang dikehendaki (seperti persegi maksimum dalam segi empat tepat). Ini akan memberi kita apa yang kita bicarakan di sini lebar dan ketinggian lalai. flex_height

Jika

ditetapkan kepada palsu, pengguna tidak akan dapat memilih kawasan yang lebih besar daripada lebar lalai. Jika anda menetapkan pilihan ini untuk benar, kekangan ini akan dibatalkan. Perkara yang sama boleh dikatakan untuk flex_width. flex_height

Akhir dilangkau.

flex_width Perhatikan bahawa imej tanaman tidak mengubah imej asal: Submedia baru akan dibuat dengan imej yang dipotong dan fail asal tetap sama. Dengan cara ini, jika pengguna anda perlu menggunakan imej yang sama di beberapa tempat, mereka tidak perlu memuat naik imej yang sama beberapa kali. flex_height

Kaedah pengambilan imej yang dipangkas adalah serupa dengan kaedah yang kami gunakan untuk mengambil bunyi sebelum: kami menggunakan

untuk mendapatkan ID Imej dan

untuk mendapatkan URLnya. Kemudian kami memaparkannya dengan cara yang kami mahukan. Di sini saya memilih cara paling mudah untuk bergema imej.

get_theme_mod() wp_get_attachment_url()

Kesimpulan

<code class="language-php">function add_my_media_controls($wp_customize) {
}
add_action('customize_register', 'add_my_media_controls');</code>

Dengan kawalan baru ini, penyesuai tema menjadi semakin menarik kerana ia membolehkan pemaju melakukan lebih mudah. Sekarang, jika anda memerlukan kawalan media dalam customizer ini, anda boleh menambah kawalan anda sendiri dan mengambil nilai yang paling berguna: ID media.

Kelas asas yang dilihat dalam artikel ini boleh dilanjutkan apabila anda memerlukan kawalan yang lebih spesifik. Ini dilakukan di pelbagai tempat di teras WordPress: Kawalan imej tanaman meluas

, dan kelas ini sendiri dilanjutkan oleh kawalan yang digunakan oleh API ikon tapak baru. Ini hanya contoh tindakan yang boleh anda lakukan dengan API ini.

Anda boleh menggunakan tema atau plug-in untuk menggunakan customizer tema. Walau bagaimanapun, kerana lebih praktikal bagi saya untuk menyediakan plugin kecil, anda boleh mencari satu melalui pautan ini. Ia menggabungkan contoh -contoh yang dilihat dalam artikel ini. WP_Customize_Media_Control

(bahagian FAQ harus dimasukkan di sini, dan kandungannya selaras dengan bahagian FAQ dalam teks input)

Atas ialah kandungan terperinci Menggunakan Kawalan Media Customizer Tema WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!