آموزش تابع wp_is_mobile() در وردپرس و کاربرد آن

تابع wp_is_mobile() یکی از توابع ساده اما پرکاربرد وردپرس برای تشخیص دستگاه بازدیدکننده است. این تابع به‌صورت سرور-ساید از User-Agent مرورگر استفاده می‌کند و نتیجه را به‌صورت بولین (true/false) برمی‌گرداند. در این مقاله به توضیح دقیق کارکرد، مثال‌های عملی، محدودیت‌ها و راهکارهای بهینه‌سازی هنگام استفاده از این تابع می‌پردازیم.

چرا و چه زمانی از wp_is_mobile() استفاده کنیم؟

• وقتی می‌خواهید به‌صورت سروری محتوای متفاوتی برای دستگاه‌های موبایل ارائه دهید (مثلاً بارگذاری استایل یا اسکریپت مجزا).
• برای نمایش یا مخفی کردن المان‌های خاص در قالب یا افزونه (مثل تبلیغاتی که فقط در موبایل نمایش داده می‌شوند).
• در برخی پیاده‌سازی‌ها برای لود کردن قالب موبایل-محور یا بهینه‌سازی تجربه کاربری در صفحات خاص.

نحوه عملکرد داخلی تابع

تابع wp_is_mobile() با بررسی مقدار هدر HTTP_USER_AGENT (رشته User-Agent) و جستجوی کلیدواژه‌هایی مانند “Mobile”، “Android”، “Silk/”, “Kindle”، “BlackBerry” و “Opera Mini” تعیین می‌کند که آیا دستگاه موبایل است یا خیر. نتیجه در یک متغیر static ذخیره شده تا فراخوانی‌های بعدی سریع‌تر باشند.

کد اصلی تابع (خلاصه)

function wp_is_mobile() {
    static $is_mobile;

    if ( isset( $is_mobile ) )
        return $is_mobile;

    if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
        $is_mobile = false;
    } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
        $is_mobile = true;
    } else {
        $is_mobile = false;
    }

    return $is_mobile;
}

توضیح: این کد بررسی می‌کند که آیا رشته User-Agent شامل شاخص‌های دستگاه موبایل است یا نه و نتیجه را ذخیره می‌کند. توجه داشته باشید که این بررسی روی هدر ارسال شده از سمت کاربر انجام می‌شود و قابل دستکاری است.

مثال‌های کاربردی

1) بارگذاری استایل یا اسکریپت جداگانه برای موبایل

add_action('wp_enqueue_scripts', 'enqueue_mobile_styles');
function enqueue_mobile_styles() {
    if ( wp_is_mobile() && !is_admin() ) {
        wp_enqueue_style('theme-mobile', get_template_directory_uri() . '/style-mobile.css');
    } else {
        wp_enqueue_style('theme-desktop', get_template_directory_uri() . '/style-desktop.css');
    }
}

توضیح: در این مثال اگر wp_is_mobile() برابر true باشد، فایل style-mobile.css بارگذاری می‌شود. شرط !is_admin() از بارگذاری در بخش مدیریت جلوگیری می‌کند. توجه کنید که چنین رویکردی ممکن است با سیستم‌های کشینگ پیچیدگی ایجاد کند (بیشتر توضیح در بخش محدودیت‌ها).

2) نمایش یک قالب یا بخشی ویژه موبایل

if ( wp_is_mobile() ) {
    get_template_part('template-parts/content', 'mobile');
} else {
    get_template_part('template-parts/content', 'desktop');
}

توضیح: بر اساس نتیجه تابع، بخش مختلفی از قالب بارگذاری می‌شود. این روش زمانی مفید است که ساختار HTML کاملاً متفاوتی برای موبایل می‌خواهید ارائه دهید.

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

