Thêm custom meta boxes vào posts WordPress

5 tháng ago, Hướng dẫn WordPress, Views

Giới thiệu về Custom Meta Boxes trong WordPress

WordPress là một nền tảng quản lý nội dung (CMS) mạnh mẽ, linh hoạt và dễ sử dụng. Một trong những tính năng giúp WordPress trở nên phổ biến là khả năng mở rộng và tùy chỉnh cao. Custom Meta Boxes (Hộp Meta Tùy Chỉnh) là một công cụ tuyệt vời để thêm các trường dữ liệu bổ sung vào trang chỉnh sửa bài viết (posts) hoặc trang (pages), cho phép bạn nhập và lưu trữ thông tin đặc biệt liên quan đến từng bài viết. Điều này đặc biệt hữu ích khi bạn cần quản lý các thông tin như giá sản phẩm, thông tin tác giả khách mời, hoặc bất kỳ dữ liệu tùy chỉnh nào khác.

Trong bài viết này, chúng ta sẽ khám phá cách tạo và sử dụng Custom Meta Boxes trong WordPress một cách chi tiết, từng bước.

Tại sao nên sử dụng Custom Meta Boxes?

Việc sử dụng Custom Meta Boxes mang lại nhiều lợi ích quan trọng cho việc quản lý nội dung WordPress:

Tổ chức dữ liệu tốt hơn: Custom Meta Boxes giúp bạn cấu trúc và quản lý dữ liệu một cách rõ ràng, thay vì nhồi nhét tất cả thông tin vào nội dung chính của bài viết.
Dễ dàng quản lý và cập nhật: Khi dữ liệu được lưu trữ trong các meta box, bạn có thể dễ dàng tìm kiếm, chỉnh sửa và cập nhật thông tin một cách nhanh chóng.
Tính linh hoạt cao: Custom Meta Boxes cho phép bạn tạo ra các trường dữ liệu tùy chỉnh phù hợp với nhu cầu cụ thể của từng loại nội dung.
Cải thiện trải nghiệm người dùng: Việc thêm thông tin chi tiết thông qua meta box giúp người dùng có trải nghiệm tốt hơn khi xem nội dung.

Ví dụ, nếu bạn đang điều hành một trang web bán hàng trực tuyến, bạn có thể sử dụng Custom Meta Boxes để thêm các trường như giá sản phẩm, mã sản phẩm, số lượng còn lại, v.v. Điều này giúp bạn quản lý thông tin sản phẩm một cách hiệu quả hơn.

Các bước tạo Custom Meta Box

Để tạo Custom Meta Box, chúng ta sẽ thực hiện các bước sau:

Tạo một plugin tùy chỉnh: Chúng ta sẽ tạo một plugin nhỏ để chứa mã nguồn của Custom Meta Box. Việc này giúp giữ cho mã tùy chỉnh của bạn tách biệt khỏi theme, giúp dễ dàng cập nhật theme mà không lo mất các tùy chỉnh.
Định nghĩa Meta Box: Xác định các trường dữ liệu bạn muốn hiển thị trong Meta Box.
Hiển thị Meta Box trên trang chỉnh sửa bài viết: Sử dụng các hàm WordPress để hiển thị Meta Box trên trang chỉnh sửa bài viết.
Lưu dữ liệu Meta Box: Khi người dùng nhập dữ liệu vào Meta Box và lưu bài viết, chúng ta cần lưu dữ liệu này vào cơ sở dữ liệu.
Hiển thị dữ liệu Meta Box trên trang web: Hiển thị dữ liệu đã lưu trữ trên trang web (front-end).

Bước 1: Tạo Plugin tùy chỉnh

Đầu tiên, chúng ta cần tạo một thư mục cho plugin của mình trong thư mục wp-content/plugins. Ví dụ, chúng ta có thể tạo thư mục có tên là my-custom-meta-box. Sau đó, tạo một file PHP bên trong thư mục này, ví dụ: my-custom-meta-box.php.

Mở file my-custom-meta-box.php và thêm đoạn code sau vào:


<?php
/**
 * Plugin Name: My Custom Meta Box
 * Description: Tạo Custom Meta Box để thêm thông tin tùy chỉnh cho bài viết.
 * Version: 1.0.0
 * Author: Your Name
 */

// Code của bạn sẽ được thêm vào đây

Lưu lại file và kích hoạt plugin này trong trang quản trị WordPress (Plugins -> Installed Plugins).

Bước 2: Định nghĩa Meta Box

Bây giờ chúng ta sẽ định nghĩa Meta Box và các trường dữ liệu bên trong nó. Ví dụ, chúng ta sẽ tạo một Meta Box để thêm thông tin tác giả khách mời (guest author) cho bài viết.

