ایجاد متاباکس های سفارشی

///ایجاد متاباکس های سفارشی

ایجاد متاباکس های سفارشی

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

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

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

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

محتوای متاباکس ها معمولاً المان های فرم های 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 قرار دارند .

 

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

 

۱۳۹۴/۷/۲۱ ۱۰:۵۶:۳۶

درباره نویسنده:

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

۴ Comments

  1. علی ۳۱ فروردین ۱۳۹۵ در ۷:۰۴ - پاسخ

    سلام
    ممنون از آموزشتون
    من با چک باکس ها مشکل دارم .نمیدونم چرا وقتی type اینپوت رو textbox می کنم در ذخیره سازی به مشکل بر میخورم.
    وقتی تیک چک باکس رو میزنم و پست رو ذخیره میکنم هم تیک برداشته میشه و هم تغییری ایجاد نمیشه.
    میخوام بدونم چطور میتونم وقتی تیک چک باکس رو میزنم و پست رو منتشر میکنم چک باکس ذخیره بشه و تیک باقی بمونه.
    ممنون

    • اسماعیل ابراهیمی ۳۱ فروردین ۱۳۹۵ در ۷:۴۳ - پاسخ

      دوست عزیز آموزش های این سری آموزشی بر توضیح دادن اصل موضوع تمرکز دارند و ممکنه کدها با کپی پیست کار نکنند .
      شما می تونید برای این مشکلتون از لینک آموزشی زیر استفاده کنید
      https://code.tutsplus.com/tutorials/how-to-create-custom-wordpress-writemeta-boxes–wp-20336

      این آموزش دقیقاً بر نوع فیلد متنی یا text input تمرکز داره

      • علی ۲ اردیبهشت ۱۳۹۵ در ۵:۰۰ - پاسخ

        ممنون از لطفتون ولی باز هم مشکل پابرجاست در ذخیره و سلکت شدن چک باکس

        • اسماعیل ابراهیمی ۲ اردیبهشت ۱۳۹۵ در ۵:۱۳ - پاسخ

          کدهاتون نیاز به آنالیز دارن – از طریق تلگرام ۰۹۳۳۳۹۹۹۰۳۳ در ارتباط باشید

نظر شما چیست