Table (bảng) là một trong những thứ chưa được WordPress hoàn thiện.

Về cơ bản, nếu muốn tạo bảng trong WordPress, bạn sẽ phải làm khá thủ công ( thường sẽ phải sử dụng HTML và CSS).

Dĩ nhiên là cũng có một số giải pháp, đó là sử dụng New Block Editor.

Mặc dù đây là công cụ giúp việc tạo bàng trở nên dễ dàng hơn.

Tuy nhiên với các dữ liệu lớn, block editor lại không thể đáp ứng được nhu cầu người dùng.

Là một người sử dụng nhiều data tables (bảng dữ liệu) trong website,

Đặc biệt là WordPress, mình rất muốn chia sẻ cách thường sử dụng và đem hiệu quả cao.

Vậy nên, chúng ta sẽ cùng đi sâu vào những cách sử dụng bảng HTML/bảng dữ liệu trong WordPress.

Làm cho chúng trở nên bắt mắt, đồng thời cũng tối ưu trên các thiết bị smartphone và thân thiện với SEO.

Bảng HTML cơ bản

Bạn có thể tạo bảng bằng cách sử dụng HTML cơ bản.

Cấu trúc của nó khá đơn giản, bạn chỉ cần chuyển sang dạng Text hay HTML khi edit bài viết là được.

Thường nó sẽ có cấu trúc như sau:

Đây vẫn là một cách khá ổn và đơn giản, nếu bạn chỉ cần thêm 1 hoặc 2 bảng vào post hoặc page.

Nhưng nếu như bạn thường xuyên phải sử dụng Table.

Một số thứ bạn sẽ cần học và thành thạo như:

• Học HTML để nâng cao một số tính năng trên table
• Việc sử dụng HTML khá mất thời gian
• Cực kỳ giới hạn về bố cục và thiết kế ( trừ khi bạn thành thạo code)

Còn một thứ nữa là vấn đề, đó là đôi khi bảng của bạn không reponsive với các thiết bị khác.

Bạn sẽ cần style lại nó, điều này lại cần thêm một chút hiểu biết về CSS.

Đó là lý do vì sao tôi đưa một giải pháp khác đó là sử dụng Table Plugin.

Sử dụng wpDataTables tạo bảng đẹp và dễ dàng hơn

wpDataTables được mệnh danh là plugin tạo bảng số #1 hiện nay.

Và mình thực sự khuyên các bạn nên sử dụng plugin này. (nếu có nhu cầu tạo các bảng đẹp và sống động hơn)

Nó không chỉ giúp bạn các bảng đơn giản, nó còn giúp các loại biểu đồ sống động.

Giúp bạn dễ trình bày hơn, nội dung đa dạng hơn và nhiều chức năng hơn.

Một trong những điều thú vị về wpDataTables là chúng ta dễ dàng nhập dữ liệu từ nhiều nguồn.

Khi tạo một bảng mới, người dùng có khả năng nhập từ:

• Tạo một bảng từ nguồn trực tiếp
• Tạo bảng bằng cách thủ công
• Import data từ một nguồn khác (Exel, CSV, Google Doc, XML JSON)
• Từ cơ sở dữ liệu trực tiếp (sử dụng các truy vấn SQL)
• Tạo bảng bằng MySQL query

Plugin cao cấp này giúp bạn dễ dàng tạo, tùy chỉnh và quản lý các bảng và biểu đồ trong WordPress (không cần biết code)

Chỉ cần cài đặt và bắt đầu xây dựng bảng và biểu đồ!

Được tin cậy bởi sử dụng bởi 21.000 người, theo kinh nghiệm.

Nó thực sự plugin tạo bảng đáng dùng nhất.

Khả năng tùy chỉnh vô hạn và responsive 100%

Với wpDatatables bán sẽ thấy việc tạo bảng và thiết kế bố cục rất dễ dàng.

Các tùy chọn được chia thành các trường rõ ràng và dễ chọn như:

• Font, Font size, Font color
• Header, Header background
• Table border
• Row color
• Cell color
• Button color
• Hover font color
• ….

Quá tuyệt vời và đầy đủ, nói thật để mình ngồi CSS hết đống này chắc mình cũng rất ngại.

Ngoài ra còn có chức năng để bạn tự custom JS, CSS.

Và xin nhắc lại là nó hoàn toàn responsive dù kích cỡ table của bạn có như nào.

Bộ lọc giúp bạn nâng cao khả năng tìm kiếm

Đây có lẽ là một tính năng mà HTML basic table không có được.

Đó là chức năng filter hay còn gọi là bộ lọc.

Với các bộ lọc, các bạn có thể lọc những kết quả mình muốn tìm

Điều này cực kỳ hữu ích để truy vấn một cơ sở dữ liệu lớn.

Ví dụ: Nếu bạn có cơ sở dữ liệu lớn như thư viện, thì việc lọc kết quả dựa trên chủ đề sẽ giúp bạn tìm thấy sách của mình nhanh hơn nhiều.

Tuy nhiên, vì mỗi lần tăng cấp độ lọc (nhiều lớp), nó sẽ tăng số lượng tính toán được thực hiện bởi cơ sở dữ liệu – do đó làm tăng áp lực máy chủ.

Do đó, ở đây bạn có thể bật hoặc tắt tính năng lọc tùy theo mục đích của bạn.

Chỉnh sửa trực tiếp MySQL Database từ Frontend

wpDataTables cũng cho phép bạn chỉnh sửa trực tiếp cơ sở dữ liệu từ frontend (tức là từ phần giao diện ngoài của trang WordPress).

Đơn giản chỉ cần kích hoạt “Allow front-end editing”

Bạn thậm chí có thể cấp quyền cho user roles nào được chỉnh sửa bảng.

Tạo các dạng biểu đồ trực quan và đa dạng

Bạn đã chán với các table dạng cột đơn giản, và muốn một cái gì mới mẻ hơn.

wpDataTables hoàn toàn đáp ứng được với rất nhiều loại biểu đồ.

Biểu đồ sẽ khiến người dùng tăng độ tin tưởng vào số liệu của bạn hơn rất nhiều.

Với biểu đồ hình tròn, sẽ giúp người dùng đọc nội dung dễ hơn nhiều với dạng cột.

( Ví dụ khi bạn cần so sánh tỉ trọng của các thành phần kinh tế chẳng hạn)

wpDataTables giúp bạn tạo các biểu đồ “động” (thông qua Google Charts, HighCharts hoặc Chart.js) giúp nó trực quan hơn.

Điều này đặc biệt hữu ích cho các bảng có nhiều dữ liệu số, ví dụ các blogger chia sẻ top seller hàng tháng, hàng tuần, hàng năm.

Okie giới thiệu thế đủ rồi ! Giờ sẽ đến phần….

Hướng dẫn cài đặt và sử dụng wpDataTables

Đầu tiên là cài đặt plugin, khá đơn giản bạn chỉ cần upload file.zip tải về là được.

Nếu bạn vẫn chưa biết cách hãy đọc hướng dẫn cài đặt plugin WordPress (Từng Bước Một).

Cài xong nhớ active plugin nhé.

Tạo bảng dữ liệu đầu tiên

Sau khi active xong đi đến wpDataTables » Creat a Table

Bấm vào và chọn Next. Ở đây mình chọn “Creat a table by importing data from data source”

Ở đây mình sẽ import từ File CSV chuẩn bị sẵn.

Nếu bạn không thể upload CSV file vào WordPress, hãy chèn đoạn code sau vào file functions.php

function wpse_mime_types( $existing_mimes ) {
// Add csv to the list of allowed mime types
$existing_mimes['csv'] = 'text/csv';

return $existing_mimes;
}

Nhớ đặt tên và kiểm tra lại các trường vài type xem đúng kiểu chưa.

Mọi thứ đúng rồi thì bấm Creat The Table. Vậy là xong bảng của bạn đã được tạo

Ở đây bạn sẽ có các tùy chọn như tôi đã giới thiệu ở trên để setting cho nó.

Và nó có luôn shortcode dạng [WPDATATABLE ID=1] như hình.

Chèn vào bất kỳ đâu bạn muốn là được.

Điều tuyệt vời là bạn sẽ thấy ngay phiên bản xem trước của table ở dưới dòng “Table preview and columns setup”

Nhớ là sau khi settings nhớ bấm Apply nhé.

Chèn wpDataTable vào post hoặc page

Việc này khá đơn giản cả với classic editor hoặc block editor.

Chỉ đơn giản là chèn đoan shortcode, ví dụ như ảnh dưới.

Vậy là bạn đã có một bảng dữ liệu với đầy đủ tính năng trong post.

Sắp xếp, thu gọn bảng trực tiếp trên front-end thoải mái.

Còn có cái Print, xuất ra file excel, csv. Quá Tiện !

Tạo biểu đồ trực quan và đẹp đẽ với wpDatatable

Đây là một chức năng giúp bạn tạo các biểu đồ với dạng khác nhau

Đi đến wpDataTables » Creat a Chart

Đặt tên cho biểu đồ của bạn, chọn kiểu biểu đồ bạn muốn (có hàng tấn để chọn).

Tiếp theo chọn bảng dữ liệu bạn muốn sử dụng để tạo biểu đồ của mình.

Bạn chọn các Data Source được tạo từ trước. rồi bấm Next

Bước tiếp theo là chọn các trường giá trị sẽ hiển thị trong biểu đồ.

Click vào các trường màu xanh bên trái. sau đó chọn mũi tên > để chọn. Bấm Next tiếp tục

Giống như Table thì ở đây bạn cũng có hàng tấn tính năng để tùy biến biểu đồ.

Từ chiều cao, độ rộng, background color…

Rất nhiều, cái này mình sẽ để bạn tự khám phá 😀

Cuối cùng bạn sẽ có một Shorcode dạng [WPDATACHART ID=1] để chèn vào post và page.

Một số tính năng tuyệt vời khác

Bạn vẫn cảm thấy từng này tính năng chưa đủ đô với bạn?

wpDataTables có một số extension để mở rộng thêm các tính cho plugin mạnh mẽ này như

Powerfull Filter: Bộ lọc xếp tầng (áp dụng nhiều bộ lọc để thu hẹp kết quả), tắt chế độ xem bảng cho đến khi người dùng chọn bộ lọc, thêm tính năng tìm kiếm trực tiếp và hơn thế nữa. Chỉ cần kích hoạt và cấu hình tùy chọn khi thiết lập bảng của bạn.

Report Builder: Tự tạo báo cáo đinh dạng Word hoặc Excel của riêng bạn dựa trên các bảng dữ liệu. Điều này rất đặc biệt hữu ích khi cho phép user edit trực tiếp trên front-end (để thu thập dữ liệu, và in báo cáo)

Formidable Forms: Thêm hỗ trợ cho Formidable Forms Pro một form builder rất nổi tiếng. Sử dụng form để thu thập dữ liệu (như khảo sát), sau đó tự động tạo bảng dựa trên nội dung gửi của người dùng, với mỗi trường được chuyển đổi thành một cột.

Gravity Forms: Tích hợp Gravity Forms với wpDataTables để tự động tạo các bảng WordPress dựa trên dữ liệu người dùng. Tiện ích mở rộng thêm nguồn dữ liệu dễ dàng kết nối với biểu mẫu của bạn.

Kết

Phù, với rất nhiều tính năng tuyệt vời tôi giới thiệu ở trên với wpDataTable.

Hy vọng giúp các bạn có nhìn rõ ràng hơn về plugin tuyệt vời này.

Còn chần chừ gì mà không sử dụng plugin này để tạo các bảng hay biểu đồ tuyệt vời trên WordPress.