Hướng dẫn sử dụng và tùy biến bảng trong WordPress với plugin TablePress

Có một số bạn hỏi mình cách sử dụng, tùy biến bảng trong WordPress với plugin TablePress. Nên hôm nay mình xin viết bài viết này để hướng dẫn chi tiết nhất cách tùy biến bảng trong WordPress với plugin TablePress. Qua đó giúp nhiều bạn khác đang tạo Blog mã giảm giá kiếm tiền với tiếp thị liên kết biết cách tùy biến bảng TablePress một cách đẹp mắt để thu hút độc giả click vào liên kết tăng thu nhập cho bản thân.

Yêu cầu khi tùy biến bảng trong WordPress với plugin TablePress

• Bạn phải tiến hành cài đặt và kích hoạt plugin TablePress
• Cài đặt và kích hoạt plugin My Shortcodes hoặc plugin Shortcode Ultimate để tạo button nút lấy mã giảm giá.

Nên xem: Top 5 theme wordpress chia sẻ coupon đẹp nên dùng

Sau đây là các bước thực hiện

Cài đặt và kích hoạt plugin TablePress

Đầu tiên, tại trang quản trị Blog của bạn, trên trình đơn bạn tìm đến Gói mở rộng, nhấn vào nút Cài mới. Bạn điền từ khóa TablePress vào ô tìm kiếm chở khoảng vài giây để việc tìm kiếm diễn ra. Khi plugin TablePress  xuất hiện bạn click vào nút Cài đặt ngay bây giờ để tiến hành cài đặt plugin này.

Khi plugin đã cài đặt xong, bạn tiến hành click vào nút Kích hoạt để kích hoạt plugin này. Như vậy plugin này đã hoạt động trên site của bạn.

Cách tạo nút button lấy mã giảm giá

Mình đã có bài viết hướng dẫn tạo nút lấy mã giảm giá bằng plugin My Shortcodes. Bạn có thể theo link bên dưới để biết cách làm.

Nên xem: Tạo nút button lấy Mã giảm giá bằng plugin My Shortcodes

Nếu bạn không sử dụng được plugin tạo nút mã giảm giá này có thể thay thế bằng plugin Shortcode Ultimate. Đây là plugin tạo nút lấy mã giảm giá rất chuyên nghiệp và đẹp mắt mà mình khuyên bạn nên sử dụng.

Cách tạo bảng và tùy biến  bảng trong WordPress với plugin TablePress

Tại trình đơn, bạn chọn TablePress, nhấn vào nút Add New để tiến hành tạo bảng. Bạn có thể làm theo hướng dẫn như trong hình.

Khi bạn nhấn nút Add Table trên màn hình sẽ xuất hiện một bảng table gồm 3 cột và 5 hàng như bên dưới.

Để tùy biến bảng table này trở nên đẹp mắt hơn bạn tiến hàng sửa các đoạn code bên dưới theo ý của bạn. Bạn không nên copy các đoạn code bên dưới dán vào bảng table trên rồi sau đó chỉnh sửa, như vậy rất mất thời gian. Để sửa nhanh bạn có thể copy vào khung soạn thảo hoặc vào trang Word để tiến hành chỉnh sửa.

Hàng đầu tiên

1.1

<p style="text-align: center; color: #007FFF;"><strong>Điều kiện Giảm Giá</strong></p>

1.2

<p style="text-align: center; color: #007FFF;"><strong>Thời gian hết hạn</strong></p>

1.3

<p style="text-align: center; color: #007FFF;"><strong>Copy mã</strong></p>

Hàng 2

2.1

<font style="color: #008000"><strong>Mã giảm giá Lazada 120K </strong></font> <font style="color: #0000ff"><strong>cho hàng gia dụng Philips</strong></font>
<li>Áp dụng cho sản phẩm từ  <font style="color: #ff0000">1.000.000đ</font>, <font style="#0000ff">không áp dụng cho các</font>, <font style="color: #008000">sản phẩm</font>, <font style="color: #ff3fff">đồng giá</font></li>

2.2

<p style=”text-align: center;”><strong>31/7/2017</strong></p>

2.3

{amcoupon code=”Hawkhost50″ link=”https://duydam.com/hosting/HawkHost” title=”MÃ GIẢM GIÁ 40%”}

Hàng 3

3.1

<font style="color: #008000"><strong>Mã giảm giá Lazada 15%</strong></font> <font style="color: #0000ff"><strong>khi mua các sản phẩm từ Adiva</strong></font>
<li>Ngành hàng:<font style="color: #ff0000">TINH CHẤT LÀM ĐẸP ADIVA </font>. <font style="#0000ff">Lưu ý:</font>, <font style="color: #008000">Giảm tối đa</font>, <font style="color: #ff3fff">60.000đ</font>, <font style="color: #008000">cho đơn hàng từ</font>, <font style="color: #800080">400.000đ</font></li>

3.2

<p style=”text-align: center;”><strong>31/7/2017</strong></p>

3.3

{amcoupon code=”Hawkhost50″ link=”https://duydam.com/hosting/HawkHost” title=”MÃ GIẢM GIÁ 40%”}

Hàng 4

4.1

<font style="color: #00bdf4">Khuyến mãi Lazada 5%<strong>khi mua mặt hàng bỉm/tã Bobby</strong></font>
<li>Ngành hàng: BỈM - TÃ <a href="#">Giá được giảm ngay tại bước mua cuối</a></li>

4.2

<p style="text-align: center;"><strong>31/7/2017</strong></p>

4.3

{amcoupon code=”Hawkhost50″ link=”https://duydam.com/hosting/HawkHost” title=”MÃ GIẢM GIÁ 40%”}

Hàng thứ 5

5.1

<font style="color: #008017;">Mã giảm giá 10% <em><strong>dành cho sản phẩm Biti's Hunter</em></strong>
<li>Ngành hàng:<font style="color: #ff0000">GIÀY BITI'S</font>. <font style="#0000ff">Lưu ý:</font>, <font style="color: #008000">Giảm tối đa</font>, <font style="color: #ff3fff">100K</font>, <font style="color: #008000">chỉ áp dụng cho</font>, <font style="color: #800080">các mẫu mới</font></li>

5.2

<p style="text-align: center;"><strong>31/7/2017</strong></p>

5.3

 {amcoupon code=”Hawkhost50″ link=”https://duydam.com/hosting/HawkHost” title=”MÃ GIẢM GIÁ 40%”}

Các đoạn code ở những mục 2.3, 3.3, 4.3, 5.3 là các đoạn code tạo nút lấy mã giảm giá bằng plugin My Shortcode. Khi bạn cài đặt plugin này và thiết lập như bài viết mà mình đã hướng dẫn thì bạn có thể copy đoạn mã trên và chỉnh sửa theo ý của bạn. Nhớ sửa dấu { } thành dấu [ ] bạn nhé.

Khi bạn chỉnh sửa các đoạn code trên theo ý của bạn. Bạn tiến hành copy các đoạn code trên vào ô tương ứng như hình bên dưới mình đã làm. Sau khi điền đầy đủ các thông tin trong bảng, bạn tiến hành nhấn nút Save Changes để lưu các thiết lập. Khi đã lưu xong bạn tiến hành copy đoạn Shortcode có tên {table id=1/ } và dán vào bài viết của bạn. 

Để việc tùy biến trở nên đẹp hơn bạn phải thêm một đoạn CSS code vào plugin này.

Để thêm CSS code bạn kéo xuống dưới trang tìm đến Ô Table Options sau đó click vào nút CUSTOM CSS

Dưới đây là đoạn code bạn cần điền.

.tablepress {
width: 720px;
}

 

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

 

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

 

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

 

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

 

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

 

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

 

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

Sau khi copy đoạn code trên bạn dán vào ô như hình bến dưới mình đã làm và tiến hành nhấn nút Save Changes để lưu lại.

Lưu ý: Mỗi bảng bạn tạo sẽ có số ID riêng. Khi bạn tạo một bảng xong thì nên sửa đoạn code trên ứng với sô ID của bảng rồi dán vào CUSTOM CSS của bảng đó.

Dưới đây là kết quả mà mình đã làm được. Bạn có thể tự làm theo và chiêm ngưỡng thành quả của mình.

Lời kết

Trên đây là toàn bộ bài viết hướng dẫn sử dụng và tùy biến bảng trong WordPress với plugin TablePress chi tiết nhất. Nói chung hiện nay ít bạn còn sử dụng plugin này để tạo bảng cung cấp mã giảm giá mà đã sử dụng các theme chuyên biệt để tạo Blog cung cấp mã giảm giá rồi. Nó sẽ trông đẹp hơn và chuyên nghiệp hơn. Nhưng nếu bạn nào vẫn còn muốn sử dụng bảng này để tạo bảng lấy mã giảm giá thì đây chính là bài viết dành cho bạn.