Thêm đoạn code sau vào file my-custom-meta-box.php:


<?php
/**
 * Plugin Name: My Custom Meta Box
 * Description: Tạo Custom Meta Box để thêm thông tin tùy chỉnh cho bài viết.
 * Version: 1.0.0
 * Author: Your Name
 */

// Hàm hiển thị Meta Box
function my_custom_meta_box_html( $post ) {
    $guest_author = get_post_meta( $post->ID, '_guest_author', true );
    ?>
    <label for="guest_author">Tên tác giả khách mời:</label>
    <input type="text" id="guest_author" name="guest_author" value="<?php echo esc_attr( $guest_author ); ?>" size="25" />
    <?php
}

// Hàm thêm Meta Box vào trang chỉnh sửa bài viết
function my_add_meta_box() {
    add_meta_box(
        'my_meta_box',           // ID của Meta Box
        'Thông tin Tác giả Khách mời',  // Tiêu đề của Meta Box
        'my_custom_meta_box_html',  // Callback function để hiển thị nội dung Meta Box
        'post',                  // Post type mà Meta Box sẽ hiển thị (ví dụ: 'post', 'page')
        'normal',                // Context (vị trí hiển thị: 'normal', 'advanced', 'side')
        'high'                   // Priority (độ ưu tiên: 'high', 'core', 'default', 'low')
    );
}
add_action( 'add_meta_boxes', 'my_add_meta_box' );

Trong đoạn code này:

my_custom_meta_box_html() là hàm hiển thị nội dung của Meta Box. Chúng ta sử dụng get_post_meta() để lấy dữ liệu đã lưu trữ (nếu có) và hiển thị nó trong một trường input.
my_add_meta_box() là hàm thêm Meta Box vào trang chỉnh sửa bài viết. Chúng ta sử dụng add_meta_box() để đăng ký Meta Box.
add_action( 'add_meta_boxes', 'my_add_meta_box' ) được sử dụng để gọi hàm my_add_meta_box() khi WordPress chuẩn bị hiển thị các Meta Box.

Bước 3: Lưu dữ liệu Meta Box

Bây giờ chúng ta cần lưu dữ liệu khi người dùng nhập thông tin vào Meta Box và lưu bài viết. Thêm đoạn code sau vào file my-custom-meta-box.php:


<?php
/**
 * Plugin Name: My Custom Meta Box
 * Description: Tạo Custom Meta Box để thêm thông tin tùy chỉnh cho bài viết.
 * Version: 1.0.0
 * Author: Your Name
 */

// Hàm hiển thị Meta Box
function my_custom_meta_box_html( $post ) {
    $guest_author = get_post_meta( $post->ID, '_guest_author', true );
    ?>
    <label for="guest_author">Tên tác giả khách mời:</label>
    <input type="text" id="guest_author" name="guest_author" value="<?php echo esc_attr( $guest_author ); ?>" size="25" />
    <?php
}

// Hàm thêm Meta Box vào trang chỉnh sửa bài viết
function my_add_meta_box() {
    add_meta_box(
        'my_meta_box',           // ID của Meta Box
        'Thông tin Tác giả Khách mời',  // Tiêu đề của Meta Box
        'my_custom_meta_box_html',  // Callback function để hiển thị nội dung Meta Box
        'post',                  // Post type mà Meta Box sẽ hiển thị (ví dụ: 'post', 'page')
        'normal',                // Context (vị trí hiển thị: 'normal', 'advanced', 'side')
        'high'                   // Priority (độ ưu tiên: 'high', 'core', 'default', 'low')
    );
}
add_action( 'add_meta_boxes', 'my_add_meta_box' );

// Hàm lưu dữ liệu Meta Box
function my_save_meta_box_data( $post_id ) {
    if ( ! isset( $_POST['guest_author'] ) ) {
        return;
    }

    $guest_author = sanitize_text_field( $_POST['guest_author'] );

    update_post_meta( $post_id, '_guest_author', $guest_author );
}
add_action( 'save_post', 'my_save_meta_box_data' );

Trong đoạn code này:

my_save_meta_box_data() là hàm lưu dữ liệu Meta Box. Chúng ta sử dụng update_post_meta() để lưu dữ liệu vào cơ sở dữ liệu.
sanitize_text_field() được sử dụng để làm sạch dữ liệu đầu vào, giúp ngăn ngừa các cuộc tấn công XSS.
add_action( 'save_post', 'my_save_meta_box_data' ) được sử dụng để gọi hàm my_save_meta_box_data() khi bài viết được lưu.

Bước 4: Hiển thị dữ liệu Meta Box trên trang web

