آموزش تغییر عرض وبسایت با المنتور یا کد نویسی

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

اگه تازه‌کار هستین، بهتره کار رو از تنظیمات قالب یا المنتور شروع کنید. وقتی گزینه آماده‌ای برای بخش موردنظرتون پیدا نمی‌کنید، CSS به کارتون میاد. در ادامه می‌بینید چطور عرض مناسب رو انتخاب کنید، بخش درست رو تغییر بدید و جلوی بیرون‌زدگی محتوا یا اسکرول افقی رو بگیرید.

قبل از تغییر عرض سایت چه نکاتی رو باید بدونید؟

تفاوت عرض سایت، عرض محتوا و حالت تمام‌عرض

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

حالت تمام‌عرض یا Full Width یعنی یک بخش می‌تونه همه فضای افقی صفحه رو بگیره. البته این به معنی کشیده شدن متن تا لبه نمایشگر نیست. معمولاً پس‌زمینه تمام‌عرض می‌شه، ولی متن داخل یک کانتینر محدود می‌مونه. کانتینر همون کادریه که بخش‌های محتوا رو کنار هم نگه می‌داره.

چطور عرض فعلی سایتتون رو بررسی کنید؟

صفحه موردنظرتون رو در مرورگر باز کنید، روی بخش اصلی راست‌کلیک کنید و Inspect رو بزنید. Inspect ابزار داخلی مرورگره و ساختار و ظاهر هر بخش رو نشون می‌ده. بالای پنلی که باز شده، روی آیکون انتخاب عنصر کلیک کنید؛ همون آیکونی که شبیه نشانگر داخل یک کادره. حالا نشانگر رو روی صفحه ببرید و کانتینر موردنظرتون رو انتخاب کنید.

در تب Styles قانون‌های CSS مربوط به اون بخش رو می‌بینید. اگه قانونی خط خورده، یعنی قانون دیگه‌ای جای اون رو گرفته. برای دیدن اندازه نهایی هم تب Computed رو باز کنید و دنبال width و max-width بگردید.

قبل از بررسی، زوم مرورگر رو روی ۱۰۰ درصد بذارید و اندازه پنجره رو هم فراموش نکنید. عددی که Inspect نشون می‌ده به Viewport وابسته‌ست. Viewport یعنی همون فضای قابل‌مشاهده صفحه داخل مرورگر. برای همین عددی که روی لپ‌تاپ می‌بینید ممکنه در نمایشگر بزرگ یا موبایل فرق کنه.

چرا یک عدد ثابت برای همه سایت‌ها مناسب نیست؟

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

چطور عرض مناسب سایتتون رو انتخاب کنید؟

عرض مناسب برای سایت‌های وبلاگی و آموزشی

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

عرض مناسب برای فروشگاه‌ها و سایت‌های ویدیویی

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

تأثیر طول خطوط، فضای کناری و خوانایی محتوا

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

بررسی نتیجه در موبایل، تبلت و نمایشگرهای بزرگ

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

روش اول: تغییر عرض سایت با المنتور

اگه صفحه‌هاتون رو با افزونه المنتور ساختید، اول نگاهی به تنظیمات سراسری اون بندازید. این بخش عرض پیش‌فرض کانتینرها و قسمت‌های Boxed رو مشخص می‌کنه. Boxed یعنی محتوا داخل یک کادر با عرض محدود قرار می‌گیره.

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

یکی از برگه‌ها رو با المنتور باز کنید. از منوی اصلی ویرایشگر وارد Site Settings یا «تنظیمات سایت» بشید و بعد Layout یا «طرح‌بندی» رو انتخاب کنید. جای منو ممکنه در نسخه‌های مختلف کمی فرق کنه، ولی گزینه طرح‌بندی رو باید داخل تنظیمات سایت پیدا کنید.

تنظیم گزینه عرض محتوا برای بخش‌های Boxed

در بخش Layout دنبال Content Width یا «عرض محتوا» بگردید. برای شروع می‌تونید یک مقدار آزمایشی مثل ۱۱۴۰ یا ۱۲۰۰ پیکسل وارد کنید، تغییر رو ذخیره کنید و چند صفحه واقعی رو ببینید. این عددها فقط برای آزمایش هستن و نسخه ثابتی برای همه سایت‌ها نیستن. مقدار مناسب باید با طراحی و محتوای سایتتون جور باشه.

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

تغییر عرض یک کانتینر یا صفحه به‌صورت جداگانه

اگه فقط یک صفحه یا بخش باید اندازه متفاوتی داشته باشه، همون کانتینر رو در المنتور انتخاب کنید. به تب Layout برید و Content Width یا Width رو تغییر بدید. برای صفحه تمام‌عرض، تنظیم طرح‌بندی خود صفحه رو هم ببینید. اگه لازم بود، قالب تمام‌عرض المنتور یا گزینه تمام‌عرض قالب رو انتخاب کنید.

چرا بعضی بخش‌ها از عرض سراسری المنتور پیروی نمی‌کنن؟

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

روش دوم: تغییر عرض سایت از تنظیمات قالب

پیدا کردن تنظیمات عرض در قالب‌های کلاسیک

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

بررسی تنظیمات عرض در قالب اهورا

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

بررسی تنظیمات جداگانه هدر، فوتر و محتوای اصلی

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

روش سوم: تغییر عرض سایت با CSS

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

پیدا کردن کلاس بخش موردنظر با ابزار Inspect

روی بخش موردنظرتون راست‌کلیک کنید و Inspect رو بزنید. بالای پنل، ابزار انتخاب عنصر رو که شبیه نشانگر داخل کادره فعال کنید و بعد روی همون بخش کلیک کنید. در ساختار HTML کمی بین عنصرهای والد جابه‌جا بشید تا کادری رو پیدا کنید که همه محدوده موردنظر رو پوشش می‌ده. نام کلاس رو داخل ویژگی class می‌بینید.

حالا تب Styles رو باز کنید و قانون‌های width و max-width رو پیدا کنید. قانون خط‌خورده فعال نیست، چون قانون دیگه‌ای اون رو بازنویسی کرده. اسم‌هایی مثل .site-container و .footer-center فقط مثال هستن. کلاس واقعی به قالب و ساختار سایتتون بستگی داره و کد یک قالب ممکنه روی قالب دیگه هیچ کاری نکنه.

افزودن CSS در قالب‌های کلاسیک وردپرس

در قالب کلاسیک به «نمایش ← سفارشی‌سازی ← CSS اضافی» برید. کد رو وارد کنید و نتیجه رو در پیش‌نمایش ببینید. اگه همه‌چیز درست بود، «انتشار» رو بزنید. پیدا نکردن گزینه CSS اضافی می‌تونه نشونه این باشه که از یک قالب بلوکی استفاده می‌کنید.

افزودن CSS در قالب‌های بلوکی وردپرس

برای قالب بلوکی وارد «نمایش ← ویرایشگر» بشید. «استایل‌ها» رو باز کنید، منوی سه‌نقطه رو بزنید و CSS اضافی رو انتخاب کنید. رابط وردپرس ممکنه جای این گزینه رو کمی متفاوت نشون بده. اگه پیداش نکردید، منوی گزینه‌های بیشتر در بخش استایل‌ها رو هم ببینید.

نوشتن کد واکنش‌گرا با max-width و width

فرض کنیم کلاس کانتینر اصلی سایتتون .site-container هست. کد زیر اجازه می‌ده این بخش در صفحه‌های کوچک جمع بشه، ولی در نمایشگرهای بزرگ از ۱۲۰۰ پیکسل عریض‌تر نشه:

.site-container {
    width: 100%;
    max-width: 1200px;
}

وسط‌چین کردن محتوا و تنظیم فاصله از کناره‌ها

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

.site-container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 20px;
    box-sizing: border-box;
}

box-sizing: border-box فاصله داخلی رو داخل عرض حساب می‌کنه و احتمال بیرون‌زدگی رو پایین میاره. البته نتیجه فقط به width و max-width بستگی نداره. عرض عنصر والد، Padding و قانون‌های قالب هم روی اندازه نهایی اثر می‌ذارن. اگه قالب از قبل فاصله داخلی داره، قبل از افزودن مقدار تازه اون رو در Inspect بررسی کنید.

تغییر جداگانه عرض هدر، محتوا و فوتر

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

.header-inner {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
}

.main-content {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
}

.footer-inner {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
}

این کلاس‌ها فقط نمونه هستن؛ پس بدون بررسی اون‌ها رو روی سایتتون کپی نکنید. اگه نام کلاس‌های واقعی فرق داره، انتخاب‌گرهای داخل نمونه رو با کلاس‌های سایت خودتون عوض کنید.

تفاوت width و max-width چیه؟

width عرض موردنظر یک عنصر رو تعیین می‌کنه. max-width فقط بیشترین عرض اون رو مشخص می‌کنه و اجازه می‌ده عنصر در صفحه کوچک‌تر جمع بشه. ترکیب width: 100% و max-width معمولاً برای ساختن یک کانتینر واکنش‌گرا انتخاب امن‌تریه. بازم باید عرض عنصر والد، فاصله داخلی، box-sizing و قانون‌های قالب رو در نظر بگیرید.

چرا max-width برای طراحی واکنش‌گرا انتخاب بهتریه؟

اگه max-width: 1200px بذارید، کانتینر در نمایشگر بزرگ نهایتاً ۱۲۰۰ پیکسل عرض می‌گیره. در صفحه باریک‌تر هم خودش رو با فضای موجود هماهنگ می‌کنه. این رفتار برای موبایل و تبلت مناسب‌تره و نمی‌ذاره محتوا روی مانیتور بزرگ بیش‌ازحد کشیده بشه.

چه زمانی استفاده از width باعث بیرون‌زدگی محتوا می‌شه؟

اگه فقط width: 1200px بذارید، ممکنه عنصر در یک صفحه ۳۶۰ پیکسلی همون عرض ثابت رو نگه داره و اسکرول افقی درست کنه. عرض درصدی، max-width، فاصله داخلی حساب‌شده و تصاویر انعطاف‌پذیر کمک می‌کنن این اتفاق نیفته.

بعد از تغییر عرض سایت چه بخش‌هایی رو بررسی کنید؟

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

چطور مشکلات بعد از تغییر عرض سایت رو برطرف کنید؟

پاک کردن کش وردپرس و مرورگر

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

بررسی عرض‌های ثابت در المنتور و قالب

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

پیدا کردن استایل‌هایی که تنظیم جدید رو بازنویسی می‌کنن

بخش Styles رو در Inspect باز کنید. خط خوردن قانون CSS شما یعنی یک قانون دیگه اولویت بیشتری گرفته. انتخاب‌گر دقیق‌تر و محل تعریف قانون برنده رو پیدا کنید. استفاده بی‌دلیل از !important نگهداری کد رو سخت می‌کنه، پس اول ترتیب قانون‌ها و دقیق بودن انتخاب‌گرها رو درست کنید.

رفع اسکرول افقی و بیرون‌زدگی محتوا در موبایل

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

.main-content img,
.main-content video {
    max-width: 100%;
    height: auto;
}

برای iframe، مثل ویدیوی جاسازی‌شده، height: auto همیشه نتیجه مناسبی نمی‌ده. بهتره نسبت تصویر رو هم نگه دارید. نمونه زیر برای یک ویدیوی عریض با نسبت ۱۶ به ۹ نوشته شده. انتخاب‌گر و نسبت تصویر رو با محتوای واقعی سایتتون هماهنگ کنید:

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

کلاس .main-content فقط یک مثاله. اون رو با کلاس واقعی کانتینرتون عوض کنید و کد رو اول در محیط آزمایشی بسنجید. استفاده از overflow-x: hidden برای کل صفحه شاید فقط نشونه مشکل رو پنهان کنه. بهتره عنصر بیرون‌زده رو پیدا کنید و عرض یا فاصله همون بخش رو درست کنید.

آیا تغییر عرض سایت روی سئو تأثیر می‌ذاره؟

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

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

سؤال‌های متداول

جمع‌بندی

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

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

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

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