Pilihan Customizer WordPress Cepat dengan Kirki

Satu perkara yang pengguna WordPress telah terbiasa, mudah, tiada kod yang diperlukan penyesuaian tema. Ideanya ialah: Muat turun tema, aktifkannya dalam panel tema, akses panel Penyesuaian, dan mula tweaking warna, susun atur, fon, dan lain -lain, dengan hanya klik tetikus.

WordPress menawarkan pemaju tema API Customizer. Ini adalah kaedah yang bersih dan berorientasikan objek yang memudahkan penciptaan antara muka penyesuaian yang konsisten. Pada panel Penyesuaian, pengguna dapat dengan mudah membuat perubahan dan preveri langsung mereka tanpa perlu mengacaukan dengan kod PHP atau CSS.

Membangunkan pilihan tema menggunakan API Customizer, sementara menjadi proses yang mudah dan logik, melibatkan penulisan kod berulang tertentu. Untuk mengurangkan beberapa langkah yang diperlukan untuk membina pilihan fungsional dan selamat, Aristeides Stathopoulos telah membangunkan plugin percuma dan sumber terbuka, Kirki.

Dalam jawatan ini saya akan menunjukkan cara mengintegrasikan Kirki ke dalam tema WordPress anda dan cara menggunakannya untuk membina beberapa pilihan customizer.

Takeaways Key

Kirki meningkatkan API Customizer WordPress dengan menyediakan sintaks yang lebih mudah dan ciri -ciri canggih, yang membolehkan pemaju menulis lebih banyak dengan kod kurang.
Toolkit sentiasa berkembang, dan pengguna digalakkan untuk menyumbang kepada perkembangannya di GitHub.
Kirki dapat dengan mudah diintegrasikan ke dalam tema WordPress sama ada sebagai plugin atau perpustakaan dalam tema, menawarkan fleksibiliti dalam cara ia digunakan.
Kirki menyediakan pelbagai kawalan seperti pemetik warna, imej radio, dan Textareas, yang boleh digunakan untuk membuat pilihan tema yang disesuaikan yang mudah bagi pengguna akhir untuk mengurus.
Toolkit menyokong pratonton masa nyata dengan AJAX, meningkatkan pengalaman pengguna dengan membenarkan maklum balas segera mengenai perubahan tanpa reload halaman.

Apa itu kirki?

mari kita dengar apa Kirki dari pemaju di belakangnya:

Kirki bukan rangka kerja. Ia adalah toolkit yang membolehkan pemaju WordPress menggunakan customizer dan memanfaatkan ciri -ciri dan fleksibiliti canggihnya dengan abstrak kod dan menjadikannya lebih mudah bagi semua orang untuk mencipta pengalaman pengguna yang indah dan bermakna.

Dokumentasi Kirki

Saya ingin memandu pulang dua mata mengenai toolkit ini.

• Kirki tidak menggantikan API Customizer WordPress. Ia mewujudkan "pembalut untuk kaedah WordPress lalai, memudahkan sintaks dan membolehkan anda menulis lebih banyak dengan kod kurang". Anda masih boleh menggunakan kaedah customizer asli bersama API Kirki. Lebih baik lagi, anda dinasihatkan untuk membiasakan diri dengan API Customizer sebelum menghampiri Kirki. Jika anda sedang mencari pengenalan yang berguna kepada objek Customizer, pergi ke permulaan dengan API Penyesuaian Tema WordPress oleh Narayan Prusty.
• Kirki berada dalam keadaan evolusi dan penambahbaikan yang berterusan, tidak seperti Customizer WordPress itu sendiri. Oleh itu, sebarang laporan pepijat, atau permintaan untuk ciri -ciri baru, mempunyai tempat mereka di repo GitHub, di mana anda boleh memuat turun versi pembangunan plugin dan menyumbang kepada pembangunannya.

Sudah tiba masanya untuk melihat Kirki dalam tindakan. Jika anda ingin mengikuti, tema tema WordPress siap atau ambil tema demo superminimal yang mengandungi semua kod yang dibincangkan dalam siaran ini.

bagaimana memasukkan kirki dalam tema anda

Kirki dibungkus sebagai plugin WordPress. Oleh itu, anda boleh memuat turunnya dari repositori plugin WordPress.org, atau terus dari backend pemasangan WordPress anda, unzip dan aktifkannya.

Jika anda lebih suka memasukkan Kirki dalam tema anda sebagai perpustakaan, ikuti langkah -langkah yang digariskan di bawah.

• Salin direktori kirki ke dalam folder tema anda.
  
  Dalam tema demo untuk artikel ini, fail Kirki terletak di dalam direktori yang dipanggil Inc.

• Buat tema 'Talk' dengan Kirki dengan menambahkan garis ini ke Functions.php (pastikan anda menyesuaikan jalan ke folder Kirki untuk memadankan struktur fail tema anda).

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

• Tambahkan fungsi untuk memasukkan pilihan konfigurasi kirki dan sagarkannya ke penapis kirki/config. Terpulang kepada anda apa yang anda mahu tambahkan ke fungsi ini. Untuk jawatan ini, mari kita simpan sekurang -kurangnya dengan menambahkan keperluan Kirki untuk 'diberitahu' terhadap lokasi barunya, iaitu folder tema dan bukannya folder plugin.

Ia berada di dalam fungsi konfigurasi ini yang anda dapat mengawal rupa dan nuansa Customizer WordPress untuk memadankan tema anda. Paling penting, di sini anda menambah kod yang diperlukan untuk membuat semua rentetan yang digunakan oleh plugin yang diterjemahkan dari dalam tema anda. Lihatlah di dalam tema demo superminimal atau halaman dokumentasi Kirki untuk beberapa panduan mengenai cara untuk menyelesaikannya.

<span>function superminimal_customizer_config() {
</span>         <span>$args = array(
</span>        <span>// Only use this if you are bundling the plugin with your theme 
</span>        <span>'url_path'     => get_stylesheet_directory_uri() . '/inc/kirki/',
</span>
       <span>);
</span>       <span>return $args;
</span>       <span>}
</span>       <span>add_filter( 'kirki/config', 'superminimal_customizer_config' );</span>

mari mula menambah pilihan

Kirki kini bersedia membantu kami membina beberapa pilihan customizer. Anda boleh menggunakan fungsi.php atau membuat fail khusus untuk tugas itu, terpulang kepada anda.

Pilihan Customizer hidup di dalam bahagian, yang terletak di dalam panel. Dalam projek demo artikel ini, saya kumpulan semua bahagian di dalam panel berdedikasi menggunakan kaedah customizer asli, seperti SO.

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

Seterusnya, tambahkan bahagian untuk warna teks tapak, susun atur tapak, dan pilihan teks footer masing -masing dengan meletakkan kod ini tepat di bawah kaedah add_panel customizer sebelumnya.

<span>function superminimal_customizer_config() {
</span>         <span>$args = array(
</span>        <span>// Only use this if you are bundling the plugin with your theme 
</span>        <span>'url_path'     => get_stylesheet_directory_uri() . '/inc/kirki/',
</span>
       <span>);
</span>       <span>return $args;
</span>       <span>}
</span>       <span>add_filter( 'kirki/config', 'superminimal_customizer_config' );</span>

Sekarang anda sudah bersedia untuk menambah pilihan Kirki yang pertama.

pilihan warna teks

Semua kod yang berkaitan dengan pilihan anda akan diletakkan di dalam fungsi. Fungsi ini kemudian ditapis melalui penapis kirki/medan.

<span>function superminimal_demo_panels_sections( $wp_customize ) {
</span>     <span>/**
</span><span>     * Add Panel
</span><span>     */
</span>     <span>$wp_customize->add_panel( 'sitepoint_demo_panel', array(
</span>      <span>'priority'    => 10,
</span>      <span>'title'       => __( 'SitePoint Demo Panel', 'superminimal' ),
</span>      <span>'description' => __( 'Kirki integration for SitePoint demo', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>//More code to come
</span>    <span>}
</span>    <span>add_action( 'customize_register', 'superminimal_demo_panels_sections' );</span>

mari kita berikan pengguna tema WordPress anda cara mudah untuk menukar warna teks. Ini dengan cepat dilakukan dengan Kirki. Tambah coretan kod berikut di dalam fungsi superminimal_demo_fields (), tepat di atas medan pulangan $; penyata.

<span>/**
</span><span>     * Add a Section for Site Text Colors
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_text_colors', array(
</span>      <span>'title'       => __( 'Site Text Colors', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Site Layout
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_site_layout', array(
</span>      <span>'title'       => __( 'Site Layout', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Footer Text
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_footer_text', array(
</span>      <span>'title'       => __( 'Footer Text', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );</span>

Kirki menawarkan sintaks pekat untuk menambah kedua -dua tetapan dan kawalan yang berkaitan dalam satu perjalanan.

mari kita memecahkan array $ fields [].

• Jenis merujuk kepada kawalan khusus di mana pengguna memasuki nilai pilihan pilihan mereka, dalam hal ini kawalan warna.
• Tetapan merujuk kepada ID tetapan adat yang mengendalikan penulisan, penjimatan, dan sanitisasi objek customizer.
• Label dan keterangan ada untuk berkomunikasi dengan pengguna. Label memaparkan tajuk untuk pilihan dan keterangan menawarkan beberapa petunjuk mengenai pilihan apa.
• Bahagian merujuk kepada ID bahagian yang menjadi tuan rumah kawalan warna khusus ini.
• Keutamaan merujuk kepada kedudukan kawalan warna khusus ini berkenaan dengan kawalan lain di dalam bahagian yang sama.
• Default ditetapkan ke nilai warna CSS lalai.
• Akhirnya, output adalah cara kirki yang mengagumkan untuk menggunakan nilai tetapan. Cukup makan pemilih dan harta CSS, dan Kirki mengendalikan semua operasi yang diperlukan.

Mengikuti contoh di atas, anda boleh meneruskan dan menambah pilihan warna untuk pautan juga.

Seterusnya, mari kita berikan pengguna tema anda pilihan untuk menyesuaikan susun atur tapak.

Pilihan susun atur tapak

Kirki menawarkan sekumpulan kawalan customizer yang canggih. Kegemaran saya ialah kawalan imej radio.

Berikut adalah cara anda boleh menambahkannya ke tema anda untuk menawarkan pengguna pilihan menukar susun atur laman web mereka.

<span>function superminimal_demo_fields( $fields ) {
</span>      <span>//Add code here
</span>      
      <span>return $fields;
</span>    <span>}
</span>    <span>add_filter( 'kirki/fields', 'superminimal_demo_fields' );</span>

Letakkan kod di atas hanya selepas coretan array $ medan sebelumnya []. Perhatikan bagaimana tiada parameter output telah ditambah ke kod. Ini begitu kerana nilai setiap input imej radio bukan nilai harta CSS.

Cara anda boleh mengekstrak nilai dari tetapan superminimal_layout adalah dengan kaedah customizer asli get_theme_mod. Anda kemudian menggunakan nilai itu sebagai nilai atribut kelas elemen HTML yang sesuai dalam fail templat. Akhirnya, ia hanya satu perkara yang menulis CSS yang sesuai untuk mencapai susun atur yang dikehendaki untuk kelas .fullwidth, .sidebar-kiri, dan kelas.

Lihat butiran bagaimana untuk melaksanakan pilihan susun atur dalam tema demo superminimal.

pilihan teks footer

Berapa kali anda menjumpai pengguna tema WordPress yang meminta anda untuk membantu mereka menggantikan barang pemaju di kawasan footer tema mereka? Menambah pilihan untuk membolehkan pengguna dengan mudah menguruskan teks footer dari customizer mengambil beberapa minit dengan Kirki. Inilah kod.

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

Kod di atas mengeluarkan Textarea di mana pengguna boleh menulis notis hak cipta, kredit, dan lain -lain

Untuk mengekstrak dan memaparkan teks yang dimasukkan dalam Textarea, gunakan kaedah Customizer asli get_theme_mod dalam footer.php seperti berikut.

<span>function superminimal_customizer_config() {
</span>         <span>$args = array(
</span>        <span>// Only use this if you are bundling the plugin with your theme 
</span>        <span>'url_path'     => get_stylesheet_directory_uri() . '/inc/kirki/',
</span>
       <span>);
</span>       <span>return $args;
</span>       <span>}
</span>       <span>add_filter( 'kirki/config', 'superminimal_customizer_config' );</span>

Seterusnya, mari kita lihat apa lagi yang boleh dilakukan Kirki untuk meningkatkan pengalaman pengguna dengan Customizer WordPress.

bagaimana untuk menambah pilihan bersyarat

Sebagai pereka tema, anda tidak suka melampaui pengguna dengan pelbagai pilihan yang mengelirukan. Sesetengah pilihan tidak perlu dibuat sehingga pengguna memilih beberapa pilihan tertentu. Customizer menawarkan parameter aktif_callback yang berguna untuk panel, bahagian dan kawalan. Anda boleh menetapkan parameter ini kepada keadaan tertentu yang mesti dipenuhi sebelum panel, seksyen, atau kawalan dipaparkan dalam customizer.

Apa yang telah ditawarkan oleh Kirki dalam hal ini?

Kirki API menggunakan parameter yang diperlukan untuk menyembunyikan atau menunjukkan kawalan dalam penyesuai berdasarkan nilai kawalan lain.

Sebagai contoh, katakan anda ingin menunjukkan kepada Textarea untuk membolehkan pengguna mengubahsuai teks footer hanya jika mereka menyemak kotak semak. Untuk mencapai ini, tambahkan kod berikut ke kawalan superminimal_footer_text.

<span>function superminimal_demo_panels_sections( $wp_customize ) {
</span>     <span>/**
</span><span>     * Add Panel
</span><span>     */
</span>     <span>$wp_customize->add_panel( 'sitepoint_demo_panel', array(
</span>      <span>'priority'    => 10,
</span>      <span>'title'       => __( 'SitePoint Demo Panel', 'superminimal' ),
</span>      <span>'description' => __( 'Kirki integration for SitePoint demo', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>//More code to come
</span>    <span>}
</span>    <span>add_action( 'customize_register', 'superminimal_demo_panels_sections' );</span>

Menambah coretan di atas ke kod untuk kawalan Textarea memastikan nilai kawalan superminimal_real_foot_text adalah sama dengan 1 sebelum kawalan TextArea dipaparkan dalam penyesuai. Mari tambahkan kawalan superminimal_reveal_footer_text ke fungsi superminimal_demo_fields ().

<span>/**
</span><span>     * Add a Section for Site Text Colors
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_text_colors', array(
</span>      <span>'title'       => __( 'Site Text Colors', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Site Layout
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_site_layout', array(
</span>      <span>'title'       => __( 'Site Layout', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Footer Text
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_footer_text', array(
</span>      <span>'title'       => __( 'Footer Text', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );</span>

Kawalan Superminimal_Reveal_Footer_Text adalah kotak semak yang secara lalai ditetapkan kepada 0, iaitu, ia tidak terkawal. Ini menghalang Textarea daripada dipaparkan.

Hanya selepas menyemak kotak semak, iaitu, dengan menukar nilainya dari 0 hingga 1, adakah TextArea muncul dalam penyesuai.

Meningkatkan Pratonton Langsung

Customizer dilengkapi dengan API JavaScript yang kuat untuk menambah keupayaan AJAX ke kawasan pratonton. Peningkatan ini membolehkan pengguna menyemak pengubahsuaian mereka secara real time tanpa menunggu keseluruhan halaman Pratonton Customizer untuk menyegarkan semula.

kita dapat mencapai hasil yang sama dengan Kirki hanya dengan menambahkan beberapa parameter berguna ke array $ medan [].

Sebagai contoh, untuk menambah pratonton Ajaxified Live ke tetapan superminimal_body_color, tambah coretan berikut ke array $ medan yang sesuai [].

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

Biar saya jelaskan apa kod di atas.

• Pertama, kod di atas mengubah kaedah pengangkutan dari refresh (lalai), ke postmessage. Isyarat ini kepada Customizer bahawa ia mesti menggunakan JavaScript untuk pratonton langsung.
• Seterusnya, nilai parameter JS_VARS menunjukkan bahawa elemen badan dan p diubahsuai menggunakan sifat warna CSS.

Kirki menawarkan dua nilai yang telah ditetapkan untuk parameter fungsi. Gunakan nilai CSS jika tetapan yang anda tambah peraturan CSS seperti warna latar belakang, warna, saiz fon, dan lain-lain. Gunakan nilai HTML jika tetapan menyimpan rentetan markup HTML dimasukkan ke dalam halaman.

Sebagai contoh bagaimana anda boleh menggunakan nilai HTML, mari tambahkan fungsi pratonton Ajax Live ke tetapan yang menguruskan perubahan pada teks footer. Tambah coretan ini pada akhir array $ medan [] yang mengandungi tetapan superminimal_footer_text.

<span>function superminimal_customizer_config() {
</span>         <span>$args = array(
</span>        <span>// Only use this if you are bundling the plugin with your theme 
</span>        <span>'url_path'     => get_stylesheet_directory_uri() . '/inc/kirki/',
</span>
       <span>);
</span>       <span>return $args;
</span>       <span>}
</span>       <span>add_filter( 'kirki/config', 'superminimal_customizer_config' );</span>

Itu sahaja, pergi dan cuba menulis sesuatu di Textarea di dalam bahagian superminimal_footer_text. Anda akan segera melihat teks footer yang sepadan dalam perubahan skrin pratonton dengan sewajarnya tanpa tambah nilai halaman lengkap. Sejuk!

Ajax Live Preview dengan Kawalan Imej Radio

Mungkin ada kes di mana CSS atau HTML tidak sesuai untuk parameter fungsi yang membolehkan pratonton Ajax Live. Kes yang berlaku ialah penetapan untuk menukar susun atur tapak. Menggunakan CSS sebagai nilai untuk parameter fungsi tidak masuk akal kerana tetapan yang dimaksudkan tidak menyimpan sebarang nilai harta CSS. Begitu juga, menggunakan HTML tidak memotongnya. Sebenarnya, ia hanya akan meludah fullwidth , sidebar-left , atau sidebar-betul pada halaman pratonton, bergantung pada imej radio yang mana Butang kawalan dipilih. Tetapi ini tidak boleh menjadi apa yang anda ingin capai.

Berita baik ialah anda boleh memasangkan nama fungsi JavaScript tersuai sebagai nilai parameter fungsi dan ia berfungsi!

<span>function superminimal_demo_panels_sections( $wp_customize ) {
</span>     <span>/**
</span><span>     * Add Panel
</span><span>     */
</span>     <span>$wp_customize->add_panel( 'sitepoint_demo_panel', array(
</span>      <span>'priority'    => 10,
</span>      <span>'title'       => __( 'SitePoint Demo Panel', 'superminimal' ),
</span>      <span>'description' => __( 'Kirki integration for SitePoint demo', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>//More code to come
</span>    <span>}
</span>    <span>add_action( 'customize_register', 'superminimal_demo_panels_sections' );</span>

Anda perlu memupuk fail JavaScript di mana fungsi tersuai anda hidup dan menyambungkannya ke cangkuk tindakan Customize_Preview_init.

<span>/**
</span><span>     * Add a Section for Site Text Colors
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_text_colors', array(
</span>      <span>'title'       => __( 'Site Text Colors', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Site Layout
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_site_layout', array(
</span>      <span>'title'       => __( 'Site Layout', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Footer Text
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_footer_text', array(
</span>      <span>'title'       => __( 'Footer Text', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );</span>

Akhirnya, tulis fungsi JavaScript yang mengendalikan pratonton langsung menggunakan API JavaScript Customizer asli.

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

Perkara yang hebat tentang Kirki ialah anda boleh menggunakannya bersama -sama, dan bukannya sebagai tempat, API Customizer WordPress. Oleh itu, di mana keadaan memerlukannya, anda boleh menukar antara dua API dalam masa yang singkat.

Sumber

lapar lebih banyak? Berikut adalah beberapa sumber yang hebat.

• Dokumentasi Kirki Toolkit.
• Membina tema WordPress menggunakan Kirki Customizer, oleh Aristeides Stathopoulos.
• Pilihan Tema - API Customizer, dari Buku Panduan Tema WordPress.org.

Kesimpulan

Saya telah menunjukkan cara mengintegrasikan toolkit Kirki ke dalam tema WordPress.

Kirki secara aktif sedang dibangunkan dan disokong. API dan kawalan adatnya telah mengoptimumkan masa yang diperlukan untuk membangunkan pilihan tema customizer. Ini menjadi sangat penting jika anda ingin mempunyai tema anda yang disenaraikan dalam repositori tema WordPress.org. Malah, tema yang menyediakan pilihan penyesuaian diperlukan untuk berbuat demikian melalui Customizer dan bukannya halaman pilihan tersuai.

Untuk menyelidiki butiran kod yang dibincangkan dalam siaran ini, jangan ragu untuk memuat turun tema demo superminimal dari GitHub.

Saya menantikan maklum balas anda!

Soalan Lazim mengenai Pembangunan Pilihan Customizer WordPress Cepat dengan Kirki

Apa itu Kirki dan bagaimana ia memberi manfaat kepada pembangunan WordPress? Ia menyediakan pelbagai ciri yang menjadikannya lebih mudah untuk membuat, menyesuaikan, dan menguruskan tema WordPress. Ini termasuk customizer yang membolehkan anda melihat perubahan dalam masa nyata, pelbagai kawalan untuk pelbagai jenis kandungan, dan struktur modular yang membolehkan anda memasukkan hanya ciri yang anda perlukan. Dengan menggunakan Kirki, pemaju dapat menjimatkan masa dan usaha, dan mewujudkan tema yang lebih kuat dan fleksibel. Anda boleh memuat turunnya dari direktori plugin WordPress dan memasangnya seperti mana -mana plugin lain. Setelah dipasang, anda boleh mengakses ciri Kirki melalui Customizer WordPress. Untuk menubuhkan Kirki, anda perlu menambah konfigurasi untuk tema anda. Ini melibatkan menambah beberapa baris kod ke fail fungsi.php tema anda. Konfigurasi menentukan pilihan dan tetapan untuk tema anda.

Apakah jenis kawalan yang disediakan oleh Kirki? Ini termasuk kawalan asas seperti teks, kotak semak, dan butang radio, serta kawalan yang lebih maju seperti pemetik warna, pemuat naik imej, dan pemilih tipografi. Setiap kawalan dilengkapi dengan set pilihan dan tetapannya sendiri, membolehkan anda menyesuaikan kawalan untuk memenuhi keperluan anda.

Bagaimana saya menggunakan ciri pratonton masa nyata di kirki?

Ciri pratonton masa nyata di Kirki membolehkan anda melihat perubahan semasa anda membuatnya. Untuk menggunakan ciri ini, anda perlu menambah pilihan 'pengangkutan' ke konfigurasi kawalan anda. Pilihan 'pengangkutan' menentukan bagaimana perubahan kawalan dicerminkan dalam pratonton. Dengan menetapkan pilihan ini untuk 'postmessage', anda boleh mengaktifkan pratonton masa nyata untuk kawalan. Tema WordPress. Walau bagaimanapun, untuk memanfaatkan sepenuhnya ciri Kirki, tema anda perlu menyokong Customizer WordPress. Tema WordPress yang paling moden menyokong penyesuai, jadi ini tidak sepatutnya menjadi masalah bagi kebanyakan pengguna.

Bagaimana saya menambah panel baru menggunakan kirki? Beberapa baris kod ke fail fungsi.php tema anda. Kod ini menentukan ID, tajuk, keterangan, dan keutamaan panel. Setelah ditambah, panel akan muncul di Customizer WordPress, dan anda boleh menambah bahagian dan mengawalnya. Struktur Kirki bermaksud bahawa ia dibahagikan kepada modul yang berasingan, masing -masing menyediakan satu set ciri tertentu. Ini membolehkan anda memasukkan hanya modul yang anda perlukan, mengurangkan saiz dan kerumitan tema anda. Ia juga memudahkan untuk mengurus dan mengemas kini tema anda, kerana anda boleh mengemas kini atau menggantikan modul individu tanpa menjejaskan seluruh tema.

Bagaimana saya menyesuaikan tipografi dalam tema saya menggunakan kirki? 🎜> Kirki menyediakan kawalan tipografi yang membolehkan anda menyesuaikan tipografi dalam tema anda. Kawalan ini menyediakan pilihan untuk menetapkan keluarga font, variasi, saiz, ketinggian garis, jarak huruf, dan warna. Anda juga boleh menambah fon Google ke kawalan, memberi anda akses kepada pelbagai fon. tema kanak -kanak. Tema kanak -kanak adalah tema yang mewarisi fungsi dan gaya tema lain, yang dikenali sebagai tema induk. Dengan mencipta tema kanak -kanak, anda boleh mengubah suai tema induk tanpa menjejaskan kod asal. Kirki menyediakan pelbagai ciri yang menjadikannya lebih mudah untuk membuat dan menyesuaikan tema kanak -kanak.

Bagaimana saya mengemas kini kirki? Anda boleh mengemas kini melalui papan pemuka WordPress, atau dengan memuat turun versi terkini dari direktori plugin WordPress dan memasangnya secara manual. Adalah penting untuk memastikan Kirki terkini untuk memastikan keserasian dengan versi terkini WordPress dan mendapat manfaat daripada ciri -ciri dan penambahbaikan baru.

Atas ialah kandungan terperinci Pilihan Customizer WordPress Cepat dengan Kirki. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!