SHET22

ستون‌بندی محتوا در وردپرس بدون افزونه؛ آموزش بلوک ستون‌ها

ستون‌بندی محتوا در وردپرس بدون افزونه؛ آموزش بلوک ستون‌ها

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

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

بهترین روش ستون‌بندی محتوا در وردپرس

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

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

اگه هدفتون ساخت یک چیدمان ساده دو ستونه هست، آموزش دو ستونه کردن متن در وردپرس و ویرایشگر گوتنبرگ مثال‌های بیشتری در اختیارتون می‌ذاره.

ساخت ستون با بلوک ستون‌ها

اول در پیشخوان به «نوشته‌ها ← افزودن نوشته» یا «برگه‌ها ← افزودن برگه» برید.

افزودن برگه
افزودن برگه

داخل ویرایشگر روی دکمه مثبت بزنید، «ستون‌ها» رو جست‌وجو کنید و همین بلوک رو انتخاب کنید. وردپرس چند چیدمان آماده نشونتون می‌ده؛ مثل دو ستون هم‌اندازه یا یک ستون باریک کنار یک ستون پهن. فعلاً نزدیک‌ترین گزینه به چیدمان دلخواهتون رو انتخاب کنید، چون بعداً می‌تونید عرض ستون‌ها رو تغییر بدید.

ستون‌بندی محتوا در وردپرس بدون افزونه؛ آموزش بلوک ستون‌ها
ستون‌بندی محتوا در وردپرس بدون افزونه؛ آموزش بلوک ستون‌ها

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

ساخت ستون با بلوک ستون‌ها
ساخت ستون با بلوک ستون‌ها

تنظیم و ویرایش ستون‌ها

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

تنظیم و ویرایش ستون‌ها
تنظیم و ویرایش ستون‌ها

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

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

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

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

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

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

تکلیف Lightweight Grid Columns چیست؟

نسخه قدیمی این مقاله افزونه Lightweight Grid Columns رو پیشنهاد می‌کرد. این افزونه رایگان بود و با شورت‌کد کار می‌کرد. شورت‌کد یعنی یک تکه کد کوتاه داخل محتوا که افزونه اون رو به چیدمان نهایی تبدیل می‌کنه. صفحه رسمی افزونه هشدار می‌ده که این ابزار با نسخه‌های تازه وردپرس آزمایش نشده و ممکنه نگهداری نشه؛ پس برای یک سایت تازه انتخاب خوبی نیست.

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

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

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

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

جمع‌بندی

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

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

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

برای ستون‌بندی محتوا باید افزونه نصب کنیم؟

نه. ویرایشگر بلوکی وردپرس یک بلوک داخلی به نام «ستون‌ها» داره که برای بیشتر چیدمان‌های دو یا چندستونه کافیه.

ستون‌های وردپرس در موبایل چطور نمایش داده می‌شن؟

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

می‌تونیم Lightweight Grid Columns رو حذف کنیم؟

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

نظر شما در این مورد چیه؟

  1. کاربر مهمان۱۷ مرداد ۱۳۹۷

    ممنون از اموزش خوبتون
    اگر ممکن هست در هنگام ارسال مطلب به تلگرام لینک ادرس اموزش را درج کنید.

پشتیبانپشتیبانپشتیبانپشتیبانپشتیبان
تیم میهن وردپرس
پشتیبانپشتیبانپشتیبانپشتیبانپشتیبان
تیم میهن وردپرسدر حال حاضر آفلاین هستیم. لطفاً پیام بگذارید تا در اولین فرصت پاسخ دهیم.آفلاین

در حال بارگذاری...

هر سوالی دارید بپرسید.پاسخگوی شما هستیم.