WordPress Meta Boxes – คู่มือฉบับย่อ

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

มาเริ่มกันเลย!

ฟิลด์ที่กำหนดเอง กล่อง Meta และข้อมูลเมตา

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

ข้อมูลเมตา

ข้อมูลเมตาของโพสต์คือข้อมูลเพิ่มเติมเกี่ยวกับโพสต์ที่จัดเก็บไว้ในตาราง postmeta ของฐานข้อมูล

ทุกคู่คีย์/ค่าถือเป็น 'ช่องโพสต์' ตารางนี้สามารถมีได้ไม่จำกัดจำนวนรายการเมตา

ฟิลด์ที่กำหนดเอง

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

เมตาบ็อกซ์

เมื่อคุณเปิดบทความ WordPress เพื่อแก้ไข คุณจะเห็นหน้าแบ่งออกเป็นส่วนต่างๆ (ส่วนใหญ่อยู่ในแถบด้านข้างทางด้านขวามือ)

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

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

กล่องเมตาของฟิลด์ที่กำหนดเอง เช่น 'แหล่งที่มา' (ที่เราเพิ่มไว้ในบทแนะนำเกี่ยวกับฟิลด์ที่กำหนดเอง) มักจะอยู่ใต้ตัวแก้ไขหลัก

การสร้าง Meta Box สำหรับประเภทโพสต์ที่กำหนดเองของเรา

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

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

ขั้นตอนที่ 1 – ลงทะเบียน Meta Box

ในการเพิ่มเมตาบ็อกซ์ในประเภทโพสต์ที่กำหนดเอง เราใช้ฟังก์ชัน add_meta_box ที่ WordPress จัดหาให้ นี่คือโครงสร้างของฟังก์ชันพร้อมอาร์กิวเมนต์ที่เราจะใช้:

 add_meta_box( $id, $title, $callback, $screen, $context )

สำหรับรหัสเฉพาะ เราจะใช้ is_vegan และสำหรับชื่อของเมตาบ็อกซ์ สตริง Is Vegan

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

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

โดยสรุปแล้ว การใช้พารามิเตอร์ที่กำหนดไว้เหนือโค้ดที่เราควรเพิ่มใน my-custom-post-type.php ควรมีลักษณะดังนี้:

 function my_metabox() { add_meta_box( 'is_vegan', 'Is Vegan', 'display_vegan_meta_box', 'recipes', 'side' ); } add_action( 'admin_init', 'my_metabox' );

อย่างที่คุณเห็น เราใช้ admin_init hook ซึ่งถูกทริกเกอร์ก่อน hook อื่น ๆ เมื่อผู้ใช้เข้าถึงพื้นที่ผู้ดูแลระบบ

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

ขั้นตอนต่อไปคือการเติมเนื้อหาที่ต้องการลงในช่อง

ขั้นตอนที่ 2 – แสดงเนื้อหาพื้นฐานของ Meta Box

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

โปรดดำเนินการและเพิ่มโค้ดด้านล่างภายใต้ฟังก์ชัน my_metabox :

 function display_vegan_meta_box( $recipe ) { ?> <span class="title">Vegan recipe?</span> <span class="content"> <label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" /> </label> </span> <?php }

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

ขั้นตอนที่ 3 – บันทึกค่า Meta Box ไปยังฐานข้อมูล

ในการบันทึกค่าฟิลด์อินพุตของ metabox เราใช้ save_post action hook ที่ WordPress มีให้ดังนี้:

 function update_vegan_box( $post_id ) { if( !current_user_can( 'edit_post' ) ) return; if ( 'recipes' == get_post_type() ) { if ( isset( $_POST['vegan_checkbox'] ) && $_POST['vegan_checkbox'] != '' ) { update_post_meta( $post_id, 'is_vegan', $_POST['vegan_checkbox'] ); }else { update_post_meta( $post_id, 'is_vegan', "no" ); } } } add_action( 'save_post', 'update_vegan_box' );

ภายในฟังก์ชัน update_vegan_bo x ที่มีอาร์กิวเมนต์ $post_id เราได้รวมเงื่อนไขบางประการไว้ ก่อนอื่นเราต้องการตรวจสอบว่าผู้ใช้มีสิทธิ์แก้ไขโพสต์หรือไม่ และต้องแน่ใจว่าเรากำลังแก้ไขประเภทโพสต์ recipes

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

ที่นี่เราใช้ฟังก์ชั่น update_post_meta WordPress update_post_meta( $post_id, $meta_key, $meta_value, $prev_value = '' )

ในอาร์กิวเมนต์ เรากำหนด post id, meta key, meta value ฟังก์ชันสามารถรับอาร์กิวเมนต์ได้อีกหนึ่งอาร์กิวเมนต์ $prev_value
ในกรณีที่เราต้องการตรวจสอบค่าก่อนหน้าก่อนที่จะอัปเดตและหากเท่ากันให้ดำเนินการและอัปเดต

ขั้นตอนที่ 4 – ปรับแต่งโค้ดเนื้อหา Meta Box

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

 function display_vegan_meta_box( $recipe ) { $is_value = esc_html( get_post_meta( $recipe->ID, 'is_vegan', true ) ); $checked; if ( $is_value == "yes" ) { $checked = "checked"; } else if ( $is_value == "no" ) { $checked = ""; } else { $checked="";} ?> <span class="title">Vegan recipe?</span> <span class="content"><label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" <?php echo $checked; ?> /> </label></span> <?php }

ดังนั้น อันดับแรก เราดึงค่า meta ของ is_vegan จากนั้นหากเหมาะสม ค่าที่ checked จะถูกส่งไปยังตัวแปร $checked และจะถูกสะท้อนในเอาต์พุต HTML

และนั่นแหล่ะ ตอนนี้เรามีเมตาบ็อกซ์ที่ใช้งานได้ซึ่งสามารถใช้เพื่อกำหนดว่าสูตรในโพสต์ที่เรากำหนดเองนั้นเป็นวีแก้นหรือไม่

บทสรุป

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

เช่นเดียวกับการเข้ารหัส WordPress ส่วนใหญ่ อาจใช้เวลาสักครู่เพื่อทำความคุ้นเคยกับการใช้เมต้าบ็อกซ์ หวังว่าข้อมูลข้างต้นจะเพียงพอสำหรับคุณในการเริ่มต้น มีความสุขในการเข้ารหัส!