برای ساخت داشبورد کاربری با JetEngine به صورت چندمرحله ای، مراحل را به عنوان وضعیت‌های ذخیره شده در متای کاربر تعریف کنید، هر مرحله را در یک قالب Elementor بسازید و با Dynamic Visibility نمایش همان مرحله را بر اساس مقدار متای کاربر کنترل کنید. تغییر مرحله بعد از هر اقدام کاربر با فرم‌های JetEngine (Update User) انجام می‌شود.

پیش نیازها

  • WordPress فعال و قالب سازگار با Elementor
  • افزونه JetEngine نصب و فعال
  • فعال بودن دو ماژول در JetEngine: Profile Builder و Dynamic Visibility
  • سیستم ورود/ثبت نام (پیش‌فرض وردپرس یا فرم JetEngine)

سناریوی نمونه: شروع سریع سه مرحله‌ای

برای شفافیت، سناریوی «شروع سریع نویسندگان» را پیاده می‌کنیم:

  1. مرحله 1: تکمیل پروفایل
  2. مرحله 2: ارسال اولین نوشته
  3. مرحله 3: بررسی و پایان

وضعیت جاری کاربر در متای کاربر با کلید onb_stage نگه‌داری می‌شود (۱، ۲، ۳). مزیت این مدل: پایدار، مستقل از URL و مناسب برای Dynamic Visibility.

ایجاد فیلدهای کاربر و وضعیت مراحل

  1. از مسیر JetEngine > Meta Boxes یک متاباکس جدید برای Users بسازید (مثلا نام: Onboarding Status).
  2. فیلد Number با کلید onb_stage و مقدار پیش‌فرض 1 اضافه کنید.
  3. در صورت نیاز، فیلدهای پروفایل (مثلا phone، bio) را هم همین‌جا تعریف کنید تا در فرم‌ها استفاده شوند.

نکته: کلید متا را دقیق و بدون فاصله بنویسید؛ حروف کوچک و آندرلاین خواناتر است.

ساخت فرم‌های تغییر مرحله با JetEngine Forms

دو فرم می‌سازیم: «تکمیل پروفایل» و «ارسال نوشته» (برای نمونه فقط تغییر وضعیت مرحله را نشان می‌دهیم؛ شما می‌توانید فیلدهای واقعی اضافه کنید).

فرم 1: تکمیل پروفایل و رفتن به مرحله 2

  1. JetEngine > Forms > Add New
  2. فیلدهای لازم پروفایل (phone، bio و…) را بیفزایید.
  3. یک Hidden Field با نام onb_stage و مقدار ثابت 2 اضافه کنید.
  4. در تب Post-submit Actions، اکشن Update User را فعال کنید و مپ کنید:
    • Map fields to user meta: phone -> phone، bio -> bio، onb_stage -> onb_stage
    • Target user: Current user
  5. Redirect بعد از ارسال را روی برگه داشبورد بگذارید.

فرم 2: تایید ارسال اولین نوشته و رفتن به مرحله 3

  1. فرمی ساده با یک Hidden Field به نام onb_stage و مقدار 3 بسازید.
  2. اکشن Update User را مانند بالا تنظیم کنید (Target user: Current user).

نکته تصمیم‌گیری: اگر مرحله 2 واقعا شامل ساخت نوشته سفارشی است، اکشن Insert/Update Post را هم اضافه کنید و بعد از موفقیت ایجاد پست، onb_stage را 3 کنید.

ساخت داشبورد: Profile Builder یا یک برگه معمولی

گزینه 1: Profile Builder (پیشنهادی)

  1. JetEngine > Profile Builder را فعال کنید و یک Account Page بسازید.
  2. آیتم‌های منو تعریف کنید (مثلا: پیشخوان، شروع سریع، نوشته‌های من).
  3. قالب «شروع سریع» را با Elementor بسازید: سه سکشن جداگانه برای مرحله 1، 2 و 3 قرار دهید؛ هر سکشن شامل عنوان مرحله و فرم مربوط به همان مرحله باشد.

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

گزینه 2: یک برگه ساده

  1. یک برگه با نام «داشبورد» بسازید و با Elementor ویرایش کنید.
  2. برای سکشن اصلی، Dynamic Visibility را طوری تنظیم کنید که فقط برای کاربران واردشده نمایش داده شود؛ برای مهمانان یک سکشن پیام ورود بسازید.

این گزینه زمانی مناسب است که به پروفایل‌بیلدر کامل نیاز ندارید.

تنظیم Dynamic Visibility برای کنترل نمایش هر مرحله

در قالب داشبورد (هر گزینه‌ای که انتخاب کردید)، سه سکشن/کانتینر دارید. برای هرکدام شرط بگذارید:

  1. مرحله 1: نمایش اگر User Meta با کلید onb_stage برابر 1 بود.
  2. مرحله 2: نمایش اگر User Meta onb_stage برابر 2 بود.
  3. مرحله 3 (پیام پایان/تبریک): نمایش اگر User Meta onb_stage برابر 3 یا بزرگ‌تر بود.

