طراحی و توسعه وب‌سایت Fork and Founders با WordPress

Fork and Founders

مشاهده وبسایت
تکنولوژی‌های اصلی
WordPress
PHP
CSS
JavaScript
زبان سایت
فارسی
انگلیسی
عربی
Fork & Founders یک پلتفرم تحلیلی برای معرفی برندهای فعال در حوزه Cloud Kitchen است که با تمرکز بر شفافیت اطلاعات، تجربه کاربری ساده و بررسی رفتار مخاطب طراحی شده است. مسیر بررسی و تحلیل برندها بدون پیچیدگی فنی و متناسب با کاربران عمومی پیاده‌سازی شده است.

امکانات اصلی

  • وب‌سایت چندزبانه
  • معرفی برندهای Cloud Kitchen
  • نمایش ساختاریافته اطلاعات هر برند
  • محاسبه سود ماهانه بر اساس ورودی کاربر
  • طراحی ساده و قابل فهم برای کاربران عمومی
  • کنترل دسترسی کاربران به صفحات حساب کاربری

نوار اعلان

برای بهبود تجربه کاربری، یک نوتیس‌بار قابل کنترل پیاده‌سازی شده است و این منطق باعث می‌شود پیام‌های اطلاع‌رسانی مزاحم کاربر نباشند.

  • امکان بستن نوتیس‌بار توسط کاربر
  • ذخیره وضعیت بسته‌شدن در localStorage
  • جلوگیری از نمایش مجدد تا ۲۴ ساعت
  • بدون وابستگی به افزونه‌های جانبی 
				
					document.addEventListener("DOMContentLoaded", () => {
  const bar = document.getElementById("announcement-bar");
  const closeBtn = document.querySelector(".announcement-close");

  const hiddenUntil = localStorage.getItem("announcement_hidden_until");
  const now = Date.now();

  if (hiddenUntil && now < Number(hiddenUntil)) {
    bar.style.display = "none";
    return;
  }

  closeBtn.addEventListener("click", () => {
    bar.style.display = "none";
    const expire = now + 24 * 60 * 60 * 1000;
    localStorage.setItem("announcement_hidden_until", expire);
  });
});

محاسبه سود ماهانه

بخش محاسبه‌گر صرفاً جهت درک بهتر مدل درآمدی طراحی شده است:

  • دریافت مقدار سرمایه از کاربر
  • نمایش سود ماهانه به‌صورت لحظه‌ای
  • انجام محاسبات بدون بارگذاری مجدد صفحه

مدیریت احراز هویت و دسترسی کاربران

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

مدیریت خطاهای ورود

در صورت وارد کردن اطلاعات نادرست یا خالی، کاربر به فرم لاگین المنتوری مخصوص زبان فعال سایت هدایت می‌شود.

قابلیت‌ها:

  • تشخیص زبان فعال سایت با Polylang
  • جلوگیری از نمایش صفحه پیش‌فرض wp-login.php
  • هدایت هوشمند به صفحه لاگین مرتبط با زبان کاربر
  • ارسال وضعیت خطا از طریق Query String

سناریوها:

  • نام کاربری یا رمز عبور خالی
  • نام کاربری یا رمز عبور اشتباه 
				
					add_filter('authenticate', function ($user, $username, $password) {

    $lang = function_exists('pll_current_language') ? pll_current_language() : 'en';

    $login_page = match ($lang) {
        'fa' => home_url('/fa/login/'),
        'ar' => home_url('/ar/login/'),
        default => home_url('/login/'),
    };

    if (empty($username) || empty($password)) {
        wp_redirect($login_page . '?login=empty');
        exit;
    }

    if (is_wp_error($user)) {
        wp_redirect($login_page . '?login=failed');
        exit;
    }

    return $user;

}, 30, 3);

نمایش پیام خطای چندزبانه در فرم ورود

در صورت وارد کردن اطلاعات نادرست یا خالی، کاربر به فرم لاگین المنتوری مخصوص زبان فعال سایت هدایت می‌شود.

ویژگی‌ها:

  • پیاده‌سازی با Shortcode اختصاصی
  • پشتیبانی از فارسی، عربی و انگلیسی
  • تفکیک پیام‌های خطای «اطلاعات اشتباه» و «فیلدهای خالی»
  • قابلیت استفاده مستقیم داخل Elementor Login Widget 
				
					add_shortcode('login_error_alert', function () {

    if (!isset($_GET['login'])) return '';

    $lang = function_exists('pll_current_language') ? pll_current_language() : 'en';

    if ($_GET['login'] === 'failed') {
        return match ($lang) {
            'fa' => '<div class="login-alert error">نام کاربری یا رمز عبور اشتباه است.</div>',
            'ar' => '<div class="login-alert error">اسم المستخدم أو كلمة المرور غير صحيحة.</div>',
            default => '<div class="login-alert error">Invalid username or password.</div>',
        };
    }

    if ($_GET['login'] === 'empty') {
        return match ($lang) {
            'fa' => '<div class="login-alert warning">لطفاً نام کاربری و رمز عبور را وارد کنید.</div>',
            'ar' => '<div class="login-alert warning">يرجى إدخال اسم المستخدم وكلمة المرور.</div>',
            default => '<div class="login-alert warning">Please enter your username and password.</div>',
        };
    }

    return '';
});

کنترل دسترسی به صفحه حساب کاربری

برای جلوگیری از دسترسی کاربران لاگ‌این‌نشده به صفحه Account:

  • بررسی وضعیت لاگین کاربر
  • تشخیص زبان فعال
  • ریدایرکت خودکار به صفحه لاگین متناظر با همان زبان
  • جلوگیری از Loop و ریدایرکت‌های ناخواسته 
				
					add_action('template_redirect', function () {

    if (is_user_logged_in()) {
        return;
    }

    if (!function_exists('pll_current_language')) {
        return;
    }

    if (!is_page('account')) {
        return;
    }

    $lang = pll_current_language();

    $login_url = home_url(
        $lang === 'en' ? '/login/' : "/{$lang}/login/"
    );

    wp_redirect($login_url);
    exit;
});

خروج امن کاربر

خروج کاربر به‌صورت چندزبانه و با ریدایرکت هدفمند انجام می‌شود:

  • تشخیص زبان فعلی سایت
  • هدایت کاربر پس از Logout به نسخه زبانی صفحه اصلی
  • پیاده‌سازی با Shortcode قابل استفاده در منو یا دکمه‌ها 
				
					add_shortcode('logout_link', function () {
    $lang = function_exists('pll_current_language') ? pll_current_language() : 'en';

    $redirect = match ($lang) {
        'fa' => home_url('/fa/'),
        'ar' => home_url('/ar/'),
        default => home_url('/'), 
    };

    return wp_logout_url($redirect);
});

تحلیل رفتار کاربران

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

  • اتصال به Microsoft Clarity
  • بررسی Scroll، کلیک و تعامل با محتوا
  • تحلیل مسیر حرکت کاربران در صفحات کلیدی

فناوری‌ها و ابزارها

  • WordPress
  • JavaScript
  • Polylang
  • Calculated Fields Form
  • Awesome Support
  • Microsoft Clarity

جمع‌بندی

Fork & Founders یک وب‌سایت معرفی پیچیده نیست؛ بلکه پروژه‌ای متمرکز بر ارائه شفاف اطلاعات، تجربه کاربری و تحلیل رفتار مخاطب است که بررسی برندهای Cloud Kitchen را ساده‌تر می‌کند.