سایر بخش های سری آموزشی " ایجاد افزونه وردپرس "

متاباکس چیست ؟

در زمان ویرایش یک نوشته توسط یک کاربر در قسمت مدیریت وردپرس ، یکسری باکس مانند ویرایشگر ، انتشار ، دسته بندی ها ، برچسب ها و … به صورت پیش فرض را مشاهده می کنید . به این باکس ها ، متاباکس گفته می شود .

افزونه ها می توانند متاباکس های سفارشی را به هر نوع نوشته ای مانند ، نوشته های معمولی وردپرس ، صفحات ، پیوند و … را اضافه کنند .

محتوای متاباکس ها معمولاً المان های فرم های HTML هستند ، که کاربر داده های مرتبط با نوشته را در آنها وارد می کند . البته محتوای متاباکس ها می تواند شامل هر نوع کد یا تگ HTML دلخواه شما نیز باشد .

 

چرا از متاباکس ها استفاده کنیم ؟

متاباکس های امکاناتی در دسترس و انعطاف پذیر هستند که می توانند برای جمع آوری اطلاعات مرتبط با نوشته ها ، بکارگیری شوند .

متاباکس سفارشی شما مانند سایر متاباکس های پیش فرض وردپرس و یا سایر فیلدهای مرتبط با نوشته در صفحه ویرایش نوشته ، نمایش داده می شود .

شما می توانید متاباکس ها  را به کاربران دلخواه خود نشان دهید و یا آنها را از یکسری کاربر خاص پنهان کنید .

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

 

چگونه یک متاباکس ایجاد کنیم ؟

ایجاد یک متاباکس برای افزونه شما ، نیازمند ۳ عنصر اصلی است :

  1. المان های فرم HTML (سایر المان های HTML نیز قابل قبول هستند)
  2. ذخیره داده های ورودی توسط کاربر
  3. دریافت مقادیر ذخیره شده

بعد از تعیین ۳ عنصر بالا ، شما می توانید توسط قلاب add_meta_boxes و همچنین تابع add_meta_box()   ، متاباکس دلخواه خود را ایجاد کنید .

/* Adds a meta box to the post edit screen */
add_action( 'add_meta_boxes', 'myplugin_add_custom_box' );
function myplugin_add_custom_box() {
    $screens = array( 'post', 'my_cpt' );
    foreach ( $screens as $screen ) {
        add_meta_box(
            'myplugin_box_id',            // Unique ID
            'Custom Meta Box Title',      // Box title
            'myplugin_inner_custom_box',  // Content callback
             $screen                      // post type
        );
    }
}

 

در مثال بالا یک متاباکس به چند نوع نوشته اعمال شده است .

 

فرم

المان های فرم HTML ، برچسب ها و هر مورد مرتبط با HTML ، توسط تابع فراخوان ایجاد شده توسط شما ، به خروجی ارسال می شوند .

نام تابع ایجاد کننده محتوای HTML خروجی ، به عنوان پارامتر callback یا فراخوان به تابع  add_meta_box()    ارسال می شود .

 

در اینجا یک تابع فراخوان ساده را مشاهده می کنید که یک “متاباکس تصویر”  را برای مثال قبل ، ایجاد می کند .

توجه کنید که دکمه ارسال (submit) در این مثال وجود ندارد .

تمام عناصر فرم های متاباکس در صفحه نمایش نوشته ، به همراه سایر اطلاعات نوشته ، در هنگام کلیک کردن روی دکمه انتشار یا بروزرسانی ، به بانک اطلاعاتی وردپرس ارسال می شوند .

<?php /* Prints the box content */
function myplugin_inner_custom_box( $post ) {
?>
   <label for="myplugin_field"> Description for this field </label>
    <select name="myplugin_field" id="myplugin_field" class="postbox">
        <option value="">Select something…</option>
        <option value="something">Something</option>
        <option value="else">Else</option>
    </select>
<?php
}
?>

 

تذکر مهم : تکه کد بالا و سایر کدهای موجود در این صفحه ، فقط برای نشان دادن نحوه استفاده از متاباکس ها در وردپرس ، استفاده می شوند . بنابراین از این کدها به دلیل رعایت مسائل امنیتی افزونه ، به تنهایی برای ایجاد متاباکس ها استفاده نکنید . زیرا کدهای مربوط به عملیات های پاکسازی داده ها ، امنیت و بین المللی کردن (internationalization) لحاظ نشده اند .

 

در مثال بالا تنها از یک فیلد فرم ، یعنی لیست پایین افتادنی (DropDown List)  استفاده شده است . این در حالی است که شما می توانید به تعداد دلخواه و از انواع دلخواه فیلدهای HTML در متاباکس خود استفاده کنید .

اگر شما تعداد زیادی فیلد دارید ، بهتر است آنها را بر اساس شباهت فیلدها ، در چند متاباکس قرار دهید . با اینکار به زیبایی بیشتر و سازماندهی بهتر صفحه کمک می کنید .

 

ذخیره مقادیر

