วิธีเพิ่มตารางไดนามิกใน WordPress โดยไม่ต้องใช้ HTML

ครั้งสุดท้ายที่ฉันพยายามเพิ่มตารางในบล็อก WordPress ของฉัน ฉันลงเอยด้วยการทิ้งสิ่งทั้งหมดและใช้รายการหัวข้อย่อยแทน

เสียงคุ้นเคย?

ธีม WordPress ที่น่าทึ่งมากมายมาพร้อมกับความสามารถในการสร้างตารางที่ดูดี และแน่นอนว่ามันอาจดูดีในตอนแรก แต่คุณไม่สามารถทำอะไรกับมันได้มากนัก

ต้องการข้อมูลที่กรองได้? ไม่.

ต้องการให้ตารางตอบสนองต่ออุปกรณ์เคลื่อนที่หรือไม่ ไม่.

ต้องการนำเข้าข้อมูลจาก CSV หรือไม่? ไม่มีโอกาส

นี่คือข่าวดี:

ด้วยปลั๊กอินที่เหมาะสม คุณสามารถสร้างตารางไดนามิกที่ใช้งานได้สูง ประเภทของสิ่งที่ช่วยให้คุณสามารถแสดงข้อมูลที่กรองได้

พร้อมกับกราฟและทุกประเภท

เสียงดี? มาดูกันว่ามันสามารถทำได้ด้วย wpDataTables อย่างไร

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

ปลั๊กอินนี้ช่วยให้คุณสร้างตารางที่สวยงามโดยไม่ต้องใช้ความรู้ HTML

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

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

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

คุณสามารถใช้มันเพื่อ:

• แคตตาล็อกสินค้า
• ตารางเปรียบเทียบสินค้า
• รายการราคา
• การเก็บรวบรวมข้อมูลจากผู้ใช้
• ผลการแข่งขันกีฬา
• ติดตามความคืบหน้าของคุณสำหรับสิ่งที่เกี่ยวกับตัวเลข (เช่น รายงานรายได้ของบล็อก)

ความเป็นไปได้ไม่มีที่สิ้นสุด

การสร้างตารางตั้งแต่ต้นจนจบ: คำแนะนำทีละขั้นตอน

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

วิธีเริ่มต้นมีดังนี้

ขั้นตอนที่ 1 – เตรียมไฟล์ของคุณให้พร้อม

ด้านล่างนี้ ฉันได้สร้างตัวอย่างเอกสาร Excel สำหรับค่าใช้จ่ายแบบสุ่มจำนวนหนึ่ง ซึ่งรวมถึงหลายคอลัมน์ เช่น วันที่ วิธีการชำระเงิน และต้นทุน

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

ขั้นตอนที่ 2 – สร้างตารางใหม่

ไปที่ wpDataTables ทางด้านซ้ายของแดชบอร์ด WordPress ของคุณ

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

หลังจากคลิกปุ่ม "เพิ่มใหม่" คุณจะเห็นหน้าจอนี้ ซึ่งเป็นที่ที่คุณจะเริ่มต้นการตั้งค่าพารามิเตอร์ของตารางของคุณ เพื่อให้ทำงานและมีลักษณะตามที่คุณต้องการ:

ขั้นตอนที่ 3 – กำหนดคุณสมบัติของตารางของคุณ

ในสามส่วนแรกของหน้าการตั้งค่าตาราง คุณสามารถทำสิ่งต่อไปนี้:

• สร้างชื่อ
• เลือกว่าคุณต้องการแสดงชื่อตารางของคุณบนหน้าหรือไม่
• เลือกประเภทของแหล่งสัญญาณเข้าสำหรับตารางของคุณ

นี่คือการตั้งค่าตารางพื้นฐานที่สุดของคุณ

คลิกที่ "อัปโหลดไฟล์" และค้นหาเอกสารของคุณ ตารางที่คุณสามารถสร้างได้นั้นซับซ้อนเท่าที่คุณต้องการ

อย่างที่คุณเห็น ฉันได้ตั้งชื่อตารางที่เกี่ยวข้อง เลือกประเภทไฟล์ Excel จากกล่องดรอปดาวน์ และอัปโหลดไฟล์ของฉันไปยัง WordPress

ด้านล่างของหน้า คุณจะพบกับการตั้งค่าเพิ่มเติมเพื่อปรับแต่งตารางของคุณ:

เหล่านี้คือ:

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

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

เมื่อคุณเลือกตัวเลือกที่เหมาะสมกับประเภทของตารางที่คุณต้องการแสดงมากที่สุดแล้ว ก็ถึงเวลาคลิกปุ่ม "บันทึก"

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

ด้านล่างนี้ ฉันได้เพิ่มสีและแก้ไขประเภทคอลัมน์เป็นข้อความ ตัวเลข และสตริง

ขั้นตอนที่ 4 – บันทึกและคัดลอกรหัสย่อ

