قسمت ۲ – افزودن Meta Box / فیلد اضافی به Post Type

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

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

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

وردپرس اکشن add_meta_boxes را برای رجیستر کردن Meta Box اجرا می‌کند. در تابع مربوط به این اکشن باید تابع 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()

نکته ۳: تابع get_post_meta() مقداری را دریافت می‌کند که در گام سوم ذخیره کرده‌ایم. این تابع سه ورودی می‌گیرد که در ادامه آن‌ها را توضیح می‌دهیم:

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

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

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

اهمیت ویژگی name در فیلد

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

مهم: مقدار key که در این مثال tin_key_field است، در ۲ بخش کاربرد دارد. در گام سوم، مقدار فیلد را با این key ذخیره می‌کنیم. همچنین هنگام فراخوانی مقدار و نمایش دوباره آن در فیلد، باید همین مقدار را در تابع 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');
    }
}