ساخت نسخه موبایل سایت وردپرسی با mobble

این روزها بیشتر کسایی که به سایت‌ها سر می‌زنن با گوشی میان. شاید اولین فکری که به ذهنتون برسه این باشه که یه «نسخهٔ موبایل» جدا برای سایتتون بسازین، ولی این کار دیگه پیشنهاد نمی‌شه. راه درستش اینه که سایتتون واکنش‌گرا (ریسپانسیو) باشه تا روی هر صفحه‌ای درست نمایش داده بشه.

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

روش اول: قابلیت خود وردپرس برای مخفی کردن بلوک‌ها (بدون افزونه)

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

کارش خیلی ساده‌ست:

1. برگه یا نوشته‌ای رو که می‌خواین تغییر بدین توی ویرایشگر بلوک باز کنین.
2. روی بلوکی که می‌خواین کلیک کنین.
3. توی نوار ابزار بلوک، منوی سه‌نقطه (⋮) رو باز کنین و گزینهٔ Hide (مخفی‌سازی) رو بزنین. این گزینه توی نمای فهرستی (List View) و پالت فرمان‌ها هم هست.
4. توی پنجره‌ای که باز می‌شه، دستگاه‌هایی رو که نمی‌خواین بلوک توشون دیده بشه تیک بزنین، مثلاً «موبایل».
5. روی Apply بزنین و برگه رو ذخیره کنین.

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

قبل از اینکه دست‌به‌کار بشین، این چند تا نکته رو بدونین:

• اندازه‌های صفحه توی وردپرس 7.0 ثابتن و نمی‌تونین عوضشون کنین. موبایل تا ۴۸۰ پیکسل، تبلت بین ۴۸۰ و ۷۸۲ پیکسل، و دسکتاپ بیشتر از ۷۸۲ پیکسل حساب می‌شه. امکان تنظیم این اندازه‌ها برای نسخه‌های بعدی وردپرس در دست ساخته.
• بلوک فقط با CSS قایم می‌شه و کدش همچنان با صفحه لود می‌شه. پس اگه می‌خواین صفحه سبک‌تر بشه، این روش کمکی بهتون نمی‌کنه.
• برای قایم کردن محتوای محرمانه از این روش استفاده نکنین، چون هر کسی می‌تونه توی سورس صفحه ببیندش.

روش دوم: افزونهٔ رایگان Block Visibility

شاید هنوز وردپرستون رو به 7.0 آپدیت نکردین، یا می‌خواین قاعده‌های دقیق‌تری بذارین، مثلاً بر اساس نقش کاربری یا زمان. اون‌وقت افزونهٔ Block Visibilityگزینهٔ خوبیه براتون. این افزونه توی مخزن رسمی وردپرسه و از نسخهٔ 3.0 همهٔ امکانات نسخهٔ Pro‌ش رفته توی نسخهٔ رایگان. یعنی بابت هیچ‌کدوم از قابلیت‌هاش لازم نیست پولی بدین.

برای استفاده ازش:

1. از مسیر افزونه‌ها ← افزودن، عبارت «Block Visibility» رو سرچ کنین و افزونه رو نصب و فعال کنین. اگه هنوز با نصب افزونه آشنا نیستین، آموزش نصب افزونه در وردپرس رو ببینین.
2. برگه یا نوشته‌ای که می‌خواین رو توی ویرایشگر بلوک باز کنین و بلوک موردنظرتون رو انتخاب کنین.
3. توی ستون تنظیمات بلوک (سمت راست)، پنل Visibility یا دیدپذیری رو باز کنین.
4. کنترل Screen Size (اندازهٔ صفحه) رو اضافه کنین و نمایش بلوک رو توی اندازه‌هایی که می‌خواین خاموش کنین.
5. برگه رو ذخیره کنین.

یه نکتهٔ مهم: توی این افزونه فقط کنترل «اندازهٔ صفحه» با CSS کار می‌کنه. بقیهٔ کنترل‌ها، مثل نقش کاربری، زمان‌بندی یا اینکه کاربر وارد حسابش شده یا نه، محتوا رو سمت سرور حذف می‌کنن. یعنی اون محتوا اصلاً به مرورگر کاربر نمی‌رسه.

روش سوم: CSS و مدیا کوئری (برای همهٔ قالب‌ها)

اگه با بلوک‌ها کار نمی‌کنین و فقط می‌خواین یه چیزی توی موبایل دیده نشه، مثلاً سایدبار یه قالب کلاسیک، ساده‌ترین و مطمئن‌ترین راه همون CSS‌ه. این روش با افزونه‌های کش هم هیچ دردسری نداره.

css

@media (max-width: 480px) {
    .sidebar {
        display: none;
    }
}

توی این کد، جای .sidebar کلاس یا شناسهٔ همون بخشی از قالبتون رو بنویسین که می‌خواین مخفی بشه. پیدا کردنش هم راحته: توی مرورگر روی اون بخش راست‌کلیک کنین و گزینهٔ Inspect رو بزنین. اگه قالبتون کلاسیکه، کد رو توی نمایش ← سفارشی‌سازی ← CSS اضافی بذارین. توی قالب‌های بلوکی هم باید برین سراغ بخش استایل‌ها توی ویرایشگر سایت.

روش چهارم (برای توسعه‌دهنده‌ها): تابع wp_is_mobile

اگه قبلاً با mobble کار کرده باشین، احتمالاً تابع‌هایی مثل is_mobile() یادتون هست. وردپرس از نسخهٔ 3.4 یه جایگزین داخلی براش داره: تابع wp_is_mobile(). برای استفاده ازش هیچ افزونه‌ای لازم ندارین. این تابع سمت سرور چک می‌کنه که درخواست از یه دستگاه همراه اومده یا نه.

کدهای پایین رو توی فایل functions.php قالب فرزند بذارین، نه قالب اصلی. وگرنه با اولین آپدیت قالب پاک می‌شن.

مثال ۱: لود کردن یه فایل CSS مخصوص دستگاه‌های همراه

php

<?php
add_action( 'wp_enqueue_scripts', function () {
    if ( wp_is_mobile() ) {
        wp_enqueue_style(
            'mobile-style',
            get_stylesheet_directory_uri() . '/mobile.css',
            array(),
            '1.0'
        );
    }
} );

همیشه فایل‌های CSS رو از طریق هوک wp_enqueue_scripts لود کنین و مستقیم توی فایل‌های قالب نذارینشون.

مثال ۲: نشون ندادن سایدبار توی دستگاه‌های همراه (قالب‌های کلاسیک)

توی فایل قالب (مثلاً single.php)، جایی که سایدبار فراخوانی می‌شه، این کد رو جایگزین کنین:

php

<?php
if ( ! wp_is_mobile() ) {
    get_sidebar();
}
?>

فرق این روش با CSS اینه که کد سایدبار اصلاً برای کاربر موبایل فرستاده نمی‌شه و صفحه سبک‌تر لود می‌شه.

مثال ۳: اضافه کردن کلاس به تگ body (جایگزین گزینهٔ «Mobify body class» توی mobble)

php

<?php
add_filter( 'body_class', function ( $classes ) {
    $classes[] = wp_is_mobile() ? 'is-mobile-device' : 'is-desktop-device';
    return $classes;
} );

از این به بعد می‌تونین توی CSS با انتخابگر .is-mobile-device برای دستگاه‌های همراه استایل جدا بنویسین.

این تابع چند تا محدودیت هم داره:

• فرقی بین گوشی و تبلت نمی‌ذاره و برای هر دوشون true برمی‌گردونه. تابع‌هایی مثل is_tablet() یا is_ios() که mobble داشت، توی خود وردپرس معادلی ندارن.
• از عرض واقعی صفحه خبر نداره. پس نسخهٔ موبایلتون هم باید واکنش‌گرا باشه.
• تشخیص رو بر اساس اطلاعاتی انجام می‌ده که مرورگر می‌فرسته، و این اطلاعات همیشه دقیق نیستن. مثلاً آیپدهای جدید معمولاً خودشون رو دسکتاپ معرفی می‌کنن.

یه هشدار مهم دربارهٔ کش

سه تا روش اول با CSS کار می‌کنن و با کش به مشکل نمی‌خورن. ولی روش چهارم سمت سرور اجرا می‌شه و ممکنه براتون دردسر درست کنه. اگه افزونهٔ کش صفحه رو برای اولین کسی که با موبایل اومده ذخیره کنه، ممکنه کاربرای دسکتاپ هم همون نسخهٔ موبایل رو ببینن. برای اینکه این اتفاق نیفته، توی تنظیمات افزونهٔ کش یا پنل هاستتون، گزینهٔ کش جداگانه برای موبایل (Separate cache for mobile) رو روشن کنین.

کدوم روش رو انتخاب کنیم؟

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

جمع بندی

افزونهٔ mobble دیگه در دسترس نیست، ولی جای خالیش حس نمی‌شه. اگه وردپرستون 7.0 یا جدیدتره، خود ویرایشگر بلوک با چند کلیک اجازه می‌ده هر بلوکی رو توی موبایل، تبلت یا دسکتاپ مخفی کنین. برای نسخه‌های قدیمی‌تر یا قاعده‌های پیشرفته‌تر، افزونهٔ رایگان Block Visibility کارتون رو راه می‌ندازه. توی قالب‌های کلاسیک هم چند خط CSS کافیه. اگه توسعه‌دهنده‌این، تابع wp_is_mobile() که از نسخهٔ 3.4 توی خود وردپرس هست، جایگزین تابع‌های mobble‌ هست. فقط محدودیت‌هاش رو در نظر بگیرین و تنظیمات کش رو فراموش نکنین.

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

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

سوالات متداول

موفق و پیروز باشین.

تیم تولید محتوا

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