Tùy biến giao diện bảng khi sử dụng plugin TablePress

Hướng dẫn tùy biến giao diện bảng khi sử dụng plugin TablePress !!!

Trước đây, mình đã từng có bài viết hướng dẫn tạo bảng trong bài viết bằng cách sử dụng plugin TablePress. Tuy nhiên, trong bài viết đó, dường như mình không đá động gì đến việc tùy biến giao diện cho chúng. Như các bạn đã biết, thì một bảng được tạo ra từ plugin TablePress sẽ có giao diện rất đơn giản và nhìn sơ qua thì thật sự nó không bắt mắt cho mấy.

Chính vì thế, trong bài viết ngày hôm nay. Mình sẽ giúp bạn biết được cách tùy biến giao diện cho chúng, làm cho bảng trong bài viết của bạn được đẹp hơn. Quan trọng hơn hết, mình nghĩ nó cần thiết cho những bạn đang thực hiện kiếm tiền từ hình thức Tiếp thị liên kết.

Công cụ chuẩn bị

Tùy theo mỗi bạn sẽ có những cách tùy biến khác nhau. Có thể là tự code, có thể là sử dụng plugin. Nhưng chung quy lại mục đích của chúng ta là muốn tạo ra một bảng thật sinh động trong bài viết. Và để phục vụ cho công việc kiếm tiền của bản thân. Ở đây cách mà mình áp dụng sẽ là sử dụng plugin và tùy biến bằng cách sử dụng thêm một số thẻ HTML và thuộc tính CSS.

  • Một số công cụ bạn cần chuẩn bị gồm:
    Plugin TablePress: Chắc chắn là phải có, vì để tạo bảng mà. Bạn có thể tải plugin tại đâyNgoài ra bạn có thể tham khảo qua bài viết hướng dẫn tạo bảng cho bài viết bằng plugin TablePress mà mình đã viết trước đó.
  • Shortcode Ultimate: Đây là plugin giúp bạn tạo ra các button mã giảm giá. Ngoài ra còn rất nhiều shortcode khác, bạn có thể xem lại bài viết hướng dẫn tạo bài viết chuyên nghiệp với plugin Shortcode Ultimate mình đã thực hiện trước đó.
  • Một số thuộc tính CSS để tùy biến giao diện bảng cũng như là một số thẻ HTML cơ bản. Mình cũng không chuyên về lập trình. Nhưng thông thường mình sẽ sử dụng tài liệu từ W3Schools để tham khảo.
  • Hình mẫu: Do có một bạn đã hỏi mình có tùy biến giao diện bảng khi sử dụng plugin Tablepress được hay không ?. Bạn đó đưa cho mình một hình ảnh là bảng đã được tùy biến khá đẹp. Và mình sẽ sử dụng nó để làm mẫu cho bài viết này luôn.

Tùy biến giao diện bảng

Ô kê, như vậy là bước chuẩn bị công cụ để tùy biến giao diện bảng xem như đã hoàn thành. Bây giờ mình sẽ hướng dẫn cách mà mình đã làm.

Tạo bảng với plugin Tablepress

Tạo bảng và nhập nội dung cho từng hàng và cột trong bảng. Bạn có thể tham khảo bài viết hướng dẫn sử dụng plugin Tablepress ở phía trên để thực hiện hiện việc này.

Ngoài ra, ở phần này. Bạn chỉ cần chú ý đến phần Table ID khi tạo bảng. Vì mình sẽ sử dụng nó để tùy biến CSS cho giao diện của bảng.

Sau khi bạn tạo bảng thành công, ta tiến hành chèn shortcode vào bài viết. Bằng cách tại trang quản trị wordpress bạn chọn Post –> Add New. Sau đó chèn shortcode của bảng mà bạn vừa tạo vào rồi Publish hoặc Save Draft tùy bạn.

Tạo Shortcode mã giảm giá

Để tạo button mã giảm giá. Bạn sẽ sử dụng plugin Shortcode Ultimate mà lúc nãy vừa tải về để tạo. Mình sẽ sử dụng bài viết mà mình đã chèn shortcode của bảng để tạo button mã giảm giá luôn.

Bạn chọn vào hình button Insert Shortcode rồi chọn Button. Tại đây bạn sẽ thấy hiện lên một popup để thiết lập hình dạng cũng như là nội dung button. Bạn chỉ cần chú ý thiết lập cho một số phần như sau:

  • Link: Đây là phần bạn sẽ điền link Affiliate của các bạn vào.
  • Target: Có 2 lựa chọn. Same Tab là chuyển hướng ngay tại tab trình duyệt mà khách nhấn vào button. New Tab sẽ mở một tab mới để chuyển hướng đến link tiếp thị liên kết của các bạn.
  • Style: Lựa chọn kiểu dáng cho button. Ở đây để có được button có dạng như hình mẫu phía trên kia. Bạn chọn Stroked
  • Background: Hình nền của button, do mình thực hiện theo mẫu. Nên mình chọn mã màu như hình trên. Bạn có thể chọn màu mà bạn thích.
Popup khi click vào button sẽ hiện lên
  • onClick: Đây là phần bạn sẽ thiết lập mã giảm giá. Tức là khi một người nào đó click vào button sẽ hiện lên popup có chứa mã giảm giá của các bạn.
s=prompt('Coupon giảm giá:','Coupon')
Mẫu Popup có chứa mã giảm giá.

  • Content: Bạn điền nội dung button vào phần này. Bạn có thể chọn Live preview để xem trước hình dáng button như thế nào. Và cuối cùng là chọn Insert Shortcode để tạo button.

Shortcode button bạn vừa tạo sẽ như hình phía dưới đây.

Bạn copy nó để chèn vào bảng mà bạn đã tạo bằng plugin Tablepress trước đó.

Tùy biến giao diện cho bảng

Đầu tiên mình sẽ thêm một số thẻ HTML và thuộc tính CSS vào ngay trong bảng mà chúng ta vừa tạo ở phía trên. Để hiệu chỉnh màu sắc cho chữ cũng như là in đậm và in nghiêng.

Ví dụ mình sẽ điều chỉnh cho hàng đầu tiên và hàng thứ hai trong bảng mẫu ở trên.

Mình sẽ thêm một số thẻ HTML và thuộc tính CSS kèm theo để tùy chỉnh nội dung trong bảng.

Hàng thứ nhất

1.1

<p style="text-align: center; color: #ffffff;"><strong>Quyền Lợi Giảm Giá</strong></p>

1.2

<p style="text-align: center; color: #ffffff;"><strong>Thời gian áp dụng</strong></p>

1.3

<p style="text-align: center; color: #ffffff;"><strong>Nhấn nút đễ lấy mã</strong></p>

Hàng thứ 2

2.1

<font style="color: #008000"><strong>MÃ GIẢM GIÁ 20%</strong></font> <font style="color: #0000ff"><strong>MUA BÌNH GIỮ NHIỆT</strong></font>
<li>Nhập mã vừa được giảm giá vừa có cơ hội trúng <font style="color: #ff0000">1 Ô tô</font>, <font style="#0000ff">6 Xe Máy SH Mode</font>, <font style="color: #008000">80 TV</font>, <font style="color: #ff3fff">3000 Mũ Bảo Hiểm</font>, <font style="color: #008000">3000 Áo Mưa</font>, <font style="color: #800080">5000 Cốc Sứ</font></li>

2.2

<p style="text-align: center;"><strong>30/11</strong></p>

Hàng thứ 3

3.1

<font style="color: #008000"><strong>MÃ GIẢM GIÁ 50K</strong></font> <font style="color: #0000ff"><strong>MUA BÌNH GIỮ NHIỆT</strong></font>
<li>Nhập mã vừa được giảm giá vừa có cơ hội trúng <font style="color: #ff0000">1 Ô tô</font>, <font style="#0000ff">6 Xe Máy SH Mode</font>, <font style="color: #008000">80 TV</font>, <font style="color: #ff3fff">3000 Mũ Bảo Hiểm</font>, <font style="color: #008000">3000 Áo Mưa</font>, <font style="color: #800080">5000 Cốc Sứ</font></li>

3.2

<p style="text-align: center;"><strong>30/11</strong></p>

Hàng thứ 4

4.1

<font style="color: #00bdf4">MÃ GIẢM GIÁ TIKI 10% mua<strong> Action Camera</strong></font>
<li>Giảm ngay 10% giá các sản phẩm Action Camera <a href="#">khi nhập mã này</a></li>

4.2

<p style="text-align: center;"><strong>30/11</strong></p>

Hàng thứ 5

5.1

<font style="color: #008017;">MÃ GIẢM GIÁ TIKI 15% mua <em><strong>PHỤ KIỆN ACTION CAMERA</em></strong>

5.2

<p style="text-align: center;"><strong>30/11</strong></p>

Còn lại 2.3, 3.3, 4.3 và 5.3 thì mình đã chèn shortcode button rồi. Sẽ không tùy biến gì thêm nữa.

Sau khi đã thêm bớt xong xuôi, bạn chọn Save Changes để lưu lại.

Tùy biến CSS

Bạn kéo xuống phần Table Options

Tại đây bạn chọn Custom CSS như hình trên.

Ở đây bạn sẽ thêm các tùy biến giao diện bảng bằng CSS. Trước khi tùy biến theo ý mình, bạn nên tham khảo tài liệu hướng dẫn của plugin TablePress tại đây

Cuối cùng bạn có thể sử dụng code dưới đây để thêm vào

.tablepress {
width: 720px;
}



.tablepress-id-4 .row-1 {
padding: 5px;
margin: 5px;
background: #750000;
text-align: center;
}



.tablepress-id-4 .row-2 {
padding: 5px;
margin: 5px;
background: #ffffff;
text-align: center;
}



.tablepress-id-2 .row-3 {
padding: 5px;
margin: 5px;
background: #ffffff;
text-align: center;
}



.tablepress-id-4 .row-4 {
padding: 5px;
margin: 5px;
background: #ffffff;
text-align: center;
}



.tablepress-id-4 .column-1 {
width: 450px;
border-style: solid;
border-width: 1px;
border-color: #ffffff;
text-align: justify;
}



.tablepress-id-4 .column-2 {
width: 100px;
border-style: solid;
border-width: 1px;
border-color: #ffffff;
vertical-align: middle;
}



.tablepress-id-4 .column-3 {
width: 170px;
border-style: solid;
border-width: 1px;
border-color: #ffffff;
vertical-align: middle;
}

Ở đây có một chú ý mà trong tài liệu hướng dẫn có nói. Khi bạn viết CSS để tùy biến giao diện bảng. Bạn phải viết cho hàng trước rồi mới đến cột. Ví dụ bạn muốn tùy biến cho hàng thứ hai thì row-x rồi mới đến column-x.

Và trong khi tùy chỉnh bạn nên thay thế .tablepress-id-4 thành số ID của bảng mà bạn đã tạo nhé.

Cuối cùng bạn chọn Save Changes để lưu lại.

Kết quả bảng đã được tùy biến có dạng như hình dưới đây.

Nhìn chung thì cũng tương đối rồi. Cái mà mình muốn hướng dẫn các bạn ở đây chính là cách để chúng ta tùy biến chúng là như thế nào. Sau này, cứ dựa vào cách này để tùy biến bất kì một sản phẩm nào đó mà bạn muốn.

Video hướng dẫn

Bạn có thể tham khảo video dưới đây để hình dung một cách dễ dàng hơn cách mà mình sử dụng để tùy biến giao diện bảng.

Lời kết

Như vậy, trên đây là bài viết hướng dẫn tùy biến giao diện bảng theo cách riêng của mình. Muốn gửi gấm đến các bạn đang có nhu cầu tạo bảng có giao diện đẹp mắt bằng plugin TablePress. Hi vọng qua bài viết này, có thể giúp ích được cho bạn một phần nào cho trong công việc kiếm tiền từ hình thức tiếp thị liên kết nói riêng và kiếm tiền online nói chung của mình.

Cuối cùng chúc các bạn thành công và đừng quên like cũng như là chia sẽ bài viết đến cho bạn nào cần nhé. Hẹn gặp lại các bạn trong những bài viết sau.

Tùy biến giao diện bảng khi sử dụng plugin TablePress
5 (100%) 2 votes

You May Also Like

Tác giả: Nguyễn Cao Tiến

"Cảm hứng xuất phát từ đôi tay". Chỉ có khi bắt tay vào làm một việc gì đó mà bạn đam mê. Bạn mới có thể tìm được chính con người bạn.

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

ĐĂNG KÝ NHẬN BẢN TIN

%d bloggers like this: