ทำความเข้าใจกับ WordPress Custom Meta Box

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

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

เพิ่มเติมเกี่ยวกับ Hongkiat.com:

• ปรับแต่งไดเรกทอรีอัปโหลดสื่อใน WordPress
• ปรับแต่งสไตล์บรรณาธิการ WordPress
• ปรับแต่ง “หมอตำแย” ในแถบผู้ดูแลระบบของ WordPress
• ลงทะเบียน taxonomy แบบกำหนดเองสำหรับผู้ใช้ WordPress
• แสดงไอคอนในเมนู WordPress

สร้างกล่อง Meta

WordPress ให้ฟังก์ชัน API ที่เรียกว่า add_meta_box, ซึ่งให้เราสร้างเมตาบ็อกซ์ทันที นี่คือในรูปแบบพื้นฐานสูงสุด.

 ฟังก์ชั่น add_post_reference () add_meta_box ('โพสต์อ้างอิง', 'อ้างอิง', 'referenceCallBack', 'โพสต์');  add_action ('add_meta_boxes', 'add_post_reference'); ฟังก์ชั่น referenceCallBack () echo 'Hello World' 

add_meta_box ใช้พารามิเตอร์สี่ตัว: ID, ชื่อกล่องเมตา, ฟังก์ชันการเรียกกลับที่จะเรียกว่า 'Hello World' และประเภทโพสต์ที่เราต้องการแสดง ในกรณีนี้เราได้กำหนดกล่องเมตาใหม่ในหน้าแก้ไขการโพสต์ (วิธีนี้ใช้ได้กับหน้าเว็บด้วย).

ในส่วนการแก้ไขโพสต์คุณจะพบกล่องใหม่ดังต่อไปนี้.

กล่องเมตาใหม่ดังที่คุณเห็นด้านบนจะปรากฏใต้ตัวแก้ไข WYSIWYG หากคุณต้องการเพิ่มลงในแถบด้านข้างคุณสามารถเพิ่ม 'ด้าน' หลังพารามิเตอร์โพสต์และพร้อมกับ 'สูง' ถ้าคุณต้องการวางไว้ที่ด้านบนสุดของแถบด้านข้าง.

 ฟังก์ชั่น add_post_reference () add_meta_box ('โพสต์อ้างอิง', 'อ้างอิง', 'referenceCallBack', 'โพสต์', 'ด้าน', 'สูง');  add_action ('add_meta_boxes', 'add_post_reference'); 

ตอนนี้คุณจะพบมันเหนือ ประกาศ กล่อง…

ตอนนี้เพื่อแทนที่ข้อความ 'Hello World' ในนั้น ลองเพิ่มองค์ประกอบเช่นฟิลด์อินพุตสำหรับรายการใหม่.

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

 function referenceCallBack ($ โพสต์) wp_nonce_field ('reference_meta_box', 'reference_nonce'); $ name_value = get_post_meta ($ post-> ID, '_post_reference_name', จริง); $ link_value = get_post_meta ($ post-> ID, '_post_reference_link', จริง) echo '' 'ชื่ออ้างอิง' .''; echo ''; echo '
' 'เพิ่มชื่อของการอ้างอิง'. '
'; echo '' 'ลิงค์อ้างอิง'. ''; echo ''; echo '
' 'เพิ่มลิงก์ของข้อมูลอ้างอิง'. '
';  

รีเฟรชหน้าแก้ไขการโพสต์และคุณควรเห็นอินพุตทั้งสองนี้เพิ่ม.

$ NAME_VALUE และ $ link_value ตัวแปรจะดึงรายการจากฐานข้อมูลและเติมลงในช่องใส่ ในการรับข้อมูลเข้าสู่ฐานข้อมูลเราจะต้องสร้างฟังก์ชันสำหรับสิ่งนั้น.

เราจำเป็นต้องเพิ่มโค้ดสองสามบรรทัดที่จะเติมรายการที่ป้อนผ่านอินพุตเหล่านี้ลงในฐานข้อมูลอย่างปลอดภัย. “อย่างปลอดภัย” ที่นี่หมายถึงรายการที่ถูกต้องตามกฎหมายและได้รับอนุญาต (ไม่ใช่รายการที่มาจากแฮกเกอร์หรือบุคลากรที่ไม่ได้รับอนุญาตอื่น ๆ ) เพื่อบันทึกรายการเราจะต้องสร้างฟังก์ชั่นใหม่ ลองตั้งชื่อฟังก์ชั่น: save_post_reference, ชอบมาก.

 ฟังก์ชั่น save_post_reference ($ post_id)  ​​add_action ('save_post', 'save_post_reference'); 

ดังที่เราได้กล่าวไปแล้วเราจำเป็นต้องตรวจสอบบางสิ่งเพื่อความปลอดภัย:

(1) เราจะต้องตรวจสอบว่าผู้ใช้ มีความสามารถในการแก้ไขโพสต์.

 if (! current_user_can ('edit_post', $ post_id)) return;  

(2) เรายังต้อง ตรวจสอบว่าตั้งค่า Nonce.

 if (! isset ($ _POST ['reference_nonce'])) return;  if (! wp_verify_nonce ($ _POST ['reference_nonce'], 'reference_meta_box')) return;  

(3) จากนั้นเราต้องป้องกันไม่ให้ข้อมูลถูกบันทึกโดยอัตโนมัติ การออมสามารถทำได้เพียงครั้งเดียว “บันทึก” หรือ “ปรับปรุง” คลิกปุ่มแล้ว.

 if (define ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;  

(4) เราจะต้องให้แน่ใจว่าทั้งสองอินพุตของเรา, post_reference_name และ post_reference_link, มีการตั้งค่าและพร้อมก่อนที่เราจะส่งรายการ.

 if (! isset ($ _POST ['post_reference_name']) ||! isset ($ _POST ['post_reference_link'])) return;  

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

 $ reference_name = sanitize_text_field ($ _POST ['post_reference_name']); $ reference_link = sanitize_text_field ($ _POST ['post_reference_link']); 

เอาล่ะตอนนี้เราพร้อมที่จะบันทึกรายการลงในฐานข้อมูล:

 update_post_meta ($ post_id, '_post_reference_name', $ reference_name); update_post_meta ($ post_id, '_post_reference_link', $ reference_link); 

ตอนนี้คุณสามารถลองได้แล้ว: ป้อนเนื้อหาบางส่วนลงในช่องป้อนข้อมูลและคลิก “ปรับปรุง” ปุ่มเพื่อบันทึก.

ข้อสรุป

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