3 แนวทางในการเพิ่มฟิลด์ที่กำหนดค่าได้ให้กับปลั๊กอิน WordPress ของคุณ

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

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

อ่านเพิ่มเติม เกี่ยวกับ SmashingMag:

• ขยาย WordPress ด้วยฟิลด์ที่กำหนดเอง
• Custom Fields Hacks สำหรับ WordPress
• ขยายฟิลด์แบบกำหนดเองขั้นสูงด้วยการควบคุมของคุณเอง
• คู่มือฉบับสมบูรณ์สำหรับประเภทโพสต์ที่กำหนดเอง

ฉันจะแนะนำวิธีตั้งค่าฟิลด์ของคุณด้วยตัวจัดการแบบกำหนดเอง สุดท้ายนี้ ฉันจะแสดงวิธีผสานรวมปลั๊กอินฟิลด์ที่กำหนดค่าได้ยอดเยี่ยม Advanced Custom Fields (ACF) ลงในปลั๊กอินของคุณเอง

เนื่องจากโพสต์นี้ค่อนข้างยาว จึงมีสารบัญที่มีลิงก์ไปยังส่วนหลักแต่ละส่วนดังนี้

• การสร้างหน้าปลั๊กอินและการตั้งค่าของเรา
• วิธีที่ 1: การใช้ฟังก์ชัน WordPress ในตัว
• วิธีที่ 2: การตั้งค่าแบบฟอร์มที่กำหนดเองและตัวจัดการ
• แนวทางที่ 3: การรวม ACF (ฟิลด์กำหนดเองขั้นสูง) เข้ากับปลั๊กอินของคุณ

สำหรับตัวอย่างโค้ด โปรดดูที่พื้นที่เก็บข้อมูลที่ฉันตั้งค่าให้มาพร้อมกับโพสต์นี้

การสร้างหน้าปลั๊กอินและการตั้งค่าของเรา

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

 /* Plugin Name: Smashing Fields Plugin description: >- Setting up configurable fields for our plugin. Author: Matthew Ray Version: 1.0.0 */ class Smashing_Fields_Plugin { // Our code will go here } new Smashing_Fields_Plugin();

ภายในชั้นเรียนของเรา เราจะเพิ่ม action hook เพื่อเพิ่มหน้าการตั้งค่า:

 public function __construct() { // Hook into the admin menu add_action( 'admin_menu', array( $this, 'create_plugin_settings_page' ) ); }

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

 public function create_plugin_settings_page() { // Add the menu item and page $page_title = 'My Awesome Settings Page'; $menu_title = 'Awesome Plugin'; $capability = 'manage_options'; $slug = 'smashing_fields'; $callback = array( $this, 'plugin_settings_page_content' ); $icon = 'dashicons-admin-plugins'; $position = 100; add_menu_page( $page_title, $menu_title, $capability, $slug, $callback, $icon, $position ); }

ดู WP codex สำหรับ add_menu_page สำหรับข้อมูลเพิ่มเติม

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

ขั้นตอนต่อไปของเราคือการสร้างวิธีการโทรกลับ plugin_settings_page_content สำหรับหน้าการตั้งค่าของเรา

 public function plugin_settings_page_content() { echo 'Hello World!'; }

หากคุณบันทึกปลั๊กอินและรีเฟรชแผงผู้ดูแลระบบ WordPress คุณจะเห็นสิ่งต่อไปนี้:

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

 add_submenu_page( 'options-general.php', $page_title, $menu_title, $capability, $slug, $callback );

ที่นี่เรากำลังเปลี่ยนฟังก์ชัน add_menu_page เป็น add_submenu_page และเติมอาร์กิวเมนต์ใหม่ อาร์กิวเมนต์นั้นเป็นรายการเมนูหลักที่หน้าการตั้งค่าใหม่จะอยู่ภายใต้ ในเอกสารประกอบ add_submenu_page คุณสามารถดูรายการที่ค่อนข้างดีสำหรับรายการเมนูหลักและทาก คุณอาจเห็นว่าเราไม่มีอาร์กิวเมนต์สองอันสุดท้าย $icon และ $position อีกต่อไป เนื่องจากตอนนี้เราอยู่ในส่วนเมนูย่อย เราจึงไม่สามารถควบคุมตำแหน่งขององค์ประกอบได้อีกต่อไป นอกจากนี้ เมนูย่อยไม่มีไอคอนสำหรับพวกเขา ดังนั้นจึงไม่จำเป็นต้องมีอาร์กิวเมนต์นั้น

หากคุณบันทึกรหัสใหม่นี้ คุณจะเห็นว่าหน้าการตั้งค่าของเราจะแสดงอยู่ใต้รายการเมนูการตั้งค่า:

ในหลายกรณี ตำแหน่งที่เหมาะสมที่สุดในการเพิ่มหน้าการตั้งค่าปลั๊กอินจะอยู่ภายใต้รายการการตั้งค่า ใน codex ของ WordPress อธิบายว่าส่วนการตั้งค่าใช้เพื่อ "แสดงตัวเลือกปลั๊กอินที่ผู้ดูแลระบบเท่านั้นที่ควรดู" อย่างไรก็ตาม นี่เป็นเพียงแนวทางเท่านั้น ไม่ใช่กฎ

ตอนนี้เราได้ตั้งค่าหน้าการตั้งค่าแล้ว และเรารู้วิธีย้ายรายการไปรอบๆ แล้ว เราก็สามารถเริ่มทำงานในฟิลด์ได้ งานที่เราทำไปแล้วจะถูกนำมาใช้ซ้ำสำหรับวิธีการต่างๆ ด้านล่าง

วิธีที่ 1: การใช้ฟังก์ชันการทำงานของ WordPress ในตัว

ก่อนที่เราจะเจาะลึกลงไปในโค้ด เรามาพูดถึงข้อดีและข้อเสียของการใช้แนวทางนี้กันก่อน

ข้อดี

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

ข้อเสีย

• การตรวจสอบข้อมูลที่กำหนดเองเป็นแบบแมนนวล
• ประเภทฟิลด์ขั้นสูง (ตัวทำซ้ำ แผนที่ การอัปโหลด ฯลฯ) นั้นยากต่อการติดตั้ง

คุณควรใช้แนวทางนี้เมื่อใด

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

เริ่มต้น

ด้วยวิธีนี้ เราจะต้องปฏิบัติตามมาร์กอัปเดียวกันกับที่หน้าตัวเลือกของ WordPress ใช้ เราควรแก้ไขวิธี plugin_settings_page_content เป็นดังต่อไปนี้:

 public function plugin_settings_page_content() { ?> <div class="wrap"> <h2>My Awesome Settings Page</h2> <form method="post" action="options.php"> <?php settings_fields( 'smashing_fields' ); do_settings_sections( 'smashing_fields' ); submit_button(); ?> </form> </div> <?php }

มาร์กอัปด้านบนส่งตรงจากโคเด็กซ์ของ WordPress ในการสร้างหน้าตัวเลือก ชื่อเมธอดควรตรงกับชื่อเรียกกลับที่เราใส่ในฟังก์ชัน add_menu_page ด้านบน จริง ๆ แล้ว wrapper div นั้นเหมือนกับฟอร์ม WordPress เริ่มต้น และจะดึงสไตล์จากส่วนเหล่านั้น แท็ก form ชี้ไปที่ตัวจัดการแบบฟอร์มตัวเลือกเริ่มต้นสำหรับ WordPress

PHP สามบรรทัดทำหลายอย่าง:

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

หากเรารีเฟรชหน้าการตั้งค่าของเรา เราควรได้สิ่งที่มีลักษณะดังนี้:

มันดูบางไปหน่อย! มาเริ่มตั้งค่าฟิลด์กันเลย

ส่วนและฟิลด์

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

 add_action( 'admin_init', array( $this, 'setup_sections' ) );

เบ็ดนี้จะตั้งค่าส่วนต่างๆ สำหรับเพจของเรา นี่คือรหัสสำหรับการโทรกลับ:

 public function setup_sections() { add_settings_section( 'our_first_section', 'My First Section Title', false, 'smashing_fields' ); }

อาร์กิวเมนต์แรกเป็นตัวระบุเฉพาะสำหรับส่วนนี้ และเราจะใช้สำหรับฟิลด์ที่เราต้องการกำหนดให้กับส่วน ตัวระบุเหล่านี้ควรไม่ซ้ำกันสำหรับส่วนใหม่ทั้งหมดในหน้านี้ อาร์กิวเมนต์ถัดไปคือชื่อที่สร้างขึ้นเหนือส่วนนี้ – คุณสามารถสร้างอะไรก็ได้ที่คุณต้องการ อาร์กิวเมนต์ที่สามคือการโทรกลับ ตอนนี้ฉันได้ตั้งค่า false แต่เราจะกลับมาทบทวนในไม่ช้า อาร์กิวเมนต์ที่สี่คือหน้าตัวเลือกที่จะเพิ่มตัวเลือก (ตัวแปร $slug จากรุ่นก่อนหน้า)

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

 public function setup_sections() { add_settings_section( 'our_first_section', 'My First Section Title', array( $this, 'section_callback' ), 'smashing_fields' ); add_settings_section( 'our_second_section', 'My Second Section Title', array( $this, 'section_callback' ), 'smashing_fields' ); add_settings_section( 'our_third_section', 'My Third Section Title', array( $this, 'section_callback' ), 'smashing_fields' ); }

ทั้งสามส่วนนี้มี callback section_callback ตั้งค่าในช่องอาร์กิวเมนต์ที่สาม หากเราสร้างวิธีการที่ตรงกับการโทรกลับนั้นและวาง "Hello World" ไว้ที่นั่น:

 public function section_callback( $arguments ) { echo '

สวัสดีชาวโลก

'; }

เราได้รับสิ่งที่มีลักษณะดังนี้:

ฉันรู้ว่าคุณคิดอย่างไร "ทำไมฉันถึงต้องการมีข้อความเดียวกันในทุกส่วนของฉัน" คำตอบคือคุณคงไม่ นี่คือจุดที่เราอาจใช้งานฟังก์ชัน add_settings_section ได้ยาก หากคุณดูเอกสารประกอบสำหรับฟังก์ชันนั้น คุณจะเห็นว่าในส่วน Notes ของหน้า ฟังก์ชันการโทรกลับจะได้รับอาร์เรย์ของอาร์กิวเมนต์ที่สัมพันธ์โดยตรงกับอาร์กิวเมนต์ใน hook ของเรา หากคุณเข้าไปและ var_dump( $arguments ) คุณจะเห็นข้อโต้แย้งทั้งหมดถูกส่งผ่านไปยังฟังก์ชันของเรา

จากนั้นเราสามารถเขียนสวิตช์อย่างง่ายในการโทรกลับของเราเพื่อเปลี่ยนข้อความตาม ID ที่ส่งผ่านเข้าไป:

 public function section_callback( $arguments ) { switch( $arguments['id'] ){ case 'our_first_section': echo 'This is the first description here!'; break; case 'our_second_section': echo 'This one is number two'; break; case 'our_third_section': echo 'Third time is the charm!'; break; } }

ตอนนี้เรามีข้อความที่กำหนดเองสำหรับแต่ละส่วนที่เราสามารถเปลี่ยนได้ในฟังก์ชันเดียว!

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

 add_action( 'admin_init', array( $this, 'setup_fields' ) );

เนื่องจากคุณทราบการฝึกซ้อมอยู่แล้ว ฉันจะโทรกลับเพื่อดำเนินการของเรา:

 public function setup_fields() { add_settings_field( 'our_first_field', 'Field Name', array( $this, 'field_callback' ), 'smashing_fields', 'our_first_section' ); }

อาร์กิวเมนต์ในฟังก์ชันนี้คล้ายกับอาร์กิวเมนต์ในฟังก์ชันส่วน อาร์กิวเมนต์แรกคือตัวระบุเฉพาะสำหรับฟิลด์ ที่สองคือป้ายกำกับที่แสดงขึ้นถัดจากฟิลด์ ในอาร์กิวเมนต์ที่สาม คุณจะเห็นว่าฉันกำลังเรียกใช้เมธอด field_callback ; เราจะสร้างการโทรกลับนั้นในเวลาเพียงไม่กี่วินาที ที่สี่คือหน้าตัวเลือกที่เราต้องการใช้ ( $slug ของเราจากก่อนหน้านี้) อาร์กิวเมนต์ที่ห้าคือ ตัวระบุเฉพาะสำหรับส่วน ที่เราต้องการกำหนดฟิลด์นี้

นี่คือรหัสสำหรับการโทรกลับในอาร์กิวเมนต์ที่สามของเรา:

 public function field_callback( $arguments ) { echo '<input name="our_first_field" type="text" value="' . get_option( 'our_first_field' ) . '" />'; }

ที่นี่ฉันแค่คัดลอกตัวระบุเฉพาะของฟิลด์ลงในชื่อ ID และฟังก์ชัน get_option ของเรา มาดูกันว่าหน้าของเรามีลักษณะอย่างไรเมื่อแนบฟิลด์ใหม่ของเรา:

สุดยอด เรามีสนามของเราในเพจแล้ว! ลองเพิ่มเนื้อหาลงไปแล้วกดบันทึกการเปลี่ยนแปลง ฉันจะรอที่นี่...

คุณทำมัน? หากคุณทำทุกอย่างจนถึงจุดนี้ คุณควรจะได้รับข้อผิดพลาดที่พูดว่า ERROR: options page not found หรือคล้ายกัน สาเหตุที่เกิดขึ้นจริง ๆ แล้วเป็นคุณลักษณะด้านความปลอดภัยใน WordPress

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

ปัญหานี้แก้ไขได้ด้วยการเพิ่มฟังก์ชันที่ชื่อ register_setting เว้นแต่คุณจะบอก WordPress โดยเฉพาะว่า "เฮ้ ฟิลด์นี้ได้รับอนุญาตให้บันทึกในหน้านี้" WordPress จะไม่อัปเดตฟิลด์ในฐานข้อมูล ดังนั้นภายใต้มาร์กอัปฟิลด์ของเรา เราจะเพิ่มฟังก์ชันใหม่นี้ นี่คือลักษณะการติดต่อกลับหลังจากที่เราเพิ่มโค้ด:

 public function field_callback( $arguments ) { echo '<input name="our_first_field" type="text" value="' . get_option( 'our_first_field' ) . '" />'; register_setting( 'smashing_fields', 'our_first_field' ); }

อาร์กิวเมนต์แรกในฟังก์ชันใหม่คือหน้าตัวเลือกที่เราต้องการบันทึกฟิลด์ ( $slug จากรุ่นก่อนหน้า) และอาร์กิวเมนต์ที่สองคือฟิลด์ที่เราต้องการบันทึก ตอนนี้ลองและอัปเดตฟิลด์ - ใช้งานได้!

ยินดีด้วย! คุณเพิ่งบันทึกฟิลด์แรกของคุณโดยใช้ WordPress Settings API แล้วถ้าเราต้องการให้มีฟิลด์ประเภทต่างๆ แทนที่จะเป็นข้อความล่ะ มาทบทวนการเรียกกลับภาคสนามของเราอีกครั้งและพูดคุยเกี่ยวกับตัวแปร $arguments ที่ส่งผ่านไปยังฟังก์ชันของเรา

อาร์กิวเมนต์ภาคสนาม

หากเราเข้าไปในฟิลด์ callback และ var_dump( $arguments ) เราจะได้รับอาร์เรย์ว่าง สิ่งที่ช่วยให้? ในการโทรกลับส่วนของเรา เรามีข้อมูลมากมายเกี่ยวกับส่วนนี้ มีบางอย่างที่แตกต่างกันเกิดขึ้นที่นี่ หากคุณตรวจสอบเอกสารประกอบสำหรับ add_settings_field มีอาร์กิวเมนต์ที่ห้าที่สามารถส่งผ่านไปยังฟังก์ชันได้ ตัวแปรนั้นสัมพันธ์โดยตรงกับตัวแปร $arguments ในการเรียกกลับของเรา ดังนั้นเราจึงต้องการนำสิ่งใหม่ของเราไปไว้ที่นั่น

หากเราดูที่ฟิลด์เริ่มต้นในหน้าการตั้งค่า WordPress เราจะพบว่ามีหลายพื้นที่ที่เราสามารถเพิ่มลงในฟิลด์ของเราเพื่อรับการจัดรูปแบบเริ่มต้น นี่คือภาพหน้าจอของฟิลด์เขตเวลาในหน้าการตั้งค่าทั่วไป:

การใช้ฟิลด์นี้เป็นจุดเริ่มต้น มาดูข้อมูลที่เราต้องการส่งไปยังการเรียกกลับภาคสนามของเรา

• ตัวระบุที่ไม่ซ้ำ
• ป้ายกำกับสำหรับฟิลด์ (เขตเวลาในตัวอย่าง)
• ควรเข้าส่วนไหน
• ประเภทของฟิลด์ (ข้อความ พื้นที่ข้อความ เลือก ฯลฯ)
• ในกรณีที่มีหลายตัวเลือก เราอยากได้ตัวเลือกเหล่านั้น
• อาจเป็นตัวยึดตำแหน่งหากประเภทฟิลด์รองรับหนึ่ง
• ข้อความช่วยเหลือ (ทางด้านขวาของฟิลด์ในตัวอย่าง)
• ข้อความเสริม (ใต้ช่องในตัวอย่าง)
• อาจเป็นการเลือกเริ่มต้นหากมีหนึ่งรายการ

จากรายการนี้ เราสามารถตั้งค่าอาร์เรย์ที่เชื่อมโยงของฟิลด์และค่าต่างๆ ที่เราสามารถส่งผ่านไปยังคอลแบ็กของเราได้:

 public function setup_fields() { $fields = array( array( 'uid' => 'our_first_field', 'label' => 'Awesome Date', 'section' => 'our_first_section', 'type' => 'text', 'options' => false, 'placeholder' => 'DD/MM/YYYY', 'helper' => 'Does this help?', 'supplemental' => 'I am underneath!', 'default' => '01/01/2015' ) ); foreach( $fields as $field ){ add_settings_field( $field['uid'], $field['label'], array( $this, 'field_callback' ), 'smashing_fields', $field['section'], $field ); register_setting( 'smashing_fields', $field['uid'] ); } }

อย่างแรกที่เรามีคือตัวแปรชื่อ $fields ซึ่งจะเก็บทุก field ที่เราต้องการสร้าง ภายในอาร์เรย์นั้น เรามีอาร์เรย์อื่นที่เก็บข้อมูลเฉพาะสำหรับแต่ละฟิลด์ ฉันได้ตั้งค่าข้อมูลให้ตรงกับรายการด้านบนของเราทุกประการ จากนั้นฉันวนซ้ำในแต่ละฟิลด์ (เราจะเพิ่มอีกในไม่ช้า) ในอาร์เรย์และเพิ่มฟิลด์และลงทะเบียน ที่ส่วนท้ายของฟังก์ชัน add_settings_field ฉันยังเพิ่มอาร์เรย์ข้อมูลทั้งหมดสำหรับฟิลด์เฉพาะนั้นด้วย เพื่อให้เราสามารถทำบางสิ่งในฟังก์ชันเรียกกลับได้ มาดูฟังก์ชันการโทรกลับกันที่นี่:

 public function field_callback( $arguments ) { $value = get_option( $arguments['uid'] ); // Get the current value, if there is one if( ! $value ) { // If no value exists $value = $arguments['default']; // Set to our default } // Check which type of field we want switch( $arguments['type'] ){ case 'text': // If it is a text field printf( '<input name="%1$s" type="%2$s" placeholder="%3$s" value="%4$s" />', $arguments['uid'], $arguments['type'], $arguments['placeholder'], $value ); break; } // If there is help text if( $helper = $arguments['helper'] ){ printf( '<span class="helper"> %s</span>', $helper ); // Show it } // If there is supplemental text if( $supplimental = $arguments['supplemental'] ){ printf( '<p class="description">%s</p>', $supplimental ); // Show it } }

ในตัวอย่างข้างต้น เรากำลังดำเนินการหลายอย่าง เรากำลังตั้งค่าเริ่มต้นสำหรับฟิลด์ถ้าว่างเปล่าและเพิ่มตัวช่วยและข้อความเสริม ส่วนที่สำคัญที่สุดในโค้ดของเราคือคำสั่ง switch ในคำชี้แจงนี้ เราจะสรุปวิธีจัดการกับอาร์กิวเมนต์ของเราตามประเภทฟิลด์ที่เราต้องการ

ตัวอย่างเช่น ถ้าเรามีช่องข้อความ เราก็ไม่จำเป็นต้องมีหลายตัวเลือก อย่างไรก็ตาม รายการแบบเลื่อนลง <select> ต้องมีตัวเลือกเพื่อให้ทำงานได้อย่างถูกต้อง เนื่องจากเราได้ตั้งค่าประเภทข้อความไว้แล้ว ให้เรียกใช้โค้ดนี้และดูว่าเราได้อะไร

เมื่อคุณโหลดหน้าการตั้งค่าปลั๊กอิน คุณจะเห็นฟิลด์บนสุดในภาพนี้ ด้านล่างคือสิ่งที่คุณจะเห็นหากคุณลบเนื้อหาออกจากฟิลด์ (เช่น ตัวยึดตำแหน่ง) ถ้าฉันจะลบตัว helper หรือ supplimental เสริมออกจากอาร์เรย์ฟิลด์ของเรา สิ่งเหล่านี้ควรหายไปในหน้าการตั้งค่า นอกจากนี้เรายังสามารถเปลี่ยนอาร์กิวเมนต์ section และย้ายไปรอบๆ ตำแหน่งของฟิลด์ในส่วนต่างๆ

ตกลง ดังนั้นเราจึงมีช่องข้อความ แล้วฟิลด์ประเภทที่ซับซ้อนกว่านี้ล่ะ? มาดูคำสั่งสวิตช์ของเรากันอีกครั้งและเพิ่มตัวเลือกสำหรับพื้นที่ข้อความและการเลือกเดี่ยว:

 switch( $arguments['type'] ){ case 'text': // If it is a text field printf( '<input name="%1$s" type="%2$s" placeholder="%3$s" value="%4$s" />', $arguments['uid'], $arguments['type'], $arguments['placeholder'], $value ); break; case 'textarea': // If it is a textarea printf( '<textarea name="%1$s" placeholder="%2$s" rows="5" cols="50">%3$s</textarea>', $arguments['uid'], $arguments['placeholder'], $value ); break; case 'select': // If it is a select dropdown if( ! empty ( $arguments['options'] ) && is_array( $arguments['options'] ) ){ $options_markup = '; foreach( $arguments['options'] as $key => $label ){ $options_markup .= sprintf( '<option value="%s" %s>%s</option>', $key, selected( $value, $key, false ), $label ); } printf( '<select name="%1$s">%2$s</select>', $arguments['uid'], $options_markup ); } break; }

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

เราได้อัปเดตฟังก์ชันเรียกกลับแล้ว มาดูกันว่าข้อมูลในฟิลด์มีการเปลี่ยนแปลงอย่างไร:

 $fields = array( array( 'uid' => 'our_first_field', 'label' => 'Awesome Date', 'section' => 'our_first_section', 'type' => 'text', 'options' => false, 'placeholder' => 'DD/MM/YYYY', 'helper' => 'Does this help?', 'supplemental' => 'I am underneath!', 'default' => '01/01/2015' ), array( 'uid' => 'our_second_field', 'label' => 'Awesome Date', 'section' => 'our_first_section', 'type' => 'textarea', 'options' => false, 'placeholder' => 'DD/MM/YYYY', 'helper' => 'Does this help?', 'supplemental' => 'I am underneath!', 'default' => '01/01/2015' ), array( 'uid' => 'our_third_field', 'label' => 'Awesome Select', 'section' => 'our_first_section', 'type' => 'select', 'options' => array( 'yes' => 'Yeppers', 'no' => 'No way dude!', 'maybe' => 'Meh, whatever.' ), 'placeholder' => 'Text goes here', 'helper' => 'Does this help?', 'supplemental' => 'I am underneath!', 'default' => 'maybe' ) );

ต่อไปนี้เป็นสามฟิลด์ โดยแต่ละฟิลด์ใช้ประเภทฟิลด์ที่แตกต่างกันในปลั๊กอินของเรา อันแรกเราไปหมดแล้ว ที่สองคือฟิลด์ textarea ใหม่ของเรา เราสามารถส่งพารามิเตอร์เดียวกันกับอาร์เรย์ (ยกเว้น UID) แต่เปลี่ยนประเภทของเราอย่างง่ายและเราจะได้รับ textarea แทน ฟิลด์สุดท้ายในอาร์เรย์นี้คือรายการดรอปดาวน์ Select การอัปเดตหลักที่นี่คือการเพิ่มอาร์เรย์ตัวเลือก เราเพิ่มอาร์เรย์ที่เชื่อมโยงอย่างง่ายด้วยคีย์อาร์เรย์เป็นค่าตัวเลือก HTML และป้ายกำกับ เมื่อใช้อาร์เรย์นี้ ฟิลด์ของเรามีลักษณะดังนี้:

เกือบเสร็จแล้ว!

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

 $value = get_option( $arguments['uid'] );

เราสามารถใช้โค้ดเดียวกันในปลั๊กอิน (หรือธีม) ของเรา และส่งผ่าน uid ไปที่ฟังก์ชัน ดังนั้นหากฉันต้องการได้ค่าของ our_first_field ฉันจะเขียนว่า:

 get_option('our_first_field')

เฮ้ presto! เรามีปลั๊กอินที่ยอดเยี่ยมและการตั้งค่าที่ยอดเยี่ยมของเรา! เห็นได้ชัดว่าเราได้ตั้งค่าฟิลด์บางประเภทเท่านั้น แต่ฉันได้ทำและเพิ่มในที่เก็บโค้ดสำหรับวิธีนี้แล้ว (โดยเฉพาะฟิลด์ข้อความ รหัสผ่าน ตัวเลข พื้นที่ข้อความ เลือกดร็อปดาวน์ เลือกหลายรายการ ปุ่มตัวเลือก และช่องทำเครื่องหมาย)

วิธีที่ 2: การตั้งค่าแบบฟอร์มที่กำหนดเองและตัวจัดการ

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

ข้อดี

• คุณสามารถส่งแบบฟอร์มไปยังตัวจัดการแบบกำหนดเองและระยะไกล
• คุณสามารถข้ามข้อจำกัดการตั้งค่า API ในตัวบางส่วนได้

ข้อเสีย

• นักพัฒนาซอฟต์แวร์ต้องดูแลความเข้ากันได้
• ต้องฆ่าเชื้อและตรวจสอบด้วยตนเอง

คุณควรใช้แนวทางนี้เมื่อใด

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

เริ่มต้น

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

การสร้างแบบฟอร์ม

เช่นเดียวกับที่ฉันได้กล่าวไว้ก่อนหน้านี้ เราจะทำตามขั้นตอนเดียวกับที่เราทำใน "การสร้างหน้าปลั๊กอินและการตั้งค่าของเรา" สำหรับแนวทางนี้ เราจะตั้งค่าฟิลด์ของเราโดยใช้มาร์กอัป HTML แบบคงที่ เราจะเพิ่มรหัสนี้ในการเรียกกลับจากฟังก์ชัน plugin_settings_page_content ดังนี้:

 public function plugin_settings_page_content() { ?> <div class="wrap"> <h2>My Awesome Settings Page</h2> <form method="POST"> <table class="form-table"> <tbody> <tr> <th><label for="username">Username</label></th> <td><input name="username" type="text" value="" class="regular-text" /></td> </tr> <tr> <th><label for="email">Email Address</label></th> <td><input name="email" type="text" value="" class="regular-text" /></td> </tr> </tbody> </table> <p class="submit"> <input type="submit" name="submit" class="button button-primary" value="Check My Info!"> </p> </form> </div> <?php }

คุณสามารถเห็นข้างต้นว่าเราเพิ่งเพิ่ม HTML แบบคงที่บางส่วนสำหรับฟิลด์ของเรา เรากำลังทำซ้ำมาร์กอัปจากหน้าการตั้งค่าหลักของ WordPress เรายังละเว้นการดำเนินการของแบบฟอร์มเพื่อที่จะส่งแบบฟอร์มไปยังหน้าปัจจุบันซึ่งต่างจากตัวจัดการ options.php เริ่มต้น

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

 <form method="POST"> <?php wp_nonce_field( 'awesome_update', 'awesome_form' ); ?> <table class="form-table">

wp_nonce_field จะเพิ่มฟิลด์ที่ซ่อนอยู่สองสามฟิลด์ในแบบฟอร์มของเรา nonce และผู้อ้างอิง เราจะกลับมาที่ nonce เมื่อเราผ่านรหัสตัวจัดการ

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

 <form method="POST"> <input type="hidden" name="updated" value="true" /> <?php wp_nonce_field( 'awesome_update', 'awesome_form' ); ?> <table class="form-table">

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

 public function plugin_settings_page_content() { if( $_POST['updated'] === 'true' ){ $this->handle_form(); } ?> <div class="wrap"> <h2>My Awesome Settings Page</h2>

ที่นี่เราเพียงแค่ตรวจสอบว่าได้ส่งฟิลด์ที่ updated ที่ซ่อนอยู่หรือไม่ และหากมี เราจะเรียกวิธีการในปลั๊กอินของเราที่เรียกว่า handle_form นี่คือที่ที่เราสามารถเริ่มเขียนตัวจัดการแบบกำหนดเองของเราได้

การสร้างตัวจัดการ

มีสองสิ่งที่เราต้องตรวจสอบในตัวจัดการก่อนที่เราจะจัดการข้อมูลในแบบฟอร์มจริงๆ ก่อนอื่นเราต้องตรวจสอบว่า nonce ของเรามีอยู่และถูกต้องหรือไม่:

 public function handle_form() { if( ! isset( $_POST['awesome_form'] ) || ! wp_verify_nonce( $_POST['awesome_form'], 'awesome_update' ) ){ ?> <div class="error"> <p>Sorry, your nonce was not correct. Please try again.</p> </div> <?php exit; } else { // Handle our form data } }

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

 $valid_usernames = array( 'admin', 'matthew' ); $valid_emails = array( '[email protected]', '[email protected]' ); $username = sanitize_text_field( $_POST['username'] ); $email = sanitize_email( $_POST['email'] ); if( in_array( $username, $valid_usernames ) && in_array( $email, $valid_emails ) ){ update_option( 'awesome_username', $username ); update_option( 'awesome_email', $email );?> <div class="updated"> <p>Your fields were saved!</p> </div> <?php } else { ?> <div class="error"> <p>Your username or email were invalid.</p> </div> <?php }

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

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

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

 <tr> <th><label for="username">Username</label></th> <td><input name="username" type="text" value="<?php echo get_option('awesome_username'); ?>" class="regular-text" /></td> </tr> <tr> <th><label for="email">Email Address</label></th> <td><input name="email" type="text" value="<?php echo get_option('awesome_email'); ?>" class="regular-text" /></td> </tr>

ตอนนี้เราพร้อมที่จะทดสอบแบบฟอร์มของเราแล้ว ลองใส่ชื่อผู้ใช้ admin และที่อยู่อีเมล [email protected] คุณควรได้รับสิ่งต่อไปนี้ในแบบฟอร์มของคุณ:

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

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

แนวทางที่ 3: การรวม ACF (ฟิลด์กำหนดเองขั้นสูง) เข้ากับปลั๊กอินของคุณ

หากคุณยังไม่เคยใช้ ACF โดย Elliot Condon ให้ฉันแนะนำคุณ ACF เป็นผู้จัดการภาคสนามที่ยอดเยี่ยมสำหรับ WordPress สิ่งที่ดีที่สุดประการหนึ่งเกี่ยวกับมันคืออินเทอร์เฟซการกำหนดค่าฟิลด์ มันทำให้ง่ายต่อการหมุนฟิลด์สำหรับหน้าต่างๆ ใน ​​WordPress (เช่น โพสต์ เพจ ผู้ใช้ การจัดหมวดหมู่ แม้แต่หน้าตัวเลือกที่ผสานรวมเข้าด้วยกัน) คุณอาจคิดว่า “ฉันไม่สามารถรวมปลั๊กอินของคนอื่นเป็นของตัวเองได้ – แย่จัง!” แต่นายคอนดอนเข้าใจถึงสภาพการณ์ของนักพัฒนาซอฟต์แวร์คนอื่นๆ และได้วางแผนสำหรับสิ่งนี้ไว้ในปลั๊กอินของเขา คุณสามารถดูเอกสารของเขาในหัวข้อนี้ได้ แต่ฉันจะทบทวนบางส่วนที่นี่ มาดูกฎกัน

1. ขั้นแรก หากคุณกำลังแจกจ่ายปลั๊กอินฟรี คุณ ต้อง ใช้ ACF เวอร์ชันฟรี เพื่อไม่ให้ผู้อื่นใช้เวอร์ชัน PRO จากปลั๊กอินฟรีของคุณได้ ซึ่งคงไม่เจ๋ง คุณสามารถใช้เวอร์ชัน PRO ในปลั๊กอินและธีมพรีเมียมได้โดยไม่มีปัญหา เพียงตรวจสอบให้แน่ใจว่าคุณซื้อใบอนุญาตสำหรับนักพัฒนาซอฟต์แวร์
2. ประการที่สอง ห้ามแก้ไขข้อมูลลิขสิทธิ์ของ ACF ให้เครดิตผู้ชายบ้าง!
3. สุดท้าย อย่าแจกจ่ายรหัสสัญญาอนุญาตกับปลั๊กอินของคุณ

ตอนนี้ข้อดีและข้อเสียของแนวทางนี้:

ข้อดี

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

ข้อเสีย

• จำกัดการเข้าถึงมาร์กอัป
• สร้างการพึ่งพาปลั๊กอินหรือธีมของคุณ
• เพื่อให้ ACF เป็นปัจจุบัน คุณต้องอัปเดตไฟล์ปลั๊กอิน/ธีมของคุณ (ข้อมูลเพิ่มเติมด้านล่าง)

คุณควรใช้แนวทางนี้เมื่อใด

เมื่อคุณต้องการสร้างอินเทอร์เฟซการตั้งค่าขั้นสูงอย่างรวดเร็ว และคุณไม่จำเป็นต้องปรับแต่งรูปลักษณ์

เริ่มต้น

สำหรับแนวทางนี้ ฉันจะแสดงวิธีตั้งค่าหน้าตัวเลือกสำหรับ ACF เวอร์ชันฟรี To view a guide on setting up the PRO version check out the ACF documentation. To get started we will be adding ACF to our plugin directory. First, download the latest version of ACF and unzip its contents. In your plugin directory create a (ดูรุ่นใหญ่)

Again, we will follow the steps we did in “Creating Our Plugin And Settings Page”. Before we get into that, though, we should include ACF in our plugin.

Include ACF In Your Plugin

It's actually pretty easy to include ACF in your plugin – there are only three steps. First we have to include the main ACF file with PHP. Add the following code to the bottom of our constructor function:

 include_once( plugin_dir_path( __FILE__ ) . 'vendor/advanced-custom-fields/acf.php' );

If you refresh the admin you should see a new menu item titled Custom Fields . Before we go into that page and start setting up our fields we need to update a couple of paths in ACF. We need to tell ACF to look for its front-end assets and file includes in our plugin directory instead of its normal place. Add these two hooks to your constructor:

 add_filter( 'acf/settings/path', array( $this, 'update_acf_settings_path' ) ); add_filter( 'acf/settings/dir', array( $this, 'update_acf_settings_dir' ) );

And the callbacks for those hooks:

 public function update_acf_settings_path( $path ) { $path = plugin_dir_path( __FILE__ ) . 'vendor/advanced-custom-fields/'; return $path; } public function update_acf_settings_dir( $dir ) { $dir = plugin_dir_url( __FILE__ ) . 'vendor/advanced-custom-fields/'; return $dir; }

The first callback updates the include paths for the PHP files within the ACF plugin. The second updates the URIs for the ACF assets. Now we can set up our fields.

Configuring Your Fields

Now comes the fun part: the ACF field configuration UI. Add a title and any fields you'd like in your form. There is a great walkthrough of what everything on this page does in the ACF documentation. Here's how I have set up mine:

Once you are ready hit the Publish button on the right and your fields will be saved. Now we have to get the fields we set up into our plugin. Right now they only exist in the database. On the left-hand navigation, click the Tools item. On the new page, select the field group we just created and hit Generate Export Code . This will create a chunk of PHP code that we can now include in our plugin.

To add the options, we need to add a method call to our constructor. Add this line to the end of your constructor after our ACF include:

 $this->setup_options();

Then we can create the method that will wrap our options:

 public function setup_options() { if( function_exists( 'register_field_group' ) ) { register_field_group(array ( 'id' => 'acf_awesome-options', 'title' => 'Awesome Options', 'fields' => array ( array ( 'key' => 'field_562dc35316a0f', 'label' => 'Awesome Name', 'name' => 'awesome_name', 'type' => 'text', 'default_value' => ', 'placeholder' => ', 'prepend' => ', 'append' => ', 'formatting' => 'html', 'maxlength' => ', ), array ( 'key' => 'field_562dc9affedd6', 'label' => 'Awesome Date', 'name' => 'awesome_date', 'type' => 'date_picker', 'date_format' => 'yymmdd', 'display_format' => 'dd/mm/yy', 'first_day' => 1, ), array ( 'key' => 'field_562dc9bffedd7', 'label' => 'Awesome WYSIWYG', 'name' => 'awesome_wysiwyg', 'type' => 'wysiwyg', 'default_value' => ', 'toolbar' => 'full', 'media_upload' => 'yes', ), ), 'location' => array ( array ( array ( 'param' => 'options_page', 'operator' => '==', 'value' => 'smashing_fields', ), ), ), 'menu_order' => 0, 'position' => 'normal', 'style' => 'default', 'label_placement' => 'top', 'instruction_placement' => 'label', 'hide_on_screen' => ', 'active' => 1, 'description' => ', )); } }

Now that we have our fields ready to go, we can add them to the settings page.

Modifying The Settings Page Code

To add the fields we just created to the page we will need to update our plugin_settings_page_content method.

Previously, we set up the form tag for our page. In this case we will let ACF do that part for us. Here is what our updated function should look like:

public function plugin_settings_page_content() { do_action('acf/input/admin_head'); // Add ACF admin head hooks do_action('acf/input/admin_enqueue_scripts'); // Add ACF scripts $options = array( 'id' => 'acf-form', 'post_id' => 'options', 'new_post' => false, 'field_groups' => array( 'acf_awesome-options' ), 'return' => admin_url('admin.php?page=smashing_fields'), 'submit_value' => 'Update', ); acf_form( $options ); }

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

หากคุณพยายามโหลดหน้าการตั้งค่าในตอนนี้ คุณอาจเห็นว่าหน้านั้นใช้งานไม่ได้จริงๆ เนื่องจาก ACF จำเป็นต้องแปลตัวแปรบางตัวสำหรับ JavaScript ในการดำเนินการนี้ เราต้องเพิ่ม hook อื่นให้กับ Constructor ของเรา:

 add_action( 'admin_init', array( $this, 'add_acf_variables' ) );

ตอนนี้เราต้องตั้งค่าการโทรกลับ:

 public function add_acf_variables() { acf_form_head(); }

คุณสามารถลองเพิ่มเนื้อหาและบันทึก และเนื้อหาควรทำงานเหมือนกับสองวิธีอื่นๆ ของเรา นี่คือสิ่งที่หน้าของเราควรมีลักษณะดังนี้:

มีเพียงไม่กี่รายการในการทำความสะอาดที่เราต้องการที่อยู่:

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

   add_filter( 'acf/settings/show_admin', '__return_false' );

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

การใช้ฟิลด์ ACF ภายในปลั๊กอินของคุณ

ในการรับฟิลด์ ACF ที่คุณสร้างขึ้น คุณเพียงแค่ต้องใช้ฟังก์ชัน ACF get_field เริ่มต้น ตัวเลือกแรกควรเป็น ID เฉพาะสำหรับฟิลด์ และอาร์กิวเมนต์ที่สองตั้งค่าเป็น 'option' นี่คือวิธีที่เราจะได้ฟิลด์ Awesome Date :

 get_field( 'awesome_date', 'option' )

และนั่นแหล่ะ คุณได้ตั้งค่าปลั๊กอินด้วยการตั้งค่า ACF แล้ว! คุณสามารถดูรหัสสำหรับแนวทางนี้ได้ในที่เก็บ

บทสรุป

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

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

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

ทางเลือกของ ACF

ตามที่ระบุในความคิดเห็นด้านล่าง และเพื่อให้นักพัฒนามีตัวเลือกอื่นๆ ที่คล้ายกับแนวทาง ACF คุณสามารถตรวจสอบทางเลือกอื่นที่อาจนำเสนอคุณลักษณะที่แตกต่างกัน หากคุณมีเพิ่มเติมโปรดส่งมาในความคิดเห็นด้านล่าง! ที่นี่ไม่ได้เรียงลำดับเฉพาะ:

• CMB2 โดย WebDevStudios
• Meta Box โดย Tran Ngoc Tuan Anh ( Rilwis )