• قابلیت اطمینان: wp_is_mobile() به User-Agent تکیه دارد که قابل تغییر یا مخدوش شدن است. بنابراین نباید به‌عنوان تنها معیار امنیتی یا تصمیمات حساس استفاده شود.
• تبلت‌ها: بعضی تبلت‌ها ممکن است توسط این تابع تشخیص داده نشوند یا برعکس؛ تشخیص دقیق «تبلت» از «موبایل» همیشه قطعی نیست.
• مشکلات کشینگ: اگر از CDN یا پلاگین کش استفاده می‌کنید و صفحات موبایل/دسکتاپ متفاوت سرو می‌شوند، باید توجه کنید که کش بر اساس User-Agent یا کوکی تفکیک شود؛ در غیر این صورت موبایل نسخه دسکتاپ را مشاهده خواهد کرد.
• بخش مدیریت: در اکثر مواقع نباید wp_is_mobile() را در admin hooks به‌کار ببرید مگر دلیل مشخصی داشته باشید؛ برخی هدرها در admin تفاوت دارند.

راهکارهای بهتر و جایگزین‌ها

• طراحی رسپانسیو (CSS): استفاده از media queries بهترین و ماندگارترین راه برای پشتیبانی از موبایل است. این روش سرو-ساید نیست و با موارد کش و User-Agent تداخل کمتری دارد.
• تشخیص سمت کلاینت: با JavaScript (matchMedia یا window.innerWidth) می‌توانید دقیق‌تر اندازه نمایشگر را بررسی کنید و بارگذاری تنبل یا تغییرات DOM را انجام دهید.
• الگوریتم‌های پیشرفته‌تر: برای نیازهای تخصصی می‌توانید از سرویس‌های تشخیص دستگاه (مثل WURFL یا DeviceAtlas) استفاده کنید، اما معمولاً هزینه و پیچیدگی بیشتری دارد.

نمونه بهینه برای جلوگیری از مشکلات کش

// جاوااسکریپت: اگر موبایل است، کوکی mobile_view=true ست می‌کند
if (typeof window !== 'undefined') {
  if (window.matchMedia && window.matchMedia('(max-width: 768px)').matches) {
    document.cookie = 'is_mobile=1; path=/';
  } else {
    document.cookie = 'is_mobile=0; path=/';
  }
}

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

// PHP: خواندن کوکی و اعمال شرط
add_action('wp_enqueue_scripts', 'enqueue_based_on_cookie');
function enqueue_based_on_cookie() {
    if ( isset($_COOKIE['is_mobile']) && $_COOKIE['is_mobile'] == '1' ) {
        wp_enqueue_style('mobile', get_template_directory_uri() . '/style-mobile.css');
    } else {
        wp_enqueue_style('desktop', get_template_directory_uri() . '/style-desktop.css');
    }
}

توضیح: با این روش تصمیم‌گیری روی سرور بر اساس کوکی انجام می‌شود که با کش هماهنگ‌تر است. البته برای SEO و اولین لود (قبل از ثبت کوکی) ممکن است لازم باشد fallback منطقی داشته باشید.

مقایسه سریع

نتیجه‌گیری و بهترین شیوه‌ها

wp_is_mobile() ابزار سریع و راحتی برای تشخیص موبایل از سمت سرور است و در بسیاری از سناریوها مفید خواهد بود. اما بهتر است این تابع را به‌عنوان ابزار کمکی در کنار رویکردهای مدرن‌تر مثل CSS رسپانسیو و تشخیص کلاینتی استفاده کنید. همیشه به تأثیر آن روی کش، تجربه کاربر و موارد SEO توجه کنید و در صورت نیاز از کوکی یا سرویس‌های تشخیص دستگاه برای بهبود دقت بهره ببرید.

اگر هدف شما صرفاً تغییر استایل یا چینش صفحه است، اولویت را به رسپانسیو دهید؛ اما برای لود کردن منابع متفاوت یا نمایش محتوای خاص موبایل، wp_is_mobile() می‌تواند یک راه‌حل سریع و عملی باشد.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال