วิธีสร้างหน้าการตั้งค่าใน WordPress

หากคุณกำลังสร้างปลั๊กอิน WordPress คุณอาจสงสัยว่าจะสร้าง หน้าการตั้งค่า สำหรับปลั๊กอินได้อย่างไร WordPress มีกลไก "มาตรฐาน" สำหรับสิ่งนี้หรือไม่? มีเครื่องมือหรือกรอบงานใหม่ๆ ที่จะสร้างหน้าการตั้งค่าที่ทันสมัยหรือไม่? เป็นความคิดที่ดีที่จะสร้างหน้าการตั้งค่าหรือไม่? วันนี้เราจะมาพูดถึงเรื่องทั้งหมดนี้กัน และฉันจะตอบคำถามของคุณ

การตัดสินใจ ไม่ใช่ ทางเลือก

WordPress เป็นแพลตฟอร์มที่มีจุดมุ่งหมายเพื่อทำให้เว็บเป็นประชาธิปไตย คำกล่าวนี้ซึ่งฟังดูดีมากแต่ในขณะเดียวกันก็เป็นนามธรรมมาก เป็นวิธีการพูดว่า “เราต้องการให้ใครก็ตามสามารถใช้ WordPress ได้” และเชื่อหรือไม่ว่าหน้าการตั้งค่าสามารถเป็นได้ และในความเป็นจริง ในหลายกรณีก็เป็น อุปสรรค สำหรับเรื่องนี้ ไม่เชื่อฉัน? WordPress เองก็บอกว่า:

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

ปรัชญา WordPress

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

ตัวกรองเป็นทางเลือก

แม้ว่าฉันรู้ว่าฉันไม่ควรเสนอตัวเลือกมากมายให้กับผู้ใช้ของฉัน ฉันต้องสารภาพว่าในฐานะนักพัฒนา การตัดสินใจไม่ใช่เรื่องง่ายเสมอไปสำหรับฉันที่จะตัดสินใจแทนที่จะเสนอตัวเลือก มีบางครั้งที่ฉันต้องการให้ผู้ใช้ของฉันสามารถ เลือก ได้ แม้ว่าฉันจะรู้ว่าตัวเลือกที่ฉันเปิดเผยนั้นซับซ้อน แล้วฉันจะทำอย่างไรในกรณีเหล่านี้? ฉันปฏิบัติตามคำแนะนำของ WordPress และจำกัดผู้ใช้ขั้นสูงของฉันหรือไม่?

โชคดีที่ WordPress นำเสนอโซลูชั่นที่สมบูรณ์แบบสำหรับภาวะที่กลืนไม่เข้าคายไม่ออกนี้: ตัวกรอง เมื่อคุณออกแบบปลั๊กอินและต้องการให้ผู้ใช้ (ขั้นสูง) ของคุณสามารถปรับแต่งพฤติกรรมของมันได้ อย่าสร้างหน้าการตั้งค่าหรืออะไรทำนองนั้น ให้ปรับแต่งปลั๊กอินของคุณผ่านกลไกการกรองของ WordPress แทน

หากคุณใช้ตัวกรอง ผู้ใช้ส่วนใหญ่จะชอบพฤติกรรมที่เป็นค่าเริ่มต้น ("การตัดสินใจ" จำได้ไหม) เนื่องจากพวกเขาจะใช้ปลั๊กอินที่มีค่าเริ่มต้นที่ตั้งไว้ในตัวกรองของคุณ ในขณะที่ผู้ใช้ขั้นสูงจะสามารถแก้ไขสิ่งเหล่านี้ได้ ตัดสินใจผ่านเบ็ด (และคุณก็มี "ตัวเลือก") ด้วย ที่สุดของทั้งสองโลก!

การตั้งค่า WordPress

ตกลง ตอนนี้เราทราบถึงความสำคัญของการตัดสินใจสำหรับผู้ใช้ของเราและได้เห็นวิธีหลีกเลี่ยงข้อจำกัดนี้ (หากจำเป็น) ผ่านตัวกรอง ถึงเวลามาดูกันว่าเราจะสร้างหน้าการตั้งค่าใน WordPress ได้อย่างไร เพราะใช่: มีบางครั้งที่เราจำเป็นต้องให้ตัวเลือกแก่ผู้ใช้ของเราในการตัดสินใจตามความต้องการของพวกเขา

การตั้งค่า API ใน WordPress

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

ฉันคิดว่าวิธีที่ดีที่สุดในการเรียนรู้คือผ่านตัวอย่าง ดังนั้นเรามาสร้างหน้าการตั้งค่าแรกของเราโดยใช้การตั้งค่า API ทีละขั้นตอน

การสร้างหน้าการตั้งค่าใหม่

สิ่งแรกที่คุณต้องทำเพื่อสร้างหน้าการตั้งค่าคือ (เซอร์ไพรส์ เซอร์ไพรส์!) เพื่อสร้างเพจเพื่อแสดงการตั้งค่า ในการดำเนินการนี้ เพียงใช้ฟังก์ชัน add_options_page ระหว่างการดำเนินการ admin_menu และลงทะเบียนหน้า:

 function nelio_add_settings_page() { add_options_page( 'Nelio Plugin Settings', 'Nelio', 'manage_options', 'nelio-example-plugin', 'nelio_render_settings_page' ); } add_action( 'admin_menu', 'nelio_add_settings_page' );

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

 <?php function nelio_render_settings_page() { ?> <h2>Nelio Plugin Settings</h2> <form action="options.php" method="post"> <?php settings_fields( 'nelio_example_plugin_settings' ); do_settings_sections( 'nelio_example_plugin' ); ?> <input type="submit" name="submit" class="button button-primary" value="<?php esc_attr_e( 'Save' ); ?>" /> </form> <?php }

หน้าการตั้งค่านั้นค่อนข้างง่ายในการสร้าง เราเพียงแค่ต้องเพิ่ม form ที่ WordPress จะสร้างเนื้อหาแบบกึ่งอัตโนมัติ ในอีกด้านหนึ่ง เราเรียกใช้ฟังก์ชัน settings_fields ซึ่งโดยพื้นฐานแล้วจะเพิ่ม nonce ลงในแบบฟอร์มเพื่อให้ "ปลอดภัย" ต่อไป เราขอให้ WordPress แสดงการตั้งค่าทั้งหมดที่เราสร้างขึ้นสำหรับปลั๊กอินของเราโดยใช้ฟังก์ชัน do_settings_sections และสุดท้าย เราเพียงแค่เพิ่มปุ่มเพื่อ ส่ง แบบฟอร์ม

การตั้งค่าจริงในหน้าการตั้งค่าของเรา

ต่อไป เราต้องลงทะเบียนแต่ละตัวเลือกที่จะเป็นส่วนหนึ่งของหน้าการตั้งค่าของเรา ในการทำเช่นนี้ เราจะใช้สองฟังก์ชัน: register_setting ซึ่งช่วยให้เราสามารถระบุชื่อที่เราจะบันทึกการตั้งค่าในฐานข้อมูล และ add_settings_field ซึ่งเพิ่มแต่ละตัวเลือก:

 function nelio_register_settings() { register_setting( 'nelio_example_plugin_settings', 'nelio_example_plugin_settings', 'nelio_validate_example_plugin_settings' ); add_settings_section( 'section_one', 'Section One', 'nelio_section_one_text', 'nelio_example_plugin' ); add_settings_field( 'some_text_field', 'Some Text Field', 'nelio_render_some_text_field', 'nelio_example_plugin', 'section_one' ); add_settings_field( 'another_number_field', 'Another Number Field', 'nelio_render_another_number_field', 'nelio_example_plugin', 'section_one' ); } add_action( 'admin_init', 'nelio_register_settings' );

ข้อมูลโค้ดก่อนหน้านี้มีบางสิ่งที่สมควรได้รับความสนใจเป็นพิเศษ ในอีกด้านหนึ่ง โปรดทราบว่าฟังก์ชัน register_setting มีอาร์กิวเมนต์ที่สาม: nelio_validate_example_plugin_settings นี่คือชื่อของฟังก์ชันเรียกกลับที่จะถูกเรียกเพื่อตรวจสอบค่าที่ผู้ใช้เลือกไว้ (จำไว้ว่าคุณต้องตรวจสอบและล้างฟิลด์ในแบบฟอร์มของคุณเสมอ) ฟังก์ชันนี้มีลักษณะดังนี้:

 function nelio_validate_example_plugin_settings( $input ) { $output['some_text_field'] = sanitize_text_field( $input['some_text_field'] ); $output['another_number_field'] = absint( $input['another_number_field'] ); // ... return $output; }

โดยที่เราดึงข้อมูลแต่ละช่องที่ส่งมาจาก $input และเราล้างข้อมูลนั้นลงใน $output เพื่อที่เราจะได้ทราบแน่ชัดว่าสิ่งที่เราลงเอยด้วยการบันทึกลงในฐานข้อมูลนั้นถูกต้องและถูกต้อง

สิ่งที่สองที่ฉันต้องการเน้นคุณคือความจริงที่ว่าแต่ละฟิลด์ที่เรากำหนดยังมีการอ้างอิงฟังก์ชันที่บอก WordPress ว่าควรแสดงแต่ละฟิลด์อย่างไร ตัวอย่างเช่น การเรียกกลับของฟิลด์ในตัวอย่างของเราอาจเป็นดังนี้:

 function nelio_section_one_text() { echo '<p>This is the first (and only) section in my settings.</p>'; } function nelio_render_some_text_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="text" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[some_text_field]' ), esc_attr( $options['some_text_field'] ) ); } function nelio_render_another_number_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="number" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[another_number_field]' ), esc_attr( $options['another_number_field'] ) ); }

โดยพื้นฐานแล้ว การเรียกกลับทั้งหมดเหล่านี้ทำคือการดึงค่าปัจจุบันของฟิลด์ที่พวกเขาควรจะแสดงผล (ด้วย get_option ) และแสดงผล HTML ที่จะอนุญาตให้ผู้ใช้ตั้งค่าหนึ่งค่าหรืออีกค่าหนึ่ง (ในตัวอย่างนี้ ฟิลด์ input ของ พิมพ์ text หรือ number )

ถามว่าผลสุดท้ายเป็นอย่างไร? นี้:

ความคิดสุดท้าย

อย่างที่คุณเห็น การสร้างหน้าการตั้งค่านั้นค่อนข้างง่าย โดยส่วนตัวแล้วฉันไม่ค่อยชอบกระบวนการทั้งหมดเท่าไหร่ เพราะมันค่อนข้างซ้ำซากจำเจ และเราต้องเขียนโค้ดสำเร็จรูปซ้ำแล้วซ้ำอีก… แต่ก็ยังง่ายอยู่ดี

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

• การตั้งค่า WP API
• WordPressOption Page Generator

และแน่นอน มีความเป็นไปได้เสมอที่จะสร้างหน้าการตั้งค่าโดยใช้เทคโนโลยีอย่าง React… แต่นี่เป็นเรื่องราวในช่วงเวลาที่ต่างออกไป คุณไม่คิดอย่างนั้นเหรอ?

ภาพเด่นโดย Rima Kruciene บน Unsplash