۴
شهریور

جلسه ۴۰ : آشنایی با متاباکس های سفارشی در ساخت پلاگین

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

با عرض سلام و وقت به خیر خدمت کاربران سایت پی وی لرن به ویژه کاربرانی که به سیستم مدیریت محتوای قدرتمند وردپرس علاقمند هستند.
به ” دوره متخصص وردپرس ” خوش آمدید!
در این دوره قرار است توسعه و ارتقاء پلاگین های وردپرس را به صورت جامع و کامل بیاموزیم.
فرقی نمی کند که در شرف نوشتن اولین پلاگین خود هستید و یا این که پنجاهمین پلاگین خود را می نویسید! امیدوارم این دوره برایتان مفید باشد.
در جلسه قبل با نحوه مدیریت متادیتاهای پست و استفاده از آن ها آشنا شدیم.
در ادامه سر فصل کار با متادیتاها Metadatas به آشنایی با متاباکس های سفارشی در ساخت پلاگین می پردازیم.

آشنایی با متاباکس های سفارشی در ساخت پلاگین

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

ویرایشگر
انتشار
دسته بندی ها
برچسب ها
و غیره

این جعبه ها جعبه متا یا متاباکس ها Meta Boxes هستند.
پلاگین ها یا افزونه ها می توانند جعبه های متا دلخواه شما را به صفحه ویرایش هر نوع پستی اضافه کنند.

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

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

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

هشدار

نمونه ها و مثال های این جلسه فقط صرفاً جهت یادگیری شما طراحی شده اند و کدهای آن برای محیط تولید مناسب نیست.

عملیاتی مانند تأمین امنیت ورودی ، قابلیت های کاربر ، و internationalization به عمد حذف شده اند.
همیشه سعی کنید که آن ها را به خاطر داشته باشید.

افزودن جعبه متا (افزودن متاباکس)

برای افزودن جعبه متا، از تابع add_meta_box () استفاده کنید و اجرای آن را به هوک اکشن add_meta_boxes وصل کنید.

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

مثال :

function wporg_add_custom_box()
{
    $screens = ['post', 'wporg_cpt'];
    foreach ($screens as $screen) {
        add_meta_box(
            'wporg_box_id',           // Unique ID
            'Custom Meta Box Title',  // Box title
            'wporg_custom_box_html',  // Content callback, must be of type callable
            $screen                   // Post type
        );
    }
}
add_action('add_meta_boxes', 'wporg_add_custom_box');

function wporg_add_custom_box()

{

$screens = ['post', 'wporg_cpt'];

foreach ($screens as $screen) {

add_meta_box(

'wporg_box_id', // Unique ID

'Custom Meta Box Title', // Box title

'wporg_custom_box_html', // Content callback, must be of type callable

$screen // Post type

);

}

add_action('add_meta_boxes', 'wporg_add_custom_box');

تابع wporg_custom_box_html به نگهداری HTML متاباکس می پردازد.
مثال زیر اضافه کردن عناصر فرم ، برچسب ها و سایر عناصر HTML را نشان می دهد.

مثال :

function wporg_custom_box_html($post)
{
    ?>
    <label for="wporg_field">Description for this field</label>
    <select name="wporg_field" id="wporg_field" class="postbox">
        <option value="">Select something...</option>
        <option value="something">Something</option>
        <option value="else">Else</option>
    </select>
    <?php
}

function wporg_custom_box_html($post)

{

<label for="wporg_field">Description for this field</label>

<option value="">Select something...</option>

<option value="something">Something</option>

</select>

<?php

}

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

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

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

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

مثال زیر عناصر فرم قبلی را با داده های pre-populated بر اساس مقادیر ذخیره شده متا جعبه تقویت می کند.
در بخش بعدی یاد می گیرید که چگونه مقادیر متا جعبه را ذخیره کنید.

مثال :

function wporg_custom_box_html($post)
{
    $value = get_post_meta($post->ID, '_wporg_meta_key', true);
    ?>
    <label for="wporg_field">Description for this field</label>
    <select name="wporg_field" id="wporg_field" class="postbox">
        <option value="">Select something...</option>
        <option value="something" <?php selected($value, 'something'); ?>>Something</option>
        <option value="else" <?php selected($value, 'else'); ?>>Else</option>
    </select>
    <?php
}

function wporg_custom_box_html($post)

{

$value = get_post_meta($post->ID, '_wporg_meta_key', true);

<label for="wporg_field">Description for this field</label>

<option value="">Select something...</option>

<option value="something" <?php selected($value, 'something'); ?>>Something</option>

</select>

<?php

}

در این حالت تابع ()selectedاستفاده می شود.

ذخیره مقادیر

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

می توانید داده های وارد شده را در هر کجا که می خواهید ، حتی در خارج از وردپرس ذخیره کنید.
از آنجا که احتمالاً با داده های مربوط به پست سروکار دارید ، جدول postmeta اغلب مکان مناسبی برای ذخیره داده ها است.

مثال زیر مقدار فیلد wporg_field را در کلید متا wporg_meta_key_ که مخفی است ذخیره می کند.

مثال :

function wporg_save_postdata($post_id)
{
    if (array_key_exists('wporg_field', $_POST)) {
        update_post_meta(
            $post_id,
            '_wporg_meta_key',
            $_POST['wporg_field']
        );
    }
}
add_action('save_post', 'wporg_save_postdata');

function wporg_save_postdata($post_id)

{

if (array_key_exists('wporg_field', $_POST)) {

update_post_meta(

$post_id,

'_wporg_meta_key',

$_POST['wporg_field']

);

}

add_action('save_post', 'wporg_save_postdata');

در کد تولید ، به یاد داشته باشید اقدامات امنیتی را که در جعبه اطلاعات مشخص شده است ، دنبال کنید!

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

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

برای حذف پیش فرض های متا جعبه ، کد منبع را برای پارامترهای مورد استفاده بررسی کنید.
()add_meta_box فراخوانی شده پیش فرض، از wp-includes/edit-form-advanced.php ساخته شده است.

در ادامه آشنایی با متاباکس های سفارشی در ساخت پلاگین شما را با متغیرهای اجرا آشنا می نماییم.

متغیرهای اجرا

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

در ادامه آشنایی با متاباکس های سفارشی در ساخت پلاگین به کاربرد OOp ها در متاباکس ها می پردازیم.

OOP

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

مثال :

abstract class WPOrg_Meta_Box
{
    public static function add()
    {
        $screens = ['post', 'wporg_cpt'];
        foreach ($screens as $screen) {
            add_meta_box(
                'wporg_box_id',          // Unique ID
                'Custom Meta Box Title', // Box title
                [self::class, 'html'],   // Content callback, must be of type callable
                $screen                  // Post type
            );
        }
    }
 
    public static function save($post_id)
    {
        if (array_key_exists('wporg_field', $_POST)) {
            update_post_meta(
                $post_id,
                '_wporg_meta_key',
                $_POST['wporg_field']
            );
        }
    }
 
    public static function html($post)
    {
        $value = get_post_meta($post->ID, '_wporg_meta_key', true);
        ?>
        <label for="wporg_field">Description for this field</label>
        <select name="wporg_field" id="wporg_field" class="postbox">
            <option value="">Select something...</option>
            <option value="something" <?php selected($value, 'something'); ?>>Something</option>
            <option value="else" <?php selected($value, 'else'); ?>>Else</option>
        </select>
        <?php
    }
}
 
add_action('add_meta_boxes', ['WPOrg_Meta_Box', 'add']);
add_action('save_post', ['WPOrg_Meta_Box', 'save']);

abstract class WPOrg_Meta_Box

{

public static function add()

{

$screens = ['post', 'wporg_cpt'];

foreach ($screens as $screen) {

add_meta_box(

'wporg_box_id', // Unique ID

'Custom Meta Box Title', // Box title

[self::class, 'html'], // Content callback, must be of type callable

$screen // Post type

);

}

public static function save($post_id)

{

if (array_key_exists('wporg_field', $_POST)) {

update_post_meta(

$post_id,

'_wporg_meta_key',

$_POST['wporg_field']

);

}

public static function html($post)

{

$value = get_post_meta($post->ID, '_wporg_meta_key', true);

<label for="wporg_field">Description for this field</label>

<option value="">Select something...</option>

<option value="something" <?php selected($value, 'something'); ?>>Something</option>

</select>

<?php

}

add_action('add_meta_boxes', ['WPOrg_Meta_Box', 'add']);

add_action('save_post', ['WPOrg_Meta_Box', 'save']);

آژاکس AJAX

از آنجا که عناصر HTML جعبه متا در داخل برچسب های فرم صفحه ویرایش قرار دارند؛ بهتر است که مقادیر متا جعبه را از POST_$ سراسری فوق پس از ارسال کاربر صفحه تجزیه شوند.

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

تعریف یک Trigger

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

در مثال زیر ما تغییر را به عنوان trigger ما برای انجام درخواست AJAX تعریف خواهیم کرد.

مثال :

/*jslint browser: true, plusplus: true */
(function ($, window, document) {
    'use strict';
    // execute when the DOM is ready
    $(document).ready(function () {
        // js 'change' event triggered on the wporg_field form field
        $('#wporg_field').on('change', function () {
            // our code
        });
    });
}(jQuery, window, document));

/*jslint browser: true, plusplus: true */

(function ($, window, document) {

'use strict';

// execute when the DOM is ready

$(document).ready(function () {

// js 'change' event triggered on the wporg_field form field

$('#wporg_field').on('change', function () {

// our code

});

}(jQuery, window, document));

کد سمت کلاینت (کاربر) Client Side Code

در این مرحله باید تعریف کنیم که می خواهیم trigger چه کاری انجام دهد.
به عبارت بهتر در این مرحله کد سمت کلاینت خود را می نویسیم.

در مثال زیر ما یک درخواست POST ایجاد خواهیم کرد.
پاسخ آن یا موفقیت یا عدم موفقیت خواهد بود ، این کار نشان می دهد که آیا ارزش wporg_field معتبر است یا خیر.

مثال :

/*jslint browser: true, plusplus: true */
(function ($, window, document) {
    'use strict';
    // execute when the DOM is ready
    $(document).ready(function () {
        // js 'change' event triggered on the wporg_field form field
        $('#wporg_field').on('change', function () {
            // jQuery post method, a shorthand for $.ajax with POST
            $.post(wporg_meta_box_obj.url,                        // or ajaxurl
                   {
                       action: 'wporg_ajax_change',               // POST data, action
                       wporg_field_value: $('#wporg_field').val() // POST data, wporg_field_value
                   }, function (data) {
                        // handle response data
                        if (data === 'success') {
                            // perform our success logic
                        } else if (data === 'failure') {
                            // perform our failure logic
                        } else {
                            // do nothing
                        }
                    }
            );
        });
    });
}(jQuery, window, document));

/*jslint browser: true, plusplus: true */

(function ($, window, document) {

'use strict';

// execute when the DOM is ready

$(document).ready(function () {

// js 'change' event triggered on the wporg_field form field

$('#wporg_field').on('change', function () {

// jQuery post method, a shorthand for $.ajax with POST

$.post(wporg_meta_box_obj.url, // or ajaxurl

{

action: 'wporg_ajax_change', // POST data, action

wporg_field_value: $('#wporg_field').val() // POST data, wporg_field_value

}, function (data) {

// handle response data

if (data === 'success') {

// perform our success logic

} else if (data === 'failure') {

// perform our failure logic

} else {

// do nothing

}

);

});

}(jQuery, window, document));

ما URL فایل وردپرس AJAX را بطور دینامیکی از شی wporg_meta_box_obj شیء سفارشی JavaScript که در مرحله بعدی ایجاد خواهیم کرد ، گرفتیم.

نکته

اگر جعبه متا تنها به URL فایل وردپرس AJAX نیاز دارد. به جای ایجاد یک شیء جدید JavaScript سفارشی می توانید از متغیر JavaScript از پیش تعریف شده ajaxurl استفاده کنید.
این ابزار فقط در مدیریت وردپرس موجود است.
البته امتحان کردن آن ضرری ندارد.

کد امنیتی سمت کلاینت

قدم بعدی این است که کدهای خود را درون یک فایل اسکریپت قرار داده و آن را در صفحه های ویرایش خود ضمیمه کنیم.

در مثال زیر قابلیت AJAX را به صفحه های ویرایش انواع پست های زیر اضافه خواهیم کرد:

post
wporg_cpt

پرونده اسکریپت در /plugin-name/admin/meta-boxes/js/admin.js قرار خواهد داشت.
plugin-name نیز پوشه پلاگین اصلی خواهد بود. فایل plugin-name/plugin.php/ تابع را فراخوانی می کند.

مثال :

function wporg_meta_box_scripts()
{
    // get current admin screen, or null
    $screen = get_current_screen();
    // verify admin screen object
    if (is_object($screen)) {
        // enqueue only for specific post types
        if (in_array($screen->post_type, ['post', 'wporg_cpt'])) {
            // enqueue script
            wp_enqueue_script('wporg_meta_box_script', plugin_dir_url(__FILE__) . 'admin/meta-boxes/js/admin.js', ['jquery']);
            // localize script, create a custom js object
            wp_localize_script(
                'wporg_meta_box_script',
                'wporg_meta_box_obj',
                [
                    'url' => admin_url('admin-ajax.php'),
                ]
            );
        }
    }
}
add_action('admin_enqueue_scripts', 'wporg_meta_box_scripts');

function wporg_meta_box_scripts()

{

// get current admin screen, or null

$screen = get_current_screen();

// verify admin screen object

if (is_object($screen)) {

// enqueue only for specific post types

if (in_array($screen->post_type, ['post', 'wporg_cpt'])) {

// enqueue script

wp_enqueue_script('wporg_meta_box_script', plugin_dir_url(__FILE__) . 'admin/meta-boxes/js/admin.js', ['jquery']);

// localize script, create a custom js object

wp_localize_script(

'wporg_meta_box_script',

'wporg_meta_box_obj',

[

'url' => admin_url('admin-ajax.php'),

]

);

}

add_action('admin_enqueue_scripts', 'wporg_meta_box_scripts');

آشنایی با متاباکس های سفارشی در ساخت پلاگین را با مبحث ” کد سمت سرور ” به پایان می رسانیم.

کد سمت سرور

آخرین مرحله نوشتن کد سمت سرور ماست که به درخواست رسیدگی می کند.

مثال :

function wporg_meta_box_ajax_handler()
{
    if (isset($_POST['wporg_field_value'])) {
        switch ($_POST['wporg_field_value']) {
            case 'something':
                echo 'success';
                break;
            default:
                echo 'failure';
                break;
        }
    }
    // ajax handlers must die
    die;
}
// wp_ajax_ is the prefix, wporg_ajax_change is the action we've used in client side code
add_action('wp_ajax_wporg_ajax_change', 'wporg_meta_box_ajax_handler');

function wporg_meta_box_ajax_handler()

{

if (isset($_POST['wporg_field_value'])) {

switch ($_POST['wporg_field_value']) {

case 'something':

echo 'success';

break;

default:

echo 'failure';

break;

}

// ajax handlers must die

die;

}

// wp_ajax_ is the prefix, wporg_ajax_change is the action we've used in client side code

add_action('wp_ajax_wporg_ajax_change', 'wporg_meta_box_ajax_handler');

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

کلام آخر

در این جلسه به آشنایی با متاباکس های سفارشی در ساخت پلاگین پرداختیم.
در جلسه بعدی به تفسیر متادیتاهای پست Post Metadata خواهیم پرداخت.
با پی وی لرن همراه باشید.

QR: جلسه ۴۰ : آشنایی با متاباکس های سفارشی در ساخت پلاگین

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 1

محمدرضا
تیر ۲۹, ۱۴۰۰
سلام
من یه CPT دارم که داخل اون یه متاباکس دارم که لیستی از اطلاعات رو به صورت جدول نمایش میدم.
حالا می خوام صفحه بندی داشته باشم، که گیر افتادم.
ممنون میشم راهنمایی بفرمایید.
پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۴۰ : آشنایی با متاباکس های سفارشی در ساخت پلاگین

مقدمه

آشنایی با متاباکس های سفارشی در ساخت پلاگین

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

هشدار

افزودن جعبه متا (افزودن متاباکس)

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

ذخیره مقادیر

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

متغیرهای اجرا

OOP

آژاکس AJAX

تعریف یک Trigger

کد سمت کلاینت (کاربر) Client Side Code

نکته

کد امنیتی سمت کلاینت

کد سمت سرور

کلام آخر

لیست مطالب دوره

اصول اولیه پلاگین نویسی در وردپرس

امنیت پلاگین ها

هوک ها

حریم خصوصی

منو های مدیریت

تنظیمات پلاگین

انواع پست های سفارشی (Post Types)

دسته بندی ها در ساخت پلاگین

JavaScript

Internationalization (بین المللی سازی)

قوانین و دستور العمل های ایجاد پلاگین

ابزارهای توسعه دهنده پلاگین

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