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

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

ایجاد متاباکس در وردپرس

متاباکس های (meta box) سفارشی چه چیزی هستند ؟

تصور نمایید که بر روی یک قالب برای یک مشتری در حال کار هستید که می خواهد مجموعه ای از پوسترهای کنسرت های خود را کاتالوگ نماید. بلافاصله شما به دنبال قابلیت هایی در وردپرس اصلی می گردید که ببینید به چه صورت می توانید تم را سازماندهی کنید : هر پست نشان دهنده ی فقط یک پوستر می باشد که برای اضافه کردن یک تصویر، شرح و عنوان مناسب می باشد. علاوه بر این می توانیم از سیستم های دسته بندی و تگ درون وردپرس برای سازماندهی پوسترها استفاده نماییم ولی اگر می خواستیم نوع جدیدی از داده های متا را به ” نقش” هر پوستر اضافه کنیم چه میشد ؟ تقریبا وردپرس برای انجام این کار هیچ قابلیت آماده ای را ندارد و به جعبه ی متای سفارشی این مشکلات را هدایت می کند.
در تئوری یک متاباکس سفارشی فوق العاده ساده است و این اجازه را به شما خواهد داد که قطعه های سفارشی داده ها را به یک صفحه و یا یک پست در وردپرس اضافه نمایید. – خبر خوب این است که می تواند در بسیاری از صفحات پیش فرض به طور مستقیم درون وردپرس جای گذاری شود. پس برای این که به آسانی بتواند به وسیله انواع غیرفنی مورد استفاده قرار بگیرد، درون Post-Editor به راحتی می توانید آن را جای دهید. با توجه به مقدمه گفته شده : شما می توانید با استفاده از سازه در قسمت های سفارشی برای یک پست و یا یک صفحه این نوع ” داده های متا ” را به پست های خود اضافه کنید. این کار انجامش اشتباه نیست، ولی زیاد کاربرپسند و برازنده نیست.
به جای آن، باید شما یک جعبه متای سفارشی بسازید که بخش هایی برای همه ی اطلاعات تان را شامل شود و دقیقا در زمان انتشار پست، همه چیز را ذخیره کند. این کاری است که ما ا ینجا پوشش می دهیم. این کار در سه مرحله بزرگ انجام می شود :
– اضافه کردن متاباکس پست تایپ
– از متا باکس خروجی گرفتن
– داده ها را ذخیره کردن ( البته از راه درست مه اشتباه )
گفتن این نکته که بسیاری از این اطلاعات را نیز می توان درون پست سفارشی نوع api استفاده کرد، ضروری نیست ( بعدها این نکته را بررسی می کنیم) ولی برای متمرکز نگه داشتن همه چیز در امروز، می خواهیم که به صورت مستقیم این را به ویرایشگر پست پیش فرض اضافه کنیم.
برای مخاطب های پیشرفته تر : آری ، انواع پست های سفارشی جایی می باشد که ما در نهایت به آن خواهیم رسید، اما اینکه در ابتدا به چند اصل کلی بپردازیم مهم است. همچنین، برای اینکه شما می توانید متاباکس های سفارشی را در هر مکانی استفاده کنید، برای هر کسی دانستن آن خوب است.
همه چیز در این آموزش در فایل functions.php تم کار خواهد کرد. در هر صورت، این جا مکان مناسبی برای این نیست. اگر دارید داده هایی به یک پست اضافه می کنید، احتمال این هست که آن ها را بدون این که طراحی ظاهر کاربری شان را در نظر بگیرید، در آن جا می خواهید. بدین ترتیب، در مکانی باید این کد را قرار دهید که به طراحی شما وابسته نیست: مکانی مثل یک افزونه

مرحله اول : اضافه کردن متاباکس

اضافه کردن متاباکس

برای اضافه کردن متاباکس ها، وردپرس در صفحه مدیریت، به سادگی یک تابع ارائه می کند:
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' );
}
?>

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

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

 خروجی گرفتن از متاباکس

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

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

اضافه کردن 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        
}
 
?>

اضافه کردن منوی کرکره ای در متاباکس

<?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>
     
    <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>
    <?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 قبل از انجام هر کاری مطمئن شوید.

ایجاد Nonce

مرحله سوم : ذخیره کردن اطلاعات در 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 یک پست ، کلید متا و ارزش .
ما با شما آموزش ساخت زمینه های دلخواه Custom Post type در وردپرس قسمت ۱ و قسمت ۲ زمینه های دلخواه را پیشنهاد میکنیم مطالعه کنید.

<?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 );
}
?>

جعبه متاباکس

نتیجه گیری

برای ایجاد متابکس ها همه ی آن چیزهایی که نیاز دارید همین هاست. باید شما متاباکسی با کارکرد کامل داشته باشید. امکان دارد نمونه های دیگری را از طریق چندین بخش در حلقه وب بدون این که واقعا اطلاعات را تمیز کند پیدا کنید. این شیوه ای غلط است. همواره در توابع اعتبارسنجی اطلاعات از سازه استفاده کنید. بخش ها و ارزش های گوناگون امکان دارد به اعتبارسنجی های گوناگونی نیازمند باشند.
در بخش ظاهر کاربری سایت خود برای استفاده از این بخش ها ، از توابع get_post_meta یا get_post_custom استفاده نمایید. ( رجوع به مرحله دوم ).

منبع تم لاین وردپرس

درباره حمید سلطانی

موارد جالب

نمایش شماره صفحات وردپرس بدون افزونه

آموزش نمایش شماره صفحات وردپرس بدون افزونه

با سلام خدمت شما عزیزان چند وقت پیش مطلبی آماده کردیم با عنوان نمایش شماره ...

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *