Trong quá trình xây dựng theme, chắc hẳn các bạn đã từng tạo một metabox để bổ sung dữ liệu cho bài viết, sản phẩm theo bài tập, đồ án hoặc dự án yêu cầu.
Vậy để tạo một multi metabox cho post, product hay bất kì một post type nào trong quá trình làm các bạn đã đăng kí qua hàm register_post_type() thì cần làm các step như nào. Sau đây mình sẽ làm một ví du cụ thể:
<?php
function misha_meta_box_add() {
add_meta_box( 'info_patient_area', 'Thông tin bảo hành', 'baohanh_info_ouput', 'bao-hanh' );
}
add_action( 'admin_menu', 'misha_meta_box_add' );
// Callback
function baohanh_info_ouput( $post )
{
global $post;
$sku_pti = get_post_meta( $post->ID, 'sku_pti', true );
$name_pti = get_post_meta( get_the_ID(), 'name_pti', true);
$phone_pti = get_post_meta( get_the_ID(), 'phone_pti', true);
$nhakhoa_cti = get_post_meta( $post->ID, 'nhakhoa_cti', true );
$rangsu = get_post_meta( $post->ID, 'rangsu', true );
$date_kh_cti = get_post_meta( $post->ID, 'date_kh_cti', true );
$date_bh_cti = get_post_meta( $post->ID, 'date_bh_cti', true );
$labo_cti = get_post_meta( $post->ID, 'labo_cti', true );
$root_cti = get_post_meta( $post->ID, 'root_cti', true );
$slr_cti = get_post_meta( $post->ID, 'slr_cti', true );
$vtr_cti = get_post_meta( $post->ID, 'vtr_cti', true );
?>
<div class="row">
<div class="col-sm-3">
<label for="sku_pti">Mã thẻ </label>
<div class="wrap_group_item tg_ipcpy">
<input type="text" name="sku_pti" id="sku_pti" value="<?php echo $sku_pti; ?>">
<!-- <a href="#" class="qb_copy_code">Copy mã</a> -->
</div>
</div>
<div class="col-sm-3">
<label for="name_pti">Họ tên </label>
<div class="wrap_group_item">
<input type="text" name="name_pti" id="name_pti" value="<?php echo esc_attr($name_pti); ?>">
</div>
</div>
<div class="col-sm-3">
<label for="phone_pti">Số điện thoại </label>
<div class="wrap_group_item">
<input type="text" name="phone_pti" id="phone_pti" value="<?php echo esc_attr($phone_pti); ?>">
</div>
</div>
<div class="col-sm-3">
<label for="nhakhoa_cti">Nha khoa </label>
<div class="wrap_group_item">
<input type="text" name="nhakhoa_cti" id="nhakhoa_cti" value="<?php echo esc_attr($nhakhoa_cti); ?>">
</div>
</div>
<div class="col-sm-3">
<label for="rangsu">Răng sứ </label>
<div class="wrap_group_item">
<input type="text" name="rangsu" id="rangsu" value="<?php echo esc_attr($rangsu); ?>">
</div>
</div>
<div class="col-sm-3">
<label for="date_kh_cti">Ngày kích hoạt </label>
<div class="wrap_group_item">
<input type="text" name="date_kh_cti" id="date_kh_cti" class="input_datepk" value="<?php echo $date_kh_cti; ?>">
</div>
</div>
<div class="col-sm-3">
<em style="display: none;"><?php echo esc_attr($date_bh_cti); ?> </em>
<label for="date_bh_cti">Hạn bảo hành</label>
<div class="wrap_group_item">
<input type="text" name="date_bh_cti" id="date_bh_cti" class="input_datepk2" value="<?php echo $date_bh_cti ; ?>">
</div>
</div>
<div class="col-sm-3">
<label for="labo_cti">Labo</label>
<div class="wrap_group_item">
<input type="text" name="labo_cti" id="labo_cti" value="<?php echo esc_attr($labo_cti); ?>">
</div>
</div>
<div class="col-sm-3">
<label for="root_cti">Hãng sứ</label>
<div class="wrap_group_item">
<input type="text" name="root_cti" id="root_cti" value="<?php echo esc_attr($root_cti); ?>">
</div>
</div>
<div class="col-sm-3">
<label for="slr_cti">Số lượng răng</label>
<div class="wrap_group_item">
<input type="text" name="slr_cti" id="slr_cti" value="<?php echo esc_attr($slr_cti); ?>">
</div>
</div>
<div class="col-sm-3">
<label for="vtr_cti">Vị trí răng</label>
<div class="wrap_group_item">
<input type="text" name="vtr_cti" id="vtr_cti" value="<?php echo esc_attr($vtr_cti); ?>">
</div>
</div>
</div>
<?php
}
// save
function hcf_save_meta_box( $post_id ) {
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if ( $parent_id = wp_is_post_revision( $post_id ) ) {
$post_id = $parent_id;
}
$fields = [
'sku_pti', 'name_pti', 'phone_pti', 'nhakhoa_cti', 'rangsu', 'date_kh_cti', 'date_bh_cti', 'labo_cti', 'root_cti', 'slr_cti', 'vtr_cti'
];
foreach ( $fields as $field ) {
if ( array_key_exists( $field, $_POST ) ) {
update_post_meta( $post_id, $field, sanitize_text_field( $_POST[$field] ) );
}
}
}
add_action( 'save_post', 'hcf_save_meta_box' );
Ở trên mình đã add một metabox với post-type=”bao-hanh”, cùng với HTML và hàm lưu dữ liệu. Để nhìn đẹp hơn các bạn bổ sung đoạn CSS sau vào CSS của trang admin.
.col-sm-4{
width: 33.33%;
padding:0px 15px;
display: table;
float: left;
}
.col-sm-3{
width: 25%;
padding:0px 15px;
display: table;
float: left;
margin: 0px 0px 20px 0px;
}
.col-sm-6{
width: 50%;
padding:0px 15px;
display: table;
float: left;
}
.row {
margin: 0px -15px 20px -15px;
display: table;
width: 100%;
}
.row:last-child{
margin:0px -15px 0px -15px;
}
[class*="col-"] label{
margin: 5px 10px 5px 0px;
display: block;}
[class*="col-"] .wrap_group_item{
width: 75%;
float: left;
}
[class*="col-"] .wrap_group_item input{
width:100%;
}
[class*="col-"] textarea{
resize: none;
width: 100%;
height: 80px;
}
Để thêm file admin.css vào admin. Các bạn thêm đoạn code sau vào file function.php.
if (is_admin()) {
function includes_cj_adm() {
wp_enqueue_style( 'admin_css', get_template_directory_uri() . '/css/admin.css' );
}
add_action( 'admin_enqueue_scripts', 'includes_cj_adm' );
}
Chúc các bạn thao tác thành công!
