Mặc định trong Post, Page hay Custom Post Type của WordPress sẽ không có nhiều tùy chỉnh. Thông thường các trường tùy chỉnh sẽ không được thêm vào. Bạn sẽ phải tự tay thêm các Custom Meta Box theo ý của mình. Nếu như bạn đang tìm hiểu về Meta Box là gì thì bài viết này sẽ nói rõ cho bạn.

Meta Box WordPress là gì?

Meta Box cho phép bạn thêm một phần dữ liệu tùy chỉnh vào bài đăng hoặc trang trong WordPress.

Giả sử bạn đang làm một website bán hàng không sử dụng Woocommerce chẳng hạn. Trong Post, Custom Post Type sẽ không có chỗ để điền giá cả vào. Vậy sẽ làm như thế nào?

Lúc này chắc chắn sẽ phải tạo ra một Metabox và trong đó sẽ chứa các Custom Field để thêm dữ liệu vào.

Cách tạo Meta Box trong WordPress bằng code

Để thực hiện bạn thêm một đoạn mã vào Functions.php

add_meta_box( $id, $title, $callback, $page, $context, $priority, $callback_args );

Ý nghĩa:

  • $id: Đây là thuộc tính id của một hộp
  • $title: Tiêu đề của hộp
  • $callback:
  • $page: Là nơi bạn muốn hộp meta được hiển thị. Đây phải là một chuỗi có ‘post’ hoặc ‘page’ hoặc ‘custom_post_type’.
  • $context: Là nơi bạn muốn hộp meta hiển thị. Thông thượng nó sẽ ở bên dưới trình chỉnh sửa bài đăng.
  • $priority: Đây là thứ tự ưu tiên hiển thị gồm ‘high’, ‘default’ hoặc ‘low’. Lần lượt đặt hộp gần đầu hơn, ở vị trí bình thường hoặc xuống phía dưới.
  • $callback_args: Cho phép bạn truyền dữ liệu vào hàm $callback của mình dưới dạng một mảng.

Lấy ví dụ:

Bước 1: Thêm đoạn mã này vào bên dưới tập tin functions.php

add_action( 'add_meta_boxes', 'meta_box_new' );
function meta_box_new()
{
add_meta_box( 'metabox-id', Đây là một Meta Box', 'metabox_cb', 'post', 'normal', 'high' );
}

Sau đó load lại bài viết và kéo xuống bên dưới sẽ thấy

metabox

Bước 2: Tuy nhiên nó vẫn chưa có gì cả. Lúc này cần tạo một hàm mới sử dụng $callback để gọi lại hàm đã tạo trước đó.

Ở ví dụ này $callback đó chính là metabox_cb

function metabox_cb() { 
echo 'Nội dung khu vực Metabox'; 
}

Load lại bài viết xem thế nào

metabox-1

Bước 3: Bây giờ thêm Custom Field cho Metabox

function metabox_cb()
{
?>
<label for="metabox_text">Nhập văn bản</label>
<input type="text" name="metabox_text" id="metabox_text" />
<?php
}

Thay toàn bộ mã đã thực hiện ở bước 2 bằng đoạn này.

Được một ô nhập văn bản rồi nhé!

metabox-2

Bước 4: Lưu dữ liệu

Để lưu lại thông tin đã đưa vào cần dùng tới save_post.

Và update_post_meta($post_id, $meta_key, $meta_value, $prev_value);

function custom_metabox_save( $post_id ) {
$textbox_content = $_POST['metabox_text'];

update_post_meta( $post_id, 'metabox_out', $textbox_content );
}

add_action( 'save_post', 'custom_metabox_save' );

Bước 5: Đưa dữ liệu ra ngoài theme

Sử dụng đoạn mã

<?php echo get_post_meta( $post->ID, 'metabox_out', true );?>

Để hiển thị dữ liệu bên ngoài Theme của bạn.

Copy đoạn mã ở trên sau đó tìm tới file content-single.php. File này thường nằm trong template-part. Thả ở vị trí thích hợp test thử xem có hiện bên ngoài Theme không.

Hướng dẫn sử dụng Plugin Metabox

Với plugin Metabox bạn sẽ làm việc dễ dàng hơn nhờ vào sự hỗ trợ của nó.

Yêu cầu cài đặt:

  • PHP 7.2 hoặc lớn hơn

Bước 1: Vào Plugin => Thêm mới (Add new) => Gõ từ khóa Metabox vào ô tìm kiếm cài đặt và kích hoạt.

Bước 2: Truy cập vào địa chỉ https://metabox.io/online-generator/ để lấy tạo code mới

Chọn đầu vào, nếu input là text thì chọn text, textarea hay Email thì chọn vào cái đó.

Sau đó gõ vào ô Enter field type here tên tùy ý bạn đặt nhưng phải dễ nhớ.

metabox

Bước 3: Ấn vào GENERATE CODE

metabox-1

Bước 4: Đưa code này vào file functions.php nhớ bỏ cái <?php đi nếu trong đó có rồi

<?php

// Metabox
add_filter( 'rwmb_meta_boxes', 'your_prefix_register_meta_boxes' );

function your_prefix_register_meta_boxes( $meta_boxes ) {

    $meta_boxes[] = [
        'title'   => esc_html__( 'Thông số', 'online-generator' ),
        'id'      => 'metabox_thongso',
        'post_types' => 'post',
        'context' => 'normal',
        'fields'  => [
            [
                'type' => 'text',
                'name' => esc_html__( 'Text', 'online-generator' ),
                'id'   => 'nhap_van_ban',
            ],
        ],
    ];

    return $meta_boxes;
}

Lưu ý:

  • 'id' => 'nhap_van_ban' là id để gọi ra ngoài theme, mỗi id này không được trùng nhau
  • ‘post_type’ => ‘post’ là xuất hiện ở post, nếu muốn xuất hiện ở trang sản phẩm Woocommerce thì thay post bằng product

Để thêm nhiều trường khác nhau bạn làm như sau:

'fields'  => [
            [
                'type' => 'text',
                'name' => esc_html__( 'Text', 'online-generator' ),
                'id'   => 'nhap_van_ban',
            ],
            [
                'type' => 'text',
                'name' => esc_html__( 'Text 2', 'online-generator' ),
                'id'   => 'nhap_van_ban2',
            ],
        ],

Bước 6: Kéo xuống dưới cùng bài viết thêm văn bản vào và lưu lại bài đó

metabox-2

Bước 7: Đưa dữ liệu ra ngoài Theme

<?php echo rwmb_meta( 'nhap_van_ban' );?>

Kết luận: Bài viết hướng dẫn cách tạo Metabox ở trong Wordpres không quá khó và phức tạp như bạn nghĩ đúng không nào. Qua đây bạn sẽ sử dụng nó dễ dàng để phát triển Theme tốt hơn.

2 Bình luận “Hướng dẫn tạo Meta Box trong WordPress”

  1. e đã làm theo hướng dẫn rồi mà vẫn ko được nhỉ

    bước 1
    e đã tạo custom field với ID demo-field-group

    bước 2. e đã copy code vào funtion.php của theme

    bước 3. e copy đoạn code hiển thị

    vào 1 bài đăng nhưng nó ko hiển thị
    ảnh: https://www.awesomescreenshot.com/image/10799913?key=8d0c7d88de0e6cb285b8684c5dbb1f9f

    kết quả thì ko hiện
    ảnh: https://www.awesomescreenshot.com/image/10799931?key=49572e4fc848cfed857ddda10de0352a
    link: https://muvodoi.net/player/tom-heaton/

    1. Tất cả các đoạn mã đều đưa vào function bạn ơi. Bạn nên sử dụng plugin Metabox dễ làm hơn thủ công đó!

Bình luận!

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *