آموزش ایجاد meta box در وردپرس

ایجاد meta box قسمت مهمی از دولوپ افزونه ها و قالب وردپرس می باشد. متاباکس روشی جهت اضافه کردن ویرایشگر جالب و جذاب به صفحه نوشته و جلوگیری از اجبار کردن کاربر در تکیه به قسمت های ویژه است. در وردپرس اگر یک نوشته ویژه ایجاد نمائید، و یک سری داده ها بخواهید به آنها اضافه کنید. یقیناً می توانید از زمینه های سفارشی استفاده نمایید. حال باید بگوییم که اینها آنچنان زیبا و جذاب نیستند. کار کردن با متا باکس خیلی راحت و آسان می باشد. پس جهت بررسی همراه ما باشید.

ایجاد meta box

متاباکس سفارشی چیست و چه کاربردی دارد ؟

فرض کنید شما در حال طراحی و یا ویرایش یک قالب برای مشتری می باشید و می خواهید تعدادی از پوستر های کنسرت ها را بصورت کاتالوگ درست کنید. بدون تردید دنبال امکاناتی در وردپرس اصلی میگردید تا بررسی کنید و ببینید چگونه می توان قالب را سازماندهی کرد. هر نوشته تنها نشان دهنده یک پوستر می باشد. که جهت اضافه کردن عکس، عنوان و توضیح مناسب می باشد. همچنین از سیستم بخش بندی و تگ در درون وردپرس جهت ساماندهی پوستر استفاده کنیم. ولی اگر قصد داشتیم نوع جدیدی از داده های متا را به ” نقش” هر پوستر اضافه نماییم چه میشد ؟ تقریباً میشه گفت که وردپرس قابلیتی آماده جهت انجام این کار را ندارد که با وجود این مشکل به سمت ایجاد متاباکس های سفارشی می رویم.

در بیان متاباکس سفارشی خیلی ساده می باشد و به شما این امکان را می دهد تا قطعات سفارشی داده ها را به یک صفحه و یا یک پست در وردپرس اضافه نمائید. از آن بهتر این است که می توانید بصورت مستقیم در بیشتر صفحه های پیش فرض در درون وردپرس جاگذاری کنید. پس برای این که به آسانی بتوانید به وسیله انواع غیرفنی آن را مورد استفاده قرار بگیرید، داخل Post-Editor به راحتی می توانید آن را جای دهید. همانگونه که در مقدمه این مطلب بیان شد : می توانید بوسیله سازه در قسمت های سفارشی جهت یک پست و یا یک صفحه این نوع “داده های متا” را به نوشته های خود اضافه کنید. این کار انجامش اشتباه نیست، ولی زیاد کاربر پسند و برازنده نیست.

در عوض شما می بایست یک جعبه ی متای سفارشی ایجاد نمایید که شامل قسمت هایی جهت همه ی اطلاعاتتان باشد و دقیقا زمانی که نوشته منتشر می شود، همه چیز را ذخیره سازی کند. این همان کاری است که ما در اینجا پوشش می دهیم. این امر در سه مرحله ی بزرگ انجام می شود:

• اضافه کردن متاباکس ( حالت post type)
• خروجی گرفتن از متاباکس ها
• داده ها را ذخیره کردن (از راه درست – بله درست حدس زدید، راه اشتباه هم وجود دارد)

لازم به ذکر است که بسیاری از این اطلاعات نیز می توان داخل پست سفارشی نوع API استفاده نمود، ضروری نیست (بعداً به این نکته خواهیم پرداخت) اما تنها بخاطر اینکه امروز همه چیز را متمرکز نگه داریم، قصد داریم که این را به صورت مستقیم به ویرایشگر پست پیش فرض اضافه نماییم. جهت مخاطبان پیشرفته و حرفه ای تر: بله، انواع پست سفارشی جایی است که ما در نهایت به آنجا خواهیم رسید، اما مهم است که در ابتدا به چندین اصل کلی بپردازیم. بعلاوه، به این دلیل که شما می توانید متا باکس های سفارشی را در همه نوع مکانی استفاده نمایید، دانستن آن برای هر کسی مفید است.

همه چیز در این آموزش در فایل functions.php قالب کار خواهد کرد. در هر صورت، این جا مکان مناسبی برای این نمی باشد. اگر دارید داده هایی به یک پست اضافه می نمایید، احتمال این است که آن ها را بدون این که طراحی ظاهر کاربریشان را در نظر بگیرید، در آن جا می خواهید. بدین ترتیب، در محلی باید این کد را قرار دهید که به طراحی شما وابسته نیست: مکانی مانند یک افزونه.

مرحله اول : ایجاد meta box

ایجاد meta box

جهت اضافه کردن متاباکس ها، وردپرس در صفحه مدیریت، به سادگی یک تابع ارائه می نماید:  Add_meta_box.
برای این تابع وارد کردن codex به خوبی انجام شده . ولی در اینجا مروری کوتاه بر این آمده است. برای نمونه :

<?php add_meta_box( $id, $title, $callback, $page, $context, $priority, $callback_args ); ?>

$id به عنوان تگ ID HTML کد باکس قرار خواهد گرفت این کار در صورتی که شما در حال بارگذاری CSS سفارشی یا JAVASCRIPT در صفحه ویرایشگر برای رسیدگی به گزینه ها می باشید، خیلی خوب است. در غیر این صورت این امر چندان اهمیتی ندارد.
$title در بالای متاباکس به نمایش در آمده می باشد.
$callback تابعی است که در واقع خروجی از متاباکس می گیرد. در مرحله بعدی این موضوع را بررسی خواهیم کرد.
$page جایی است که می خواهید در آن جا متاباکس نمایش داده شود. این مورد باید به یک post و یا یک page و یا some_custom_post_type در ارتباط باشد.

$context مکانی است که متاباکس نمایش داده خواهد شد. در زیر ویرایشگر نوشته، گزینه normal آن را قرار می دهد. گزینه side آن را به نوار کناری سمت راست صفحه ویرایش انتقال خواهد داد. (با دسته بندی ها ، تگ ها و .. ) . Advanced هم باکس را در همان ستونی که ویرایشگر پست وجود دارد ، قرار می دهد.
$priority به وردپرس اعلام می کند که در چه منطقه ای مکان متاباکس باید باشد. گزینه های default ، high یا low به ترتیب متاباکس ها را در نزدیکی بالای صفحه، در موقعیت طبیعی شان و یا این که در پایین صفحه قرار می دهد. تمامی متاباکس ها از آنجایی که قادر به کشیده شدن هستند، $priority کار چندان بزرگی نمی باشد.

در آخر $callback_args اجازه می دهد که داده های شما را به شکل آرایه ای به تابع $callback انتقال دهید. ما قصد استفاده آن ها را در این جا نداریم. ولی برای انتقال بعضی داده ها به متاباکس می تواند مفید باشد. فرض کنید که افزونه تان چندین گزینه داشت که محتویات نمایش داده شده در متا باکس ها را تحت تاثیر قرار می داد. شما از طریق آرایه $callback_args می توانید اطلاعات این گزینه ها را انتقال دهید.
در نتیجه ساختار add_meta_box ما شبیه این خواهد بود :

<?php add_meta_box( 'my-meta-box-id', 'My First Meta Box', 'cd_meta_box_cb', 'post', 'normal', 'high' ); ?>

در فایل افزونه به تنهایی نمی توانیم این را اضافه کنیم. چون نتیجه انجام این عمل ، صفحه ی سفید مرگ و خطای مصیبت بار PHP مانند : فراخوانی به تابع تعریف نشده، خواهد بود. چرا ؟ چون قبل از آن که وردپرس بارگزاری شود، تابع add_meta_box را فراخوانی کرده بوده ایم. پس به این احتیاج داریم که از یک قلاب وردپرس استفاده نماییم که قسمتی از API پلاگین می باشد. در واقع توابع به یک عملکرد داده شده به وردپرس و یا قلاب فیلتر، قلاب می شود. پس زمان بارگذاری این قلاب، این تابع ها شروع به کار می کنند. با پیچیدن تماس add_meta_box ما در یک تابع و بعد متصل شدن آن تابع به قلاب عملکرد add_meta_boxes از خطاهای مصیبت بار جلوگیری خواهیم نمود.

برای اضافه نمودن متاباکس به پست های مان، کد چیزی مثل این خواهد بود :

<?php
  add_action( 'add_meta_boxes', 'cd_meta_box_add' );
  function cd_meta_box_add()
  {
  add_meta_box( 'my-meta-box-id', 'My First Meta Box', 'cd_meta_box_cb', 'post', 'normal', 'high' );
  }
  ?>

مرحله دوم : خروجی گرفتن از متا باکس ها

برای این که متاباکس را اضافه نماییم کد فوق کافی می باشد ولی اکنون باید از چیزی خروجی بگیریم و بخش اضافه کنیم. این تنها یک کد HTML است که برای نمایش دادن اطلاعات ذخیره شده است و با مقداری PHP مختلط شده است. به دخالت دادن تگ فرم ها نیازی نداریم چون وردپرس این کار را برایمان انجام خواهد داد.
رشته ای را که به add_meta_box به عنوان $callback منتقل کردیم بخاطر می آورید؟ هم اکنون قصد داریم با همین نام یک تابع ایجاد کنیم. از همه ی چیزهایی که در متاباکس نمایش داده می شود این تابع مراقبت می کند.

<?php
  function cd_meta_box_cb()
  {
  echo 'What you put here, show\'s up in the meta box';
  }
  ?>

ایجاد meta box

قصد داریم تا بخش های مختلفی را به متاباکس های مان اضافه نماییم : یک ورودی متن، یک منو کرکره ای و یک جعبه ی تیک. بگذارید با ورودی متن شروع کنیم.

اضافه کردن input

<?php
 function cd_meta_box_cb()
 {
 ?>
 <label for="my_meta_box_text">Text Label</label>
 <input type="text" name="my_meta_box_text" id="my_meta_box_text" />
 <?php
 }
 ?>

ولی، چطور است که واقعا اطلاعاتی را نمایش بدهیم ؟ همان طوری که در مرحله سوم می بینید ، با استفاده از تابع update_post_meta ما این داده ها را در جدول wp_postmeta ، ذخیره می نماییم . این تابع شامل دو تابع مرتبط با آن به اسم های get_post_meta و get_post_custom می باشد که از wp_postmeta اطلاعات کسب می نماید. Get_post_meta فقط از یک کلید اطلاعات کسب میکند. این در حالی است که get_post_custom از تمامی آن ها اطلاعات کسب میکند از آنجایی که ما فقط از یک بخش استفاده می نماییم ، بگذارید از get_post_meta استفاده کنیم.
علاوه بر این توجه کنید که تابع add_meta_box به callback ما یک متغیر post$ را انتقال می دهد که یک موضوع نوشته است.

<?php
function cd_meta_box_cb( $post )
{
$values = get_post_custom( $post->ID );
$text = isset( $values['my_meta_box_text'] ) ? esc_attr( $values['my_meta_box_text'][0] ) : ”;
$selected = isset( $values['my_meta_box_select'] ) ? esc_attr( $values['my_meta_box_select'][0] ) : ”;
$check = isset( $values['my_meta_box_check'] ) ? esc_attr( $values['my_meta_box_check'][0] ) : ”;
    ?>
<p>
    <label for="my_meta_box_text">Text Label</label>
    <input type="text" name="my_meta_box_text" id="my_meta_box_text" value="<?php echo $text; ?>" />
        </p>
    <?php        
}
 
?>

اضافه کردن منو کرکره ای در ایجاد meta box

<?php
function cd_meta_box_cb()
{
    // $post is already set, and contains an object: the WordPress post
    global $post;
    $values = get_post_custom( $post->ID );
    $text = isset( $values['my_meta_box_text'] ) ? $values['my_meta_box_text'] : '';
    $selected = isset( $values['my_meta_box_select'] ) ? esc_attr( $values['my_meta_box_select'] ) : '';
    $check = isset( $values['my_meta_box_check'] ) ? esc_attr( $values['my_meta_box_check'] ) : '';
    
    // We'll use this nonce field later on when saving.
    wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );
    ?>
    <p>
        <label for="my_meta_box_text">Text Label</label>
        <input type="text" name="my_meta_box_text" id="my_meta_box_text" value="<?php echo $text; ?>" />
    </p>
    
    <p>
        <label for="my_meta_box_select">Color</label>
        <select name="my_meta_box_select" id="my_meta_box_select">
            <option value="red" <?php selected( $selected, 'red' ); ?>>Red</option>
            <option value="blue" <?php selected( $selected, 'blue' ); ?>>Blue</option>
        </select>
    </p>
    
    <p>
        <input type="checkbox" id="my_meta_box_check" name="my_meta_box_check" <?php checked( $check, 'on' ); ?> />
        <label for="my_meta_box_check">Do not check this</label>
    </p>
    <?php    
}
?>

با اضافه نمودن بخش ۲ ، تماس get_post_meta را به get+post_custom تغییر دادیم که آرایه ای شرکت پذیر از کلیه کلیدها و ارزش های سفارشی پست ها را برمی گرداند. بعد ها ما می توانیم از راه اسم قسمت ها به آن ها دسترسی پیدا کنیم. بیانیه نوع سوم، در برابر هشدارهای php کدهای مان را محافظت می کند ( شاخص های تعریف نشده و .. ) در مرحله سوم به شرح دادن esc_attr می پردازیم.

می خواهیم در منوی کرکره ای از یکی از بهترین و مفید ترین تابع های وردپرس استفاده کنیم : selected . این تابع اطلاعات ذخیره شده ی ما ( یعنی ارزش اول ) را با ارزش دوم مقایسه می نماید . اگر آن ها یکسان باشند، این تابع selected=”selected” را منعکس خواهد کرد. و موجب می شود این ارزش در منو ی کرکره ای نمایش داده شود. این خیلی شیرین است و هم چنین ما را از نوشتن تعداد زیادی از تابع ها و بیانیه های نوع سوم نجات خواهد داد و همچنین شما می توانید از تابع ()selected با دکمه های رایدیویی استفاده کنید

اضافه کردن جعبه ی تیک (Check-box)

<?php
 function cd_meta_box_cb()
 {
 // $post is already set, and contains an object: the WordPress post
 global $post;
 $values = get_post_custom( $post->ID );
 $text = isset( $values['my_meta_box_text'] ) ? $values['my_meta_box_text'] : '';
 $selected = isset( $values['my_meta_box_select'] ) ? esc_attr( $values['my_meta_box_select'] ) : '';
 $check = isset( $values['my_meta_box_check'] ) ? esc_attr( $values['my_meta_box_check'] ) : '';

// We'll use this nonce field later on when saving.
 wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );
 ?>
 <p>
 <label for="my_meta_box_text">Text Label</label>
 <input type="text" name="my_meta_box_text" id="my_meta_box_text" value="<?php echo $text; ?>" />
 </p>

<p>
 <label for="my_meta_box_select">Color</label>
 <select name="my_meta_box_select" id="my_meta_box_select">
 <option value="red" <?php selected( $selected, 'red' ); ?>>Red</option>
 <option value="blue" <?php selected( $selected, 'blue' ); ?>>Blue</option>
 </select>
 </p>

<p>
 <input type="checkbox" id="my_meta_box_check" name="my_meta_box_check" <?php checked( $check, 'on' ); ?> />
 <label for="my_meta_box_check">Do not check this</label>
 </p>
 <?php
 }
 ?>

وردپرس مجدداً تابع کاربردی و مفید ()checked را ارائه میدهد. این کار دقیقا همانند ()selected ارزش اول (داده های ذخیره شده ما) را با ارزش دوم مقایسه میکند و اگر یکسان باشند ، checked=”checked” را منعکس می کند.
Wp_nonce_field به متا باکس های ما دو بخش پنهان را اضافه می کند. Nonce یکی از آن ها می باشد. آن ها رشته های تصادفی از اعداد هستند که برای هر کاربر بر اساس هر بلاگ در مدت زمان ۲۴ ساعت اعتبار دارند. راهی برای تایید هدف nonce ها هستند. و آن ها مطمئن می شوند که هیچ کاری وردپرس انجام نمی دهد مگر این که درخواست آن از یک مکان خیلی خاص آمده باشد. از یک سو، این را نمی خواهیم که با اجرای تابع ذخیره شده ی خود ( مرحله سوم را بررسی نمایید ) در جای دیگری به جز در قلاب save_post به صورت تصادفی اطلاعات مان را بروز کنیم. پس از معتبر بودن nonce قبل از انجام هر کاری مطمئن بشوید.

ایجاد meta box

مرحله سوم : ذخیره کردن داده ها در meta box

زمانی که قصد دارید چیزی را به پایگاه داده خود و یا سایت خود اضافه و یا وارد کنید قاعده شماره یک این است که هیچ وقت به کاربر اعتماد نکنید! حتی اگر خود شما باشید.
قصد داریم برای ذخیره کردن اطلاعات مان به یکی از قلاب هاب وردپرس اتکا کنیم : save_Post . این مورد دقیقا مثل قلاب با عملکردی بالا عمل می کند :

<?php add_action( 'save_post', 'cd_meta_box_save' ); ?>

تابع cd_meta_box_save استدلالی یعنی post id را دریافت خواهد کرد و مواظب تمیز و ذخیره کردن تمامی اطلاعات مان است. پس از بروز رسانی کردن و یا بعد از فشردن دکمه ذخیره کردن پیش نویس، قلاب save_post اجرا می شود. پس ما دسترسی به تمام اطلاعات POST_$ پیدا خواهیم کرد که در داخل تابع شبیه سازی شامل بخش متاباکس های ما است. در هر حال قبل از هر حرکتی باید سه کار انجام دهیم : ذخیره شدن پست به صورت خودکار را بررسی کنید. ارزش nonce که قبلا ایجاد کرده ایم را بررسی کنید. و هم چنین بررسی کنید که مطمئن شوید کاربر فعلی تان می تواند در واقع پست ها را ویرایش کند .

<?php
add_action( 'save_post', 'cd_meta_box_save' );
function cd_meta_box_save( $post_id )
{
    // Bail if we're doing an auto save
    if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
     
    // if our nonce isn't there, or  we can't verify it, bail
    if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return;
     
    // if our current user can't edit this post, bail
    if( !current_user_can( 'edit_post' ) ) return;
}
?>

اکنون به دنبال موارد سرگرم کننده خواهیم رفت : در واقع اطلاعات ما را ذخیره می کند. زمانی که می خواهید به پایگاه داده های تان و یا وب سایت تان چیزی را وارد کنید، قانون شماره ۱ این است که : به کاربر هیچ وقت اعتماد نکنید ! حتی اگر خود شما آن کاربر باشید. برای نیل به این هدف ، قبل از ذخیره سازی هرگونه اطلاعات ، باید از عدم وجود چیزهای مخرب در آن اطمینان حاصل نمایید . لازم به بیان است که وردپرس برای اعتتبار سنجی (data validation ) تعدادی تابع ارائه داده است.
قبلا شما ()esc_att را در بالا دیدید. ( مرحله دوم ) . در HTML این یکی را کدنویسی میکند. دلیل استفاده از این تابع چیست ؟ برای این که در متاباکس تان نتوانند یک اسکریپت وارد کنند. اگر به تگ های HTML مشخصی می خواهید اجازه ورود بدهید ولی بقیه را محروم سازید، wp_kses می تواند این عمل را انجام دهد. این کار شامل ۲ استدلال می شود. یک این که رشته ای که میخواهید شما بررسی کنید و دوم از تگ های مجاز یک آرایه ی شرکت پذیر می باشد. تعداد بسیار زیادی اعتبار سنجی اطلاعات توسط وردپرس ارائه می شود. منتهی جرأت استفاده کردن از آن ها را می باست داشته باشید.
ما قصد داریم با استفاده از تابع update_post_meta از تاریخ اطلاعات ذخیره شده خود ، استفاده کنیم. این کار شامل سه استدلال می شود : Id یک پست ، کلید متا و ارزش .

<?php
add_action( 'save_post', 'cd_meta_box_save' );
function cd_meta_box_save( $post_id )
{
    // Bail  if we're doing an auto save
    if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
     
    // if our nonce isn't there, or we can't verify it, bail
    if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return;
     
    // if our current user can't edit this post, bail
    if( !current_user_can( 'edit_post' ) ) return;
     
    // now we can actually save the data
    $allowed = array( 
        'a' => array( // on allow a tags
            'href' => array() // and those anchors can only have href attribute
        )
    );
     
    // Make sure your data  is set before trying to save it
    if( isset( $_POST['my_meta_box_text'] ) )
        update_post_meta( $post_id, 'my_meta_box_text', wp_kses( $_POST['my_meta_box_text'], $allowed ) );
         
    if( isset( $_POST['my_meta_box_select'] ) )
        update_post_meta( $post_id, 'my_meta_box_select', esc_attr( $_POST['my_meta_box_select'] ) );
         
    // This is purely my personal preference for saving check-boxes
    $chk = isset( $_POST['my_meta_box_check'] ) && $_POST['my_meta_box_select'] ? 'on' : 'off';
    update_post_meta( $post_id, 'my_meta_box_check', $chk );
}
?>

ایجاد meta box

نتیجه گیری از ایجاد meta box

برای ایجاد meta box تمام آن مواردی که احتیاج دارید همین ها می باشد. باید شما متاباکسی با کارکرد کامل داشته باشید. امکان دارد نمونه های دیگری را از طریق چندین بخش در حلقه وب بدون این که واقعا اطلاعات را تمیز کند پیدا کنید. این شیوه ای غلط است. همواره در توابع اعتبارسنجی اطلاعات از سازه استفاده نمایید. بخش ها و ارزش های گوناگون امکان دارد به اعتبارسنجی های گوناگونی نیازمند باشد.

در بخش ظاهر کاربری سایت خود برای استفاده از این بخش ها ، از توابع get_post_meta یا get_post_custom استفاده نمایید. ( به مرحله دوم مراجعه کنید).

طراحی قالب وردپرس

(5 امتیاز: 3,20 از 5)

Loading...