วิธีสร้างการควบคุมแบบกำหนดเองสำหรับ WordPress Theme Customizer
เผยแพร่แล้ว: 2015-06-17ตัวปรับแต่งธีมของ WordPress (หรือที่เรียกอีกอย่างว่า “เครื่องมือปรับแต่ง”) ช่วยให้นักพัฒนาสามารถปรับแต่งรูปลักษณ์ของธีมได้ และแม้กระทั่งช่วยให้พวกเขาดูตัวอย่างการเปลี่ยนแปลงที่ทำกับธีมในแบบเรียลไทม์ ในยุคปัจจุบันที่การแข่งขันเพื่อดึงดูดลูกค้ามายังเว็บไซต์กำลังเข้มข้นขึ้น คุณมักจะรู้สึกว่าจำเป็นต้องปรับแต่งการออกแบบเว็บไซต์ของคุณ และด้วยเครื่องมือปรับแต่งธีม คุณสามารถประหยัดเวลาอันมีค่าของคุณได้มากด้วยการแสดงตัวอย่างการเปลี่ยนแปลงที่เกิดขึ้นกับการออกแบบ WordPress ของคุณ
ตัวปรับแต่งธีมของ WordPress ถูกนำมาใช้เป็นส่วนหนึ่งของ Theme Customization API (ซึ่งเปิดตัวใน WordPress เวอร์ชัน 3.4 หากคุณต้องการเปลี่ยนแปลงการตั้งค่าธีม คุณจะต้องใช้การควบคุมแบบกำหนดเองที่มาพร้อมกับธีม เครื่องมือปรับแต่ง เช่น ช่องทำเครื่องหมาย ฟิลด์ข้อความ วิทยุ และอื่นๆ แต่ถ้าคุณต้องการเพิ่มการควบคุมแบบกำหนดเองลงในธีม WordPress ของคุณล่ะ
เพื่อช่วยให้คุณเข้าใจวิธีที่คุณสามารถสร้างและเพิ่มการควบคุมที่ปรับแต่งให้ตรงกับความต้องการเฉพาะของคุณ เราจะสาธิตการสร้างตัวควบคุมแบบกำหนดเองสามตัวเพื่อทำการเปลี่ยนแปลงเล็กน้อยในส่วนท้ายของธีมของเรา อย่างไรก็ตาม ในการเริ่มต้นกระบวนการ คุณต้องทำความคุ้นเคยกับคลาส WP_Customizer_Control ก่อน
ทำความรู้จักกับคลาส “WP_Customizer_Control”
ในการสร้างคอนโทรลแบบกำหนดเอง คุณต้องสร้างคลาสใหม่และขยายโดยใช้คลาส WP_Customizer_Control คลาสนี้ใช้เมธอด “$wp_customize->add_control()” เพื่อเพิ่มการควบคุมที่กำหนดเองลงในหน้าจอปรับแต่งธีมของไซต์ WordPress นอกจากนี้ ในการเข้าถึงเมธอดนี้ คุณต้องใช้อ็อบเจ็กต์ $wp_customize ที่มีอยู่ใน action hook: Customize_register
ลองพิจารณาตัวอย่างที่แสดงวิธีที่คุณสามารถเพิ่มการควบคุมแบบกำหนดเองที่มีอยู่ไปยังส่วนธีมของคุณ (ในเบ็ดการดำเนินการ 'customize_register') ดังนี้:
$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', ) ) );
ในตัวอย่างข้างต้น เรากำลังสร้างตัวควบคุมที่จะให้ผู้ใช้สามารถเลือกรูปภาพส่วนหัวใหม่ได้
ตัวอย่างการสาธิต: วิธีสร้างการควบคุมแบบกำหนดเองเพิ่มเติมได้อย่างไร
ส่วนนี้แบ่งออกเป็นสามขั้นตอนที่แตกต่างกัน โดยแต่ละขั้นตอนจะมีโค้ดที่จะสร้างการควบคุมแบบกำหนดเองสำหรับพื้นที่ข้อความสำหรับเครื่องมือปรับแต่งธีมของคุณ เราจะเพิ่มโค้ดในไฟล์ footer.php ของธีม WordPress เพื่อทำการเปลี่ยนแปลงส่วนท้ายผ่านส่วนควบคุมพื้นที่ข้อความใหม่
ขั้นตอนที่ 1: การสร้างการควบคุมพื้นที่ข้อความอย่างง่าย
ตามที่เราได้กล่าวไว้ข้างต้น ในการสร้างคอนโทรลแบบกำหนดเองใหม่ เราจำเป็นต้องกำหนดคลาสที่จะใช้สำหรับการขยายคลาส WP_Customize_Control โดยพื้นฐานแล้ว คลาสนี้ใช้ร่วมกับ WordPress Theme Customization API เพื่อเพิ่มการควบคุมอินพุต (เช่น การควบคุมแบบกำหนดเอง) บนหน้าจอการปรับแต่งธีม ลองดูโค้ดเพื่อใช้งานนี้:
/*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', ));
ในโค้ดนี้ ตะขอการดำเนินการ customer_register ใช้เพื่อบอก WordPress เกี่ยวกับฟังก์ชันที่กำหนดเอง เราได้สร้างด้วยชื่อ: theme_footer_customizer อย่างที่คุณอาจทราบแล้วว่าคลาส WP_Customize_Manager ช่วยควบคุม WordPress Theme Customizer ดังนั้นการควบคุมแบบกำหนดเองจะกลายเป็นส่วนหนึ่งของคลาสนี้ อย่างไรก็ตาม ในการเข้าถึงการควบคุมของคุณ คุณจะต้องใช้อ็อบเจ็กต์ "wp_customize" ซึ่งเป็นอินสแตนซ์ของ custom_register hook
ในกรณีของเรา ออบเจ็กต์ wp_customize ใช้เพื่อกำหนดส่วนท้ายใหม่ที่จะรวมไว้ในพื้นที่ข้อความ ดังนั้นสิ่งที่คุณจะพิมพ์ในส่วน "พื้นที่ข้อความ" ส่วนท้ายจะแสดงในส่วนท้ายของธีมดังที่แสดงในภาพหน้าจอด้านล่าง:
ในภาพหน้าจอนี้ คุณจะเห็นว่ามีการเพิ่ม "ส่วนข้อความส่วนท้าย" ใหม่ในธีมของคุณ ข้อความที่เขียนในส่วนนี้จะแสดงในส่วนท้ายของธีมของคุณ
ขั้นตอนที่ 2: การเพิ่ม Custom Control เพื่อเปลี่ยนสีพื้นหลัง
ดังนั้น เมื่อเราได้สร้างตัวควบคุมพื้นที่ข้อความแล้ว คุณสามารถเพิ่มการควบคุมแบบกำหนดเองต่างๆ ได้มากมาย ในตัวอย่างนี้ เราจะเพิ่มตัวควบคุมแบบกำหนดเองไปยังส่วนข้อความส่วนท้ายใหม่ของเรา ซึ่งจะช่วยในการเปลี่ยนสีพื้นหลังของส่วนท้าย ในการทำเช่นนั้น เพียงเพิ่มข้อมูลโค้ดต่อไปนี้ในไฟล์ footer.php ของธีมของคุณ:
//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', )));
ดังที่คุณสามารถทำได้ในภาพหน้าจอด้านบน เมื่อเลือกสีที่เหมาะสมจาก “การตั้งค่าสีส่วนท้าย” สีพื้นหลังของส่วนท้ายจะเปลี่ยนเป็นสีเทา
ขั้นตอนที่ 3: การเพิ่มการควบคุมแบบกำหนดเองเพื่อเพิ่มโลโก้
ตัวควบคุมอื่นที่เรากำลังเพิ่มในส่วนข้อความส่วนท้ายคือ "โลโก้ส่วนท้าย" ตามความหมายของชื่อ การควบคุม 'โลโก้ส่วนท้าย' จะช่วยในการเพิ่มโลโก้ที่ส่วนท้าย ในการเพิ่มการควบคุมนี้ คุณจะต้องรวมข้อมูลโค้ดด้านล่างในไฟล์ 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', ))); }
มาสรุปกันเถอะ!
คุณอาจพบว่ากระบวนการสร้างการควบคุมแบบกำหนดเองใช้เวลานานเล็กน้อย แต่คุณไม่สามารถละเลยความจริงที่ว่าการควบคุมที่ดียิ่งขึ้นที่คุณจะเพิ่มลงในหน้าจอการปรับแต่งธีมของเว็บไซต์ คุณก็ยิ่งสามารถประหยัดเวลาของผู้ใช้ได้มากขึ้นเท่านั้น ซึ่งจะนำไปสู่ประสบการณ์การใช้งานที่ดียิ่งขึ้น ดังนั้น หากคุณวางแผนที่จะสร้างการควบคุมแบบกำหนดเองเพื่อเพิ่มลงในเครื่องมือปรับแต่งธีมของ WordPress โพสต์นี้จะพิสูจน์แนวทางที่เป็นประโยชน์สำหรับคุณ
