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

ฟังดูคุ้นๆ ไหม

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

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

ต้องการให้ตารางตอบสนองต่อมือถือหรือไม่ ไม่

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

ข่าวดี:

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

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

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

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

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

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

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

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

คุณสามารถใช้สำหรับ:

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

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

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

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

ต่อไปนี้เป็นวิธีการเริ่มต้น:

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

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

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

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

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

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

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

ขั้นตอนที่ 3 – กำหนดคุณลักษณะตารางของคุณ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

คุณสามารถสร้างตารางอะไรได้อีกบ้าง

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

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

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

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

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

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

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

ข้อคิดสุดท้าย

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

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

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

ตอนนี้ ถึงเวลาเริ่มต้นสร้างตารางของคุณเองแล้ว ขอให้สนุก !

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

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