ما برای ساخت پنل تنظیمات برای افزونه ها از api خود وردپرس استفاده می کردیم. حال این که افزونه مکمل برای ووکامرس می نویسید بهتره که از settings api ووکامرس استفاده کنید. اگر از مسیر ‘ووکامرس ← پیکره بندی’ برید تب های مختلفی رو می تونید ببینید که در هر تب یه سری تنظیمات وجود داره.

پس برای ساخت پنل تنظیمات باید:

• یک تب رو انتخاب کنیم (تب جدید یا تب های پیش فرض موجود)
• تنظیمات خودمون رو بسازیم.
• تنظیماتی که ساختیم رو در تب درون ریزی کنیم.
• تنظیماتی که ساختیم رو بروزرسانی کنیم.

مرحله اول ) ساخت یک تب جدید در پیکره بندی ووکامرس

برای این کار کافیه به منظقه woocommerce_settings_tabs_array تابعی قلاب کنیم که یک المان جدید به آرایه تب های جدید در ووکامرس اضافه کنه. دقت داشته باشید اولویت این تابع رو که بیشتر بدید تب در قسمت پایانی نمایش داده میشه. مثلا اولویت 100

<?php
function rngwc_add_settings_tab($setting_tabs) {
    $setting_tabs['aqua_config'] = __("tab title");
    return $setting_tabs;
}

add_action("woocommerce_settings_tabs_array", "rngwc_add_settings_tab", 100);

در تابع قلاب شده دو مورد وجود داره :

• مورد اول که خیلی مهمه و باید در مراحل بعد (درون ریزی فیلد ها در تب ساخته شده) از اون استفاده بشه. اون هم کلید عضو جدید اضافه شده به آرایه تب های پیکره بندی ووکامرس هست (در اینجا aqua_config قرار داده شده).
• مورد دوم تیتر تب هست که در بالا tab title اضافه شده.

مرحله دوم ) ساخت فیلد با و قرار دادن اون در یک تابع

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

<?php
function rngwc_aqua_config_settings() {
    $options = array(
        'section_title' => array(
            'name' => __("field title"),
            'type' => "title",
            'desc' => __("field description"),
            'id' => 'aqua_config_title'
        ),
        'payments_guid_page' => array(
            'name' =>  __("field title"),
            'type' => 'single_select_page',
            'id' => 'rngwc_payment_guid_page',
            'class' => 'wc-enhanced-select-nostd',
            'args' => array(
                'show_option_none' => 'انتخاب برگه',
            )
        ),
        'section_end' => array('type' => 'sectionend', 'id' => 'aqua_config_end')
    );
    return apply_filters('wc_aqua_config_settings', $options);
}

option های فیلد های این تابع انواع مختلفی دارند که می تونید از کلاس WC_Admin_Settings و متد output_fields واقع در فایل admin/class-wc-admin-settings.php در پلاگین ووکامرس ساختار های موجود برای ساخت آرایه برای انواع فیلد ورودی رو داشته باشید.

کلید های مختلفی برای هر فیلد بسته به نوع اون ممکنه وجود داشته باشه. مثلا کلید  id که با استفاده از اون و همچنین تابع get_option می تونید مقدار فیلد رو بدست بیارید.

کلید type برای تعیین نوع فیلد هست که میتونه انواع مختلفی داشته باشه :

• title : تیتر استاندارد برای تنظیمات ووکامرس
• sectionend : قسمت پایانی تنظیمات به همراه شناسه.
• text , email , number , password : فیلد های متنی با فرمت های ایمیل و متن خام و عدد و پسورد .
• color : انتخابگر رنگ
• textarea : ناحیه متنی
• select , multiselect : انتخابگر کشویی تکی و چند گانه
• radio , checkbox : دکمه رادیویی و چک باکس
• single_select_page : انتخابگر برگه . این فیلدی متفاوت و خاص است. یک فیلد کشویی که شامل برگه هاست که مقدار هر کدام برابر شناسه برگه است.

نکته : همیشه فیلد هاتون رو با title شروع و با sectionend تموم کنید.

نکته : ما در option هایی که تعیین کردیم . موردی که قراره از نوع single_select_page استفاده کنه کلاس wc-enhanced-select-nostd رو دادیم تا منوی کشویی ما از ساختار jquery.select2 استفاده کنه.

نکته : ممکنه برخی کلید ها فقط برای انواع خاصی از فیلد ها کاربرد داشته باشه . به طور مثال کلید options برای منوی کشویی کاربرد داره که مربوط به option های منوی کشویی هست. برای توضیحات بیشتر به فایل admin/class-wc-admin-settings.php و جایی که داره case : select رو بررسی می کنه برید.همچنین مورد args که خودش یک آرایه است و برای single_select_page کاربرد داره که مثلا کلید show_option_none در اون برای انتخاب هیچ در منوی کشویی است.

مرحله سوم ) پر کردن تب با فیلد های موجود

حالا باید از فیلد هایی که در قالب یک آرایه موجود در یک تابع ساختیم استفاده کنیم. باید اون رو به تابع woocommerce_admin_fields  بدیم و به قلاب woocommerce_settings_tabs_{tab_key} متصل کنیم تا فیلد هامون در تب موجود نمایش داده بشه. جایی که {tab_key} گذاشتیم منظورمون همون شناسه تبی است که در مرحله اول ساختیم که در مثال این مقاله برابر با aqua_config بود.

پس قلاب ما نامش میشه ⇐ woocommerce_settings_tabs_aqua_config

<?php
function rngwc_papulate_aqua_config() {
    woocommerce_admin_fields(rngwc_aqua_config_settings());
}
add_action("woocommerce_settings_tabs_aqua_config", "rngwc_papulate_aqua_config");

نکته : می بینید که به عنوان پارامتر ورودی بهش تابع rngwc_aqua_config_settings رو دادیم که شامل همون فیلد های ما میشه.

مرحله چهارم ) عملیات ذخیره سازی فیلد ها

حالا باید فیلد هایی که ساختیم و در تب جدید قرار دادیم رو عملیات ذخیره سازیش رو با استفاده از تابع woocommerce_update_options و قلاب woocommerce_update_options_{tab_key} مثل مرحله قبل پیاده سازی کنیم. tab_key همون شناسه تبی هست که ما در مرحله یک ساختیم که برابر بود با aqua config

پس قلاب ما نامش میشه ⇐ woocommerce_update_options_aqua_config

<?php
function rngwc_update_aqua_config() {
    woocommerce_update_options(rngwc_aqua_config_settings());
}
add_action("woocommerce_update_options_aqua_config", "rngwc_update_aqua_config");

همون طور که می بینید پارامتر ورودی همون تابع مرحله دوم یعنی rngwc_aqua_config_settings  است .

نکته : برای دریافت مقدار هر فیلد می تونید از تابع get_option و شناسه هر اون فیلد استفاده کنید. شناسه فیلد برابر با کلید id در هر فیلد بود که ما در مثال خودمون برای مورد payments_guid_page برابر با rngwc_payment_guid_page قرار دادیم. پس به شکل زیر اون مقدار رو فراخوانی می کنیم:

<?php
$page_id = get_option('rngwc_payment_guid_page');