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

Nội dung chính

5/5 – (10 bình chọn)

Hướng dẫn sử dụng và tùy biến bảng trong WordPress với plugin TablePressCó 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.

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

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.

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

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.

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

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.

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

Để 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. Hướng dẫn sử dụng và tùy biến bảng trong WordPress với plugin TablePress

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

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

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.

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

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.

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

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.

Related Posts

Cách nhận biết chứng khó tiêu

Chứng khó tiêu chức năng là một vấn đề dai dẳng không có nguyên nhân cơ bản rõ ràng. Các triệu chứng xảy ra không liên tục,…

Điều trị rối loạn mỡ máu

    Hiện có một số phương pháp điều trị Rối loạn mỡ máu khác nhau. Các bác sĩ thường tập trung vào việc giảm LDL và…

Giảm đau cho đau đầu gối

Thuốc giảm đau cơ bản như ibuprofen hoặc paracetamol rất hữu ích để giảm cơn đau đầu gối. Ngoài ra, bọc đá trong một miếng vải hoặc…

Mức HA nguy hiểm

Nếu huyết áp của bạn cao hơn 140/90, bạn có thể bị tăng huyết áp. Tuy nhiên, nếu huyết áp của bạn thấp hơn mức này, bạn…

Sản phẩm tốt nhất cho xuất tinh sớm

Thuốc xịt thần Ấn Độ có thể là một trong những sản phẩm tốt nhất cho người xuất tinh sớm. Tuy nhiên, nên thận trọng khi sử…

Các yếu tố quan trọng để chăm sóc nếp nhăn

Các loại kem và kem dưỡng da chống nhăn được pha chế với nhiều thành phần khác nhau. Những thành phần này có thể giúp làm giảm…

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *