Home / Hướng Dẫn / WordPress / [WordPress] Hướng dẫn tạo Meta Box cho Custom Field trong WordPress

[WordPress] Hướng dẫn tạo Meta Box cho Custom Field trong WordPress

Chào các bạn, trong bài hướng dẫn trước chúng tôi đã hướng dẫn các bạn cách sử dụng và lấy dữ liệu của Custom Field trong WordPress (WP).


Nhưng với các thêm Custom Field đó bạn phải chọn “Name” và thêm giá trị. Bài viết này chúng tôi sẽ hướng dẫn các bạn tạo Meta Box chèn dữ liệu cho Custom Field.

Hướng dẫn tạo Meta Box cho Custom Field trong WordPress

Trước tiên bạn mở file file functions.php và thêm đoạn code sau:


/* Meta Post ----------------*/

$post_in_tapchicntt =
  array(
  
  "price" =>
	  array(
		  "name" => "price",
		  "type" => "text",
		  "std" => "",
		  "title" => "Price",
		  "description" => "Giá Bán"
	),
	
	"discount" =>
	  array(
		  "name" => "discount",
		  "type" => "text",
		  "std" => "",
		  "title" => "Discount",
		  "description" => "Giá Giảm"
	),
	
	"sku" =>
	  array(
		  "name" => "sku",
		  "type" => "text",
		  "std" => "",
		  "title" => "Code Product (SKU)",
		  "description" => ""
	)
 );

function post_in_tapchicntt() {
  global $post, $post_in_tapchicntt;
  $output = '<style>
  				label#tutorial_custom { display: block; font-weight: bold; padding: 5px;}
				input.tutorial_custom { padding: 5px}
  			</style>';
  foreach($post_in_tapchicntt as $meta_box) {
    $meta_box_value = get_post_meta($post->ID, $meta_box['name'], true);
    
    if($meta_box_value == "")
      $meta_box_value = $meta_box['std'];

	if ($meta_box['type'] == 'text' ){
		$output .= '<input type="hidden" name="'.$meta_box['name'].'_noncename" id="'.$meta_box['name'].'_noncename" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />';
		$output .= '<label id="tutorial_custom" for="'.$meta_box['name'].'">'.$meta_box['title'].'</label>';
		$output .= '<input class="tutorial_custom" type="'.$meta_box['type'].'" name="tutorialblog_'.$meta_box['name'].'" value="'.$meta_box_value.'" width="90%" /><br />';
		$output .= $meta_box['description'].'<br />';
	}
  }
  echo $output;
  
}


function create_meta_box() {
  if ( function_exists('add_meta_box') ) {
    add_meta_box( 'new-meta-boxes', 'Thông tin sản phẩm', 'post_in_tapchicntt', 'post', 'normal', 'high' );
  }
}

function save_postdata( $post_id ) {
  global $post, $post_in_tapchicntt;
  
  foreach($post_in_tapchicntt as $meta_box) {
  // Verify
  if ( !wp_verify_nonce( $_POST[$meta_box['name'].'_noncename'], plugin_basename(__FILE__) )) {
    return $post_id;
  }
  
  if ( 'page' == $_POST['post_type'] ) {
  if ( !current_user_can( 'edit_page', $post_id ))
    return $post_id;
  } else {
  if ( !current_user_can( 'edit_post', $post_id ))
    return $post_id;
  }
  

	$data = $_POST['tutorialblog_'.$meta_box['name']];
	  
	if(get_post_meta($post_id, $meta_box['name']) == "")
		add_post_meta($post_id, $meta_box['name'], $data, true);
	elseif($data != get_post_meta($post_id, $meta_box['name'], true))
		update_post_meta($post_id, $meta_box['name'], $data);
	elseif($data == "")
		delete_post_meta($post_id, $meta_box['name'], get_post_meta($post_id, $meta_box['name'], true));
	  }
  
}

add_action('admin_menu', 'create_meta_box');

add_action('save_post', 'save_postdata');

Chúc các bạn thành công!

5 comments

  1. Great work,
    Thank for your tutorial

  2. mình muốn khi hiện ra ngoài trang chủ mỗi 1 field nằm trong 1 cái khung thì làm thế nào bác
    kiểu như thế này ạ
    http://upanh.in/DDZ.png

  3. Website của bạn đang có vấn đề về font và giao diện, bạn không sửa lại và up tiếng việt cho nó đi bạn.

  4. Bookmark lại có khi lại cần đến, thanks tapchicntt.com đã chia sẽ

  5. Dạo một vòng quanh WordPress thì thấy tới hơn chục trang có giao diện hơi giống bạn 🙂

    Chúc blog phát triển nhé.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.