วิธีสร้างและใช้ฟิลด์ที่กำหนดเองใน WordPress

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

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

การเพิ่มฟิลด์ที่กำหนดเองให้กับโพสต์

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

1. ไปที่หน้าจอตัวแก้ไขโพสต์และเลือก "ฟิลด์ที่กำหนดเอง"

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

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

3. เพิ่มคีย์ ซึ่งในกรณีนี้คือ “ประเภทการออกกำลังกาย” เราจะใช้ช่องนี้เพื่อเพิ่มรายละเอียดเฉพาะในโพสต์ คลิกที่ "Enter new" และพิมพ์คีย์ลงในฟิลด์

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

5. บันทึกโพสต์

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

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

เมื่อสองสามปีก่อน ฉันกำลังมองหาวิธีค้นหาโพสต์และแสดงตำแหน่งที่เขียนโพสต์บน Google Map ในการวิจัยของฉัน ฉันบังเอิญไปเจอบล็อกโพสต์เกี่ยวกับวิธีสร้างร้านร...

กำลังแสดงฟิลด์ที่กำหนดเองบนโพสต์

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

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

หมายเหตุ: การปรับแต่งเหล่านี้ควรทำในธีมลูก และเราจะใช้ไฟล์ single.php และเช่นเคย การปรับแต่งเช่นนี้จะได้รับการทดสอบที่ดีที่สุดในสภาพแวดล้อมการพัฒนา

1. เปิดไฟล์ single.php และเพิ่มโค้ดนี้นอกลูป WordPress:

<?php the_meta(); ?>

มันจะแสดงบางอย่างเช่นนี้:

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

<div id="primary" class="content-area">
     <main id="main" class="site-main" role="main">

วิธีการนี้จะทำงานเพื่อแสดงฟิลด์ที่กำหนดเองอื่นๆ ที่คุณสร้างขึ้นด้วย

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

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

นี่คือตัวอย่างที่ดูเหมือนกับสองฟิลด์ที่กำหนดเองที่แตกต่างกัน:

• ประเภทของการออกกำลังกาย: Zumba
• ช่วงเวลาของวัน: ตอนเช้า

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

ul.post-meta li {
	color: #898989;
	list-style-type: none;
}

ul.post-meta li span.post-meta-key {
	color: #1fc3d2;
	font-weight: bold;
}

การปรับแต่งฟิลด์ที่กำหนดเองเพิ่มเติม

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

สำหรับตัวอย่างนี้ สิ่งต่างๆ ได้รับการแก้ไขเล็กน้อย คีย์ได้รับการปรับให้ง่ายขึ้นเป็น "แบบฝึกหัด" เพื่อให้สามารถเพิ่มลงในเทมเพลตได้ง่ายขึ้นและเพิ่มข้อมูลโค้ดในไฟล์ content.php ของธีมย่อยเพื่อให้ปรากฏในเนื้อหาโพสต์ แทนที่จะเป็นก่อนหรือหลัง .

<?php $exercises = get_post_meta($post->ID, 'exercises', false); ?>
<h3>Today’s exercise:</h3>
<ul>
<?php foreach($exercises as $exercise) {
echo '<li>'.$exercise.'</li>';
} ?>
</ul>

ฟิลด์แบบกำหนดเองจะแสดงอยู่ด้านล่างของหัวข้อที่อ่านว่า “แบบฝึกหัดของวันนี้:” ในรูปแบบรายการ สิ่งนี้ถูกตั้งค่าเป็น <h3> แต่สามารถปรับให้เป็นลักษณะหัวเรื่องหรือย่อหน้าอื่นได้อย่างง่ายดาย หากคุณไม่ต้องการให้อยู่ในรูปแบบรายการ ก็สามารถจัดโครงสร้างได้ตามต้องการ

ฟิลด์กำหนดเองแบบมีเงื่อนไข

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

<?php $exercises = get_post_meta($post->ID, 'exercises', true); ?>

<h3>Today’s exercise:</h3> 
<ul>
<?php if ($exercises) { ?> 

<?php echo '<li>' .$exercises. '</li>'; ?>

<?php } //if there is nothing for exercises then display

else { ?>

<li>Today was a rest day.</li>

<?php } ?>
</ul>

ปลั๊กอินฟิลด์กำหนดเองขั้นสูง

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

กลุ่มภาคสนาม

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

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

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