Advanced Custom Fields เป็นปลั๊กอินสำหรับสร้าง Field เก็บข้อมูลต่างๆ ที่เราสามารถนำไปแสดงผลหน้าเว็บ, ประมวลผล, คิดคำนวน รูปแบบ Field ก็จะเป็น Field มาตรฐานของ HTML5 ทั่วไป สามารถเลือกใช้ตามความเหมาะสมของประเภทการใช้งาน
ทำการติดตั้งปลั๊กอิน Advanced Custom Fields
ลองสร้างฟิลใหม่ไปที่ Custom Fields >> Add New
ตั้งชื่อ Field Gruop ว่า Project Info
จากนั้นคลิกที่ +Add Field
จะมี option แสดงขึ้นมาดังภาพ ทำตามขั้นตอนดังรูป
Field Label : Year
Field Name : year (เมื่อเราใส่ข้อความตรง Field Label แล้ว ช่องนี้จะใส่เหมือนกันอัตโนมัติ แต่จะเป็นตัวพิมพ์เล็กทั้งหมด เราสามารถเปลี่ยนภายหลังได้)
Field Type : Text
จากนั้น เพิ่มฟิลใหม่อีก
สร้างฟิลใหม่ชื่อว่า Color
จากนั้นเลือก Field Type : Color Picker
ปลั๊กอินนี้ หากต้องการให้ Field Group เราไปใช้งานที่ไหน เราต้องกำหนด Location ก่อน
ในที่นี้ เราจะให้ Field Group เราไปใช้งานที่ CPT Projects (ที่เราสร้างไว้บทที่แล้ว)
ดังนั้นเราจะกำหนดให้ Rules : Show this field group if >> Post Type
>> is Equal to <<……>> project <<
กำหนด Style เป็น Standard
เมื่อเสร็จแล้วคลิกที่ เผยแพร่
ลองไปดูหน้าที่เราสร้างไว้ใน Projects
ข้างล่างจะมี ACF ปรากฎให้เราใช้งานแล้ว
ในฟิล Year นั้น Field Type ที่ใช้ก็ควรที่จะเป็นตัวเลข
หรือเราสามารถใช้แบบตัวเลือก (Select) เพื่อความเหมาะสมในการเพิ่มข้อมูลได้
เมื่อเลือกเป็น Select แล้ว เราสามารถเพิ่ม Choices ให้เป็นตัวเลือกของฟิลได้ (เหมือนการเพิ่ม <option>……..</option>)
เมื่อเปลี่ยนแปลงการตั้งค่าแล้วคลิกที่ อัพเดท
หน้าแก้ไข ACF จะเปลี่ยนแปลงไปตามการตั้งค่าของเราแล้ว
ต่อไปจะเป็นขั้นตอนการนำค่าที่เราเก็บไว้ใน ACF ออกมาแสดงผล
กลับไปดู Template Hierarchy จะเห็นว่า โพสต่างๆจะอยู้ใน Flow ของ Singular Page และ CPT จะอยู่ใน Single Post Page >> Custom Post
ซึ่งหน้าสุดท้ายที่รองรับการทำงานของโพสคือหน้า single.php
แต่ WordPress กำหนดไว้ว่า เมื่อมีหน้าที่สำคัญกว่าวางก่อน Hierarchy ระบบจะ Flow ไปเรียกใช้งานหน้านั้นก่อนเสมอ
ซึ่งการที่จะเรียกใช้ CPT มีกำหนดไว้ว่า หน้านั้นต้องมีชื่อดังนี้
single-ชื่อของ CPT.php >>> single-project.php
ดังนั้นเราต้องทำการคัดลอกหน้า single.php เป็น Template หลักโดยการ Duplicate (ทำสำเนาซ้ำ) ในโปรเจ็กของเรา
จากนั้น ตั้งชื่อใหม่เป็น single-project.php (เหมือนที่อธิบายไปข้างต้น)
เปิดไฟล์ใหม่ที่แก้ไขชื่อแล้ว ลองพิมพ์คำว่า TEST PROJECT ลงไปดังรูป แล้วกด Save
จะเห็นว่าคำว่า TEST PROJECT ปรากฎขึ้นดังรูป แสดงว่าหน้านี้ใช้งานได้
ไปที่ https://www.advancecustomfields.com เพื่อเข้าไปศึกษาการเรียกใช้งานข้อมูลที่ถูกเก็บไว้ในฟิล
ลองนำรูปแบบการแสดงผล เขียนลงไปในหน้าโค๊ดดังรูป
จะเห็นว่า Year : 2017 แสดงผลในจุดที่เราต้องการให้แสดงผลแล้ว
เขียนขึ้นอีกหนึ่งบรรทัด โดยค่าต่างๆจะต้องอ้างอิงกับ Field Name เป็นหลัก
จะเห็นว่า เมื่อแสดงผลออกมาแล้ว จะปรากฎออกมาเป็น String (ตัวอักษร) หากต้องการนำไปใช้งาน ก็สามารถทำได้
ลองเขียน Code เพิ่มลงไปดังรูป เพื่อให้เห็นการเปลี่ยนแปลง จากนั้นทำการ Save
จะเห็นว่าสีตัวอักษรเปลี่ยนไปตาม การตั้งค่า ค่าสีที่เราเรียกมาจาก ACF แล้ว
และเรายังสามารถเรียกใช้การแสดงผลต่างๆได้อีก ในแต่ละ Field ก็จะมีการเรียกใช้งานต่างออกไป สามารถศึกษาได้จากคู่มือของเว็บไซต์