آموزش طراحی ریسپانسیو در Gutenberg و Site Editor وردپرس

طراحی ریسپانسیو در Gutenberg و Site Editor یعنی صفحه، نوشته، هدر، فوتر، منو، تصویر، Grid و تایپوگرافی سایت در موبایل، تبلت و دسکتاپ خوانا و قابل استفاده باقی بمانند. طراحی واکنش‌گرا فقط کوچک‌کردن عناصر نیست؛ چیدمان باید متناسب با فضای موجود تغییر کند، ستون‌ها در زمان مناسب زیر هم قرار بگیرند، منو به Overlay تبدیل شود، متن از صفحه بیرون نزند و دکمه‌ها برای لمس مناسب باشند.

وردپرس ۷ ابزارهای واکنش‌گرایی را توسعه داده است. امکان نمایش یا مخفی‌سازی بلوک براساس نوع دستگاه در هسته اضافه شده و بلوک‌هایی مانند Columns، Media & Text، Navigation و Grid رفتارهای موبایلی مشخصی دارند. با این حال، نباید تصور کرد همه بلوک‌ها در تمام قالب‌ها کنترل کامل و یکسان برای اندازه، فاصله و ترتیب جداگانه هر Breakpoint دارند. بخشی از طراحی همچنان به ساختار درست، قابلیت قالب، theme.json یا CSS محدود و هدفمند نیاز دارد.

در این راهنما، طراحی Mobile First، Preview دستگاه‌ها، Responsive Editing Mode، Columns، Row، Stack، Grid، Media & Text، Navigation، تصاویر، Cover، فونت سیال، فاصله‌ها، مخفی‌سازی عناصر، CSS Media Query، سئو، سرعت، دسترس‌پذیری و رفع خطاهای رایج را بررسی می‌کنیم.

طراحی ریسپانسیو چیست؟

Responsive Web Design روشی است که در آن رابط سایت براساس عرض و ویژگی‌های نمایشگر سازگار می‌شود. هدف این نیست که نسخه دسکتاپ را با مقیاس کوچک روی موبایل نمایش دهیم؛ بلکه محتوا باید دوباره سازمان‌دهی شود.

نمونه تغییرات واکنش‌گرا:

• منوی افقی به منوی همبرگری تبدیل می‌شود.
• سه ستون در موبایل زیر هم قرار می‌گیرند.
• تصویر و متن کنار هم به چیدمان عمودی تبدیل می‌شوند.
• اندازه H1 در صفحه کوچک کاهش می‌یابد.
• Padding سکشن‌ها کمتر می‌شود.
• جدول یا کد امکان اسکرول افقی کنترل‌شده پیدا می‌کند.
• دکمه‌ها بزرگ‌تر و قابل لمس می‌شوند.
• عنصر تزئینی غیرضروری در موبایل مخفی می‌شود.

تفاوت Responsive، Adaptive و Mobile First

Responsive

طراحی به‌صورت پیوسته با فضای موجود سازگار می‌شود. واحدهای نسبی، Flex، Grid، clamp() و تصاویر منعطف در این رویکرد مهم‌اند.

Adaptive

چند Layout مشخص برای اندازه‌های تعیین‌شده ساخته می‌شود. ممکن است نسخه موبایل و دسکتاپ تفاوت ساختاری زیادی داشته باشند.

Mobile First

طراحی از کوچک‌ترین فضای کاربردی آغاز می‌شود و سپس برای نمایشگرهای بزرگ‌تر توسعه پیدا می‌کند. این روش باعث می‌شود محتوای ضروری و ترتیب منطقی از ابتدا روشن باشند.

آیا Gutenberg ذاتاً ریسپانسیو است؟

بسیاری از بلوک‌های هسته رفتار واکنش‌گرای پایه دارند. برای مثال Columns به‌طور پیش‌فرض می‌تواند در موبایل Stack شود و Media & Text گزینه قرارگرفتن رسانه و متن زیر هم در موبایل دارد. تصاویر نیز معمولاً با CSS قالب از عرض Container بزرگ‌تر نمی‌شوند.

اما نتیجه نهایی به چند عامل وابسته است:

• کیفیت قالب
• تنظیمات بلوک
• CSS سفارشی
• افزونه‌های بلوکی
• عرض و ارتفاع ثابت
• ساختار تودرتوی Groupها
• تصاویر، جدول و Embedها

