วิธีแสดงตาราง HTML ของ WordPress จากข้อมูลที่กรอกใน Gravity Forms

WP Table Manager มี การผสานรวมที่ยอดเยี่ยมกับ Gravity Forms ซึ่งช่วยให้เราสร้างตาราง HTML โดยอิงจากข้อมูลที่ป้อน ทำให้เราสามารถกรอง ออกแบบ และแสดงผลข้อมูลพร้อมการซิงค์ข้อมูลแบบเรียลไทม์ได้อย่างดีที่สุด

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

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

สร้างและปรับแต่งตาราง HTML ของ WordPress พร้อมช่องกรอกข้อมูล

สิ่งสำคัญที่ควรทราบคือ เราจำเป็นต้องใช้ Gravity Forms และ WP Table Manager เพื่อทำตามบทช่วยสอนนี้

มาเริ่มกันที่การสร้างตารางกันก่อน เราได้สร้างแบบฟอร์ม Gravity Forms ที่มีข้อมูลบางส่วนไว้แล้วสำหรับใช้ในบทเรียนนี้

เมื่อแบบฟอร์มของเราพร้อมแล้ว เราต้องไปที่ WP Table Manager > All tables แล้วคลิกที่ + Create หากเราติดตั้ง Gravity Forms ไว้ ตารางจาก Gravity Form จะปรากฏขึ้น ให้คลิกที่ตารางนั้น

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

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

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

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

การเรียงลำดับและตัวกรองจะปรากฏเฉพาะที่ด้านหน้าของเว็บไซต์เท่านั้น ดังนั้นเราควรเพิ่มตารางลงในหน้า/บทความของเราเพื่อให้เห็นการแสดงผล การเพิ่มตารางทำได้ง่ายๆ เพียงแค่ค้นหาบล็อกตาราง WP Table Manager แล้วเพิ่มลงในบทความ/หน้าของเรา

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

สำหรับบทเรียนนี้ ฉันจะตั้งค่าแบบอักษรทั้งหมดให้เป็นแบบเข้ม และจะใช้ Theme > Alternate Colors ซึ่งจะช่วยให้การสร้างตารางของเราเร็วขึ้นอีกด้วย

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

เสร็จเรียบร้อย! ผลงานของเราจะถูกแสดง และตัวเลือกในการปรับแต่งตารางจะช่วยให้เราปรับให้เข้ากับธีมใดก็ได้!

จากข้อมูลในแบบฟอร์มแรงโน้มถ่วงไปจนถึงแผนภูมิ

เราอาจคิดว่า WP Table Manager จะอนุญาตให้เราสร้างตารางจากข้อมูลที่ป้อนเข้าไปเท่านั้น แต่คำตอบคือไม่ใช่! เรายังสามารถสร้างแผนภูมิจากข้อมูลเหล่านั้นได้ด้วย และทำได้ง่ายๆ เพียงแค่คลิกที่ แผนภูมิ > สร้างแผนภูมิจาก ข้อมูล

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

ในส่วนแรกของแผงด้านข้าง เราสามารถเลือกธีม และเลือกข้อมูลและสีที่จะใช้ได้

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

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

ขั้นตอนการเผยแพร่จะคล้ายกับการแสดงตารางทั่วไป เราสามารถใช้โปรแกรมสร้างหน้าเว็บใดก็ได้ร่วมกับบล็อกแผนภูมิ WP Table Manager (ซึ่งมีอยู่ในโปรแกรมสร้างหน้าเว็บหลักๆ ทุกโปรแกรม)

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

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

เริ่มใช้งาน Gravity Forms และ WP Table Manager ได้เลย

อย่างที่คุณเห็น WP Table Manager + Gravity Forms เป็นการผสมผสานที่ลงตัวอย่างยิ่งในการจัดระเบียบข้อมูลและรายการต่างๆ ของเรา เรามีวิธีการแสดงผลมากมาย และการผสานรวมก็ง่ายดายเพียงแค่คลิกปุ่มเดียว สุดยอดไปเลยใช่ไหม? คุณรออะไรอยู่ รีบไป ที่นี่ และดาวน์โหลด WP Table Manager เลยตอนนี้