Hướng dẫn tùy chỉnh bảng WordPress bằng TablePress

Tạo bảng (table) là 1 công việc bắt buộc phải gặp và phải làm một khi chúng ta viết blog/làm website.

Chúng ta có thể sử dụng html code để tạo bảng.

Nhưng điều này thực sự là 1 thử thách cho những bạn không biết hoặc không rành về code, trong đó có tôi.

Đâu là giải pháp?

May mắn thay, với wordpress, chúng ta có thể sử dụng plug in để tạo bảng dễ dàng.

Ngày nay, có vô số plug in làm được việc tạo bảng này, miễn phí có, có phí có.

Trong các plug in kể trên, plug in TablePress là plug in miễn phí và nó được sử dụng phổ biến nhất (có hơn 600,000 lượt cài đặt tính đến hiện tại).

Trong bài viết này, tôi sẽ hướng dẫn các bạn cách tạo bảng bằng TablePress và cách tùy chỉnh bảng.

TẠO BẢNG BẰNG TABLEPRESS

Đầu tiên, bạn cần cài đặt plug in TablePress.

Vào Plugins >> Add New. Trong thanh Search gõ “TablePress”

Bấm Install Now >> Active. Done, bạn đã cài xong plug in TablePress.

Tạo bảng như thế nào?

Vào TablePress >> Add New Table

Đến phần thiết lập ban đầu cho bảng.

Bạn nhập tên cho bảng để dễ quản lý, nhập thêm miêu tả nếu muốn.

Phần dưới bạn nhập số hàng, số cột của bảng.

Nhập xong bấm Add Table.

Trong ví dụ này, tôi sẽ tạo bảng với 3 hàng, 3 cột.

Bạn chú ý thấy cái shortcode cho bảng này là

Sau này, trong bài post hay page, muốn chèn cái bảng này vào thì bạn chỉ cần chèn cái shortcode này vào là xong.

 

Muốn chỉnh sửa bảng trong post/page thì các bạn lại vào chỉnh sửa trong phần bên dưới này (chứ không chỉnh sửa được trực tiếp trên post/page).

Sau khi chỉnh sửa bảng và Save lại thì bảng sẽ tự cập nhật lại trong bài viết.

Bạn muốn nhập nội dung cho bảng thì chỉ việc trỏ chuột vào đúng ô (Cell) và nhập thôi.

Bạn có thể thêm/xóa hàng hoặc cột.

Nếu muốn tùy chỉnh văn bản (đổi màu, in đậm, gạch chân, chèn link, chèn ảnh…) thì bấm vào Cell và bấm vào Advanced Editor.

Muốn chỉnh cái này thì bắt buộc bạn phải biết sơ sơ về html code.

Dưới đây là ví dụ bảng của tôi

Sau khi nhập liệu xong, bạn bấm Preview để xem trước có OK không. Kết quả:

Cũng khá OK đúng không nào?

Tuy nhiên, khi dán cái shortcode của bảng này vào post thì nó hiển thị như sau

Nếu bạn muốn xóa 2 cái này (show và edit) thì bỏ tick trong Table Head Row (phần The first row of the table is the table header).

Kết quả là phần show và edit đã biến mất.

Tuy nhiên, hàng đầu tiên (row 1 – row header) lúc này lại không nổi bật, giống như các hàng bên dưới.

Làm thế nào để tùy chỉnh hàng này?

Như đã nói ở trên, bạn có thể dùng Advance editor để chỉnh sửa lại font, màu chữ, in đậm, in nghiêng…phần này.

Đây là ví dụ sau khi chỉnh sửa bằng Advance Editor:

Cũng khá OK.

Tuy nhiên, muốn chỉnh sửa màu nền hàng, tạo đường viền cột thì chúng ta không thể sử dụng Advance Editor trên được.

Để làm được việc này, ta phải chỉnh sửa trong phần Custom CSS của TablePress.

TÙY CHỈNH BẢNG TABLEPRESS BẰNG CUSTOM CSS

Bấm vào Custom CSS trong Table Option.

Bạn sẽ thấy phần custom css editor:

Vấn đề ở đây là tìm cú pháp custom css như thế nào?

Bạn có thể tìm thấy cú pháp CSS tại trang FAQ của TablePress. Đây là cú pháp đầy đủ nhất, cần thay đổi gì thì bạn tra cứu tại đây.

Ví dụ: để thay đổi màu nền của 1 hàng bất kỳ, bạn dùng cú pháp sau:

.tablepress-id-N .row-X td {
	background-color: #00cc99;
}

Trong đó:

  • N: là số thứ tự của bảng trong shortcode, trong ví dụ này, N=3
  • X: là thứ tự hàng
  • #00cc99: là màu HEX bất kỳ theo ý thích của bạn

Bạn nhập cú pháp này vào Custom CSS fiel trên. Sau đó bấm Save change.

Kết quả:

Còn muốn thay đổi cột thì bạn dùng cú pháp sau

.tablepress-id-N .column-Y {
border-style: solid;
border-width: 1px;
border-color: gray;
}

Trong đó:

  • N: là số thứ tự của bảng trong shortcode, trong ví dụ này, N=3
  • Y: số thứ tự cột tính từ trái qua phải

Các câu lệnh html như width, border-style, border-width… là tùy thuộc vào mục đích tùy biến của bạn.

Trong ví dụ này, mục đích của tôi là tạo thêm dòng kẻ phân cách giữa các cột với nhau.

Tương tự, dán cú pháp này vào phần Custom CSS, bấm Save change.

Kết quả:

Đến đây thì có vẻ cái bảng cũng Ok rồi đấy.

Có 1 cái rất hay là bạn có thể kết hợp plug in Shortcode Ultimate để chèn button vào trong bảng của TablePress.

Đầu tiên, bạn tạo nút bấm bằng Shortcode Ultimate, sau đó lấy shortcode của nút bấm này và chèn vào Cell của TablePress.

Kết quả sau khi chèn nút bấm bằng Shortcode Ultimate:

chèn nút bấm vào bảng

Lời kết

Đến đây, các bạn đã biết cách tạo bảng trong WordPress bằng plug in TablePress, một plug in miễn phí nhưng rất hữu dụng.

Các bạn còn biết cách tùy chỉnh bảng bằng Custom CSS.

Các cú pháp trong ví dụ trên chỉ là 1 phần nhỏ, tùy mục đích, bạn có thể dùng những câu lệnh html khác để tùy biến theo ý mình.

Chúc các bạn thực hiện thành công!

Bình luận của bạn