วิธีสร้างเมตาบ็อกซ์ WordPress แบบกำหนดเอง

กล่องเมตา WordPress แบบกำหนดเองคืออะไร?

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

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

วิธีสร้างเมตาบ็อกซ์ WordPress แบบกำหนดเอง

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

ใช้ CSS Sprites เพื่อทำให้โลโก้ของคุณตอบสนองได้

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

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

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

การพัฒนาเมตาบ็อกซ์แบบกำหนดเอง

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

Codex คือแนวทางของคุณ

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

ทดสอบในเครื่องก่อน

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

ขั้นตอนที่หนึ่ง: สร้างและใส่หัวเรื่องลงในปลั๊กอิน

การสร้างปลั๊กอินอาจฟังดูซับซ้อน แต่ไม่ใช่ทุกปลั๊กอินจะต้องมีหลายร้อยบรรทัด ปลั๊กอินสามารถทำได้ง่ายมาก และนี่เป็นตัวอย่างที่ดีของสิ่งนั้น หากคุณไปที่ โฟลเดอร์ wp-content คุณจะเห็น โฟลเดอร์ปลั๊กอิน สร้างโฟลเดอร์ใหม่ชื่อ custom-post-meta-box โดยมีไฟล์ custom-post-meta-box.php นี่คือไฟล์ที่คุณจะใช้งาน

เมื่อสร้างปลั๊กอิน ตรวจสอบให้แน่ใจว่าข้อมูลนี้ปรากฏก่อนโค้ดที่กำหนดเองใดๆ ของคุณ:

<?php

/*

Plugin Name: Custom Meta Box

Plugin URI:  www.yourwebsite.com

Description: Creates a meta box in WordPress

Version:     1.0.0

Author:      Your Name

Author URI:  www.yourwebsite.com

License: GPL2

*/

เปิดใช้งาน Plugin

แม้ว่าเราจะยังไม่ได้ใส่โค้ดใดๆ ลงไป แต่เราสามารถเปิดใช้งานปลั๊กอินได้โดยไปที่ Plugins และค้นหา Custom Meta Box และเลือก Activate โปรดทราบว่ายังไม่มีอะไรเปลี่ยนแปลงเลย

ตัวเลือก CSS

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

function cmb_add_admin_styles() {

wp_enqueue_style('cmb-admin', plugins_url( 'custom-post-meta-box/css/admin.css' ) );

}

add_action( 'admin_enqueue_scripts', 'cmb_add_admin_styles' );

ขั้นตอนที่สอง: เพิ่มเมตาบ็อกซ์

ฟังก์ชัน add_meta_box ใช้เพื่อสร้างเมตาบ็อกซ์ที่กำหนดเอง ฟังก์ชันนี้มีหน้าที่ในการลงทะเบียนและแสดงเมตาบ็อกซ์ที่กำหนดเองเท่านั้น

function cmb_add_meta_box() {

add_meta_box(

'custom_post_metabox',

'Our Products',

'cmb_display_meta_box',

'post',

'normal',

'high'

);

}

add_action( 'add_meta_boxes', 'cmb_add_meta_box' );

ดูที่แดชบอร์ด ชื่อ "ผลิตภัณฑ์ของเรา" กำลังปรากฏขึ้น แต่ไม่มีช่องข้อความให้เราป้อนข้อความ

ขั้นตอนที่สาม: เพิ่มฟิลด์เมตาบ็อกซ์ใน admin

เราจำเป็นต้องตรวจสอบให้แน่ใจว่ามีป้ายกำกับและฟิลด์สำหรับข้อมูล โดยใช้ html สิ่งนี้เป็นไปได้

function cmb_display_meta_box( $post ) {

wp_nonce_field( plugin_basename(__FILE__), 'cmb_nonce_field' );

$html = '<label id=&quot;product-title&quot; for=&quot;product-title&quot;>';

$html .= 'Product Title';

$html .= '</label>';

$html .= '<input type=&quot;text&quot; id=&quot;product-title&quot; name=&quot;product-title&quot; value=&quot;' . get_post_meta( $post->ID, 'product-title', true ) . '&quot; placeholder=&quot;What is the Product Title?&quot; />';

echo $html;

}

// this echoes a single stream of html

ดูว่าสิ่งต่าง ๆ ถูกห่ออย่างไรใน <label> ? เราจะได้เห็นข้อความอธิบาย “Product Title” ซึ่งช่วยให้ผู้ใช้เข้าใจว่าฟิลด์คืออะไรและควรป้อนข้อมูลประเภทใด นอกจากนี้ โปรดทราบด้วยว่ามีข้อความตัวแทน ซึ่งยังเพิ่มข้อมูลที่เป็นประโยชน์อีกด้วย

ข้อมูลของคุณอาจไม่กว้างเท่า css แบบกำหนดเองบางส่วนถูกทำขึ้นเพื่อให้สามารถแสดงข้อความตัวแทนทั้งหมดได้ ฉลากมีความกว้าง 100%

ขั้นตอนที่สี่: การบันทึกข้อมูลและความสำคัญของการใช้ nonce

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

function cmb_save_meta_box_data( $post_id ) {

if ( cmb_user_can_save( $post_id, 'cmb_nonce_field' ) ) {

if ( isset( $_POST['product-title'] ) && 0 < count( strlen( trim( $_POST['product-title'] ) ) ) ) {

$product_title = stripslashes( strip_tags( $_POST['product-title'] ) );

update_post_meta( $post_id, 'product-title', $product_title );

}

}

}

add_action( 'save_post', 'cmb_save_meta_box_data' );

function cmb_display_product( $content ) {

if ( is_single () ){

$html = 'The Product Title is: ' . get_post_meta( get_the_ID(), 'product-title', true );

$content .= $html;

}

return $content;

}

add_action('the_content', 'cmb_display_product');

function cmb_user_can_save( $post_id, $nonce ) {

$is_autosave = wp_is_post_autosave( $post_id );

$is_revision = wp_is_post_revision( $post_id );

$is_valid_nonce = ( isset( $_POST[ $nonce ] ) && wp_verify_nonce( $_POST [ $nonce ], plugin_basename( __FILE__ ) ) );

return ! ( $is_autosave || $is_revision ) && $is_valid_nonce;

}

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

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

การอ่านและการบ้านเพิ่มเติม

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

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

• ข้อมูลเพิ่มเติมเกี่ยวกับ nonces
• ปลั๊กอิน Meta Box
• ตัวเลือกสำหรับฟังก์ชัน add_meta_box