7-2: การสร้างฟีลด์ข้อมูล ด้วยปลั๊กอิน Advanced Custom Fields


 

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 ก็จะมีการเรียกใช้งานต่างออกไป สามารถศึกษาได้จากคู่มือของเว็บไซต์

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments