افزودن Meta Box / فیلد اضافی به Post Type

هدف متاباکس‌ها این است که به کاربر نهایی اجازه دهد تا علاوه بر محتوای پست اصلی، اطلاعات اضافه‌تری را ذخیره کند. مثلاً در یک پست تایپ سفارشی برای فیلم‌ها، فیلدهایی برای سال انتشار، تهیه‌کننده، مخارج تهیه، درآمد و … قرار دهیم. این کار را می‌توانیم برای همهٔ انواع پست نظیر نوشته‌ها، برگه‌ها، محصولات انجام شود. برای ایجاد یک Meta Box ساده ۳ گام باید برداریم پس با ما همراه باشید.

• گام اول : رجیستر کردن Meta Box
• گام دوم : ایجاد UI فیلد با استفاده از Html
• گام سوم : ذخیره کردن فیلد

گام اول : رجیستر کردن Meta Box

رجیستر کردن Meta Box توسط اکشن add_meta_boxes انجام میشود و در فانکشن این اکشن باید توسط تابع add_meta_box() متا باکس خود را رجیستر کنیم. این تابع ۷ ورودی میگیرد ۴ ورودی اول اجباری است و ۳ ورودی آخر اختیاری. تابع خام add_meta_box() به شکل زیر است.

add_meta_box($id, $title, $callback, $screen, $context, $priority, $callback_args)

حال به توضیح این ورودی ها میپردازیم که به شرح ذیل میباشد.

• ورودی یک id : همان شناسه یا اسم Meta Box است و برای شناسایی استفاده می‌شود. این مقدار باید یکتا و بدون space باشد.
• ورودی دو title : همان طور که از نام آن مشخص است تایتل باکسی است که در ادیتور نمایش داده میشود.
• ورودی سه callback : در این بخش نام تابعی را مشخص میکنیم که قرار است UI فیلد خود را توسط Html در آن طراحی کنیم.
• ورودی چهار screen : پست تایپ یا پست تایپ‌هایی را مشخص می‌کند که این متاباکس باید در آن‌ها نمایش داده شود.
• ورودی پنج context : محل قرارگیری باکس در صفحه ویرایش را تعیین می‌کند. می‌توانیم سه مقدار normal , advanced , side را به آن نسبت دهیم.
• ورودی شش priority : اولویت محل نمایش باکس را مشخص می‌کند. و مقادیر: default، core، high و low را میتوانیم به آن نسبت دهیم.
• ورودی هفت callback_args : آرایه‌ای از آرگومان‌ها هستند که می‌توانیم به تابع callback بدهیم. در این مثال از این بخش استفاده نکردیم چون ضروری نمیباشد.

در این مثال به عنوان پست تایپ مقدار tin_pt_product وارد شده که در حقیقت نام پست تایپی است که ما ایجاد کردیم اگر میخواهید متا باکس را به پست و یا پیج پیشفرض وردپرس اضافه کنید میتوانید از مقدار post و یا page استفاده کنید.

مشاهده کد های رجیستر کردن Meta Box.

/////////////////////////////////////////////////
//رجیستر کردن متا باکس
/////////////////////////////////////////////////
add_action('add_meta_boxes', 'tit_add_custom_box');
function tit_add_custom_box()
{
add_meta_box(
'tit_box_id', // Unique ID
'تایتل متا باکس', // Box title
'tit_custom_box_html', // Content callback, must be of type callable
'tit_pt_Pproduct', // Post type
'side', //normal , advanced , side
'high' // default , core , high , low
);
}

گام دوم : ایجاد UI فیلد با استفاده از Html

در این بخش باید کد های html فیلد خود را بزنیم ولی چند نکته مهم در این بخش وجود دارد که در ادامه به آنها اشاره خواهم کرد

نکته ۱ : نام این تابع tin_custom_box_html میباشد و ما در گام اول زمانی که Meta Box را رجیستر میکردیم آن را به تابع add_meta_box() معرفی کردیم. بدیهی است که برای نام این تابع فقط از مقداری که معرفی کردیم میتوانیم استفاده کنیم.

نکته ۲ : متغییری با نام value ایجاد کردیم و توسط تابع get_post_meta() مقدار فیلدی که میخواهیم اضافه کنیم را گرفتیم و توسط همین متغییر به فیلد خود نسبت دادیم تا آن را نمایش دهد. این کار برای این است که اگر کاربر مقداری در این فیلد وارد کرده بود و آن را ذخیره کرده بود زمانی که میخواهد پست را ویرایش کند آن مقدار را ببیند و بتواند ویرایش کند.

نکته ۳ : همان طور که در نکته ۲ گفته شد تابع get_post_meta() وظیفه گرفتن مقداری را دارد که ما در گام سوم ذخیره کردیم و سه ورودی میگیرد که به شرح ذیل است :

• ورودی اول id : آی دی پستی که قرار است متای آن را برای ما بگیرد.
• ورودی دوم key : نام کلیدی که متا با آن نام ذخیره شده است. فیلد های ما با کلید هایی که ما معرفی میکنیم ذخیره میشود. این نام باید دقیقا همان نامی باشد که در گام سوم ما فیلد خود را با آن ذخیره میکنیم.
• ورودی سوم  single : مقدار true و یا false میگیرد و مشخص میکند خروجی تکی باشد یا آرایه که ما به آن true میدهیم.

مشاهده تابع خام get_post_meta()

get_post_meta($post_id, $key, $single);

نکته ۴ : فیلدی که قرار است آن را ذخیره کنیم، در این مثال input اتربیوتی به نام name میگیرد که خیلی مهم است و در گام سوم برای ذخیره کردن مقدار فیلد ما مورد استفاده قرار میگیرد. در این مثال این مقدار tin_field میباشد.

مهم : مقدار key که در این مثال tin_key_field میباشد در ۲ جا استفاده میشود، زمانی که میخواهیم در گام سوم فیلد خود را ذخیره کنیم باید با key ذخیره کنیم که ما به آن مقدار tin_key_field را دادیم و دوم زمانی که میخواهیم آن را فراخوانی کنیم و مجدد در فیلد خود نمایش دهیم باید برای استفاده از  get_post_meta()  همین مقدار را وارد کنیم.

مشاهده کد های گام دوم

/////////////////////////////////////////////////
// ایجاد یو آی فیلد با استفاده از اج تی ام ال
/////////////////////////////////////////////////
function tin_custom_box_html($post)
{
$value = get_post_meta($post->ID, 'tin_key_field', true);
?>
<label for="tin_field">توضیحات برای این فیلد</label>
<input name="tin_field" id="tin_field" class="postbox" value="<?php echo $value; ?>">
<?php
}

گام سوم : ذخیره کردن فیلد

در این گام کار ذخیره سازی انجام میشود، اکشن save_post زمانی که قرار است پست ما ذخیره شود فعال میشود در این زمان با استفاده از تابع update_post_meta() میتوانیم مقدار فیلد خود را نیز ذخیره کنیم.

مشاهده تابع خام update_post_meta

update_post_meta($post_id, $meta_key, $meta_value);

تابع update_post_meta سه ورودی میگیرد که به شرح ذیل است :

• ورودی اول id : آی دی پستی که قرار است متای آن را ذخیره کند.
• ورودی دوم key : نامی که میخواهیم مقدار خود را با نام آن ذخیره کنیم در گام دوم توضیح داده شد.
• ورودی سوم meta_value : مقداری که میخواهیم ذخیره شود. در این بخش باید نامی که در اتربیوت name برای فیلد خود قرار دادیم را وارد کنیم. تا مقدار فیلد را فراخوانی کرده و آن را ذخیره کند.

مشاهده کد های گام سوم

/////////////////////////////////////////////////
//ذخیره کردن فیلد
/////////////////////////////////////////////////
add_action('save_post', 'tin_save_postdata');
function tin_save_postdata($post_id)
{
if (array_key_exists('tin_field', $_POST)) {
update_post_meta(
$post_id,
'tin_key_field',
$_POST['tin_field']
);
}
}

کد های استفاده شده در ویدیو

کد هایی که در ویدیو بالا استفاده شده است به شرح ذیل است و میتوانید به راحتی آن را دانلود و استفاده نمایید.

مرحله یک : رجیستر کردن متا باکس

/////////////////////////////////////////////////
//رجیستر کردن متا باکس
/////////////////////////////////////////////////
add_action('add_meta_boxes', 'tit_add_custom_box');
function tit_add_custom_box()
{
add_meta_box(
'tit_box_id', // Unique ID
'تایتل متا باکس', // Box title
'tit_custom_box_html', // Content callback, must be of type callable
'tit_pt_Pproduct', // Post type
'side', //normal , advanced , side
'high' // default , core , high , low
);
}

مرحله دوم : ایجاد یو آی فیلد با استفاده از اج تی ام ال

/////////////////////////////////////////////////
// ایجاد یو آی فیلد با استفاده از اج تی ام ال
/////////////////////////////////////////////////
function tit_custom_box_html($post)
{
?>
<label for="tit_field_price">توضیحات برای این فیلد</label>
<input name="tit_field_price" id="tit_field_price" class="postbox" value="">
<?php
}

مرحله سوم : ذخیره کردن فیلد

/////////////////////////////////////////////////
//ذخیره کردن فیلد
/////////////////////////////////////////////////
add_action('save_post', 'tit_save_postdata');
function tit_save_postdata($post_id)
{
if (array_key_exists('tit_field_price', $_POST)) {
//add and update
$get_post_meta = get_post_meta($post_id, 'tit_key_field_price', false);
if ($get_post_meta) {
update_post_meta($post_id, 'tit_key_field_price', $_POST['tit_field_price']);
} else {
add_post_meta($post_id, 'tit_key_field_price', $_POST['tit_field_price']);
}
} else {
delete_post_meta($post_id, 'tit_key_field_price_price');
}
}

مرحله چهارم : فراخوانی مقدار فیلد در باکس

$value = get_post_meta($post->ID, 'tit_key_field_price', true);
<?php echo esc_attr($value); ?>

مرحله پنجم : امنیت، برسی نانس

برای محافظت از سایت و پلاگین در برابر حملاتی مثل جعل درخواست یا همان CSRF یا XSRF از NONCE استفاده میکنیم. نانس Token ای منحصربفرد است که از مجموعه ای از حروف و اعداد تشکیل شده، این رشته یکبار مصرف Number Used Once در سمت سرور به صورت خودکار ایجاد و به کلاینت ارسال می گردد. کلاینت هم برای انجام درخواست هایی مثل افزودن، حذف و ویرایش داده ها باید این نشانه امنیتی را به سرور برگرداند تا وردپرس مطمئن شود که درخواست های ارسالی جعلی نیستند.

<input type="hidden" value="<?php echo wp_create_nonce(plugin_basename(__FILE__)); ?>" name="tit_nonce_code" id="tit_nonce" />
//nonce check
$my_nonce = wp_verify_nonce($_POST['tit_nonce_code'], plugin_basename(__FILE__));
if (!$my_nonce) die("Security check failed => nonce error");

مرحله ششم : امنیت، برسی نقش کاربر

//check user roles
if (!current_user_can('edit_post', $post_id))
die("Security check failed => current user error");

مشاهده کامل کدها

/////////////////////////////////////////////////
//رجیستر کردن متا باکس
/////////////////////////////////////////////////
add_action('add_meta_boxes', 'tit_add_custom_box');
function tit_add_custom_box()
{
add_meta_box(
'tit_box_id', // Unique ID
'تایتل متا باکس', // Box title
'tit_custom_box_html', // Content callback, must be of type callable
'tit_pt_Pproduct', // Post type
'side', //normal , advanced , side
'high' // default , core , high , low
);
}
/////////////////////////////////////////////////
// ایجاد یو آی فیلد با استفاده از اج تی ام ال
/////////////////////////////////////////////////
function tit_custom_box_html($post)
{
$value = get_post_meta($post->ID, 'tit_key_field_price', true);
?>
<input type="hidden" value="<?php echo wp_create_nonce(plugin_basename(__FILE__)); ?>" name="tit_nonce_code" id="tit_nonce" />
<label for="tit_field_price">توضیحات برای این فیلد</label>
<input name="tit_field_price" id="tit_field_price" class="postbox" value="<?php echo esc_attr($value); ?>">
<?php
}
/////////////////////////////////////////////////
//ذخیره کردن فیلد
/////////////////////////////////////////////////
add_action('save_post', 'tit_save_postdata');
function tit_save_postdata($post_id)
{
if (array_key_exists('tit_field_price', $_POST)) {
//baresie nonce
$my_nonce = wp_verify_nonce($_POST['tit_nonce_code'], plugin_basename(__FILE__));
if (!$my_nonce) die("Security check failed => nonce error");
//baresie karbar
if (!current_user_can('edit_post', $post_id))
die("Security check failed => current user error");
//add and update
$get_post_meta = get_post_meta($post_id, 'tit_key_field_price', false);
if ($get_post_meta) {
update_post_meta($post_id, 'tit_key_field_price', $_POST['tit_field_price']);
} else {
add_post_meta($post_id, 'tit_key_field_price', $_POST['tit_field_price']);
}
} else {
delete_post_meta($post_id, 'tit_key_field_price_price');
}
}