ورود
سورس سافت bread crumb arrow icon وبلاگ bread crumb arrow icon آموزش ساخت پنل تنظیمات سفارشی در ووکامرس

آموزش ساخت پنل تنظیمات سفارشی در ووکامرس

برای پخش ویدیو کلیک کنید
مالک پست تعیین نشده
clock icon مدت زمان مطالعه: 5 دقیقه
comment icon 0 نظرات
1404/09/08

اگه صاحب یه فروشگاه اینترنتی با ووکامرس هستید حتماً می‌ دونید که راحتی مدیریت و دسترسی سریع به تنظیمات چقدر می‌ تونه روی کارتون تاثیر بذاره. اما واقعیت اینه که وقتی می‌ خواید تغییراتی توی فروشگاهتون بدید یا امکانات خاصی اضافه کنید، همیشه گیر توی منوهای پیچیده و تنظیمات پیش‌ فرض ووکامرس می‌ افتید.

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

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

آموزش ایجاد پنل تنظیمات سفارشی در ووکامرس

چرا به پنل تنظیمات نیاز داریم؟

وقتی افزونه ای برای ووکامرس می‌ نویسید (مثلاً یک روش حمل و نقل جدید، اتصال به درگاه پرداخت یا حتی یک امکان ساده مثل محدود کردن تعداد خرید) معمولاً نیاز دارید که مدیر فروشگاه بتونه بعضی مقادیر رو تغییر بده. برای این کار کافیه توی پیشخوان وردپرس یه صفحه‌ تنظیمات بسازیم.

روش‌ های مختلف ساخت پنل تنظیمات

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

  • استفاده از Settings API وردپرس

همه چیز دست خودتونه ولی باید کمی بیشتر کدنویسی کنید

  • استفاده از فریم‌ ورک‌ هایی مثل Carbon Fields یا ACF

کار رو خیلی ساده‌ تر می‌ کنن و نیاز به کد کمتر دارید

ساخت پنل تنظیمات - استفاده از فریم‌ ورک‌ هایی مثل ACF

  • استفاده از REST API + جاوااسکریپت (AJAX)

برای پنل‌ های مدرن که می‌ خواید بدون رفرش صفحه ذخیره بشن

 

  • استفاده از VueJS یا React

مناسب برای پروژه‌ های بزرگ‌ تر و پنل‌ های خیلی حرفه‌ ای

ساخت پنل تنظیمات - استفاده از VueJS

ساخت پنل تنظیمات سفارشی در ووکامرس (مثال عملی)

فرض کنید می‌خوایم یک افزونه بسازیم که دو تنظیم داشته باشه:

  • کلید API
  • تعداد محصولاتی که باید نمایش داده بشه
کد نمونه

// 1. اضافه کردن منوی تنظیمات زیر منوی ووکامرس
function myplugin_wc_settings_menu() {
add_submenu_page(
'woocommerce',
'تنظیمات افزونه من',
'تنظیمات افزونه من',
'manage_options',
'myplugin-wc-settings',
'myplugin_wc_settings_page_html'
);
}
add_action( 'admin_menu', 'myplugin_wc_settings_menu' );

// 2. ثبت تنظیمات و فیلدها
function myplugin_wc_settings_init() {
register_setting( 'myplugin_wc_options_group', 'myplugin_wc_options', 'myplugin_wc_sanitize' );

add_settings_section(
'myplugin_wc_section',
'تنظیمات عمومی',
null,
'myplugin-wc-settings'
);

add_settings_field(
'api_key',
'کلید API',
'myplugin_wc_field_api_key',
'myplugin-wc-settings',
'myplugin_wc_section'
);

add_settings_field(
'items_limit',
'تعداد نمایش محصولات',
'myplugin_wc_field_items_limit',
'myplugin-wc-settings',
'myplugin_wc_section'
);
}
add_action( 'admin_init', 'myplugin_wc_settings_init' );

// 3. فیلدهای فرم
function myplugin_wc_field_api_key() {
$options = get_option( 'myplugin_wc_options' );
echo '<input type="text" name="myplugin_wc_options[api_key]" value="' . esc_attr( $options['api_key'] ?? '' ) . '">';
}

function myplugin_wc_field_items_limit() {
$options = get_option( 'myplugin_wc_options' );
echo '<input type="number" name="myplugin_wc_options[items_limit]" value="' . esc_attr( $options['items_limit'] ?? 10 ) . '" min="1" max="100">';
}

// 4. اعتبارسنجی ورودی‌ها
function myplugin_wc_sanitize( $input ) {
$new = [];
$new['api_key'] = sanitize_text_field( $input['api_key'] ?? '' );
$new['items_limit'] = max( 1, min( 100, intval( $input['items_limit'] ?? 10 ) ) );
return $new;
}

// 5. صفحه تنظیمات
function myplugin_wc_settings_page_html() {
if ( ! current_user_can( 'manage_options' ) ) return;
?>
<div class="wrap">
<h1>تنظیمات افزونه من</h1>
<form method="post" action="options.php">
<?php
settings_fields( 'myplugin_wc_options_group' );
do_settings_sections( 'myplugin-wc-settings' );
submit_button( 'ذخیره تنظیمات' );
?>
</form>
</div>
<?php
}

استفاده از مقادیر ذخیره شده

حالا هر وقت به این تنظیمات نیاز داشتید، می‌ تونید با get_option اون‌ ها رو دریافت کنید:

$options = get_option('myplugin_wc_options');
$api_key = $options['api_key'] ?? '';
$limit = $options['items_limit'] ?? 10;

نکات مهم

  • همیشه ورودی‌ های کاربر رو اعتبارسنجی و پاکسازی کنید.
  • دسترسی به تنظیمات رو فقط برای مدیران یا کاربرانی با سطح دسترسی مناسب فعال کنید.
  • بهتره همه تنظیمات رو داخل یک آرایه ذخیره کنید (مثل مثال بالا) تا جدول wp_options شلوغ نشه.
  • اگر تنظیمات زیاد شد، می‌ تونید اون‌ ها رو در تب‌ ها یا بخش‌ های مختلف دسته‌ بندی کنید.

کدوم روش ساخت پنل تنظیمات برای شما بهتره؟

انتخاب روش به اندازه پروژه و نیاز شما بستگی داره:

  • پروژه ساده با چند تا فیلد: از Settings API استفاده کنید که مطمئن و سبکه و نیازی به افزونه جانبی نداره
  • می‌ خواید سریع و راحت جلو برید: سراغ فریم‌ ورک‌ هایی مثل Carbon Fields یا ACF برید فقط یادتون باشه به یه کتابخونه وابسته می‌ شید
  • می‌ خواید فقط یه نمونه اولیه سریع بسازید: از ژنراتورهای کد استفاده کنید که خیلی برای شروع خوبن
  • فرم‌های پیشرفته و کاربرپسند می‌ خواید: روش REST API + AJAX انتخاب خوبیه چون بدون رفرش صفحه کار می‌ کنه
  • پنل خیلی حرفه‌ای و مدرن می‌ خواید: برید سراغ VueJS یا React که برای پروژه‌ های بزرگ فوق‌ العاده‌ ست ولی نیاز به دانش Front-end داره

جمع بندی

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

همین الان شروع کن و پنل تنظیمات اختصاصی خودت رو بساز. اگر هم ایده‌ های جالب یا سوالی داشتی، می‌ تونی توی بخش نظرات با ما در میون بذاری تا با هم بررسی کنیم.

این مقاله چقدر برای شما مفید بود؟
0 امتیاز از 0 رای
questions
سوالات متداول پنل تنظیمات سفارشی در ووکامرس

امکان مدیریت و شخصی‌ سازی ویژگی‌ ها و تنظیمات فروشگاه به‌ صورت راحت و متمرکز.

حداقل دانش PHP و آشنایی با هوک‌ ها و فیلترهای ووکامرس کافی است.

دیدگاه و پرسش

هیچ نظری ثبت نشده است