Cuối cùng, chúng ta cần hiển thị dữ liệu đã lưu trữ từ Meta Box trên trang web (front-end). Bạn có thể chỉnh sửa theme của mình để hiển thị dữ liệu này. Ví dụ, để hiển thị tên tác giả khách mời, bạn có thể thêm đoạn code sau vào file single.php (hoặc file template khác phù hợp):


<?php
$guest_author = get_post_meta( get_the_ID(), '_guest_author', true );
if ( $guest_author ) {
    echo '<p>Bài viết được viết bởi: ' . esc_html( $guest_author ) . '</p>';
}
?>

Trong đoạn code này, chúng ta sử dụng get_post_meta() để lấy dữ liệu từ cơ sở dữ liệu và hiển thị nó trên trang web. esc_html() được sử dụng để làm sạch dữ liệu đầu ra, giúp ngăn ngừa các cuộc tấn công XSS.

Ví dụ nâng cao: Thêm nhiều trường dữ liệu

Bạn có thể thêm nhiều trường dữ liệu khác nhau vào Meta Box của mình. Ví dụ, chúng ta có thể thêm trường text, textarea, checkbox, radio button, select box, v.v.

Dưới đây là ví dụ về cách thêm một checkbox vào Meta Box:


<?php
/**
 * Plugin Name: My Custom Meta Box
 * Description: Tạo Custom Meta Box để thêm thông tin tùy chỉnh cho bài viết.
 * Version: 1.0.0
 * Author: Your Name
 */

// Hàm hiển thị Meta Box
function my_custom_meta_box_html( $post ) {
    $guest_author = get_post_meta( $post->ID, '_guest_author', true );
    $is_featured = get_post_meta( $post->ID, '_is_featured', true );
    ?>
    <label for="guest_author">Tên tác giả khách mời:</label>
    <input type="text" id="guest_author" name="guest_author" value="<?php echo esc_attr( $guest_author ); ?>" size="25" /><br><br>

    <label for="is_featured">Bài viết nổi bật:</label>
    <input type="checkbox" id="is_featured" name="is_featured" value="1" <?php checked( $is_featured, 1 ); ?> />
    <?php
}

// Hàm thêm Meta Box vào trang chỉnh sửa bài viết
function my_add_meta_box() {
    add_meta_box(
        'my_meta_box',           // ID của Meta Box
        'Thông tin Tác giả Khách mời',  // Tiêu đề của Meta Box
        'my_custom_meta_box_html',  // Callback function để hiển thị nội dung Meta Box
        'post',                  // Post type mà Meta Box sẽ hiển thị (ví dụ: 'post', 'page')
        'normal',                // Context (vị trí hiển thị: 'normal', 'advanced', 'side')
        'high'                   // Priority (độ ưu tiên: 'high', 'core', 'default', 'low')
    );
}
add_action( 'add_meta_boxes', 'my_add_meta_box' );

// Hàm lưu dữ liệu Meta Box
function my_save_meta_box_data( $post_id ) {
    if ( ! isset( $_POST['guest_author'] ) ) {
        return;
    }

    $guest_author = sanitize_text_field( $_POST['guest_author'] );
    $is_featured = isset( $_POST['is_featured'] ) ? 1 : 0;

    update_post_meta( $post_id, '_guest_author', $guest_author );
    update_post_meta( $post_id, '_is_featured', $is_featured );
}
add_action( 'save_post', 'my_save_meta_box_data' );

Để hiển thị checkbox này trên trang web, bạn có thể sử dụng đoạn code sau:


<?php
$is_featured = get_post_meta( get_the_ID(), '_is_featured', true );
if ( $is_featured ) {
    echo '<p>Bài viết này là nổi bật.</p>';
}
?>

Lưu ý quan trọng

Luôn làm sạch dữ liệu đầu vào và đầu ra để bảo vệ trang web của bạn khỏi các cuộc tấn công XSS.
Sử dụng các tiền tố duy nhất cho tên meta key (ví dụ: _guest_author) để tránh xung đột với các plugin khác.
Kiểm tra kỹ lưỡng code của bạn trước khi triển khai trên trang web trực tiếp.

Kết luận

Custom Meta Boxes là một công cụ mạnh mẽ để tùy chỉnh và mở rộng WordPress. Bằng cách sử dụng Custom Meta Boxes, bạn có thể dễ dàng quản lý và hiển thị các thông tin tùy chỉnh liên quan đến từng bài viết, giúp cải thiện trải nghiệm người dùng và quản lý nội dung một cách hiệu quả hơn. Hy vọng bài viết này đã cung cấp cho bạn một hướng dẫn chi tiết và dễ hiểu về cách tạo và sử dụng Custom Meta Boxes trong WordPress.

hướng dẫn meta box, meta box wordpress, tải meta box, tạo meta box riêng, tùy chỉnh meta box

admin

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa