Tạo, cập nhật và hiển thị tự động bảng dữ liệu trên bài viết WordPress -Top1Job

Có khi nào bạn có một bảng dữ liệu tổng hợp (hay còn gọi là cheat sheet) đăng trên một trang hoặc một bài viết, được cập nhật thông tin thường xuyên nhưng lại không muốn liên tục sửa bài kiểu thủ công không? Mình đã từng làm thủ công như vậy khi tổng hợp danh sách các deal giảm giá cho Black Friday. Phải nói là thực sự “toát mồ hôi hột” khi mỗi ngày phải sửa bài để cập nhật deal vài lần luôn ấy.

Vậy nên, mình đã tìm cách để làm một bảng dữ liệu mà có thể cập nhật dữ liệu tự động. Mình sẽ nhập thông tin vào một form nhập liệu, sau đó dữ liệu sẽ được đặt vào bảng. Hiển thị vừa đẹp lại vừa tiện. Hãy cùng xem cách mình làm nhé.

Lưu ý: Bạn có thể dùng cách mình hướng dẫn ở đây để tạo rất nhiều kiểu form nhập liệu hay các bảng tổng hợp thông tin (cheat sheet) với các ứng dụng thực tế như là:

• Quản lý contact khách hàng
• Tổng hợp các đầu mục tài liệu / sách
• Tổng hợp các địa điểm du lịch
• Danh sách nhân viên trong công ty
• Danh sách đối tác
• Danh sách sinh viên
• …

Chuẩn bị

Bạn cần cài đặt các công cụ sau nhé:

• Meta Box plugin: đây là framework giúp mình tạo custom post type và custom field. Plugin này miễn phí và có trên wordpress.org.
• MB Custom Post Types & Custom Taxonomies: plugin này là một extension của Meta Box. Nó cho mình một giao diện trực quan trong backend để tạo custom post type. Plugin này miễn phí và cũng có trên wordpress.org. Tuy nhiên, nếu bạn đã mua các gói premium của Meta Box thì plugin này đã được tích hợp sẵn trong gói rồi nhé.
• Meta Box Builder: cung cấp một giao diện trực quan để tạo custom field.
• MB Frontend Submission: giúp hiển thị các custom field ra frontend để người dùng có thể nhập liệu từ frontend.
• MB Views: giúp hiển thị các giá trị của các custom field ra frontend.

Ở đây, cả 3 công cụ là Meta Box Builder, MB Frontend Submission, và MB Views đều là các premium extension của Meta Box. Bạn sẽ cần mua các plugin này, hoặc mua các gói sản phẩm của Meta Box để có được cả 3 công cụ này với giá tối ưu nhất.

Trong bài viết này, mình sẽ dùng tất cả các công cụ trên để tạo một bảng dữ liệu về thông tin các chương trình giảm giá (deal) cho Black Friday mà mình đã nói nhé. Mỗi một deal sẽ có các thông tin bao gồm:

• Tên sản phẩm được giảm giá (Product Name)
• Loại sản phẩm (Product Type)
• % giảm giá (Offer)
• Ngày bắt đầu deal (Start Date)
• Ngày kết thúc deal (End Date)
• Mã giảm giá (Promotion Code)

Bước 1: Tạo một custom post type mới

Mình cần tạo một post type mới cho loại dữ liệu nhập vào bảng. Mỗi một deal sẽ là 1 post của post type này.

Bước 2: Tạo form để nhập dữ liệu

Mình sẽ tạo một nhóm các custom field (field group), mỗi field sẽ được sử dụng để nhập một loại thông tin của deal mà mình đã nói ở trên.

Tên trường thông tin	ID của field	Loại field
Your Product Name	post_title	text
Your Product Type	your_product_type	text
Your Offer	your_offer	text
Start Date	start_date	date
End Date	end_date	date
Promotion Code	promotion_code	text

Ở đây, mình sẽ sử dụng luôn field post_title để lưu tên của sản phẩm (Product Name). Như mình đã nói, mỗi deal sẽ là một post, nên mình sẽ lưu tên sản phẩm là tiêu đề (title) của post luôn.

Mình vào Meta Box > Custom Fields > Add New để tạo một field group mới. Click vào nút Add Field và bạn sẽ thấy các loại field để chọn, bạn hãy chọn loại bạn cần nhé.

Và đây là các field mình đã tạo.

Ở tab Settings của field group này, mình sẽ chọn Location là Post Type và Deal để gán các field này vào các bài viết của Deal.

Lúc này, các field sẽ hiển thị trong phần chỉnh sửa bài viết như sau:

Nếu chỉ có một mình bạn hoặc nhân viên trong công ty của bạn nhập liệu, thì bạn có thể để mọi người nhập liệu trực tiếp từ trang chỉnh sửa bài viết này là được. Nhưng nếu bạn muốn người ngoài cũng có thể nhập thông tin vào bảng dữ liệu của bạn, thì bạn cần phải đưa form nhập liệu ra ngoài frontend nhé.

Bước 3: Hiển thị form nhập liệu lên frontend

Để hiển thị được các custom field của form ra ngoài frontend, chúng ta cần sự giúp sức của plugin MB Frontend Submission. Plugin này sẽ tự động tạo một shortcode cho mỗi field group của bạn như này.

Bạn chỉ cần đặt shortcode vào nơi bạn muốn hiển thị các field là được. Mình sẽ đặt shortcode vào phần nội dung của 1 trang như sau:

Tuy nhiên, ở đây mình muốn có thêm một số thứ khác nữa ở trên form của mình, nên mình đã thêm vào một số thuộc tính vào shortcode như sau:

[mb_frontend_form id="black-friday-deal" ajax="true" post_status="draft"  recaptcha_key="your_key" recaptcha_secret="your_key"]

Trong đó:

• black-friday-deal: là ID của field group mà mình đã tạo ở bước 2;
• ajax="true": Bật load ajax;
• recaptcha_key và recaptcha_secret: Google reCaptcha site key và secret key. Mình sử dụng reCaptcha để tránh ai đó spam;
• your_key: Bạn điền key tương ứng của Google reCaptcha của bạn vào đây nhé;
• post_status="draft": Mình muốn dữ liệu cần phải được kiểm duyệt trước khi đăng nên mình thiết lập để bài viết này ở trạng thái “draft” ngay sau khi người dùng submit.

Và các field của form nhập liệu của mình hiển thị như này:

Nếu bạn muốn thêm các thuộc tính khác cho form nhập liệu, bạn có thể thêm chúng vào shortcode nhé. Bạn xem danh sách các thuộc tính bạn có thể thêm vào và hướng dẫn chi tiết ở đây.

Bước 4: Style cho form nhập liệu

Nếu bạn muốn form hiển thị đẹp hơn, bạn có thể dùng CSS để style cho các field này.

Bạn vào Customizer > Additional CSS và thêm code CSS nhé. Mình thêm 1 đoạn CSS như sau:

.rwmb-form {
    background: #e2e8f0;
    padding: 24px;
    border-radius: 4px;
    max-width: 768px;
    margin: 0 auto;
}
.rwmb-form .rwmb-meta-box .rwmb-field {
    padding: 0 5px;
}
.rwmb-form .rwmb-field:not(:last-of-type) {
    margin: 0 0 12px;
}
.rwmb-form .rwmb-label,
.rwmb-form .rwmb-field .rwmb-input,
.rwmb-form .rwmb-field .select2-container {
    float: none;
    width: 100%;
    margin-bottom: 5px;
}
.rwmb-form button, .rwmb-form input {
    width: 100%;
}
.rwmb-form .rwmb-input input,
.rwmb-form .rwmb-input select {
    max-width: 100%;
}
.rwmb-form .select2-container .select2-selection--single,
.rwmb-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
}
.rwmb-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
}

Form nhập liệu của mình đã đổi sang diện mạo mới như này:

Bước 5: Hiển thị dữ liệu dưới dạng bảng

Cuối cùng, mình sẽ cần lấy các dữ liệu đã nhập vào các custom field của form nhập liệu và hiển thị chúng thành bảng trên một bài viết.

Mình sẽ dùng luôn MB Views của Meta Box để hiển thị các dữ liệu này.

Vào Meta Box > Views > Add New, và mình thêm đoạn code sau:

{% set args = {post_type: 'deal', posts_per_page: -1, orderby: 'date', order: 'ASC' } %}
{% set posts = mb.get_posts( args ) %}

 

No.

 

Name

 

Type

 

Offer

 

Start

 

End

 

Code

 

 

 

    
        {% for p in posts %}

{{ loop.index }}

 

{{ p.post_title }}

 

{{ mb.rwmb_meta( 'your_product_type', '', p.ID ) }}

 

{{ mb.rwmb_meta( 'your_offer', '', p.ID ) }}

 

{{ mb.rwmb_meta( 'start_date', '', p.ID ) | date( 'Y-m-d' ) }}

 

{{ mb.rwmb_meta( 'end_date', '', p.ID ) | date( 'Y-m-d' ) }}

 

{{ mb.rwmb_meta( 'promotion_code', '', p.ID ) }}

 

 

        {% endfor %}

 

 

Trong đó, mình sử dụng một custom query là get_posts. Các biến như là post_title , your_product_type , your_offer , … là ID của các field.

Ở phần Settings của view này, mình chọn Type là Shortcode để dùng luôn shortcode đặt vào bài viết của mình.

Mình đặt shortcode vào phần nội dung bài viết như sau:

Đây là toàn bộ nội dung bài viết ngoài frontend với bảng danh sách các deal hiển thị như sau:

Vậy là mình đã làm xong bảng dữ liệu rồi đó. Khi ai đó nhập thông tin vào form mình đã tạo, dữ liệu sẽ được lưu ở một bài viết có post type là Deal và ở trạng thái “draft”. Nếu mình duyệt nội dung đó thì mình sẽ chuyển bài viết đó thành “Published”. Khi đó, thông tin về deal giảm giá sẽ tự động hiển thị ngay trên bài viết của mình.

Video hướng dẫn (tiếng Anh)

Lời cuối

Hy vọng với bài hướng dẫn này, bạn có thể dễ dàng hình dung và thao tác để nhập liệu và hiển thị dữ liệu tự động. Như mình đã nói, cách này có thể ứng dụng vào rất nhiều trường hợp trong thực tế. Bạn hãy thử nhé, và hãy chia sẻ kết quả với mọi người ở dưới phần comment này nhé. Và đừng quên theo dõi các bài hướng dẫn tiếp theo của mình! Chúc các bạn thành công!