เริ่มต้นใช้งาน WordPress Custom Fields

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

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

ดังนั้นคุณจะเพิ่มข้อมูลเมตาของคุณเองลงในโพสต์หรือเพจได้อย่างไร ง่าย... ใช้ฟิลด์ที่กำหนดเองของ WordPress!

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

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

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

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

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

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

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

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

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

เพิ่มฟิลด์ที่กำหนดเองโดยใช้ WordPress Custom Fields

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

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

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

ขั้นตอนต่อไป – การเพิ่มฟิลด์ที่กำหนดเองของคุณ

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

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

โฮสต์เว็บไซต์ของคุณด้วย Pressidium

รับประกันคืนเงิน 60 วัน

ดูแผนของเรา

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

ครั้งหน้าคุณไม่จำเป็นต้องคลิกข้อความ "ป้อนใหม่" และพิมพ์ "แหล่งที่มา" ด้วยตนเอง ตอนนี้จะปรากฏในรายการแบบหล่นลงของค่า

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

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

การแสดงค่าฟิลด์ที่กำหนดเอง

เพื่อแสดงค่าฟิลด์ที่กำหนดเองใหม่ของเราในโพสต์ของเรา เราต้องเพิ่มโค้ดบางส่วนลงในไฟล์เทมเพลตของโพสต์เดียว โดยปกติ จะพบได้ในไฟล์ singular.php ซึ่งอยู่ในโฟลเดอร์หลักของธีม ในกรณีของเรา (ธีมยี่สิบยี่สิบ) จะอยู่ในไฟล์ /wp-content/themes/twentytwenty/template-parts/content.php

เราจะใช้ฟังก์ชันหลัก get_post_meta ที่ WordPress จัดเตรียมไว้เพื่อดึงข้อมูลเมตาฟิลด์ของโพสต์จากฐานข้อมูล โครงสร้างของฟังก์ชันมีดังนี้:

 get_post_meta( $post_id, $key, $single )

อาร์กิวเมนต์ที่จำเป็นเพียงอย่างเดียวคือ $post_id อาร์กิวเมนต์ $key คือเมตาคีย์ที่จะดึงข้อมูล และอาร์กิวเมนต์ $single กำหนดว่าจะมีการคืนค่าเดียวหรือไม่ และจะไม่มีประโยชน์หากไม่มีการกำหนด $key เลย

หากประกาศเพียง $post_id ผลลัพธ์จะเป็นอาร์เรย์ที่มีคีย์ทั้งหมดที่เกี่ยวข้องกับโพสต์นั้นๆ ดังนั้น หากคุณเพียงแค่ใส่ get_post_meta( $post_id ) คุณจะได้รับสิ่งนี้:

 Array ( [field1_key] => Array ( [0] => value1 ) [field2_key] => Array ( [0] => value2 ) [field3_key] => Array ( [0] => value3 ) )

หากคุณใช้ get_post_meta( $post_id, 'filed1_key' ) คุณจะได้รับบางอย่างเช่น Array ( [0] => value1 ) และหากคุณใช้ get_post_meta( $post_id, 'filed1_key', true ) เหมือนที่เราทำก่อนที่คุณจะได้รับ value1 .

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

ดังนั้น เมื่อคำนึงถึงทั้งหมดนี้แล้ว โค้ดที่เราต้องใช้จะเป็นดังนี้:

 $source = get_post_meta( get_the_ID(), 'source', true); if( !empty( $source ) ) { echo '<h3>Source: ' . $source . '<h3>'; } ?>

เราจะแทรกโค้ดหลังเนื้อหาของโพสต์ เพื่อให้ภายใน div ของ HTML ที่มีคลาส "entry-content" โค้ดจะมีลักษณะดังนี้:

 <div class="entry-content"> <?php if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) { the_excerpt(); } else { the_content( __( 'Continue reading', 'twentytwenty' ) ); } $source = get_post_meta( get_the_ID(), 'source', true); if( !empty( $source ) ) { echo '<h3>Source: ' . $source . '<h3>'; } ?> </div><!-- .entry-content -->

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

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

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

การเพิ่มฟิลด์ที่กำหนดเองโดยใช้ Plugin

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

สร้างฟิลด์แบบกำหนดเองของคุณโดยใช้ACF

หลังจากติดตั้งและเปิดใช้งานปลั๊กอิน ACF ให้ไปที่ 'ฟิลด์ที่กำหนดเอง > กลุ่มฟิลด์' ซึ่งจะแสดงฟิลด์ที่ลงทะเบียนไว้

กดปุ่ม 'เพิ่มใหม่' เพื่อเริ่มสร้างฟิลด์ของคุณ สิ่งเหล่านี้สามารถเพิ่มลงในกลุ่มได้

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

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

ยอดเยี่ยมใช่มั้ย?

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

ตัวอย่างการทำงานโดยใช้ฟิลด์กำหนดเองขั้นสูง

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

อย่างที่คุณเห็นไม่ใช่ทุกช่องที่ใช้ประเภทเดียวกัน

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

ฟิลด์หน้าปกควรเป็นฟิลด์เลือกค่าเดียวพร้อมตัวเลือกที่กำหนดไว้ล่วงหน้าเช่นกัน

ไปแก้ไขโพสต์หนังสือกันเถอะ ฟิลด์ต่างๆ จะถูกจัดกลุ่มอย่างสวยงามในแถบด้านข้าง

หากคุณต้องการเปลี่ยนตำแหน่งของกลุ่มฟิลด์ โปรดไปที่การตั้งค่าที่เกี่ยวข้อง:

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

แสดงฟิลด์กำหนดเอง ACF ของคุณ

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

• get_field() – ส่งกลับค่าของฟิลด์เฉพาะ
• the_field() – แสดงค่าของฟิลด์เฉพาะ

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

ดังนั้น ในการแสดงผลฟิลด์แบบกำหนดเองของคุณในเทมเพลตมุมมองโพสต์ คุณจะต้องเพิ่มโค้ดบางส่วนให้มากที่สุดเท่าที่เราทำเมื่อใช้ฟิลด์แบบกำหนดเองของ WordPress ที่เป็นค่าเริ่มต้น อย่างไรก็ตาม คราวนี้เราจะใช้ฟังก์ชันของปลั๊กอิน ACF เนื่องจากเราใช้ธีม Twenty Twenty เราจึงต้องแก้ไขไฟล์ twentytwenty/template-parts/ ภายใต้โฟลเดอร์ หลังจากปิดส่วนด้านในเราได้เพิ่มบรรทัดต่อไปนี้:

 <div class="entry-content"> <?php if( get_field( 'author' ) ) { echo '<p><b>Author:</b> ' . get_field( 'author' ) . '<p>'; } if( get_field( 'genre' ) ) { echo '<p><b>Genre:</b> ' . get_field( 'genre' ) . '<p>'; } if( get_field( 'cover' ) ) { echo '<p><b>Cover:</b> ' . get_field( 'cover' ) . '<p>'; } ?> </div>

ในมุมมองด้านหน้า เราสามารถเห็นฟิลด์ที่กำหนดเองได้แล้ว

อย่างไรก็ตาม ฟิลด์ประเภทแสดงไม่ถูกต้อง นั่นเป็นเพราะมันมีหลายค่า ดังนั้นฟังก์ชัน get_field จะส่งกลับอาร์เรย์ ในการแก้ไขปัญหานี้ เราจะต้องแปลงอาร์เรย์เป็นชุดของค่าต่างๆ มันง่ายใน PHP โดยใช้ฟังก์ชัน implode()

 <div class="entry-content"> <?php if( get_field( 'author' ) ) { echo '<p><b>Author:</b> ' . get_field( 'author' ) . '<p>'; } if( get_field( 'genre' ) ) { echo '<p><b>Genre:</b> ' . implode( ", ", get_field( 'genre' ) ) . '<p>'; } if( get_field( 'cover' ) ) { echo '<p><b>Cover:</b> ' . get_field( 'cover' ) . '<p>'; } ?> </div>

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

 [acf field="MY_CUSTOM_FIELD"/]

แทนที่ MY_CUSTOM_FIELD ด้วยชื่อของฟิลด์ และนั่นควรจะทำงานได้อย่างสมบูรณ์

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

บทสรุป

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

ดูสิ่งนี้ด้วย

ตารางรายการผู้ดูแลระบบ WordPress: เพิ่มตัวกรองที่กำหนดเอง
การเพิ่มฟิลด์ที่กำหนดเองให้กับรายการเมนู WordPress