بنابراین افزودن چند بلوک به‌تنهایی تضمین نمی‌کند صفحه در همه دستگاه‌ها درست باشد.

پیش‌نمایش موبایل و تبلت در ویرایشگر

در نوار ابزار ویرایشگر، گزینه Preview می‌تواند نماهای Desktop، Tablet و Mobile را ارائه دهد. این نما برای تشخیص اولیه بسیار مفید است، اما شبیه‌سازی کامل مرورگر واقعی نیست.

چرا Preview کافی نیست؟

• اندازه دقیق دستگاه‌های واقعی متفاوت است.
• نوار مرورگر موبایل بر ارتفاع اثر می‌گذارد.
• فونت واقعی و کش ممکن است متفاوت باشند.
• افزونه‌ها در Front-end اسکریپت و CSS اضافه می‌کنند.
• رفتار لمس، Focus و Keyboard در Preview کامل نیست.
• کاربر واردشده ممکن است Admin Bar ببیند.

پس از Preview، صفحه را در Front-end، حالت ناشناس، DevTools و حداقل یک موبایل واقعی بررسی کنید.

Responsive Editing Mode در وردپرس ۷

وردپرس ۷ امکان تعیین Visibility بلوک براساس نوع دستگاه را اضافه کرده است. می‌توانید یک بلوک را در یک Viewport مخفی کنید، بدون اینکه نمایش آن در Viewportهای دیگر تغییر کند.

مسیرهای دسترسی

• نوار ابزار بلوک
• پنل تنظیمات بلوک
• Command Palette

در List View نیز برای بلوک‌هایی که قانون Visibility دارند، نشانه‌ای نمایش داده می‌شود تا بدانید در کدام Viewport مخفی هستند.

چه زمانی بلوک را در موبایل مخفی کنیم؟

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

مخفی‌سازی نباید برای حذف محتوای ضروری، فرم، قیمت یا اطلاعات حقوقی استفاده شود. همچنین ساخت دو نسخه کامل از هر Section می‌تواند HTML، نگهداری و دسترس‌پذیری را پیچیده کند.

آیا محتوای مخفی بارگذاری می‌شود؟

مخفی‌بودن بصری همیشه به معنی بارگذاری‌نشدن محتوا و منابع نیست. تصویر، ویدئو یا Script ممکن است همچنان در HTML یا شبکه حضور داشته باشد. برای بهبود سرعت، فقط به Visibility تکیه نکنید و رفتار واقعی Network را بررسی کنید.

Breakpoint چیست؟

Breakpoint نقطه‌ای است که Layout در آن تغییر می‌کند. طراحی حرفه‌ای نباید فقط براساس نام دستگاه باشد؛ بهتر است زمانی Breakpoint ایجاد شود که محتوا دیگر درست نمایش داده نمی‌شود.

ابعاد رایج مانند ۷۸۲، ۹۶۰ یا ۱۲۰۰ پیکسل می‌توانند نقطه شروع باشند، اما قالب و طراحی شما ممکن است به مقادیر دیگری نیاز داشته باشند.

طراحی با Columns Block

Columns برای ساخت چیدمان چندستونه استفاده می‌شود. گزینه Stack on mobile به‌طور پیش‌فرض فعال است و ستون‌ها را در نمایشگر کوچک زیر هم قرار می‌دهد.

روش ساخت Layout ریسپانسیو

1. Columns را اضافه کنید.
2. تعداد و نسبت ستون‌ها را انتخاب کنید.
3. محتوا را داخل هر Column قرار دهید.
4. Stack on mobile را فعال نگه دارید.
5. ترتیب ستون‌ها را در List View بررسی کنید.
6. Padding و Gap را تنظیم کنید.
7. نسخه موبایل را تست کنید.

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

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

راهکارها:

• از ابتدا ترتیب HTML را براساس موبایل طراحی کنید.
• برای ظاهر دسکتاپ از تنظیم Direction یا Layout قالب استفاده کنید.
• در صورت ضرورت از CSS محدود برای تغییر Order استفاده کنید.
• دو نسخه کامل نسازید مگر دلیل قوی وجود داشته باشد.

CSS نمونه برای تغییر ترتیب ستون‌ها

@media (max-width: 781px) {
  .reverse-on-mobile {
    flex-direction: column-reverse;
  }
}

کلاس reverse-on-mobile را در Advanced → Additional CSS Class بلوک مناسب قرار دهید. ساختار HTML و CSS قالب را قبل از استفاده بررسی کنید.

Row و Stack چه تفاوتی دارند؟

• Row: عناصر را افقی کنار هم می‌چیند.
• Stack: عناصر را عمودی زیر هم قرار می‌دهد.
• Group: Container عمومی با Layout قابل انتخاب است.

Row برای لوگو و دکمه، Meta مقاله یا مجموعه آیکن مناسب است. اگر عناصر در موبایل جا نمی‌شوند، قابلیت Wrap یا تبدیل به Stack را بررسی کنید.

مشکل Row بدون Wrap

یک Row با چند دکمه یا متن بلند ممکن است از عرض موبایل خارج شود. راهکار:

• Wrap را فعال کنید.
• Gap را کاهش دهید.
• متن دکمه را کوتاه کنید.
• در موبایل Stack استفاده کنید.
• عرض ثابت فرزندان را حذف کنید.

Grid Block در وردپرس ۷

Grid برای ساخت شبکه کارت‌ها، خدمات، لوگوها و محتواهای تکراری مناسب است. وردپرس ۷ قابلیت‌های واکنش‌گرایی Grid را توسعه داده است، اما گزینه‌های قابل مشاهده به قالب و نسخه دقیق بلوک وابسته‌اند.

برای یک Grid امن:

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

ساخت Grid انعطاف‌پذیر با CSS

.responsive-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.5rem;
}

این ساختار تا زمانی که فضا وجود دارد ستون اضافه می‌کند و در فضای کوچک کارت را به عرض کامل می‌رساند.

Media & Text در موبایل

Media & Text برای نمایش تصویر یا ویدئو کنار متن ساخته شده و گزینه Stack on mobile دارد. این گزینه را فعال کنید تا در صفحه کوچک رسانه و متن زیر هم قرار گیرند.

همچنین بررسی کنید:

• رسانه قبل یا بعد از متن قرار گیرد.
• Crop Image و Focal Point درست باشند.
• Min Height ثابت حذف شود.
• Padding متن در موبایل زیاد نباشد.

Navigation ریسپانسیو

Navigation Block می‌تواند در صفحه کوچک به Overlay یا منوی همبرگری تبدیل شود. وردپرس ۷ امکان شخصی‌سازی Overlay موبایل با بلوک‌ها و Patternها را توسعه داده است.

چک‌لیست منوی موبایل

• آیکن بازکردن قابل مشاهده است.
• دکمه بستن وجود دارد.
• زیرمنوها قابل استفاده‌اند.
• Focus داخل Overlay گم نمی‌شود.
• لینک‌ها فاصله لمسی کافی دارند.
• منو روی محتوای صفحه و Cookie Banner تداخل ندارد.
• Scroll و Back Button رفتار درست دارند.

برای جزئیات، مقاله ساخت هدر و فوتر با Site Editor را مطالعه کنید.

تصاویر ریسپانسیو در وردپرس

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

اصول تصویر ریسپانسیو

• تصویر را در ابعاد مورد نیاز آپلود کنید.
• فرمت WebP یا فرمت مناسب استفاده کنید.
• Width و Height واقعی ثبت شوند تا CLS کاهش یابد.
• Aspect Ratio مناسب انتخاب شود.
• تصویر Hero بیش از حد سنگین نباشد.
• تصاویر پایین صفحه Lazy Load شوند.

Aspect Ratio و Crop

برای کارت‌های Grid، نسبت تصویر یکسان باعث هماهنگی ارتفاع می‌شود. نسبت‌های رایج ۱۶:۹، ۴:۳ و ۱:۱ هستند. Crop ممکن است قسمت مهم تصویر را حذف کند؛ Focal Point را بررسی کنید.

Cover Block در موبایل

Cover برای Hero و Banner مناسب است، اما Min Height زیاد می‌تواند در موبایل مشکل‌ساز شود. متن روی تصویر نیز باید کنتراست کافی داشته باشد.

مشکلات رایج Cover

• ارتفاع ۱۰۰vh روی موبایل بیش از فضای قابل مشاهده است.
• تصویر پس‌زمینه نقطه تمرکز نامناسب دارد.
• متن سفید روی بخش روشن تصویر قرار می‌گیرد.
• CTA پایین Hero از نمای اولیه خارج می‌شود.
• ویدئوی پس‌زمینه سرعت را کاهش می‌دهد.

تایپوگرافی ریسپانسیو

فونت باید در صفحه کوچک خوانا و در صفحه بزرگ متناسب باشد. اندازه بسیار کوچک خوانایی را کاهش می‌دهد و H1 بسیار بزرگ باعث شکستن نامناسب خط می‌شود.

وردپرس از Fluid Typography در theme.json پشتیبانی می‌کند. توسعه‌دهنده قالب می‌تواند اندازه‌های ثبت‌شده را بین حداقل و حداکثر به‌صورت سیال تغییر دهد.

نمونه CSS با clamp

.responsive-heading {
  font-size: clamp(2rem, 1.4rem + 3vw, 4.5rem);
  line-height: 1.15;
}

clamp() حداقل، مقدار سیال و حداکثر را مشخص می‌کند. مقدارها باید با فونت فارسی و متن واقعی آزمایش شوند.

Fluid Typography در theme.json

{
  "version": 3,
  "settings": {
    "typography": {
      "fluid": true
    }
  }
}

در پروژه حرفه‌ای بهتر است اندازه‌های فونت به‌صورت Preset تعریف شوند تا کاربر از یک مقیاس هماهنگ استفاده کند.

Line Height و متن فارسی

فونت‌های فارسی ارتفاع و فرم متفاوتی دارند. Line Height ثابت یک فونت ممکن است برای فونت دیگر مناسب نباشد. متن چندخطی را روی موبایل واقعی بررسی کنید.

جلوگیری از خروج متن از صفحه

URL طولانی، کد، نام فایل یا واژه بدون فاصله می‌تواند Overflow ایجاد کند. CSS زیر برای Container متن مفید است:

.safe-wrap {
  overflow-wrap: anywhere;
  word-break: normal;
}

برای کد و جدول بهتر است اسکرول افقی کنترل‌شده ایجاد شود، نه اینکه متن برنامه‌نویسی شکسته شود.

فاصله‌های ریسپانسیو

Padding مناسب دسکتاپ ممکن است در موبایل فضای زیادی بگیرد. از مقادیر سیال و Presetها استفاده کنید.

.responsive-section {
  padding-block: clamp(2.5rem, 6vw, 7rem);
  padding-inline: clamp(1rem, 3vw, 2rem);
}

به‌جای Spacerهای متعدد، Padding، Margin و Block Gap را از تنظیمات Dimensions کنترل کنید.

عرض محتوا

متن طولانی نباید تمام عرض مانیتور را بگیرد. Content Width برای متن و Wide Width برای سکشن‌های وسیع‌تر تعریف می‌شوند. یک Group تمام‌عرض می‌تواند پس‌زمینه را پوشش دهد و Group داخلی متن را محدود کند.

واحدهای ثابت و نسبی

• px: برای Border و جزئیات دقیق مفید است.
• rem: برای فونت و فاصله قابل مقیاس مناسب است.
• %: برای عرض نسبی استفاده می‌شود.
• vw/vh: به Viewport وابسته‌اند و باید با احتیاط استفاده شوند.
• clamp(): برای مقدار سیال با حداقل و حداکثر مناسب است.

مشکل 100vh در موبایل

نوار مرورگر موبایل می‌تواند ارتفاع قابل مشاهده را تغییر دهد. استفاده از min-height: 100vh ممکن است بخش را بلندتر از انتظار کند. واحدهای جدید مانند dvh در مرورگرهای مدرن رفتار دقیق‌تری دارند:

.hero-screen {
  min-height: 100dvh;
}

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

دکمه‌ها و عناصر لمسی

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

• متن دکمه کوتاه و واضح باشد.
• Padding کافی داشته باشد.
• Focus State دیده شود.
• دکمه چسبیده به لبه صفحه نباشد.
• در موبایل، دو CTA در صورت کمبود فضا زیر هم قرار گیرند.

جدول ریسپانسیو

Table Block ممکن است در موبایل از عرض خارج شود. اگر جدول پیچیده است، Container اسکرول‌پذیر لازم است:

.responsive-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

جدول بسیار عریض شاید برای موبایل مناسب نباشد. گاهی تبدیل اطلاعات به کارت یا List بهتر است.

ویدئو، Embed و iframe

Embed باید نسبت تصویر خود را حفظ کند و از عرض Container خارج نشود. بسیاری از بلوک‌های هسته این رفتار را دارند، اما کد Embed سفارشی ممکن است Width ثابت داشته باشد.

.responsive-embed iframe {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

فرم ریسپانسیو

• Inputها عرض مناسب داشته باشند.
• Label بالای فیلد یا به‌صورت قابل فهم قرار گیرد.
• دو ستون فرم در موبایل یک ستون شوند.
• پیام خطا از صفحه بیرون نزند.
• دکمه ارسال قابل لمس باشد.
• Keyboard موبایل با نوع فیلد هماهنگ باشد.

استفاده از CSS سفارشی در وردپرس ۷

وردپرس ۷ امکان افزودن Custom CSS در سطح Block را توسعه داده است. این قابلیت برای اصلاح محدود و هدفمند مفید است، اما نباید جایگزین ساختار درست شود.

قبل از CSS بررسی کنید آیا تنظیم مورد نیاز در Block Settings، Global Styles یا قالب وجود دارد.

روش Mobile First با Media Query

.feature-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 782px) {
  .feature-layout {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

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

طراحی ریسپانسیو در Site Editor

در Site Editor باید Templateهای زیر را جداگانه بررسی کنید:

• Front Page
• Single Post
• Page
• Archive
• Search
• 404
• Header و Footer

تغییر یک Template عمومی می‌تواند ده‌ها صفحه را تحت‌تأثیر قرار دهد. Preview یک نمونه کافی نیست؛ محتواهای کوتاه، بلند، دارای تصویر و بدون تصویر را آزمایش کنید.

Query Loop ریسپانسیو

در Query Loop، Post Template باید در موبایل Grid مناسبی داشته باشد. تصویر، عنوان، Excerpt و Meta با طول متفاوت آزمایش شوند.

• سه یا چهار ستون دسکتاپ در موبایل یک ستون شود.
• Aspect Ratio تصاویر هماهنگ باشد.
• عنوان از کارت خارج نشود.
• Pagination قابل لمس باشد.
• No Results در موبایل خوانا باشد.

راهنمای کامل در مقاله آموزش Query Loop در وردپرس موجود است.

Patternهای ریسپانسیو

قبل از ذخیره Pattern، نسخه موبایل آن را آزمایش کنید. خطای Pattern در همه محل‌های استفاده تکرار می‌شود. برای Synced Pattern این ریسک بیشتر است.

از رنگ، فونت و فاصله Global Styles استفاده کنید تا Pattern با قالب‌های مختلف سازگارتر باشد.

طراحی ریسپانسیو صفحه اصلی و لندینگ

Hero، Pricing، Testimonial، فرم و CTA از بخش‌های حساس‌اند. مقاله‌های ساخت صفحه اصلی با Gutenberg و ساخت لندینگ پیج با Gutenberg پروژه کامل این صفحات را توضیح می‌دهند.

طراحی ریسپانسیو در WoodMart

قالب فعال dev-source.ir یعنی WoodMart 8.3.7 از تنظیمات واکنش‌گرای اختصاصی در Theme Settings، Header Builder، Layout Builder و عناصر خود استفاده می‌کند. Gutenberg نیز داخل محتوای نوشته و برگه قابل استفاده است.

در این سایت:

• Responsive Header از Header Builder مدیریت می‌شود.
• فونت و فاصله عمومی از Theme Settings می‌آیند.
• Grid محصول و فروشگاه از WoodMart و WooCommerce استفاده می‌کنند.
• بلوک‌های Gutenberg باید با Container قالب آزمایش شوند.
• CSS افزونه‌ها و Page Builderها ممکن است Breakpoint متفاوت داشته باشند.

از ترکیب چند سیستم واکنش‌گرایی بدون برنامه خودداری کنید. Breakpointهای WoodMart، Gutenberg و Elementor یا WPBakery ممکن است با هم تداخل داشته باشند.

سئو و طراحی ریسپانسیو

طراحی موبایل بر تجربه کاربر، Core Web Vitals و قابلیت استفاده اثر دارد. محتوای اصلی باید در موبایل قابل دسترسی باشد.

• H1 و متن اصلی را در موبایل حذف نکنید.
• لینک و دکمه قابل لمس باشند.
• محتوای مهم پشت Overlay خراب پنهان نشود.
• تصویر Hero باعث LCP ضعیف نشود.
• Layout Shift از تصویر بدون ابعاد جلوگیری شود.
• فونت دیرهنگام چیدمان را جابه‌جا نکند.

سرعت و عملکرد موبایل

موبایل معمولاً CPU و اتصال ضعیف‌تری نسبت به دسکتاپ دارد. صفحه‌ای که روی کامپیوتر سریع است ممکن است روی موبایل کند باشد.

• تصاویر را فشرده کنید.
• ویدئوی پس‌زمینه را محدود کنید.
• فونت و وزن‌های غیرضروری را حذف کنید.
• Queryهای سنگین را کاهش دهید.
• اسکریپت Page Builder و Slider غیرضروری را حذف کنید.
• نسخه موبایل را با ابزارهای عملکرد اندازه‌گیری کنید.

دسترس‌پذیری در طراحی واکنش‌گرا

• بزرگ‌نمایی مرورگر غیرفعال نشود.
• متن با Zoom از Container خارج نشود.
• Focus Order با ترتیب بصری هماهنگ باشد.
• محتوای مخفی برای Screen Reader وضعیت منطقی داشته باشد.
• Overlay منو قابل بستن باشد.
• Touch Targetها فاصله کافی داشته باشند.
• تغییر Orientation صفحه را خراب نکند.

تست ریسپانسیو حرفه‌ای

تست عرض‌ها

به‌جای بررسی فقط سه آیکن موبایل، تبلت و دسکتاپ، عرض پنجره را آهسته تغییر دهید. بسیاری از خطاها بین Breakpointهای معروف رخ می‌دهند.

تست محتوای واقعی

• عنوان بسیار بلند
• عنوان کوتاه
• تصویر عمودی و افقی
• برگه بدون تصویر
• فهرست طولانی
• جدول و کد
• متن فارسی و انگلیسی ترکیبی

تست دستگاه واقعی

حداقل یک دستگاه iOS یا Android، مرورگر Chrome و Safari و حالت افقی صفحه را بررسی کنید.

رفع مشکل اسکرول افقی موبایل

اسکرول افقی معمولاً از یکی از موارد زیر ایجاد می‌شود:

• Width ثابت بزرگ
• تصویر یا iframe بدون Max Width
• Row بدون Wrap
• جدول عریض
• Margin منفی
• کد یا URL بلند
• عنصر Absolute خارج از Container

عنصر مشکل‌دار را با DevTools پیدا کنید. استفاده عمومی از overflow-x: hidden ممکن است فقط مشکل را پنهان و محتوای لازم را قطع کند.

رفع مشکل ستون‌هایی که Stack نمی‌شوند

• Stack on mobile را بررسی کنید.
• CSS قالب را کنترل کنید.
• Width ثابت Column را حذف کنید.
• تداخل افزونه بلوکی را روی Staging تست کنید.
• ساختار List View را بررسی کنید.

رفع مشکل فونت بزرگ در موبایل

Font Size محلی بلوک، Global Styles و CSS قالب را بررسی کنید. از clamp() یا Fluid Typography استفاده کنید. شکستن دستی خط با چند Break ممکن است در عرض‌های دیگر مشکل ایجاد کند.

رفع مشکل فاصله زیاد

Spacer، Padding والد، Margin فرزند و Block Gap ممکن است هم‌زمان جمع شوند. از List View والدها را بررسی و یک منبع اصلی فاصله تعیین کنید.

رفع مشکل تصویر بریده‌شده

Aspect Ratio، Crop، Focal Point، Object Fit و Min Height والد را بررسی کنید. برای لوگو و تصویر حاوی متن، Crop معمولاً مناسب نیست.

رفع مشکل منوی موبایل

• Navigation Overlay را بررسی کنید.
• دکمه Close قابل مشاهده باشد.
• z-index و Position هدر کنترل شود.
• کش و Minify JavaScript تست شوند.
• تداخل افزونه منو روی Staging بررسی شود.

اشتباهات رایج

• طراحی فقط برای دسکتاپ
• اعتماد کامل به Preview ویرایشگر
• استفاده زیاد از Width و Height ثابت
• ساخت نسخه جداگانه کامل برای هر دستگاه
• مخفی‌کردن محتوای اصلی در موبایل
• استفاده از Spacerهای متعدد
• Row بدون Wrap
• Grid با ستون‌های زیاد
• فونت و H1 بسیار بزرگ
• تست نکردن متن فارسی و انگلیسی ترکیبی
• پنهان‌کردن Overflow به‌جای رفع علت
• ترکیب Breakpointهای چند Page Builder بدون کنترل

چک‌لیست نهایی طراحی ریسپانسیو

• صفحه از موبایل کوچک تا دسکتاپ بررسی شده است.
• اسکرول افقی ناخواسته وجود ندارد.
• Columns و Media & Text درست Stack می‌شوند.
• ترتیب محتوا در موبایل منطقی است.
• Rowها Wrap می‌شوند.
• Grid تعداد ستون مناسب دارد.
• منوی موبایل باز و بسته می‌شود.
• تصاویر Aspect Ratio و Alt مناسب دارند.
• فونت و Line Height خوانا هستند.
• CTAها قابل لمس‌اند.
• فرم و جدول تست شده‌اند.
• Visibility Rules در List View بررسی شده‌اند.
• صفحه روی دستگاه واقعی آزمایش شده است.
• سرعت و Core Web Vitals موبایل کنترل شده‌اند.
• دسترس‌پذیری و Focus Order بررسی شده‌اند.

📌 همچنین بخوانید: دسترس‌پذیری در Gutenberg و Site Editor وردپرس، تفاوت قالب بلوکی و قالب کلاسیک وردپرس و ساخت Template نوشته و برگه با Site Editor در وردپرس

پرسش‌های متداول

آیا Gutenberg کنترل ریسپانسیو دارد؟

بله. بلوک‌های مختلف رفتارهای واکنش‌گرا دارند و وردپرس ۷ Visibility براساس دستگاه را اضافه کرده است. کنترل‌های دقیق استایل برای همه بلوک‌ها و قالب‌ها یکسان نیستند.

چگونه ستون‌ها را در موبایل زیر هم قرار دهیم؟

در Columns گزینه Stack on mobile را فعال کنید؛ این گزینه به‌طور پیش‌فرض فعال است.

چگونه یک بلوک را فقط در موبایل مخفی کنیم؟

از Responsive Editing Mode و تنظیم Visibility بلوک استفاده کنید. سپس نشانه آن را در List View کنترل کنید.

چگونه ترتیب ستون‌ها را در موبایل عوض کنیم؟

بهترین روش، طراحی ترتیب HTML براساس موبایل است. در موارد خاص از CSS column-reverse استفاده کنید.

چرا Preview موبایل با گوشی متفاوت است؟

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

برای فونت ریسپانسیو چه کنیم؟

از Fluid Typography در theme.json یا clamp() با حداقل و حداکثر مناسب استفاده کنید.

در WoodMart از تنظیمات Gutenberg استفاده کنیم؟

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

جمع‌بندی

طراحی ریسپانسیو در Gutenberg و Site Editor با ساختار صحیح شروع می‌شود، نه با مخفی‌کردن خطاها. Columns، Media & Text، Grid، Navigation، Fluid Typography و Responsive Editing Mode ابزارهای مهمی هستند، اما نتیجه حرفه‌ای به تست واقعی و شناخت محدودیت قالب نیاز دارد.

در WordPress 7.0 می‌توانید نمایش بلوک را براساس دستگاه کنترل کنید. Columns به‌صورت پیش‌فرض قابلیت Stack در موبایل دارد و Navigation Overlay نیز برای منوی صفحه کوچک قابل شخصی‌سازی است. برای کنترل کامل‌تر اندازه، فاصله و ترتیب، گاهی theme.json یا CSS محدود لازم خواهد بود.

در سایت dev-source.ir با WoodMart 8.3.7 باید تنظیمات Responsive قالب، Gutenberg و هر Page Builder فعال به‌صورت هماهنگ بررسی شوند. تغییر را ابتدا روی Staging انجام دهید و نسخه واقعی موبایل را قبل از انتشار آزمایش کنید.

منابع رسمی

• WordPress 7.0 Field Guide
• معرفی رسمی WordPress 7.0
• راهنمای Columns Block
• راهنمای Media & Text Block
• راهنمای Navigation Block
• Fluid Typography در theme.json