Hướng dẫn tablepress wordpress - máy tính để bàn wordpress

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
  • Cấu hình plugin TablePress
  • Tùy chỉnh nâng cao plugin TablePress

Tạo bảng trong WordPress với plugin TablePress

Tổng quan plugin TablePress

Cấu hình plugin TablePressresponsive 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:

• Tùy chỉnh nâng cao 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 đó.

Cấu hình plugin TablePress

Tùy chỉnh nâng cao 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: Hướng dẫn cài đặt Plugin cho WordPress đơn giản với 4 cách.

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.: 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.
• 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 đó.: tạo một bảng thống kê mới.
• 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.: nhập bảng từ các định dạng dữ liệu như: Excel, CSV, HTML và JSON.
• Các bảng có thể được Import và Export sang nhiều định dạng như: Excel, CSV, HTML và JSON,…: xuất dữ liệu bảng ra các định dạng: Excel, CSV, HTML và JSON.
• Đầu tiên, bạn cần phải tiến hành cài đặt và kích hoạt plugin TablePress.: tùy chọn nâng cao của plugin.
• Đọc thêm: Hướng dẫn cài đặt Plugin cho WordPress đơn giản với 4 cách.: giới thiệu về 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

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.: tên bảng cần tạo
• 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 đó.: miêu tả bảng cần tạo
• 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.: 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)
• Các bảng có thể được Import và Export sang nhiều định dạng như: Excel, CSV, HTML và JSON,…: 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)

Đầu tiên, bạn cần phải tiến hành cài đặt và kích hoạt plugin TablePress.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:

• Đọc thêm: Hướng dẫn cài đặt Plugin cho WordPress đơn giản với 4 cách.: 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)
• 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: nhập các giá trị cần thiết
• Trong đó:: 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
• 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.: tùy chọn hiển thị của bảng
• Add New Table: tạo một bảng thống kê mới.: tùy chỉnh cấu hình cho người dùng
• Import a Table: nhập bảng từ các định dạng dữ liệu như: Excel, CSV, HTML và JSON.: xem trước bảng vừa tạo để chỉnh sửa cho phù hợp sau đó lưu lại
• Exprot a Table: xuất dữ liệu bảng ra các định dạng: Excel, CSV, HTML và JSON.: tùy chọn việc sao chép, nhập và xóa dữ liệu bảng

Plugin Options: tùy chọn nâng cao của plugin. Đâ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.

About TablePress: giới thiệu về plugin TablePress.: 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.

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

Table Name: tên bảng cần tạo: 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ị. 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.Features of the DataTables JavaScript library sẽ bị mờ đi. Kết quả là trông bảng sẽ đẹp hơn.

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ù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 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é. 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;“. 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.: 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. 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). 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. 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. 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 màu nền của một hàng bất kỳ:

.tablepress-id-N tbody td {
	font-family: Arial;
	font-size: 14px;
	color: #1515b5;
}

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. 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 ý: 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. 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

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;.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:

Thay đổi font chữ, cỡ chữ và màu chữ:

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

.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;
}

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

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

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

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