วิธีสร้างตารางตอบสนองใน WordPress
เผยแพร่แล้ว: 2023-02-12ตารางเป็นองค์ประกอบการออกแบบเว็บไซต์ที่สามารถช่วยให้คุณแสดงข้อมูลจำนวนมากอย่างเป็นระเบียบสวยงาม ทำงานได้ค่อนข้างดีกับหน้าจอคอมพิวเตอร์แบบดั้งเดิม แต่มักจะสร้างประสบการณ์ที่ไม่พึงประสงค์บนอุปกรณ์พกพา
โชคดีที่มีวิธีแก้ปัญหาที่ใช้การได้หลายอย่างสำหรับการสร้างตารางที่ตอบสนองมากขึ้น การใช้แนวปฏิบัติด้านการออกแบบที่ตอบสนองเหล่านี้สามารถปรับปรุงประสบการณ์ผู้ใช้ (UX) ของไซต์ของคุณได้ ซึ่งหมายความว่าผู้เยี่ยมชมจะสามารถดูและเข้าถึงข้อมูลในตารางของคุณได้ง่ายขึ้น ไม่ว่าพวกเขาจะใช้อุปกรณ์ประเภทใดก็ตาม
ในบทความนี้ เราจะมาดูกันว่าการทำให้ตารางตอบสนองนั้นมีความหมายอย่างไร จากนั้นเราจะแนะนำสองวิธีในการสร้างตารางตอบสนองใน WordPress มาดำน้ำกันเถอะ!
ตารางตอบสนองคืออะไร?
โดยปกติแล้ว เป้าหมายของตารางคือการแสดงข้อมูลจำนวนมากในลักษณะที่เหมาะสม อย่างไรก็ตาม เมื่อคุณพยายามดูตารางบนอุปกรณ์เคลื่อนที่ สิ่งต่างๆ อาจผิดพลาดได้ สิ่งนี้เกิดขึ้นเนื่องจากแถวของตารางมักจะเป็นหลายคอลัมน์ที่กว้างเกินกว่าที่หน้าจอของคุณสามารถจัดการได้
เมื่อคุณสร้างตารางที่ปรับเปลี่ยนตามอุปกรณ์ คุณกำลังสร้างชุดกฎสำหรับตารางข้อมูลต้นฉบับของคุณ กฎเหล่านี้สามารถกำหนดเบรกพอยต์ตามขนาดการแสดงผล ซึ่งหมายความว่าหากผู้ใช้เข้าถึงตารางบนอุปกรณ์ที่มีขนาดเล็กกว่าเบรกพอยต์ที่คุณตั้งไว้ เค้าโครงตารางจะตอบสนองโดยการจัดรูปแบบใหม่ให้พอดีกับขนาดหน้าจอ
ตารางที่ปรับเปลี่ยนตามอุปกรณ์สามารถจัดรูปแบบใหม่ได้โดยเพิ่มแถบเลื่อนหรือวางข้อมูลซ้อนกัน คุณคงไม่อยากแค่ลดขนาดและอัดข้อมูลในเซลล์เข้าด้วยกันเมื่อขนาดหน้าจอเปลี่ยนไป เพราะอาจทำให้อ่านตารางไม่ได้ โชคดีที่การออกแบบที่ตอบสนองนั้นไม่ใช่เรื่องยากเกินไปที่จะบรรลุผลสำเร็จ
วิธีสร้างตารางตอบสนอง (ไม่มีปลั๊กอิน)
มีสองวิธีในการสร้างตารางที่ตอบสนองใน WordPress ก่อนอื่น เราจะมาดูวิธีทำให้งานสำเร็จโดยไม่ต้องใช้ปลั๊กอิน
สิ่งนี้จะต้องมีความรู้ด้านการเขียนโค้ด: โดยเฉพาะความเข้าใจเกี่ยวกับ Cascading Style Sheets (CSS) เรายังแนะนำให้ทำงานในสภาพแวดล้อมการจัดเตรียมหรือการพัฒนามากกว่าบนเว็บไซต์จริงของคุณ จนกว่าคุณจะออกแบบตารางที่ทำงานได้อย่างน่าเชื่อถือ
ขั้นตอนที่ 1: จัดรูปแบบตารางของคุณสำหรับ CSS ที่ตอบสนอง
ในตัวอย่างนี้ เราจะบอกให้ข้อมูลในตารางตัวอย่างของเราจัดรูปแบบใหม่ที่เบรกพอยต์เฉพาะ คุณสามารถเพิ่มแถบเลื่อนลงในตารางได้ในบางกรณี แต่เราจะจัดกลุ่มข้อมูลของตารางจริงๆ เพื่อให้ปรากฏในรูปแบบที่อ่านง่ายขึ้นซึ่งไม่จำเป็นต้องเลื่อนแนวนอน
นี่เป็นแนวทางที่ดี เนื่องจากการเลื่อนในแนวนอนมักหมายความว่าคุณกำลังดูข้อมูลของคอลัมน์โดยไม่อยู่ในบริบท:
ในการทำให้ตารางนี้ทำงานได้ดีขึ้น ก่อนอื่นคุณต้องแน่ใจว่าได้จัดรูปแบบตารางอย่างถูกต้อง หากคุณกำลังสร้างตารางโดยใช้ตัวแก้ไขบล็อก คุณสามารถทำได้ตามปกติ จากนั้นเพิ่มแอตทริบิวต์ <thead> และ <tbody> เพื่อให้แน่ใจว่า CSS ของคุณจะทำงานได้อย่างถูกต้อง:
เมื่อคุณเพิ่มตารางแล้ว คุณสามารถใช้โปรแกรมแก้ไข HTML เพื่อปรับการจัดรูปแบบได้ แอตทริบิวต์ <thead></thead> จำเป็นต้องรวมส่วนหัวของคอลัมน์ทั้งหมด ในทำนองเดียวกัน คุณจะรวมข้อมูลตารางที่ตามมาทั้งหมดในแอตทริบิวต์ <tbody></tbody>
เมื่อคุณเพิ่มแท็ก CSS ในขั้นตอนถัดไป สไตล์ชีตของคุณจะสามารถเข้าใจสิ่งที่ควรแสดงเป็นส่วนหัวสำหรับแต่ละคอลัมน์ในตาราง และเนื้อหาหรือเนื้อหาของเซลล์คืออะไร
ขั้นตอนที่ 2: เพิ่มแท็กที่กำหนดเองใน CSS ของคุณ
ต่อไป เราจะใช้ตัวอย่างโค้ด CSS ที่กำหนดเองและธีม WordPress Twenty Nineteen ชุดรูปแบบนี้มีการออกแบบที่ตอบสนองได้ดีซึ่งเป็นส่วนหนึ่งของโค้ดเนทีฟ แต่การปรับ CSS ของเราจะทำให้ดียิ่งขึ้นไปอีก
เนื่องจากชุดรูปแบบทั้งหมดแตกต่างกัน คุณจึงต้องเข้าใจโครงสร้างของชุดรูปแบบอย่างถี่ถ้วนเพื่อใช้การออกแบบตารางที่ปรับเปลี่ยนตามอุปกรณ์ได้สำเร็จ บางธีมอาจต้องการไลบรารี JavaScript เพิ่มเติม
สำหรับตัวอย่างของเรา เราจะไปที่ ลักษณะที่ปรากฏ > ปรับแต่ง > CSS เพิ่มเติม ซึ่งเราสามารถเพิ่มโค้ด CSS ที่กำหนดเองต่อไปนี้:
@media screen and (max-width: 600px) { | |
table {width:100%;} | |
thead {display: none;} | |
tr:nth-of-type(2n) {background-color: inherit;} | |
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;} | |
tbody td {display: block; text-align:center;} | |
tbody td:before { | |
content: attr(data-th); | |
display: block; | |
text-align:center; | |
} | |
} |
เมื่อคุณวางโค้ดของคุณเองลงในตัวแก้ไขแล้ว คุณจะต้องเลือก เผยแพร่ เพื่อให้การเปลี่ยนแปลงมีผล
ขั้นตอนที่ 3: ทดสอบการตอบสนองของตารางใน WordPress
WordPress มีคุณสมบัติการทดสอบหน้าจอในตัวที่เป็นประโยชน์ซึ่งช่วยให้คุณสามารถทดสอบเนื้อหาของคุณบนหน้าจอสามขนาดที่แตกต่างกัน ที่ด้านล่างของหน้าจอที่คุณเพิ่ม CSS ที่กำหนดเอง คุณสามารถคลิกที่ไอคอนแท็บเล็ตหรือโทรศัพท์มือถือเพื่อทดสอบสไตล์ใหม่ของตารางของคุณ:
สำหรับตัวอย่างนี้ เราได้สร้างตารางอย่างง่ายที่มีแอตทริบิวต์ HTML ที่จำเป็นทั้งหมดเพื่อใช้งานกับ CSS ของเราแล้ว เบรกพอยต์ของเราใน CSS กำหนดไว้ที่ 600px แต่สามารถเปลี่ยนแปลงได้ตามความต้องการของคุณ
แทนที่จะเพิ่มแถบเลื่อนหรือบีบข้อมูลของตาราง CSS ที่เราเพิ่มเข้าไปจะจัดระเบียบข้อมูลใหม่ให้อยู่ในรูปแบบที่เหมาะกับมือถือ ซึ่งช่วยให้ผู้ใช้บนอุปกรณ์เคลื่อนที่สามารถเลื่อนในแนวตั้ง และดูข้อมูลของตารางในบริบทพร้อมกับเซลล์อื่นๆ ที่เกี่ยวข้อง
วิธีสร้างตารางตอบสนองด้วยปลั๊กอิน
หากคุณไม่สะดวกใจในการปรับแต่งโค้ดหรือ CSS ของธีมของคุณ มีตัวเลือกอื่น มีปลั๊กอิน WordPress จำนวนหนึ่งที่สามารถช่วยคุณสร้างการออกแบบตารางที่ตอบสนองสำหรับเว็บไซต์ของคุณ
ขั้นตอนที่ 1: ดาวน์โหลดปลั๊กอิน
ในการเริ่มต้น คุณจะต้องเลือกปลั๊กอิน เนื่องจากมีตัวเลือกค่อนข้างน้อยสำหรับการออกแบบตารางที่ปรับเปลี่ยนตามอุปกรณ์ เราจะไฮไลต์บางตัวเลือกเพื่อให้คุณเริ่มต้นได้:
- Ninja Tables : ขึ้นชื่อว่าเป็นปลั๊กอินอันดับหนึ่งของ WordPress สำหรับการสร้างตารางที่ตอบสนอง โดยมาพร้อมกับสไตล์ตารางมากกว่า 100 แบบให้เลือก
- wpDataTables : นี่เป็นปลั๊กอินฟรีที่มีเวอร์ชันพรีเมียม แต่เวอร์ชัน Lite จะเต็มไปด้วยคุณลักษณะสำหรับการสร้างตารางและแผนภูมิแบบอินเทอร์แอกทีฟที่สมบูรณ์
- WP Responsive Table : นี่เป็นปลั๊กอินที่เรียบง่ายและฟรี ซึ่งทำให้ง่ายต่อการสร้างตารางตอบสนองที่เลื่อนในแนวนอนบนหน้าจอขนาดเล็ก
สำหรับตัวอย่างที่เหลือ เราจะใช้ตารางนินจาเพื่อสาธิตวิธีสร้างตารางข้อมูลแบบตอบสนองใน WordPress
ขั้นตอนที่ 2: ป้อนข้อมูลของคุณ
หลังจากติดตั้งและเปิดใช้งานปลั๊กอินแล้ว คุณจะสามารถข้ามไปสู่การสร้างตารางได้ทันที คุณสามารถไปที่ NinjaTables > All Tables > Add Table :
ที่นี่คุณสามารถเพิ่มตารางใหม่ตั้งแต่เริ่มต้น หรือคุณสามารถ นำเข้าตาราง จากไฟล์ เราจะสร้างตารางตั้งแต่ต้นด้วยตัวเลือก เพิ่มตาราง จากนั้น คุณจะต้องป้อนชื่อและคำอธิบายสำหรับตารางของคุณ:
คุณจะมีตัวเลือกอื่นที่นี่เช่นกัน ตัวอย่างเช่น หากคุณกำลังตั้งค่าร้านค้า WooCommerce คุณจะสามารถใช้ข้อมูลนั้นเพื่อสร้างตาราง WooCommerce
เมื่อคุณเพิ่มข้อมูลของคุณแล้ว คุณจะคลิกที่ เพิ่ม เพื่อสร้างตาราง จากนั้นคุณจะต้องเริ่มป้อนข้อมูล คุณสามารถเลือก เพิ่มคอลัมน์ เพื่อตั้งค่าโครงสร้างตารางของคุณ:
คุณจะมีช่องที่ต้องกรอกเพื่อสร้างคอลัมน์ ซึ่งรวมถึงชื่อส่วนหัวของคอลัมน์และประเภทข้อมูลที่มี คุณยังสามารถตั้ง ค่าเบรกพอยต์ตอบสนองได้:
หากต้องการเลือกจากตัวเลือกต่างๆ ที่กำหนดว่าตารางของคุณจะตอบสนองต่ออุปกรณ์ต่างๆ อย่างไร คุณสามารถเข้าถึงเมนูได้โดยคลิกที่ แสดงในอุปกรณ์ทั้งหมดเสมอ :
เมื่อคุณสร้างคอลัมน์ของคุณแล้ว ให้เลือก เพิ่มข้อมูล และ NinjaTables จะให้แบบฟอร์มที่ง่ายสำหรับคุณในการเพิ่มหลายรายการลงในตารางอย่างรวดเร็ว:
คุณสามารถปล่อยให้ตัวเลือก ดำเนินการเพิ่มต่อไป ได้หากคุณมีหลายรายการที่ต้องทำ เมื่อเสร็จแล้ว คุณสามารถปิดหน้าต่างและกลับไปที่หน้าจอแก้ไขตารางได้
ขั้นตอนที่ 3: จัดรูปแบบตารางของคุณ
ตอนนี้คุณมีตารางที่มีข้อมูลแล้ว คุณสามารถสำรวจตัวเลือกการตั้งค่าและสไตล์ของ NinjaTable ได้ จากภายในหน้าต่างแก้ไขตาราง คุณสามารถเข้าถึงการตั้งค่าเพิ่มเติมได้จากแท็บด้านบน และด้านล่างขวาของหน้าจอ:
คุณจะมีตัวเลือกมากมายในการปรับแต่งสไตล์และรูปลักษณ์ของตาราง รวมถึงการสลับสีแถวของตาราง การจัดกึ่งกลางข้อความ การซ่อนข้อมูล และอื่นๆ
ขั้นตอนที่ 4: ทดสอบตารางของคุณ
NinjaTable ทำให้ง่ายต่อการทดสอบการตอบสนองของตารางขณะที่คุณกำลังแก้ไข ในแท็บ การออกแบบตาราง คุณจะพบสามตัวเลือกสำหรับการทดสอบการตอบสนองของหน้าจอ:
คุณสามารถเลือก เดสก์ท็อป แท็บเล็ต หรือ มือถือ เพื่อดูว่าตารางของคุณจะมีลักษณะอย่างไรบนอุปกรณ์ประเภทเหล่านั้น
แต่ละตารางที่คุณสร้างจะมาพร้อมกับรหัสย่อ นอกจากนี้ คุณยังสามารถเพิ่มตารางใดๆ ลงในเนื้อหาเว็บไซต์ของคุณได้ง่ายๆ โดยใช้บล็อก NinjaTable ซึ่งคุณจะพบได้ในส่วน การจัดรูปแบบ ของเมนูตัวแก้ไขบล็อก
ให้ WP Engine ช่วยคุณรักษาไซต์ของคุณให้ตอบสนอง
การสร้างเว็บไซต์ที่ใช้การออกแบบที่ตอบสนองได้ดีนั้นไม่จำเป็นต้องเป็นเรื่องท้าทายเมื่อคุณสามารถเข้าถึงทรัพยากรที่เหมาะสมได้
ที่ WP Engine เราต้องการให้คุณมอบประสบการณ์ดิจิทัลที่ดีที่สุดแก่ลูกค้าของคุณ ตรวจสอบแผนโฮสติ้ง WordPress มากมายของเราและโซลูชันสำหรับนักพัฒนาสำหรับโครงการต่อไปของคุณ!