Hướng dẫn tạo bảng trong wordpress 1 cách chuyên nghiệp

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

Plugin này miến phí và rất dễ sử dụng, có khả năng tùy biến cao từ đơn giản đến phức tạp. Có một hạn chế là khả năng responsive của nó đối với các màn hình có kích thước nhỏ. Tuy nhiên, hiện nay đa phần chúng ta sử dụng giao diện có tùy biến responsive nên sẽ khắc phục được vấn đề này. Dưới đây là một số tính năng nổi bật của plugin này:

  • 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ỳ.
  • Không cần việc mã hóa phức tạp và bảng có thể được chỉnh sửa trong giao diện giống như speadsheet.
  • 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

Tạo bảng trong WordPress 01

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

Tạo bảng trong WordPress 02

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.

Tạo bảng trong WordPress 04

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.

Tạo bảng trong WordPress 05

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.

Tạo bảng trong WordPress 06

Để 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ị.

Tạo bảng trong WordPress 07

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ạo bảng trong WordPress 08

Sau khi tạo xong bảng bạn có thể copy Id của bảng đó để dán vào trong bài viết hoặc trang bạn cần. Nếu phải chỉnh sửa trong bảng thống kê thì các bạn vào danh mục quản lý các bảng trong TablePress để thay đổi mà không phải chỉnh sửa trực tiếp trong bài viết hoặc trang. Khi chỉnh sửa xong bạn cần Save lại và các bảng sẽ tự động được update trong bài viết hoặc trang.

Tạo bảng trong WordPress 09

Tùy chỉnh nâng cao plugin TablePress

Thú vị ở plugin này là ở việc bạn có thể tùy biến nâng cao Custom CS cho kiểu dáng bảng để trở nên chuyên nghiệp hơn thông qua mục Plugin Options. Bạn cũng có thể  tìm Custom CS trong phần tạo bảng mới Table Options=>Extra CSS Classes=>Custom CS

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.

Lưu ý: các chỉnh sửa CSS này sẽ lưu đè tất cả các thiết lập mặc định của Plugin mà không cần chỉnh sửa trực tiếp trong Plugin. Tuy nhiên việc ghi đè này sẽ mất khi bạn cập nhật phiên bản plugin TablePress mới do đó hãy copy bản CSS này lưu lại để dùng khi cập nhật 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;
}

Lưu ý: giá trị màu nền cho hàng đầu tiên của bảng cũng là giá trị màu hàng đầu tiên của tất cả các bảng bạn tạo. Tuy nhiên, để tạo màu nền cho hàng đầu tiên của bảng thì bạn cần tích lại vào thông số “Table Head Row” thì mới thấy sự thay đổi. Còn nếu muốn chỉnh sửa màu nền cho từng bảng thì bạn xem thông số “Thay đổi màu nền của một hàng bất kỳ” ngay dưới đây.

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ả:

Tạo bảng trong WordPress 10

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ả:

Tạo bảng trong WordPress 11

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 bảng trong WordPress 12

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:

Tạo bảng trong WordPress 13

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.

Nếu có thắc mắc hay cần giúp đỡ điều gì hãy để lại bình luận của bạn bên dưới để mình có thể giúp bạn.

guest
2 Bình luận
Cũ nhất
Mới nhất
Phản hồi nội tuyến
Xem tất cả các ý kiến
Ninh
Ninh
1 năm Cách đây

Trong các code ở trên mình chỉ ứng dụng được mỗi code thay đổi màu nền tiêu đề ngang của bảng.
.tablepress thead th,
.tablepress tfoot th {
background-color: greenyellow;
}

Các code còn lại mình copy vào và thay đổi id của bảng tuy nhiên khi show ra vẫn ko có gì thay đổi

2
0
Quan điểm của bạn thế nào?. Cùng thảo luận nhé!x
()
x