در Elementor، روی سکشن کلیک کنید، پنل Dynamic Visibility را باز کنید، گزینه Show/Hide را انتخاب و Condition Type را بر اساس User Meta تنظیم کنید. کلید متا: onb_stage، عملگر: Equals یا Greater or equal، مقدار: عدد مرحله. اگر چند شرط دارید، منطق AND/OR را به‌درستی انتخاب کنید.

راهنمای سریع تست: مقدار onb_stage را به‌صورت دستی در پروفایل کاربر تغییر دهید و رفرش کنید؛ باید سکشن متناظر ظاهر شود. سپس با فرم‌ها، تغییر مرحله را خودکار کنید.

نمایش نوار پیشرفت (اختیاری)

اگر Elementor Pro ندارید، می‌توانید با یک شورتکد ساده درصد پیشرفت را بر اساس onb_stage نشان دهید (۳ مرحله = ۳۳٪، ۶۶٪، ۱۰۰٪). کد را در functions.php قالب فرزند قرار دهید و سپس شورتکد را در داشبورد استفاده کنید.

<?php
// Shortcode: [onb_progress total="3"]
add_shortcode('onb_progress', function($atts){
    if (!is_user_logged_in()) return '';
    $a = shortcode_atts(['total' => 3], $atts);
    $total = max(1, intval($a['total']));
    $user_id = get_current_user_id();
    $stage = intval(get_user_meta($user_id, 'onb_stage', true));
    if ($stage < 1) $stage = 1;
    if ($stage > $total) $stage = $total;
    $percent = floor(($stage / $total) * 100);
    // خروجی ساده قابل استایل‌دهی
    return '<div role="progressbar" aria-valuenow="'.$percent.'" aria-valuemin="0" aria-valuemax="100">پیشرفت: '.$percent.'%</div>';
});
?>

خروجی را می‌توانید با CSS قالب خود استایل دهی کنید.

بررسی نتیجه و سناریوهای تست

  • کاربر جدید: onb_stage باید 1 باشد و فقط سکشن مرحله 1 نمایش داده شود.
  • ارسال فرم مرحله 1: مقدار onb_stage به 2 تغییر کند و سکشن مرحله 2 ظاهر شود.
  • ارسال فرم مرحله 2: مقدار onb_stage به 3 تغییر کند و پیام پایان نمایش داده شود.
  • خروج/ورود مجدد: وضعیت کاربر حفظ شود (پایداری متا).
  • کاربر مهمان: سکشن‌های مراحل پنهان و فقط پیام ورود دیده شود.

خطاهای رایج و عیب یابی

  • کلید متا اشتباه: کوچک/بزرگ بودن حروف و فاصله‌ها را بررسی کنید.
  • عدم افزایش مرحله: در فرم، اکشن Update User و مپ شدن onb_stage را کنترل کنید؛ Target user باید Current user باشد.
  • شرط اشتباه: عملگر (Equals/Greater or equal) و نوع مقدار (عددی) را درست بگذارید.
  • کشینگ: اگر از کش صفحه استفاده می‌کنید، برگه داشبورد را از کش خارج کنید.
  • مجوز نمایش: برای محتواهای حساس تنها به پنهان‌سازی فرانت‌اند اکتفا نکنید؛ دسترسی به برگه را محدود کنید.

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

اگر مراحل صرفا نمایشی و موقتی هستند (مثلا پیمایش تب‌ها) می‌توانید Dynamic Visibility را بر اساس پارامتر URL مانند step تنظیم کنید. این کار سریع است و حالت را در پروفایل ذخیره نمی‌کند. اما برای آموزش/آن‌بوردینگ واقعی که باید ادامه‌دار و قابل ردیابی باشد، ذخیره در User Meta گزینه مطمئن‌تری است.

محدودیت‌ها و نکات امنیتی

  • Dynamic Visibility راهکار کامل دسترسی نیست؛ برگه داشبورد را فقط برای کاربران واردشده در دسترس بگذارید (Profile Builder یا محدودیت‌های وردپرس).
  • اگر فایل/دانلود محافظت‌شده دارید، از روش‌های حفاظت فایل سمت سرور استفاده کنید، نه صرفا پنهان‌سازی المان.
  • مقداردهی onb_stage را فقط از طریق فرم‌هایی که کاربر مالک آن است انجام دهید.

گام بعدی چیست؟

  • انشعاب مسیر بر اساس نقش کاربر: مثلا نویسنده‌ها مرحله «ارسال نوشته» و فروشندگان مرحله «ثبت محصول» را ببینند (شرط اضافه بر User Role).
  • نمایش چک‌لیست هر مرحله: هر مورد کامل شد، یک متای بولی ذخیره و با AND در Dynamic Visibility بررسی کنید.
  • افزودن اعلان‌ها: بعد از هر تغییر مرحله، یک اعلان ایمیلی از طریق اکشن فرم ارسال کنید.

با همین الگو می‌توانید هر نوع داشبورد چندمرحله‌ای را بدون کدنویسی سنگین بسازید: وضعیت در User Meta، فرم‌ها برای تغییر وضعیت، و Dynamic Visibility برای کنترل نمایش. اگر معماری و نام‌گذاری متاها دقیق باشد، نگهداری و توسعه بعدی هم ساده خواهد بود.