เมื่อคุณบันทึกตารางของคุณแล้ว ให้คลิก "ปิด" จากนั้นระบบจะนำคุณกลับไปที่หน้าแรกของปลั๊กอิน ตอนนี้คุณควรเห็นตารางที่คุณสร้าง ชื่อและประเภทของตาราง รหัสย่อสำหรับการป้อนลงในบทความหรือหน้าของคุณ และตัวเลือกในการทำสำเนา

ฉันต้องการแสดงตารางนี้ในหน้า ดังนั้นฉันต้องคัดลอกรหัสย่อแล้วไปที่หน้าที่ฉันต้องการแก้ไข

ขั้นตอนที่ 5 – เพิ่มรหัสย่อเพื่อโพสต์หรือหน้า

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

ขั้นตอนที่ 6 – เผยแพร่

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

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

คุณสามารถสร้างตารางอื่นใดได้บ้าง

คุณไม่ได้จำกัดอยู่แค่ตารางที่ใช้ CSV อย่างง่ายเท่านั้น WP Data Tables สามารถแสดงข้อมูลได้หลากหลายในหลายรูปแบบ

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

ตารางนี้เป็น MySQL ที่มีตัวกรองเพื่อจัดเรียงเนื้อหาตามความต้องการของผู้ใช้:

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

คุณไม่ จำกัด เฉพาะไฟล์ CSV เท่านั้น WP Data Tables ยังอนุญาตให้ใช้ไฟล์ที่ใช้ Excel ได้ ทำให้คุณสามารถใช้คุณสมบัติเฉพาะมากมายที่มาพร้อมกับมัน:

คุณสมบัติ wpDataTable อื่น ๆ ที่ควรค่าแก่การกล่าวถึง

• ตัวช่วยสร้าง wpDataChart – ให้คุณแปลงข้อมูลของคุณเป็นกราฟหรือแผนภูมิในไม่กี่ขั้นตอนง่ายๆ ปัจจุบันรองรับเอ็นจิ้นการเรนเดอร์ 3 ตัว – Google Charts, Highcharts และ Chart.js ค้นหาเอกสารเพิ่มเติมได้ที่นี่
• การจัดรูปแบบตามเงื่อนไข – ช่วยให้คุณสามารถเน้นเซลล์ แถว และคอลัมน์ตามเนื้อหาได้ มีประโยชน์โดยเฉพาะอย่างยิ่งถ้าตารางเป็นตัวเลขทั้งหมด ค้นหาเอกสารเพิ่มเติมได้ที่นี่
• คอลัมน์สูตร – ช่วยให้คุณสามารถเพิ่มคอลัมน์ที่สามารถใช้ในการคำนวณตัวเลขตามตัวเลขที่กำหนดไว้ในเซลล์อื่นๆ ค้นหาเอกสารเพิ่มเติมได้ที่นี่
• คอลัมน์ วันที่และเวลา – ใช้สำหรับเซลล์ที่มีทั้งวันที่และเวลา พวกเขาจะปรากฏโดยอัตโนมัติในรูปแบบที่คุณตั้งค่าไว้บนหน้าการตั้งค่า ค้นหาเอกสารเพิ่มเติมได้ที่นี่
• แถวผลรวม/ผลรวม – ใช้สำหรับคอลัมน์ตัวเลข ช่วยให้คุณสามารถคำนวณผลรวมของค่าทั้งหมดได้ ค้นหาเอกสารเพิ่มเติมได้ที่นี่
• ตัว สร้างรายงาน – เป็นส่วนเสริมสำหรับ wpDataTables ตัวสร้างรายงานจะสร้างเอกสารและสเปรดชีตเพื่อกรอกเทมเพลตของคุณด้วยข้อมูลจริงจากไซต์ WordPress ของคุณ ค้นหาเอกสารเพิ่มเติมได้ที่นี่
• ตารางรายละเอียดหลัก – เป็นโปรแกรมเสริมสำหรับ wpDataTables ซึ่งช่วยให้คุณและผู้เยี่ยมชมไซต์ของคุณสามารถดูรายละเอียดสำหรับแต่ละแถวได้ด้วยการคลิกง่ายๆ ค้นหาเอกสารเพิ่มเติมได้ที่นี่

ความคิดสุดท้าย

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

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

คุณสามารถเปลี่ยนตารางใดๆ ของคุณให้เป็นแผนภูมิหรือกราฟ และอื่นๆ ได้

ตอนนี้ได้เวลาเริ่มต้นบนโต๊ะของคุณเอง – สนุก!

การอ่านที่เกี่ยวข้อง: 5 ปลั๊กอินตารางตอบสนองที่ทรงพลังและมือถือสำหรับ WordPress

การ เปิดเผยข้อมูล: โพสต์นี้ได้รับการสนับสนุน แต่ความคิดเห็นของเราเป็นความคิดเห็นของเราเอง