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

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ạn tạo một post type mới cho loại dữ liệu nhập vào bảng.

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 tinID của fieldLoại field
Your Product Namepost_titletext
Your Product Typeyour_product_typetext
Your Offeryour_offertext
Start Datestart_datedate
End Dateend_datedate
Promotion Codepromotion_codetext

Ở đâ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é.

Click vào nút Add Field sẽ thấy các loại field để chọn.

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

Đây là các field đã tạo cho biểu mẫu.

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

Bạn 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 trong tab Settings.

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

Các field sẽ hiển thị trong phần chỉnh sửa bài viết. Sau đó, bạn có thể nhập dữ liệu cho bảng tại đây.

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.

Sử dụng shortcode để hiển thị custom field của form ra ngoài frontend bằng cách sửa dụng plugin MB Frontend Submission.

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:

Bạn chỉ cần đặt shortcode vào nơi bạn muốn hiển thị các field.

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

Cách hiển thị các field của form nhập liệu.

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:

Sử dụng CSS để style cho các field để form hiển thị đẹp hơn ngoài frontend.

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 ) %}

<table>
    <thead>
        <tr>
            <td>No.</td>
            <td>Name</td>
            <td>Type</td>
            <td>Offer</td>
            <td>Start</td>
            <td>End</td>
            <td>Code</td>
        </tr>
    </thead>
    <tbody>
        {% for p in posts %}
            <tr>
                <td>{{ loop.index }}</td>
                <td>{{ p.post_title }}</td>
                <td>{{ mb.rwmb_meta( 'your_product_type', '', p.ID ) }}</td>
                <td>{{ mb.rwmb_meta( 'your_offer', '', p.ID ) }}</td>
                <td>{{ mb.rwmb_meta( 'start_date', '', p.ID ) | date( 'Y-m-d' ) }}</td>
                <td>{{ mb.rwmb_meta( 'end_date', '', p.ID ) | date( 'Y-m-d' ) }}</td>
                <td>{{ mb.rwmb_meta( 'promotion_code', '', p.ID ) }}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>

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 TypeShortcode để dùng luôn shortcode đặt vào bài viết của mình.

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

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

Bạn đặt shortcode vào phần nội dung bài viết mà bạn muốn.

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

Đâ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ị.

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!

Để lại bình luận

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 *