Cách tạo trang FAQs sử dụng plugin Meta Box

Nếu bạn đang tự hỏi thế nào là một trang FAQs thì ngay bây giờ chúng mình sẽ giúp bạn giải đáp câu hỏi này thật ngắn gọn. FAQs là viết tắt của cụm từ “Frequently Asked Questions” hay còn gọi là “Các câu hỏi thường gặp”. Vì vậy, FAQs là trang hỏi đáp giúp trả lời các câu hỏi phổ biến nhất về sản phẩm của bạn trên website một cách nhanh chóng và trực tiếp cho khách hàng. Trang hỏi đáp là một điều không thể thiếu đối với mỗi một doanh nghiệp bởi nó không chỉ giải quyết các vấn đề của khách hàng, mà còn thúc đẩy mối quan hệ giữa bạn và người dùng.

Đặc biệt, khi bạn có một trang web WordPress, bạn nên biết phương pháp để tạo trang hỏi đáp theo ý mình. Có rất nhiều cách để làm điều đó, và trong bài viết này, chúng mình sẽ chia sẻ với bạn một trong những cách hữu ích nhất để tạo một trang FAQs – đó là cách sử dụng plugin Meta Box.

TRƯỚC KHI BẮT ĐẦU

Cài đặt plugin được yêu cầu

Để có thể làm theo hướng dẫn trong bài viết này, đầu tiên bạn cần phải tải plugin Meta Box. Nó là điều kiện cần thiết để giúp bạn tạo trang FAQ. Bạn có thể tải xuống tại đây. Nếu đây là lần đầu tiên bạn thử plugin này, bạn có thể tham khảo bài viết này xem sao nhé!

Plugin Meta Box là phiên bản miễn phí, cung cấp framework để bạn tạo custom field cho trang FAQ. Tuy nhiên, chúng ta cần sử dụng 2 extensions cần trả phí khác trong gói Meta Box để có thể tạo được trang FAQs, đó là Meta Box GroupMeta Box Builder. Sẽ rất thuận tiện khi bạn có thể chọn chỉ mua lẻ 2 extensions cao cấp này trong gói Meta Box hoặc mua cả gói Meta Box để tiết kiệm chi phí!

Sau khi có được 2 extensions này và plugin Meta Box, đừng quên tải chúng lên thư mục WordPress và kích hoạt chúng nhé. Hoặc với plugin miễn phí Meta Box, bạn có thể vào Dashboard > Plugin > Add News và tìm tên Meta Box trên thanh tìm kiếm plugin trong kho plugin miễn phí của WordPress, sau đó tải xuống và kích hoạt.

Chuẩn bị Giao diện cho trang FAQs

Rõ ràng, bố cục và giao diện cho trang web là không thể thiếu cho bất cứ website nào, không chỉ đối với mỗi trang hỏi đáp. Nếu bạn là một lập trình viên, thì điều đó còn tuyệt hơn vì bạn có thể tự thiết kế và xây dựng giao diện cho riêng mình. Nếu không thì trên Internet luôn có sẵn những HTML template miễn phí dành cho bạn.
Trong bài viết này, mình sẽ sử dụng Nav Tab của thư viện Bootstrap 4 để hướng dẫn các bạn tạo giao diện mẫu cho trang hỏi đáp theo phương pháp này.

Chuẩn bị Giao diện cho trang FAQs

HƯỚNG DẪN CHI TIẾT

Tạo trang cho trang FAQs

Bước 1: Tạo một giao diện mẫu

Sao chép giao diện vào thư mục “theme” hoặc thư mục “template-parts” của WordPress, miễn sao bạn có thể quản lý, phát triển và sửa nó một cách thuận tiện nhất. Trong trường hợp này thì mình sẽ đặt nó vào thư mục có tên là “theme” cho đơn giản và dễ nhớ.
Đường dẫn chuẩn sẽ hiển thị như sau: wordpress\wp-content\themes

Tạo một giao diện mẫu

Lưu ý: Hãy nhớ phải thêm đoạn code này vào file chứa giao diện để cho phép WordPress nhận dạng được giao diện mà bạn vừa tạo thủ công. Ví dụ, bạn nên thêm trang “page-faqs.php” vào đầu tập tin.

<?php
/**
  * Template Name: FAQs
  */

Bước 2: Tạo một trang mới

Bước này hoàn toàn tương tự việc thêm một trang mới trong Dashboard. Bạn chỉ cần chuyển đến Pages > Add New.

Bước 3: Chọn giao diện cho trang mới

Ở bên phải màn hình, chọn Page Attributes > Template > FAQs (FAQs chính là tên của giao diện mà mình vừa tạo ở trên).

Chọn giao diện cho trang mới

Sau đó, lưu Bản nháp (Draft) và nhấn nút Xem trước (Preview) để có thể xem trước giao diện mà bạn vừa tạo. Tuy nhiên, bạn bắt buộc phải style cho theme trước để có thể giúp cho trang FAQ hiển thị đúng như mong đợi.

Ở đây, mình đã style cho theme trước rồi nên mình không nêu rõ bước đó trong bài viết này nữa. Ngoài ra, bạn hãy lưu lại ID của trang cho bước tiếp theo nhé.

Sử dụng Meta Box plugin để tạo các trường cần thiết cho trang FAQs

Đối với trang FAQ như ví dụ ở trên, mình đã sử dụng 2 extensions là Meta Box GroupMeta Box Builder. Sử dụng Meta Box Builder để tạo Custom Fields bằng giao diện người dùng trực quan (dành cho người mới bắt đầu hoặc những người không có chuyên môn về công nghệ). Trong khi đó, Meta Box Group sẽ giúp bạn tạo những custom field lặp lại hay Repeated Custom Fields (sự lặp lại ở đây là của những câu trả lời và câu hỏi).

Bước 1: Tạo Custom Fields bằng Meta Box Builder

Trong thanh Admin, đi tới Meta Box > Custom Fields > Add New và điền những thông tin cần thiết như Tiêu đề (tên của thư mục chứa fields) và ID (slug) theo cách dễ hiểu nhất để bạn có thể dễ dàng quản lý khi số lượng field trở nên lớn hơn.

Tạo Custom Fields bằng Meta Box Builder

Di chuyển đến Setting và chọn ở mục Post Types là Page (vì mình đang tạo trang hỏi đáp).

Tạo trang hỏi đáp FAQ

Tiếp theo, trong phần Include Exclude Extension, chọn Include và nhập ID của trang FAQs. Trong trường hợp này, ID = 6. Trong ảnh số 5 mình có hướng dẫn cách tìm ID của trang. Nhưng nếu bạn vẫn không biết cách để lấy ID trang như thế nào, hãy tham khảo Bài hướng dẫn lấy ID này nhé.

Nhập ID của trang

Sau đó, click vào Save Changes, rồi di chuyển đến tab Fields và bắt đầu tạo những Fields cần thiết.

Bước 2: Tạo field group

Với giao diện này, mình sẽ tạo một group field (nhóm field) bao gồm một field text và một nhóm các field nhỏ ở bên trong. Đây là hình minh họa cấu trúc fields mà mình sẽ tạo.

Tạo một group field

Trong tab Fields, chọn Specials > Group. Một group field sẽ được tự động thêm vào phía bên phải màn hình.

Hiển thị group field

Hãy điền các thông tin dưới đây:

  • Label: Tên được sử dụng để hiển thị trên trang.
  • ID: slug của field
  • Collapsible: Kiểm tra điều này nếu bạn muốn rút ngắn nội dung của mình và tiết kiệm dung lượng.
  • Chọn Cloneable: cho phép nó nhân bản nhóm này ( hãy chú ý đến nó nhé)

Note: Bạn cần phải chú ý đến Maximum number of clones (Số lượng bản sao tối đa) và Add more text (Thêm văn bản). Bạn có thể thấy rõ hơn điều này sau khi tạo được trang FAQs.

Bước 3: Tạo Subgroup và Subfields

Tương tự như cách tạo một field group, việc tạo một Subgroup thật sự rất đơn giản. Bạn chỉ cần tìm phần Input Fields sau đó chọn Text.

Tạo Subgroup và Subfields

Sau đó, bạn chỉ cần kéo thả field cần thiết vào group bạn mong muốn. Tiếp đến, sửa lại ID và Label cho chính xác. Kết quả cuối cùng sau khi làm theo hướng dẫn ở trên sẽ như sau:

Hiển thị Subgroup

Trong đó:

  • Tab Name: Tên hiển thị của Tab hay Chuyên mục
  • Q & A: Group field có câu hỏi và câu trả lời
  • Question: Câu hỏi
  • Answer: Câu trả lời

Nếu việc thêm và cấu hình cho các custom fields bằng Meta Box Builder có chút lạ lẫm với bạn, thì bạn có thể tham khảo phần giới thiệu này.

Tiếp theo, click Update để lưu và tải lại trang FAQs để xem kết quả nhé!

Click Update để lưu và tải lại trang FAQs

  • Add More Questions: Thêm một câu hỏi cho phần “Tab Name”
  • Add New Tab: Thêm 1 tab hay thêm 1 lĩnh vực câu hỏi

Bạn có thắc mắc là nút Add More QuestionsAdd New Tab được tạo ra từ khi nào không? Như mình đã nói ở bước 2, bạn nên chú ý đến phần CloneableAdd More Text. Hai nút trên đã được tạo ra trong phần này đó!

Các hướng dẫn ở trên dùng extension drag-and-drop (hay còn gọi là tiện ích kéo-thả) của Meta Box Builder. Bên cạnh việc sử dụng plugin Meta Box, bạn có thể sử dụng code với sự trợ giúp của plugin Meta Box miễn phí nếu như bạn là coder. Dưới đây là một ví dụ về đoạn code của các fields như trên. Bằng cách chèn nó vào file functions.php, bạn có thể đạt được kết quả tương tự chỉ với plugin Metabox. Bạn có thể tham khảo bài hướng dẫn cách nhập code từ metabox.io.

add_filter( 'rwmb_meta_boxes', 'your_prefix_register_meta_boxes' );
function your_prefix_register_meta_boxes( $meta_boxes ) {
    $meta_boxes[] = array (
        'title' => 'FAQs Page',
        'id' => 'faqs-page',
        'post_types' => array(
            0 => 'page',
        ),
        'context' => 'normal',
        'priority' => 'high',
        'fields' => array(
            array (
                'id' => 'faq_tab',
                'type' => 'group',
                'name' => 'Tab',
                'fields' => array(
                    array (
                        'id' => 'tab_name',
                        'type' => 'text',
                        'name' => 'Tab Name',
                   ),
                   array (
                        'id' => 'q_and_a',
                        'type' => 'group',
                        'name' => 'Q & A',
                        'fields' => array(
                            array (
                                'id' => 'question',
                                'type' => 'text',
                                'name' => 'Question',
                            ),   
                            array (
                                'id' => 'answer',
                                'type' => 'textarea',
                                'name' => 'Answer',
                           ),
                        ),
                        'clone' => 1,
                        'default_state' => 'expanded',
                        'add_button' => 'Add More Questions',
                    ),
                ),
                'clone' => 1,
                'default_state' => 'expanded',
                'add_button' => 'Add New Tab',
           ),
        ),
        'h' => 'a',
        'b' => 'c',
        'include' => array(
            'relation' => 'OR',
            'ID' => 6,
            'template' => array(
                 0 => 'page-faqs.php',
            ),
            'category' => array(
                0 => 1,
            ),
        ),
    );
    return $meta_boxes;
}

Hiển thị các fields nội dung trên trang FAQs

Bạn hãy sử dụng đoạn code này hoặc xem thêm hướng dẫn sử dụng plugin Meta Box để biết cách hiển thị giá trị nội dung trong Field Group.

$group_values = rwmb_meta( 'group_id' );
if ( ! empty( $group_values ) ) {
    foreach ( $group_values as $group_value ) {
        $value = isset( $group_value[$sub_field_key] ) ? $group_value[$sub_field_key] : '';
        echo $value; // Display sub-field value
    }
}

Trong đó:

  • rwmb_meta() để lấy giá trị của các fields trong plugin Meta Box.
  • group_id là ID của Group field được tạo.
  • $sub_field_key ID của subfield trong field group

Trong trường hợp này, mình đã thay đổi group_id thành faq_tab$sub_field_key thành tab_name. (Mình đã đặt các ID này trong bước đầu tiên).

Ngoài ra, mình đã tạo một Subgroup trong Group. Bạn có thể nhận được giá trị của Subgroup bằng cách làm theo những bước sau:

$group_values = rwmb_meta( 'group_id' );
if ( ! empty( $group_values ) ) {
    foreach ( $group_values as $group_value ) {
        $value = isset( $group_value[$sub_field_key] ) ? $group_value[$sub_field_key] : '';
        $group_childs = isset( $group_value[$gr_childs] ) ? $group_value[$gr_childs] : '';
            foreach ( $group_childs as $group_child ) {
                $val_child = isset( $group_child[$child_key] ) ? $group_child[$child_key] : '';
                Echo $val_child;
            }
        echo $value;
        }
}

Trong đó:

  • $group_childs có nghĩa là ID của subgroup
  • $child_key có nghĩa là ID của field trong subgroup

Ví dụ, đoạn code này là dành cho Giao diện mà mình đã có ở trên. (Giao diện được xây dựng bởi Tab của Bootstrap 4).

<main id="Main">
    <div class="page-wrapper">
        <div class="container">
            <div class="row">
                <div id="menuBarleft" class="col-lg-3 col-sm-12">
                    <div id="navbarNav" class="nav nav-tabs">
                            <div id="v-pills-tab" class="nav flex-column nav-pills menu-left" role="tablist" aria-orientation="vertical">
                        <?php $group_values = rwmb_meta( 'faq_tab' );
                        $count = 0;
                        if ( ! empty( $group_values ) ) {
                            foreach ( $group_values as $group_value ) {
                                $count++;
                                                $value = isset( $group_value['tab_name'] ) ? $group_value['tab_name'] : ''; ?>
                                        <a id="v-pills-home-tab" class="<?php if($count ==1) echo 'active'; ?>" role="tab" href="#tab<?php echo $count; ?>" data-toggle="pill" aria-controls="tab<?php echo $count; ?>" aria-selected="true"><?php echo $value; ?> </a>
                        <?php }
                        } ?>
                    </div>
                </div>
            </div>
            <div id="Content" class="col-lg-9 col-sm-12">
                <div id="v-pills-tabContent" class="tab-content">
                    <?php $group_values = rwmb_meta( 'faq_tab' );
                    $count_c = 0;
                    if ( ! empty( $group_values ) ) {
                        foreach ( $group_values as $group_value ) {
                            $count_c++;
                                            $value = isset( $group_value['tab_name'] ) ? $group_value['tab_name'] : '';
                                        $group_childs = isset( $group_value['q_and_a'] ) ? $group_value['q_and_a'] : ''; ?>
                            <div id="tab<?php echo $count_c; ?>" class="tab-pane fade <?php if($count_c ==1) echo 'show active'; ?>" role="tabpanel" aria-labelledby="tab<?php echo $count_c; ?>-tab">
                            <?php
                            $count_q = 0;
                            foreach ( $group_childs as $group_child ) {
                                $count_q++;
                                                $question = isset( $group_child['question'] ) ? $group_child['question'] : '';
                                                    $answer = isset( $group_child['answer'] ) ? $group_child['answer'] : ''; ?>
                                <div class="panel">
                                    <h4 class="panel-title"><a class="" href="#question-trip-<?php echo $count_q; ?>" data-toggle="collapse" aria-expanded="true"><?php echo $question; ?></a></h4>
                                    <div class="panel-content">
                                                    <div id="question-trip-<?php echo $count_q; ?>" class="question collapse show">
                                            <?php echo $answer; ?></a>
                                        </div>
                                    </div>
                                </div>
                            <?php } ?>
                        </div>
                    <?php }
                    } ?>
                </div>
            </div>
        </div>
    </div>
    </div>
</main>

LỜI KẾT

Với plugin Meta Box, chỉ bằng cách sử dụng code hoặc làm theo các bước vô cùng đơn giản vừa xong, bạn hoàn toàn có thể sở hữu cho mình trang hỏi đáp vô cùng nhanh chóng. Ngay cả khi bạn không phải là người am hiểu về công nghệ, vẫn thật sự đơn giản và dễ hiểu nếu bạn sử dụng Meta Box BuilderMeta Box Group, phải không nào?

Có rất nhiều điều tuyệt vời mà Meta Box có thể làm cho bạn ngoài việc tạo trang FAQs. Bạn có thể sử dụng plugin này bằng cách đọc các hướng dẫn chuyên sâu hơn nữa tại đây nhé.

 

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 *