LẬP TRÌNH PLUGIN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Bài 09: Bốn bước custom Meta Boxes trong WordPress

Tới bài thứ chín này thì khái niệm Custom Meta Boxes không còn xa lạ gì nữa phải không các bạn. Nếu đây là bài đầu tiên của bạn trong series này và bạn chưa thực sự hiển về Meta Boxes thì tôi khuyên bạn nên quay lại đọc từ bài thứ nhất vì điều này sẽ giúp bạn có một hệ thống rõ ràng hơn.

Trong bài này mình sẽ hướng dẫn các bạn làm thế nào để tạo một Meta Box chỉ trong bốn bước. Và để tiện cho việc viết bài thì mình sẽ sử dụng Meta BoxesMetadata để bổ sung link download và link demo cho mỗi bài viết nhé.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.
  • Link download có tên key là: post_link_download
  • Link demo có tên key là: post_link_demo

Bước 1: Tạo một Meta Box

Chúng ta sẽ sử dụng hàm add_meta_box() và action add_meta_boxes để thêm một Meta Box vào trong trang edit bài viết. Về chi tiết cách sử dụng hàm này thì mình đã giải thích rất rõ trong bài Custom Meta Boxes - Metadata trong WordPress.

Trước tiên bạn tạo cho tôi một file tên là metabox-three-steps.php nằm trong thư mục includes của plugin, sau đó vào file wp-learn.php xóa nội dung cũ và thay vào đó là đoạn code require file metabox-three-steps.php.

three steps create metabox wordpress png

File wp-learn.php.

<?php
/**
Plugin Name: Learn WordPress
Plugin URI: https://freetuts.net
Description: Plugin dùng để học WordPress
Author: Nguyễn Văn Cường
Version: 1.0
Author URI: https://freetuts.net
*/

require 'inclues/metabox-three-steps.php';

Ok bây giờ ta sẽ viết code tạo Meta Box. Bạn mở file metabox-three-steps.php lên và nhập vào nội dung sau:

<?php

// Action tạo metabox
function create_metabox()
{
    add_meta_box('link-media', 'Link Media', 'show_metabox', 'post', 'advanced', 'high');
}

// hàm show metabox
function show_metabox()
{
    echo 'Meta Box tại đây';
}

// Bổ sung hàm create_metabõ vào action add_meta_boxes
add_action('add_meta_boxes', 'create_metabox');

Bây giờ bạn vào admin và sửa một bài viết bất kì thì sẽ thấy một khung có giao diện như sau:

three steps create metabox wordpress 1 png

Bước 2: Hiển thị thông tin trong Meta Box

Bước này khá đơn giản là ta chỉ việc sử dụng hàm get_post_meta() để lấy dữ liệu từ bảng postmeta và show lên cho người dùng nhìn thấy.

Bạn sửa lại hàm show_metabox() trong file metabox-three-steps.php như sau:

function show_metabox($post, $metabox)
{
    // Lấy thông tin theo bài viết hiện tại
    $link_download = get_post_meta($post->ID, 'post_link_download', true);
    $link_demo = get_post_meta($post->ID, 'post_link_demo', true);
    
    // Tạo file Security Hidden
    wp_nonce_field(basename(__FILE__), 'post_media_metabox');
    
    ?>
    <p>
        <input type="text" value="<?php echo $link_download; ?>" name="post_link_download" /> Link Download
    </p>
    <p>
        <input type="text" value="<?php echo $link_demo; ?>" name="post_link_demo" /> Link Demo
    </p>
    <?php
}

Lúc này giao diện sẽ như sau:

three steps create metabox wordpress 2 png

Bước 3: Thực hiện thao tác lưu Meta Box

Bây giờ ta sẽ bắt sự kiện khi người dùng lưu bài viết thì ta sẽ lưu lại thông tin của Meta Box.

Bạn thêm vào file metabox-three-steps.php một đoạn code như sau:

// Hàm lưu thông tin metabox
function save_metabox($post_id, $post)
{
    // Kiểm tra input hidden bảo mật
    if (!wp_verify_nonce($_POST["post_media_metabox"], basename(__FILE__))) {
        return $post_id;
    }
        
    // Kiểm tra xem dữ liệu có không
    if (!isset($_POST["post_link_download"]) || !isset($_POST["post_link_demo"])) {
        return $post_id;
    }
    
    // Nếu auto save thì không làm gì cả
    if (defined("DOING_AUTOSAVE") && DOING_AUTOSAVE) {
        return $post_id;
    }
    
    // Vì metabox này dành cho Post nên phải kiểm tra có đúng vậy không?
    if ('post' != $post->post_type) {
        return $post_id;
    }
    
    // Tới đây là mọi thứ OK rồi, ta bắt đầu lưu thôi :)
    $link_download = (isset($_POST["post_link_download"])) ? $_POST["post_link_download"] : '';
    $link_demo = (isset($_POST["post_link_demo"])) ? $_POST["post_link_demo"] : '';
    
    // Cập nhật dữ liệu. Hàm này sẽ tạo mới nếu chưa có trong CSDL
    update_post_meta($post_id, "post_link_download", $link_download);
    update_post_meta($post_id, "post_link_demo", $link_demo);
}

// THêm hàm save_metabox vào action lưu bài viết
add_action('save_post', 'save_metabox', 10, 2);

Bạn chạy lên sau đó nhập dữ liệu và click Lưu thì giao diện dạng như sau:

three steps create metabox wordpress 3 png

Bước 4: Xóa Meta Box khi xóa bài viết

Để tối ưu tài nguyên thì khi xóa một bài viết chúng ta nên xóa luôn các meta này bởi vì nó là dữ liệu dư thừa. Để bắt sự kiện xóa bài viết thì ta sử dụng action delete_post. Bạn mở file metabox-three-steps.php lên và nhập vào nội dung sau:

// Hàm xóa metadata
function delete_metabox($post_id)
{
    delete_post_meta($post_id, 'post_link_download');
    delete_post_meta($post_id, 'post_link_demo');
}


// THêm hàm delete_metabox vào action xóa bài viết
add_action('delete_post', 'delete_metabox', 10);

Vậy là xong, bạn hãy thêm một bài viết và nhập dữ liệu vào đó, sau đó xóa bài viết rồi tự mình vào PHP MyAdmin xem kết quả nhé :)

Và đây là toàn bộ code của chúng ta.

/* GIAO DIỆN META */
/* *************************************** */

// Action tạo metabox
function create_metabox()
{
    add_meta_box('link-media', 'Link Media', 'show_metabox', 'post', 'advanced', 'high');
}

// hàm show metabox
function show_metabox($post, $metabox)
{
    // Lấy thông tin theo bài viết hiện tại
    $link_download = get_post_meta($post->ID, 'post_link_download', true);
    $link_demo = get_post_meta($post->ID, 'post_link_demo', true);
    
    // Tạo file Security Hidden
    wp_nonce_field(basename(__FILE__), 'post_media_metabox');
    
    ?>
    <p>
        <input type="text" value="<?php echo $link_download; ?>" name="post_link_download" /> Link Download
    </p>
    <p>
        <input type="text" value="<?php echo $link_demo; ?>" name="post_link_demo" /> Link Demo
    </p>
    <?php
}

// Bổ sung hàm create_metabõ vào action add_meta_boxes
add_action('add_meta_boxes', 'create_metabox');

/* LƯU META */
/* *************************************** */

// Hàm lưu thông tin metabox
function save_metabox($post_id, $post)
{
    // Kiểm tra input hidden bảo mật
    if (!wp_verify_nonce($_POST["post_media_metabox"], basename(__FILE__))) {
        return $post_id;
    }
        
    // Kiểm tra xem dữ liệu có không
    if (!isset($_POST["post_link_download"]) || !isset($_POST["post_link_demo"])) {
        return $post_id;
    }
    
    // Nếu auto save thì không làm gì cả
    if (defined("DOING_AUTOSAVE") && DOING_AUTOSAVE) {
        return $post_id;
    }
    
    // Vì metabox này dành cho Post nên phải kiểm tra có đúng vậy không?
    if ('post' != $post->post_type) {
        return $post_id;
    }
    
    // Tới đây là mọi thứ OK rồi, ta bắt đầu lưu thôi :)
    $link_download = (isset($_POST["post_link_download"])) ? $_POST["post_link_download"] : '';
    $link_demo = (isset($_POST["post_link_demo"])) ? $_POST["post_link_demo"] : '';
    
    // Cập nhật dữ liệu. Hàm này sẽ tạo mới nếu chưa có trong CSDL
    update_post_meta($post_id, "post_link_download", $link_download);
    update_post_meta($post_id, "post_link_demo", $link_demo);
}

// THêm hàm save_metabox vào action lưu bài viết
add_action('save_post', 'save_metabox', 10, 2);


/* XÓA META */
/* *************************************** */
// Hàm xóa metadata
function delete_metabox($post_id)
{
    delete_post_meta($post_id, 'post_link_download');
    delete_post_meta($post_id, 'post_link_demo');
}


// THêm hàm delete_metabox vào action xóa bài viết
add_action('delete_post', 'delete_metabox', 10);

# Lời kết

Trên là bốn bước cơ bản để tạo một Meta boxes, với bốn bước đơn giản như vậy bạn đã có thể bổ sung dữ liệu vào các bài viết. Vì chúng ta đang học nên tại bước 4 bạn hãy tự mình vào trong bảng postmeta xem kết quả có xóa không nhé.

Cùng chuyên mục:

Cập nhật nhanh 3 bí kíp thiết kế web đẹp mới nhất 2021

Cập nhật nhanh 3 bí kíp thiết kế web đẹp mới nhất 2021

Sở hữu website đẹp, hấp dẫn và chuyên nghiệp là điều mà ...

Dịch vụ cài đặt blog bằng WordPress miễn phí

Dịch vụ cài đặt blog bằng WordPress miễn phí

Website là một công cụ không thể thiếu khi bán hàng online, nó giúp ta…

Bài 06: Tạo trang quản lý Options trong WordPress

Bài 06: Tạo trang quản lý Options trong WordPress

Ở bài trước mình có nêu ra một ví dụ về quản lý thông tin…

Bài 05: Options API trong WordPress: add_option / get_option ...

Bài 05: Options API trong WordPress: add_option / get_option ...

Trong database của WordPress bạn sẽ thấy một table ten là [prefix]_options, table này sẽ…

Bài 04: Tìm hiểu Hooks , Action và Filter trong WordPress

Bài 04: Tìm hiểu Hooks , Action và Filter trong WordPress

Bạn đã từng nghe khái niệm lập trình hướng sự kiện trong các Framework như…

Bài 02: WordPress API là gì? Danh sách API trong WordPress

Bài 02: WordPress API là gì? Danh sách API trong WordPress

Đáng lẽ mình không viết bài này nhưng lúc đang viết bài tiếp theo thì…

Cách tùy biến theme WordPress căn bản cho người mới bắt đầu

Cách tùy biến theme WordPress căn bản cho người mới bắt đầu

Khi [cài đặt WordPress trên Hosting] xong thì bạn có thể cài đặt theme để…

Hướng dẫn làm website WordPress chạy tiếp thị liên kết với AT

Hướng dẫn làm website WordPress chạy tiếp thị liên kết với AT

Ngày nay, công nghệ ngày càng phát triển dẫn đến khái niệm [tiếp thị liên…

Tổng hợp mã CSS thường dùng để tùy biến theme WordPress

Tổng hợp mã CSS thường dùng để tùy biến theme WordPress

WordPress là một CMS dùng để làm website rất phổ biến, hay nói chính xác…

Đánh giá GeneratePress - Cách sử dụng theme GeneratePress

Đánh giá GeneratePress - Cách sử dụng theme GeneratePress

Nếu bạn đang muốn tìm kiếm một theme với các tiêu chí nhẹ, nhanh và…

Làm blog cá nhân bằng WordPress với theme GeneratePress

Làm blog cá nhân bằng WordPress với theme GeneratePress

Thời gian qua chắc hẳn bạn đã nghe đến theme GeneratePress rồi phải không nào?…

Cài đặt WordPress trên localhost

Cài đặt WordPress trên localhost

WordPress được lập trình bằng ngôn ngữ PHP và sử dụng MySQL để lưu trữ,…

Bài 01: WordPress là gì? Nên làm website bằng WordPress?

Bài 01: WordPress là gì? Nên làm website bằng WordPress?

WordPress là một CMS được phát triển trên ngôn ngữ lập trình PHP ...

Tặng license theme Generatepress khi mua Hosting Tinohost

Tặng license theme Generatepress khi mua Hosting Tinohost

Chào các bạn, hiện nay WordPress đang trở thành một phổ biến nhất thế giới,…

12 Wordpress plugin tốt nhất nên dùng cho website WordPress 2021

12 Wordpress plugin tốt nhất nên dùng cho website WordPress 2021

Bạn vừa tạo một blog WordPress mới và đang phân vân không biết nên chọn…

Bài 12: Custom Taxonomy  trong WordPress

Bài 12: Custom Taxonomy trong WordPress

Bài trước mình đã hướng dẫn bạn tạo một thể loại bài viết mới bằng…

Bài 11: Tạo Custom Post Type trong WordPress

Bài 11: Tạo Custom Post Type trong WordPress

Đây là các thể loại mặc định có sẵn sau khi bạn cài đặt WordPress.…

Bài 10: Hiển thị metadata ngoài frontend

Bài 10: Hiển thị metadata ngoài frontend

Sẵn có bạn hỏi làm thế nào để hiển thị nội dung bài viết ra…

Bài 08: Metadata API trong WordPress

Bài 08: Metadata API trong WordPress

WordPress sử dụng mô hình EAV nhằm giúp lập trình viên có thể tùy biến…

Bài 07: Custom Meta Boxes trong WordPress

Bài 07: Custom Meta Boxes trong WordPress

WordPress là một CMS nên hệ thống dữ liệu của nó chỉ dừng lại ở…

Top