جمع آوری داده ها از کاربر ، در حالی که آن داده ها در هیچ مکانی ذخیره نشوند ، عملاً امری بیهوده است .

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

 

در مثال زیر از اکشن save_post  استفاده شده است ، هرچند شما می توانید از اکشن هایی دیگر ، متناسب با شرایط افزونه خود استفاده کنید .

به یاد داشته باشید که اکشن save_post ممکن است چندین مرتبه در هنگام بروزرسانی یک نوشته ، اجرا شود .

شما می توانید داده های وارد شده توسط کاربر در متاباکس ها را ، در هر جایی که احساس می کنید بهتر است را ذخیره کنید .

یکی از مکان های خوب برای ذخیره داده های متاباکس ها ، جدول postmeta می باشد . البته شما می توانید داده های متاباکس ها را در جای دیگری که می خواهید ، ذخیره کنید .

 

دریافت مقادیر

پس از دریافت داده ها از کاربر توسط متاباکس ها و همچنین ذخیره آنها در مکان دلخواه در یانک اطلاعاتی وردپرس ، اکنون نوبت به استفاده از داده های ذخیره شده ، برای نمایش در قسمت مدیریت یا کاربری سایت (Front End) می باشد .

اگر شما اطلاعات متاباکس ها را در جدول postmeta ذخیره کرده اید ، به آسانی و توسط تابع get_post_meta()   می توانید آنها را دریافت کنید .

مثال زیر را برای دریافت مقدار فیلد لیست پایین افتادنی مراحل قبل ، را در نظر بگیرید .

<?php $value = get_post_meta( $post->ID, '_my_meta_value_key', true ); ?>
<select name="myplugin_field" id="myplugin_field" class="postbox">
    <option value="">Select something…</option>
    <option value="something" <?php if ( 'something' == $value ) echo 'selected'; ?>>Something</option>
    <option value="else" <?php if ( 'else' == $value ) echo 'selected'; ?>>Else</option>
</select>

 

پشت صحنه

علاوه بر ۳ عنصر اصلی در ایجاد یک متاباکس ، که در بالا ذکر شدند ، عناصر دیگری نیز وجود دارند که معمولاً برای کنترل عملیات های پشت صحنه مرتبط با متاباکس ، مورد استفاده قرار می گیرند .

شما به صورت عادی نیازی به دانستن این عناصر اضافی ندارید ، اما برای تکمیل یادگیری شما در مبحث متاباکس ها ،  بهتر است آنها را یاد بگیرید .

در هنگامی که صفحه تنظیمات یک نوع نوشته می خواهد متاباکس های مرتبط با خود را نمایش دهد ، از تابع do_meta_boxes()   استفاده می کند .

این تابع یک حلقه بر روی توابع فراخوان مرتبط با متاباکس ها را ایجاد می کند و به این ترتیب متاباکس ها را در خروجی نمایش می دهد .

در بین هر فراخوانی ، تمام بخش های هر متاباکس مانند عنوان متاباکس و … نیز به خروجی ارسال می شوند .

 

انواع

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

 

کلاس ها

اضافه کردن متاباکس ها توسط کلاس ها (از داخل کدهای یک شی کلاس) ، می تواند شامل برخی روش های متفاوت باشد . این در حالی است که مفاهیم پایه ایجاد متاباکس ها تغییری نمی کند .

قابلیت های ” اضافه کردن متاباکس ” ، ” پردازش فرم ” و  ” ذخیره مقادیر یک فیلد ” ، به عنوان متدهای کلاس شناخته می شوند .

این متدها توسط متد سازنده یا __construct   کلاس ، به قلاب های اکشن اضافه می شوند . همچنین فراخوان های تابع add_action()   بوسیله قالب کلاس معمول ارسال می شوند :

add_action( 'action_tag', array( $this, 'method_name') )

 

سرانجام یک نمونه از کلاس ، توسط دستور new class_name();   در یک تابع فراخوان برای قلاب اکشن “load-$page_hook” ایجاد می شود .

برای متاباکس های نوشته ، $page_hook برابر با post.php و post-new.php می باشد .

کد PHP زیر متاباکس بالا را توسط یک کلاس ایجاد می کند :

 

if ( is_admin()) {  //do nothing for front end requests
    add_action( 'load-post-new.php', 'call_someClass' );
    add_action( 'load-post.php', 'call_someClass' );
}
function call_someClass() {
    new someClass();
}
 
class someClass {
    public function __construct() {
        add_action( 'add_meta_boxes', array( $this, 'add_meta_box' ) );
        add_action( 'save_post', array( $this, 'save' ) );
    }
 
    public function add_meta_box( $post_type ) {
        $post_types = array( 'post', 'my_cpt' );
        if ( in_array( $post_type, $post_types )) {
            add_meta_box(
                'myplugin_box_id',            // Unique ID
                'Custom Meta Box Title',      // Box title
                array( $this, 'render_form'), // Content callback
                $post_type
            );
        }
    }
 
    public function save( $post_id ) {
        if ( array_key_exists('myplugin_field', $_POST ) ) {
            update_post_meta( $post_id,
               '_my_meta_value_key',
                $_POST
['myplugin_field'] ); } } public function render_form( $post ) { ?> <label for="myplugin_field"> Description for this field </label> <?php $value = get_post_meta( $post->ID, '_my_meta_value_key', true ); ?> <select name="myplugin_field" id="myplugin_field" class="postbox"> <option value="">Select something…</option> <option value="something" <?php if ( 'something' == $value ) echo 'selected'; ?>>Something</option> <option value="else" <?php if ( 'else' == $value ) echo 'selected'; ?>>Else</option> </select> <?php } }

 

 

آژاکس (AJAX)

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

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

به عنوان مثال ممکن است نیاز داشته باشید که یک لینک یا دکمه را در داخل یک متاباکس ، بر اساس داده ی ورودی کاربر را ایجاد کنید .

در مثال این مطلب آموزشی ، شما می توانید از رویداد change  کنترل select option ( لیست پایین افتادنی ) برای اینکار استفاده کنید .

زمانی که رویداد کلیک یا change اتفاق می افتد ، یک درخواست AJAX می تواند ایجاد شود و محتوای صفحه می تواند برای عکس العمل به پاسخ سرور ، فوری بروز شود .

در مثال زیر ، یک اسکریپت سمت کلاینت جی کوئری (JQuery)  را مشاهده می کنید که ، یک درخواست AJAX را در هنگام تغییر فیلد  “لیست بازشونده” را ایجاد می کند . سپس محتوای HTML داخلی عنصری با شناسه “myother_field”  توسط پاسخ سرور ، جمع آوری می شود .

jQuery(document).ready(function($) {          //the wrapper
    $("#myplugin_field").change(function() {  //the selector and event
        $.post(ajax_object.ajax_url, {        //the server_url
            action: "change",                 //the submit_data array
            $("#myplugin_field").val()
        }, function(data) {                   //the callback_handler
            if (data) {
                $("#myother_field").html(data);
            }
        });
    });
});

 

در اینجا اسکریپت PHP سمت سروری را مشاهده می کنید که اسکریپت جی کوئری فوق را در صفحه ویرایش نوشته در نوبت قرار می دهد (enqueues) .

function my_enqueue($hook) {
    if( 'post.php' != $hook && 'post-new.php' != $hook ) return;
    wp_enqueue_script( 'ajax-script',
        plugins_url( '/js/myjquery.js', __FILE__ ),
        array('jquery')
    );
    wp_localize_script( 'ajax-script', 'ajax_object', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
    ));
}
add_action('admin_enqueue_scripts', 'my_enqueue');

 

اسکریپت ما در فایل myjquery.js و در پوشه /js/ در پوشه اصلی افزونه قرار دارد .

توجه کنید که ما به جای استفاده عمومی از ajaxurl ، URL را به صورت admin-ajax.php محلی کردیم (localized) .

برخی توسعه دهندگان به دلیل در دسترس نبودن ajaxurl در قسمت کاربری (Front End) این روش را ترجیح می دهند .

نسخه محلی شده در تمام زمینه ها در دسترس است .

و در پایان ، کد PHP زیر درخواست AJAX را مدیریت می کند .

در این حالت ، متن گزینه انتخاب شده به عنوان یک کلید آرایه ، برای دریافت یک مقدار از یک آرایه ذخیره شده در جدول تنظیمات ، مورد استفاده قرار می گیرد .

و سپس به عنوان پاسخ به مرورگر ارسال می شود .

function my_change() {
    $data = get_option( 'myplugin_data' );
    echo array_key_exists( $_POST['selection'], $data ) ?
        $data[ $_POST['selection']] : 'Please Select Something!';
    die(); // all ajax handlers must die when finished
}
add_action( 'wp_ajax_change', 'my_change' );

 

به عنوان آخرین گوشزد به شما اعلام می کنیم که ،  این مثال پایه مباحث مهمی مانند امنیت ، سطوح دسترسی ، پاکسازی داده ها و … را در نظر نگرفته است . این در حالی است که شما در کدنویسی واقعی خود باید تمام جوانب امنیتی را برای کدهای خود لحاظ کنید .

برای مطالعه بیشتر در زمینه AJAX اینجا (Improve UX with AJAX) و اینجا (Codex) را بخوانید .

 

حذف متاباکس ها

ممکن است شما نیاز داشته باشید که یک متاباکس را از صفحه ویرایش نوشته حذف کنید . برای اینکار می توانید به سادگی از تابع remove_meta_box()   استفاده کنید .

پارامترهای ارسال شده به این تابع باید با پارامترهای ارسال شده به تابع add_meta_box تطابق داشته باشند .

برای حذف متاباکس های پیش فرض وردپرس می توانید سورس فایل های وردپرس را بررسی و تابع remove_meta_box()   را با پارامترهای مناسب فراخوانی کنید .

فراخوانی های پیشفرض تابع add_meta_box()    در فایل wp-includes/edit-form-advanced.php قرار دارند .

 

اطلاعات بیشتر