วิธีสร้างตารางใน WordPress โดยใช้ Elementor และ TablePress

Rifat Jan 12, 2024

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

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

TablePress ถูกใช้กันอย่างแพร่หลายที่สุด สร้างตารางด้วยโปรแกรมแก้ไขภาพและผสานรวมเข้ากับงานเขียนของคุณได้อย่างราบรื่น ความจริงที่ว่ามีการติดตั้งมากกว่า 700,000 ครั้งและคะแนนรีวิวเฉลี่ย 4.5 ดาว แสดงให้เห็นว่ามันมีประสิทธิภาพที่น่าชื่นชม

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

สร้างเว็บไซต์ที่น่าทึ่ง

ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด

เริ่มเลย

เพิ่มตารางลงใน WordPress

เรามาพูดถึงปลั๊กอินที่เราจะใช้ก่อนเริ่มใช้งานจริงของโพสต์นี้

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

  • นำเข้าข้อมูลจากหลายรูปแบบ นอกจากจะทำให้สร้างตารางได้ง่ายแล้ว TablePress ยังให้คุณนำเข้าข้อมูลจากแหล่งที่มาที่หลากหลาย (Excel, CSV, HTML และ JSON) ข้อมูลสเปรดชีตของคุณจะพร้อมใช้งานโดยไม่จำเป็นต้องป้อนข้อมูลด้วยตนเอง
  • ความสามารถในการส่งออก–และในทางกลับกัน คุณสามารถส่งออกตารางของคุณจาก TablePress ไปยังไฟล์ประเภทต่างๆ ได้มากมาย สิ่งนี้ให้อิสระแก่คุณในการคัดลอกและวางข้อมูลลงในสเปรดชีต Excel หรือใช้ในลักษณะอื่นที่คุณเห็นว่าเหมาะสม
  • ความสามารถในการขยาย–นักพัฒนาของ TablePress ได้สร้างส่วนขยายจำนวนหนึ่งนอกเหนือจากปลั๊กอินหลัก คุณสามารถเพิ่มตัวกรองคอลัมน์ ตัวเลือกการส่งออก PDF และอื่นๆ ลงในตารางของคุณด้วยความช่วยเหลือ ในบทสรุปของบทความเราจะหารือเรื่องนี้ต่อไป

สร้างตารางใน WordPress ด้วย TablePress & Elementor

เราจะเริ่มต้นด้วยพื้นฐานของการใช้ปลั๊กอิน TablePress เพื่อสร้างตารางใหม่ใน WordPress

ติดตั้ง TablePress

โดยปกติแล้ว การตั้งค่า โปรแกรมเสริม TablePress ถือเป็นลำดับแรกของธุรกิจ เป็นไปได้ในลักษณะเดียวกับที่คุณติดตั้งปลั๊กอิน WordPress อื่นๆ สิ่งที่คุณต้องทำคือไปที่ปลั๊กอิน > เพิ่มใหม่ พิมพ์ชื่อปลั๊กอินในแถบค้นหา จากนั้นคลิกติดตั้ง

อย่าลืมเปิดปลั๊กอินหลังจากที่คุณอัปโหลดไปยังไซต์ของคุณแล้ว

เพิ่มตารางใหม่

เมื่อเปิดใช้งาน TablePress ตัวเลือกใหม่จะปรากฏในเมนูการดูแลระบบ WordPress เมื่อคุณเลือกแล้ว คุณจะถูกนำมาที่นี่

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

เลือกปุ่มเพิ่มใหม่เพื่อสร้างตารางใหม่ เมื่อทำเช่นนั้น คุณจะมาถึงสถานที่ต่อไปนี้:

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

เติมตารางด้วยเนื้อหา

ต่อไปนี้ คุณสามารถเริ่มป้อนข้อมูลลงในเซลล์ของตารางได้ คุณไม่น่าจะมีปัญหากับเรื่องนี้หากคุณมีประสบการณ์ในการใช้สเปรดชีต

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

กำหนดค่าตัวเลือกขั้นสูง

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

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

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

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

ในตอนท้ายสุด คุณจะพบชุดปุ่มสำหรับปรับแง่มุมต่างๆ ของไลบรารี JavaScript ของตาราง

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

แสดงตารางบนเว็บไซต์ของคุณ

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

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

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

TablePress ยังเพิ่มปุ่มสำหรับแทรกตารางลงในโปรแกรมแก้ไข WordPress มาตรฐาน

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

ไม่ว่าในกรณีใด หน้านี้ก็จะมีลักษณะเช่นนี้ ระวังฟังก์ชั่นการค้นหาและหมายเลขหน้า

ใช้ TablePress Tables ใน Elementor

Elementor ยังอนุญาตให้คุณรวมตารางในเทมเพลตของคุณสำหรับสิ่งต่าง ๆ เช่นโพสต์เดียว นี่เป็นเรื่องง่ายที่จะทำ เพียงเปิดเทมเพลตที่คุณต้องการใช้ มองหาวิดเจ็ต Shortcode ทางด้านซ้าย (แถบค้นหาสามารถช่วยได้) แล้ววางลงในตำแหน่งที่คุณต้องการให้ตารางแสดง

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

อย่าปล่อยให้สิ่งนั้นรบกวนคุณ ตารางจะปรากฏอย่างถูกต้องในตัวอย่างหรือเวอร์ชันสุดท้ายของเทมเพลต

แก้ไขตารางอีกครั้ง

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

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

การนำเข้าตารางด้วย TablePress

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

นำเข้าตารางของคุณ

TablePress > นำเข้าตาราง (สามารถเข้าถึงได้ผ่านแถบนำทาง) มีการตั้งค่าที่เกี่ยวข้องทั้งหมดสำหรับจุดประสงค์นี้

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

เพื่อจุดประสงค์นี้ เราจำเป็นต้องใช้ไฟล์. ในการทำเช่นนั้น ให้เลือกปุ่มเรียกดู จากนั้นค้นหาสเปรดชีตที่คุณต้องการเพิ่ม เมื่อเสร็จแล้ว ให้บอก TablePress ว่าเป็นรูปแบบใดผ่านเมนูแบบเลื่อนลง (CSV, HTML, JSON หรือ Excel)

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

แก้ไขการตั้งค่าตามต้องการ จากนั้นคลิกปุ่ม "เสร็จสิ้น"

ตรวจสอบและฟอร์แมต

การนำเข้าตารางของคุณจะนำคุณไปยังหน้าเดียวกับที่คุณเคยอยู่ก่อนหน้านี้

ข้อมูลทั้งหมดของคุณควรป้อนอย่างถูกต้อง ณ จุดนี้ ดังนั้นตอนนี้คุณเพียงแค่ต้องตั้งค่ากำหนดลักษณะภาพและการทำงาน

แสดงบนเว็บไซต์ของคุณ

จากนั้น คุณสามารถใช้รหัสย่อเดียวกันเพื่อวางตารางที่นำเข้าไว้ที่ใดก็ได้บนเว็บไซต์ของคุณที่คุณต้องการ

TablePress – ส่งออกตาราง

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

ขั้นแรก เลือกตารางที่คุณต้องการส่งออก คุณสามารถส่งออกตารางทั้งหมดบนเว็บไซต์ WordPress ของคุณโดยเลือกทีละตาราง จากนั้นคลิกปุ่มส่งออกเป็น CSV หรือ Excel เลือกรูปแบบการส่งออกที่ต้องการ (ค่าที่คั่นด้วยเครื่องหมายจุลภาค (CSV), HTML หรือ JSON) และตัวคั่นระหว่างค่าสำหรับการส่งออก CSV ด้านล่าง (เครื่องหมายจุลภาค อัฒภาค หรือแท็บ) คุณยังสามารถเลือกสร้างไฟล์เก็บถาวรแบบซิปได้ เมื่อส่งออกหลายตารางพร้อมกัน จำเป็นต้องใช้ตัวเลือกนี้

หลังจากตัดสินใจเลือกเสร็จแล้ว คุณสามารถดาวน์โหลดไฟล์ได้โดยคลิกปุ่มดาวน์โหลดไฟล์ส่งออก

ตัวเลือกปลั๊กอินที่มีอยู่

TablePress มีเมนูตัวเลือกน้อยมาก

การจัดรูปแบบตารางผ่าน Cascading Style Sheets (CSS) เป็นจุดสนใจหลักของตัวเลือกเหล่านี้ นักพัฒนาซอฟต์แวร์ได้รวมเอกสารมากมายไว้เพื่อช่วยเหลือคุณหากคุณต้องการหรือไม่คุ้นเคย ด้านล่างคุณจะพบแถบเลื่อนที่ให้คุณจัดเรียงลำดับของรายการเมนูหลักใหม่ได้ ลิงก์สำหรับลบปลั๊กอินและคำแนะนำที่เป็นประโยชน์มีอยู่ที่ด้านล่างของหน้า คุณสมบัติเพิ่มเติมบางอย่างของปลั๊กอินแสดงอยู่ในส่วนเสริมที่จะตามมาหากยังไม่เพียงพอ

โปรแกรมเสริม TablePress ที่มีประโยชน์

ตามที่กล่าวไว้ในตอนต้น TablePress มีปลั๊กอินหลายตัวที่สามารถเพิ่มเข้าไปได้ ส่วนเสริมที่มีประโยชน์ที่สุดมีสรุปไว้ด้านล่างนี้

อย่างไรก็ตาม บางรายการได้รับการระบุว่าเป็น "พรีเมียม" แม้ว่าทั้งหมดจะใช้งานได้ฟรีก็ตาม

สิ่งเหล่านี้เป็นของที่ประดิษฐ์ขึ้นอย่างอุตสาหะ และผู้เขียนขอบริจาคเงินเพื่อแลกกับการแจกจ่าย

  • ตารางที่ตอบสนอง – ตาราง TablePress เริ่มต้นไม่เหมาะกับมือถือ ที่สามารถแก้ไขได้ด้วยส่วนเสริมนี้ มีสามวิธีในการทำให้ตารางเข้ากันได้กับอุปกรณ์มือถือ โดยแต่ละวิธีมีชุดคำสั่งและตัวอย่างของตัวเอง
  • การแปลง URL อัตโนมัติ – ส่วนเสริมนี้มีประโยชน์หากคุณวางแผนที่จะสร้างตารางที่มี URL จำนวนมาก URL ที่วางใดๆ จะทำให้สามารถคลิกได้โดยไม่ต้องใช้ปุ่ม
  • ปลั๊กอินการเรียงลำดับ DataTables – สกุลเงิน ตัวเลขพร้อมข้อความ และช่วงวันที่สามารถเรียงลำดับแยกกันได้แล้ว
  • ปุ่ม DataTables – ด้วย Add-on นี้ คุณสามารถแทรกปุ่มตัวเลือกหลายปุ่มลงในตารางของคุณได้อย่างง่ายดาย มีความสามารถในการคัดลอกไปยังคลิปบอร์ดรวมถึงรูปแบบไฟล์ PDF และ Excel
  • DataTables FixedColumns – ตั้งค่าคอลัมน์ในตารางเพื่อให้คอลัมน์เหล่านั้นอยู่กับที่ในขณะที่ส่วนที่เหลือของตารางเลื่อนในแนวนอน
  • DataTables FixedHeader –ใช้เช่นเดียวกันกับส่วนหัวเช่นเดียวกับโซลูชันคอลัมน์
  • เปลี่ยนรหัสย่อของ [table] - อนุญาตให้คุณเปลี่ยนชื่อรหัสย่อของ TablePress เพื่อหลีกเลี่ยงความไม่เข้ากันกับส่วนเสริมและตัวเลือกการออกแบบอื่น ๆ (หรือเพียงเพื่อประโยชน์ของมัน)
  • การนำเข้าตารางธาตุอัตโนมัติ – ทำให้ข้อมูลถูกนำเข้าจากตารางต้นฉบับโดยอัตโนมัติในช่วงเวลาที่กำหนดไว้

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

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

ตอนนี้คุณรู้วิธีใช้ TablePress วิธีแสดงตารางบนไซต์ Elementor วิธีนำเข้าข้อมูลจากตารางภายนอก และวิธีส่งออกตารางจากไซต์ของคุณ นอกจากนี้เรายังได้พูดคุยถึงปลั๊กอินและส่วนขยายต่างๆ ที่สามารถใช้ได้ ขั้นตอนนั้นง่าย

ถึงตอนนี้ คุณควรมั่นใจในความสามารถของคุณในการสร้างตารางบนเว็บไซต์ WordPress ของคุณเอง

Divi WordPress Theme