Tạo bảng responsive cho website WordPress với plugin TablePress.
Nói đến việc tạo bảng trong website WordPress, người ta không thể không nhắc tới plugin TablePress. Với hơn 15 triệu lượt download và hơn 800.000 site đang active, đây là plugin tạo bảng được sử dụng nhiều nhất tính tới thời điểm hiện tại. Sở dĩ TablePress được nhiều người tin dùng như vậy là bởi vì nó dễ sử dụng, đáp ứng được các nhu cầu từ đơn giản đến phức tạp. Tuy nhiên, bảng được tạo bởi plugin TablePress có một nhược điểm là không có khả năng responsive.
Tham khảo thêm:
- Top 7 plugins tạo bảng tốt nhất trong WordPress
- Top 6 plugins tạo bảng đăng nhập/ đăng ký tốt nhất cho WordPress
Điều này đồng nghĩa với việc sẽ xuất hiện tình trạng tràn bảng ra khỏi giới hạn chiều ngang của giao diện khi website hiển thị trên các màn hình có kích thước nhỏ và số lượng cột trong bảng quá nhiều. Vậy làm thế nào để khắc phục tình trạng kể trên? Bài viết hôm nay sẽ hướng dẫn các bạn cách để làm điều đó.
Tạo bảng responsive với plugin TablePress
Có vẻ nhóm tác giả của TablePress cũng đã nhận ra được vấn đề này và phát triển thêm một tiện ích mở rộng mang tên Responsive Tables (xem chi tiết).
1. Tất cả những gì các bạn cần làm là download tiện ích đó tại đây, cài đặt (thông qua việc upload) và kích hoạt giống như những plugin bình thường khác.
2. Tiếp theo, mở trình soạn thảo của những trang hoặc bài viết mà bạn đã chèn shortcode của plugin TablePress trước đó. Shortcode của nó có dạng như thế này:
[table id=123 /]
Hãy sửa nó thành dạng:
[table id=123 responsive=mode /]
Thay mode
bằng flip
, scroll
hoặc collapse
. Trong đó:
flip
: thay đổi cách bố trí của bảng (đổi hàng thành cột hoặc ngược lại) và cuộn bảng theo chiều ngang.scroll
: cuộn bảng theo chiều ngang. Tôi thường sử dụng chế độ này.collapse
: thu gọn hoặc mở rộng các dữ liệu trong bảng (thông qua nút ẩn/ hiện) để phù hợp với kích thước màn hình.
Riêng với flip
, các bạn còn có thể thiết lập kích thước màn hình cụ thể khi chế độ này được kích hoạt. Sử dụng cấu trúc shortcode sau đây:
[table id=123 responsive=flip responsive_breakpoint=device /]
Thay device
bằng phone
, tablet
, desktop
, all
. Trong đó:
phone
: kích thước chiều ngang màn hình nhỏ hơn 768 pixels.tablet
: kích thước chiều ngang màn hình nhỏ hơn 980 pixels.desktop
: kích thước chiều ngang màn hình nhỏ hơn 1200 pixels.all
: sử dụng chế độflip
trên tất cả các kích thước màn hình.
Thật đơn giản phải không nào? Hoàn toàn không cần can thiệp gì vào mã nguồn của website cả. Chúc các bạn thành công!
Bạn đang sử dụng plugin nào để tạo bảng responsive trong WordPress? Hãy chia sẻ nó với chúng tôi trong khung bình luận bên dưới.
Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)
Mình không dùng plugin nhưng không hiểu sao bảng mặc định trong bài viết của mình bị mất hết dòng kẻ ngang dọc, chỉ còn khung ở ngoài.
Mình code css thì nó hiện lên nhưng lại không chỉnh được màu sắc viền bảng trong từng bài viết, cứ mặc định màu theo code vậy thôi.
Hiếu có biết tại sao ko chỉ cho mình với, tìm mãi mà không ra nguyên nhân
Giờ mới để ý là nó không Responsive được, hèn gì nhiều khách try cập vào cứ bảo không thấy, ra dùng toàn điện thoại, bị che mất.
Nhưng nó cũng chuối thật, ít ra phải hiện cái nút cuộn để người dùng còn biết nội dung bảng bị khuất chứ.
Tự thêm CSS vào được mà. :P