Bạn ghé qua một Blog nào đó có sử dụng bảng để thống kê hay đánh giá sản phẩm trông rất chuyên nghiệp và tự hỏi họ dùng plugin nào để tạo bảng trong WordPress?.
Hiện nay, rất nhiều plugin có chức năng tạo bảng trong WordPress nhưng theo mình đánh giá thì plugin TablePress là một plugin có chức năng tạo bảng chuyên nghiệp, cụ thể là tính đến thời điểm này số lượng người đánh giá lên tới hơn 3 nghìn và hơn 700.000 website đang activate sử dụng. Bài viết này mình sẽ hướng dẫn chi tiết cho các bạn để có một bảng thống kê chuyên nghiệp.
Tạo bảng trong WordPress với plugin TablePress
Tổng quan plugin TablePress
Bạn có thể dễ dàng tạo và quản lý các bảng một cách đơn giản.
Sử dụng Shortcode (tương tự shortcode của Contact form 7) để nhúng bảng vào bài viết hoặc một trang bất kỳ.
Bạn có thể chèn công thức, hình ảnh vào trong bảng cũng như tạo một bảng giá trong đó.
Bổ sung các tính năng như sắp xếp, phân trang, lọc và nhiều tính năng khác cho khách truy cập Blog của bạn.
Các bảng có thể được Import và Export sang nhiều định dạng như: Excel, CSV, HTML và JSON,…
Cấu hình plugin TablePress
Đầu tiên, bạn cần phải tiến hành cài đặt và kích hoạt plugin TablePress.
Sau khi kích hoạt plugin bạn sẽ thấy một menu có tên TablePress trong Dashboard như hình dưới
Trong đó:
All Tables: liệt tất cả các bảng đã được tạo ra bao gồm Id bảng, tên bảng (Table Name), miêu tả bảng (description), tác giả, ngày tạo bảng.
Add New Table: tạo một bảng thống kê mới.
Import a Table: nhập bảng từ các định dạng dữ liệu như: Excel, CSV, HTML và JSON.
Exprot a Table: xuất dữ liệu bảng ra các định dạng: Excel, CSV, HTML và JSON.
Plugin Options: tùy chọn nâng cao của plugin.
About TablePress: giới thiệu về plugin TablePress.
Khi mới cài plugin thì trong mục All Tables sẽ không có dữ liệu do mình chưa có bảng mới nào được tạo ra. Do đó, mình sẽ hướng dẫn tạo một bảng mới bằng cách kích vào Add New Table. Giao diện hiện ra như hình
Trong đó:
Table Name: tên bảng cần tạo
Description: miêu tả bảng cần tạo
Number of Rows: số lượng dòng cần tạo (bạn có thể chỉnh sửa thêm, bớt sau này nên số lượng này chỉ cần tương đối)
Number of Columns: số lượng cột cần tạo (bạn có thể chỉnh sửa thêm, bớt sau này nên số lượng này chỉ cần tương đối)
Sau khi khai báo xong các thông số trên bạn nhấn Add Table sau đó được chuyển sang trang khai báo chi tiết hoặc chỉnh sửa các thông tin trong bảng bao gồm các Tab:
Table Information: bạn có thể sửa đổi tên bảng, mô tả bảng, Id bảng (cần kiểm tra các Id bảng khác tránh trường hợp bị ghi đè các Id bảng đã tạo)
Table Content: nhập các giá trị cần thiết
Table Manipulation: chỉnh sửa việc thêm, bớt, ẩn, xóa, chèn ảnh, chèn link…hàng, cột trong bảng
Table Options: tùy chọn hiển thị của bảng
Features of the DataTables JavaScript library: tùy chỉnh cấu hình cho người dùng
Freview & Save changes: xem trước bảng vừa tạo để chỉnh sửa cho phù hợp sau đó lưu lại
Other Actions: tùy chọn việc sao chép, nhập và xóa dữ liệu bảng
Mục Table Content: Đây là nơi bạn cần nhập các giá trị hay thông số vào trong bảng. Tuy nhiên, nếu bạn biết thêm về code thì có thể tùy biến thay đổi kích thước chữ, độ đậm nhạt hoặc thay đổi màu sắc cho font chữ như ví dụ hình dưới.
Mục Table Manipulation: Bạn có thể tùy chỉnh việc thêm, xóa, gộp ô, ẩn, chèn link, chèn ảnh vào bên trong hàng, cột hoặc có thể chèn mã giảm giá coupon thông qua Advanced Editor.
Trường hợp bạn muốn thêm 1 hàng vào giữa 2 hàng khác (vd: bạn có dòng 1,2,3,4 và muốn chèn 1 hàng vào giữa hàng 2 và hàng 3) thì bạn có thể vào insert trong select rows hoặc add một hàng đó. Nếu nó chưa đúng vị trí bạn có thể kéo thả hàng mới đó vào giữa hàng 2 và hàng 3.
Mục Table Options: Bạn chỉ cần quan tâm tới Table Head Row: Trường hợp bảng thống kê của bạn khá dài thì bạn có thể để dấu tích theo mặc định, người đọc có thể dễ dàng tùy biến hiển thị số hàng trong một trang, sort dữ liệu có trong bảng hoặc có thể dùng chức năng tìm kiếm nhanh một giá trị có trong bảng.
Để làm được điều đó bạn kéo xuống dưới tìm đến mục Features of the DataTables JavaScript library để có thể tùy biến các giá trị.
Ngược lại, bảng thông kê không quá dài bạn nên tắt nó đi để bảng trông đẹp hơn và tất cả các mục tùy biến trong Features of the DataTables JavaScript library sẽ bị mờ đi. Kết quả là trông bảng sẽ đẹp hơn.
Tùy chỉnh nâng cao plugin TablePress
Nếu bạn chưa biết gì về CSS thì có thể vào trang hướng dẫn viết mã CSS cơ bản của tác giả thông qua FAQ. Tuy nhiên, mình cũng hướng dẫn cụ thể cho các bạn để tạo bảng trong WordPress cho Blog mình.
Thay đổi độ rộng của bảng:
.tablepress { width: auto; }
Trong đó: giá trị ” width: auto;” bạn có thể đặt auto để bảng có thể hiển thị tốt trên mọi loại thiết bị hoặc bất kỳ kích thước nào đó chẳng hạn ” width: 720px; “.
Lưu ý: giá trị độ rộng bảng ” width: auto; “là thông số chung cho tất cả các bảng của bạn.
Thay đổi màu nền cho hàng đầu tiên của bảng:
.tablepress thead th, .tablepress tfoot th { background-color: greenyellow; }
Trong đó: bạn cần thay đổi giá trị màu trong background-color tùy ý. Ví dụ mình sử dụng mã màu “background-color: greenyellow;” (mình đặt giá trị là ” greenyellow ” còn bạn có thể thay bằng một mã hex bất kỳ như “#01c1a8” chẳng hạn).
Kết quả: Thay đổi màu nền của một hàng bất kỳ:
.tablepress-id-N .row-X td { background-color: #9bcd04; }
Trong đó: N là Id của bảng cần thay đổi, X là hàng cần thay đổi màu nền, giá trị “#9bcd04 ” là mã màu tùy chọn của bạn.
Lưu ý: Khi bạn có nhiều bảng mà mỗi bảng bạn lại muốn tạo một màu nền cho hàng đầu tiên hoặc bất kỳ hàng nào đó mà không làm ảnh hưởng tới bất kỳ màu nền của một bảng khác ( mình khuyên bạn nên chọn phương pháp này). Bạn phải tắt tùy chọn mặc định trong ” Table Head Row ” thì thay đổi mới được thực hiện.
Trong ví dụ này mình chọn cho N=1 (Id bảng 1), X=1 (hàng đầu tiên của bảng), background-color: #9bcd04;.
Kết quả: Thay đổi font chữ, cỡ chữ và màu chữ:
.tablepress-id-N tbody td { font-family: Arial; font-size: 14px; color: #1515b5; }
Trong đó: N là Id của bảng, font-family: font chữ cần thay đổi, font-size: cỡ chữ bạn tùy chỉnh, color: màu chữ bạn tùy chỉnh
Lưu ý: Bạn có thể tùy chỉnh thay đổi font chữ, cỡ chữ, màu chữ cho bất kỳ bảng nào mà không ảnh hưởng tới giá trị bảng khác
Tuy nhiên trong kết quả bên dưới do màu chữ không thay đổi là do mình đã cấu hình màu chữ trong từng cell của ” Table Content ” nên kết quả có khác so với mã CSS này còn các giá trị như font chữ, kích thước chữ đã thay đổi. Kết quả như hình:
Tạo thêm dòng kẻ phân cách giữa các hàng, cột:
Việc tạo thêm dòng kẻ phân cách giữa các hàng, cột nhìn sẽ chuyên nghiệp hơn rất nhiều so với các ví dụ bên trên mà bất cứ bảng nào bạn tạo ra sẽ cần đến.
.tablepress-id-2 .column-1 { border-style: solid; border-width: 1px; border-color: gray; } .tablepress-id-2 .column-2 { border-style: solid; border-width: 1px; border-color: gray; } .tablepress-id-2 .column-3 { border-style: solid; border-width: 1px; border-color: gray; } .tablepress-id-2 .column-4 { border-style: solid; border-width: 1px; border-color: gray; }
Trong đó: N là Id của bảng, column-1 là giá trị cột thứ nhất (bạn có bao nhiêu cột thì cần thêm bấy nhiêu mã). Như ví dụ trên mình có 4 cột thì mình phải thêm 4 mã như hình trên
Kết quả trông rất đẹp như hình dưới:
Lưu ý: Plugin TablePress cũng có nhược điểm là nếu bạn sử dụng mã tùy chỉnh CSS thì khi tạo thêm mới một bảng nào đó bạn cần phải cấu hình mã CSS cho từng bảng đó. Do vậy với việc bạn sử dụng rất nhiều bảng thì danh sách mã CSS sẽ tăng theo số lượng bảng có trong Blog của bạn.
Lời kết: Vậy là bạn có thể tự tạo bảng trong WordPress cho Blog của mình rồi. Thật đơn giản phải không nào?. Hy vọng bạn có thể tùy biến bảng thống kê theo cách riêng của mình.