• โฮมเพจ
  • บทความ
  • แนะนำ
  • สร้างการตั้งค่าเครื่องมือปรับแต่งได้เร็วยิ่งขึ้นโดยใช้ Kirki Framework ในโครงการของคุณ

สร้างการตั้งค่าเครื่องมือปรับแต่งได้เร็วยิ่งขึ้นโดยใช้ Kirki Framework ในโครงการของคุณ

เผยแพร่แล้ว: 2019-08-10

Kirki เป็นเฟรมเวิร์กโอเพ่นซอร์สฟรี (ลิขสิทธิ์ของ MIT) ที่สร้างขึ้นสำหรับนักพัฒนาที่ต้องการเพิ่มส่วนควบคุมปรับแต่งในธีมหรือปลั๊กอิน

Aristeides Stathopoulos หัวหน้านักพัฒนาของ Kirki ได้ทำงานเกี่ยวกับเฟรมเวิร์กมาตั้งแต่ปี 2014 ด้วยการอัปเดตและการปรับปรุงอย่างต่อเนื่อง Kirki ได้สร้างชุมชนบน Github ซึ่งรวมถึงดาวมากกว่า 1,000 ดวงและส้อม 300 ตัว

ก่อนที่ Kirki ฉันไม่เคยแตะต้องช่างปรับแต่ง Kirki ช่วยให้ฉันเข้าใจเครื่องมือปรับแต่งและทำสิ่งต่างๆ ได้มากในเวลาอันสั้น!

LebCit – ผู้พัฒนาธีม WordPress

การควบคุมตัวปรับแต่งหลักของ WordPress

WordPress Core มีการควบคุมเครื่องมือปรับแต่งพื้นฐานจำนวนหนึ่งตามค่าเริ่มต้น ตัวอย่างเช่น: ข้อความ, พื้นที่ข้อความ, ช่องทำเครื่องหมาย, วิทยุ, เลือก, หน้าแบบเลื่อนลง, อีเมล, URL, หมายเลข, ซ่อนและวันที่

Kirki รองรับ Core Controls เช่นกัน และอีกประมาณ 20 ตัว โดยทั่วไป การควบคุมของ Kirki จะครอบคลุมกรณีการใช้งานขั้นสูง ตัวอย่างเช่น:

  • วิชาการพิมพ์
  • จานสี
  • TinyMCE Editor
  • ฟิลด์ที่จัดเรียงได้

Kirki ยังมีฟังก์ชันการทำงานที่ไม่พร้อมใช้งานใน Core WordPress เช่น การสร้างเอาต์พุต CSS และสคริปต์ postMessage โดยอัตโนมัติ คุณลักษณะเหล่านี้ ซึ่งเราจะดูในบทความนี้ในภายหลัง สามารถลดเวลาในการพัฒนาของคุณลงครึ่งหนึ่งได้อย่างง่ายดาย

Kirki ช้า

การวิจารณ์อย่างหนึ่งที่มักเกิดขึ้นกับ Kirki คือมันช้า อันที่จริง คำวิจารณ์นี้ใช้กับเฟรมเวิร์กส่วนใหญ่ (รวมถึง WordPress) มันสมเหตุสมผลใช่มั้ย? คุณกำลังโหลดโค้ดจำนวนมากที่คุณอาจไม่เคยใช้

ในกรณีนี้ ความจริงก็คือสิ่งที่ตรงกันข้ามคือความจริง แผงควบคุมส่วนใหญ่ที่สร้างโดยใช้ Kirki จะเร็วกว่าแผงเดียวกันที่สร้างด้วย Core Controls

เนื่องจาก Kirki เพิ่มเลเยอร์การเพิ่มประสิทธิภาพที่ไม่ได้สร้างไว้ใน WordPress

เมื่อตัวปรับแต่งเริ่มต้นแล้ว WordPress จะพยายามโหลดการควบคุมทั้งหมดทันที แม้ว่าจะอยู่ภายในส่วนหรือแผงควบคุม และผู้ใช้ยังไม่สามารถโต้ตอบกับตัวควบคุมเหล่านั้นได้ ในการเปรียบเทียบ Kirki เลื่อนการโหลดออกไปก่อนที่ผู้ใช้จะโต้ตอบกับตัวควบคุม

หากต้องการเห็นผลของสิ่งนี้ในทางปฏิบัติ ให้ลองเพิ่มตัวควบคุมสี 50 สีโดยใช้แต่ละวิธี

วิธีการหลัก:

 สำหรับ ($i = 0; $i < 50; $i++){
	$wp_customize->add_setting( 'color_setting_hex_' . $i , array(
		'ค่าเริ่มต้น' => '#0088CC'
	) );

	// เพิ่มการควบคุมตัวเลือกสี
	$wp_customize->add_control( ใหม่ WP_Customize_Color_Control( $wp_customize, 'color_setting_hex_' . $i, array(
		'label' => 'การควบคุมสี',
		'section' => 'title_tagline',
		'settings' => 'color_setting_hex_' . $i,
	) ) );
}

กับเคิร์กกี้:

 สำหรับ ($i = 0; $i < 50; $i++) {
     Kirki::add_field( 'config_id', อาร์เรย์(
         'type' => 'สี',
         'settings' => 'color_setting_hex_' . $i,
         'label' => __( 'การควบคุมสี', 'kirki' ),
         'section' => 'title_tagline',
         'ค่าเริ่มต้น' => '#0088CC',
     ) );
 }

ผลลัพธ์:

อย่างที่คุณเห็น ความเร็วในการโหลดเริ่มต้นเร็วขึ้นมากเมื่อใช้ Kirki รหัสที่จำเป็นในการสร้างการควบคุมก็กระชับมากขึ้นเช่นกัน

การรวม Kirki เข้ากับโครงการของคุณ

มีหลายวิธีในการผสานรวม Kirki Framework เข้ากับโครงการของคุณ เอกสารอย่างเป็นทางการสามารถอธิบายวิธีการต่างๆ ได้ดี

ฉันแนะนำให้นักพัฒนาแนะนำให้ผู้ใช้ติดตั้งเวอร์ชันปลั๊กอินของ Kirki แทนที่จะรวมกรอบงานโดยตรงภายในโค้ดของโครงการของคุณ ซึ่งสามารถทำได้โดยใช้ TGMPA หรือสคริปต์ที่ให้มา

เหตุผลที่อยู่เบื้องหลังการใช้เส้นทางปลั๊กอินคือ Kirki ได้รับการอัปเดตและปรับปรุงบ่อยครั้ง ด้วยการติดตั้งเวอร์ชันปลั๊กอิน ผู้ใช้ของคุณจะสามารถเข้าถึงการแก้ไขจุดบกพร่องและการอัปเดตความปลอดภัยได้ทันที

ในทางตรงกันข้าม เมื่อคุณรวมเฟรมเวิร์กเป็นส่วนหนึ่งของโปรเจ็กต์ของคุณ ผู้ใช้จะได้รับการอัปเดตเมื่อคุณอัปเดตธีมหรือปลั๊กอินเท่านั้น ซึ่งอาจน้อยกว่าที่จำเป็น

ไม่ว่าคุณจะใช้วิธีใด อย่าลืมตรวจสอบว่า Kirki เริ่มต้นแล้ว ก่อนที่คุณจะเพิ่มการตั้งค่าของคุณ:

 // ออกไปก่อนถ้าไม่มี Kirki
if ( ! class_exists( 'Kirki' ) ) {
    กลับ;
}

ทุ่งนา

ในตัวอย่างวิธีการหลัก เราสร้างการตั้งค่าก่อนแล้วจึงสร้างตัวควบคุมสำหรับการตั้งค่านั้น ในกรณีส่วนใหญ่ ทั้งสองจะเชื่อมโยงกันโดยตรง Kirki ทำให้กระบวนการง่ายขึ้นและทำให้เราสร้าง 'Field' แทนได้ เมื่อมีการสร้างฟิลด์ มันจะสร้างการตั้งค่าและการควบคุมในพื้นหลังสำหรับเรา

ฟิลด์รองรับอาร์กิวเมนต์ควบคุมทั้งหมดที่คุณคาดหวัง (ป้ายกำกับ คำอธิบาย ส่วน ค่าเริ่มต้น) รวมถึงอาร์กิวเมนต์เฉพาะของเคอร์กี

อาร์กิวเมนต์ 'type' ให้คุณเลือกหนึ่งในประเภทการควบคุม 30 ประเภทของ Kirki: https://kirki.org/docs/controls/

ส่วน

ส่วนปรับแต่งช่วยให้คุณสามารถจัดกลุ่มการควบคุมร่วมกันได้ WordPress มีหกส่วนในตัวที่คุณสามารถเพิ่มการควบคุมได้เช่นกัน:

  • title_tagline – เอกลักษณ์ของเว็บไซต์
  • สี – สี
  • header_image – ภาพส่วนหัว
  • background_image – ภาพพื้นหลัง
  • static_front_page – การตั้งค่าโฮมเพจ
  • custom_css – CSS เพิ่มเติม


ส่วนต่างๆ ใน ​​Kirki ทำงานเหมือนกับใน Core ทุกประการ วิธีการ Kirki::add_section() เป็นเพียงเสื้อคลุมสำหรับ $wp_customize->add_section() และยอมรับพารามิเตอร์และอาร์กิวเมนต์เดียวกัน

 Kirki::add_section( 'section_id', อาร์เรย์ (
     'title' => esc_html__( 'ส่วนของฉัน', 'kirki' ),
     'description' => esc_html__( 'คำอธิบายส่วนของฉัน', 'kirki' ),
 ) );

แผง

แผงช่วยให้คุณสร้างลำดับชั้นอีกระดับได้โดยการจัดกลุ่มส่วนต่างๆ เข้าด้วยกัน WordPress Core มีแผงควบคุมในตัวซึ่งก็คือ 'เมนู'

อีกครั้ง การใช้งาน Kirki เป็นเพียงเสื้อคลุมสำหรับฟังก์ชัน Core

 Kirki::add_panel( 'panel_id', อาร์เรย์(
     'ลำดับความสำคัญ' => 10,
     'title' => esc_html__( 'แผงของฉัน', 'kirki' ),
     'description' => esc_html__( 'คำอธิบายแผงของฉัน', 'kirki' ),
 ) );

'ขนส่ง' => 'อัตโนมัติ'

ตามเนื้อผ้าเมื่อสร้าง Customizer Controls คุณมีสองตัวเลือกสำหรับอาร์กิวเมนต์การขนส่ง:

  • รีเฟรช – ทุกครั้งที่ผู้ใช้ทำการเปลี่ยนแปลง บานหน้าต่างแสดงตัวอย่างจะถูกรีเฟรชเพื่อแสดงการเปลี่ยนแปลง อาจใช้เวลาสองสามวินาที
  • postMessage – ทุกครั้งที่ผู้ใช้ทำการเปลี่ยนแปลงบานหน้าต่างแสดงตัวอย่างจะได้รับการอัปเดตโดยใช้ Javascript ซึ่งไม่ต้องการการรีเฟรชและเกือบจะทันที

postMessage เป็นวิธีที่ยอดเยี่ยมในการอัปเดตตัวแสดงตัวอย่างอย่างไม่ต้องสงสัย และควรใช้เมื่อเป็นไปได้ อย่างไรก็ตาม มีข้อเสียอยู่อย่างหนึ่ง การใช้ postMessage หมายความว่าคุณต้องสร้างการเขียนโค้ด JS ที่กำหนดเองสำหรับการควบคุมแต่ละรายการของคุณ การนำไปใช้อย่างง่ายจะมีลักษณะดังนี้:

 // อัพเดทชื่อเว็บไซต์แบบเรียลไทม์...
wp.customize ('ชื่อบล็อก', ฟังก์ชั่น (ค่า) {
    value.bind (ฟังก์ชัน ( newval ) {
        $( '#site-title a' ).html( ค่าใหม่ );
    } );
} );

เมื่อคุณมีการตั้งค่าจำนวนมาก การตั้งค่านี้จะกลายเป็นเรื่องซ้ำๆ อย่างรวดเร็ว

นี่คือจุดที่ Kirki เปล่งประกาย เพิ่มตัวเลือกที่สาม: 'transport' => 'auto'

'transport' => 'auto' ทำงานร่วมกับอาร์กิวเมนต์อื่น Kirki เพิ่มชื่อ 'output' เมื่อกำหนดค่าทั้งสองค่าแล้ว Kirki จะสร้างสคริปต์ postMessage ให้คุณโดยอัตโนมัติ ซึ่งหมายความว่าคุณจะได้รับประโยชน์ทั้งหมดจากการใช้ postMessage โดยไม่ต้องเขียนโค้ด Javascript ใดๆ

ฟิลด์ที่ใช้การขนส่ง => 'อัตโนมัติ' มีลักษณะดังนี้:

 Kirki::add_field( 'config_id', อาร์เรย์(
     'type' => 'สี',
     'settings' => 'color_setting_hex',
     'label' => __( 'การควบคุมสี', 'kirki' ),
     'ส่วน' => 'สี',
     'ค่าเริ่มต้น' => '#0088CC',
     'ขนส่ง' => 'อัตโนมัติ',
     'เอาต์พุต' => อาร์เรย์ (
         อาร์เรย์ (
             'องค์ประกอบ' => 'ร่างกาย',
             'คุณสมบัติ' => 'สีพื้นหลัง',
         ),
     ),
 ) );

คุณลักษณะที่ช่วยประหยัดเวลาของ Kirki หมายความว่าส่วนใหญ่คุณไม่จำเป็นต้องเขียนหรือจัดคิวสคริปต์ postMessage ของคุณเองอีกต่อไป

เอาต์พุต CSS ของส่วนหน้า

อีกส่วนหนึ่งของการสร้างการตั้งค่า Customizer คือการสร้างเอาต์พุต CSS ที่ส่วนหน้า ตัวอย่างง่ายๆ อาจมีลักษณะดังนี้:

 /**
 * ส่งออก CSS ของ Customizer ไปที่ wp_head
 */
ฟังก์ชั่น wptavern_customizer_css () {
	$bg_color = get_theme_mod( 'color_setting_hex' );
	?>
	<style>
		ร่างกาย {
			พื้นหลังสี: <?php echo sanitize_hex_color( $bg_color ); ?>;
		}
	</style>
	<?php
}
add_action( 'wp_head', wptavern_customizer_css );

เช่นเดียวกับตัวอย่าง postMessage การเขียนโค้ดนี้อาจซ้ำซากได้อย่างรวดเร็ว หากคุณมีการตั้งค่าจำนวนมาก

โชคดีที่ 'transport' => 'auto' ดูแลเอาต์พุตส่วนหน้าให้คุณด้วย แม้แต่ในตัวอย่างที่เข้าใจง่ายของเรา 'transport' => 'auto' ได้ลดโค้ดที่เราต้องเขียนลงประมาณ 50%

บทสรุป

ในบทความนี้ เราได้ดูแค่พื้นฐานของ Kirki Framework และข้อโต้แย้งสองข้อ แล้วเราจะเห็นได้ว่าสิ่งนี้ช่วยให้เราสร้าง Customizer Controls ได้เร็วขึ้นและไม่ทำให้ประสิทธิภาพลดลง

เมื่อคุณดำดิ่งสู่ Kirki คุณจะค้นพบฟังก์ชันการทำงานมากมายที่เพิ่มเข้ามานอกเหนือจาก Customize API ได้อย่างรวดเร็ว ไม่น่าแปลกใจที่มีการใช้งานบนเว็บไซต์มากกว่า 300,000 เว็บไซต์และเป็นส่วนหลักของธีม WordPress ที่ใหญ่ที่สุดในตลาด