چطور در پوسته وردپرس از سیستم Bootstrap grid استفاده کنیم؟

بسیاری از پوسته‌های وردپرس از سیستم bootstrap grid پشتیبانی میکنن و امکان استفاده کامل از handy bootstrap grid classes که ممکنه برای چندین دستگاه استفاده بشه رو فراهم میکنن.

در نگاه اول، سیستم 12 columns grid ممکنه کمی پیچیده به نظر برسه، اما واقعا ساده است و مطمئنا شما عاشقش میشین!

محدوده وضوح صفحه نمایش

ابتدا بیاین همه محدوده‌های وضوح موجود رو بررسی کنیم. سایت باید در هر سطحی از وضوح انعطاف‌پذیر و پاسخگو باشه؛ یعنی تمام محتوای سایت باید با همه دستگاه‌ها سازگار بشه. چطور انجامش بدیم؟

دستگاه‌ها	وضوح
دستگاه‌های خیلی کوچک	تلفن‌ها (<768px)
دستگاه‌های کوچک	تبلت‌ها ((>768px
دستگاه‌های متوسط	دسکتاپ (>992px)
دستگاه‌های بزرگ	دسکتاپ (>1200px)

Grid classes

راه‌حل مفید، class prefixeها هستن که ممکنه برای ویجت‌ها ازشون استفاده بشه. از مانیتورهای رومیزی گرفته تا تلفن‌های همراه، میتونین نحوه نمایش ویجت‌های هر ردیف از پوسته رو پیکربندی کنین. اما چطور میشه از classes of bootstrap در پوسته وردپرس استفاده کرد؟

دستگاه‌ها	وضوح	class prefix
دستگاه‌های خیلی کوچک	تلفن‌ها (<768px)	.col-xs-*
دستگاه‌های کوچک	تبلت‌ها ((>768px	.col-sm-*
دستگاه‌های متوسط	دسکتاپ (>992px)	.col-md-*
دستگاه‌های بزرگ	دسکتاپ (>1200px)	.col-lg-*

ایده Boostrap 12 columns

سیستم Bootstrap grid امکان نمایش 12 ویجت رو در یک ردیف در یک موقعیت ویجت فراهم میکنه. علاوه بر این میتونین تعداد ویجت‌های نمایش داده شده در یک ردیف رو مشخص کنین، یعنی در واقع میتونین عرض اون رو کنترل کنین.

بیاین یه نگاهی به خونه‌های جدول پایین بندازیم.

ما 12 تا خونه زرد رنگ (ویجت) در یک ردیف داریم. اعداد داخل هر خونه‌ها، معادل تقسیم ردیف درصد هستن. با حساب کردن مجموع اعداد، که همیشه باید 12 بشه، میتونین schemeهای مختلفی رو نمایش بدین.

پست پیشنهادی : نظرات در وردپرس – چطور مدیریتشون کنیم؟

عرض برابر خونه‌ها

عرض متنوع خونه‌ها

در عمل چطور به نظر میرسه؟

به سادگی، عدد داخل خونه جایگزین * از class prefix میشه که باید برای ویجت وارد بشه. بیاین بررسی کنیم که کجا باید class رو وارد کنین.

به Appearance -> Widgets برین و یک ویجت رو باز کنین. در انتهای پیکربندی ویجت، 2 کادر پیدا میکنین که میتونین برای ورود به class مدنظر ازش استفاده کنین.

این ورودی استاندارد برای قرار دادن هر class برای ویجت هست، بنابراین برای grid classes هم کار میکنه. به یاد داشته باشین که classها رو با فاصله از هم جدا کنین.
این جدیدترین راه‌حلی هست که ما معرفیش کردیم. ازش به جای ورودی استاندارد بالا استفاده کنین.

در صورت تمایل میتونین classهایی رو برای تلفن‌های همراه مشخص کنین، در غیر این صورت layout sheme ویجت‌ها به طور خودکار به روش responsive کنترل میشه.

بیاین ببینیم روی سایت چطور به نظر میرسه.

مثال 1 – نمایش 4 ویجت در یک ردیف

بیاین حساب کنیم برای نمایش 4 ویجت در یک ردیف، چه عددی باید استفاده بشه.

4widgetes * X = 12 available cells

3=12/4

جواب 3 میشه، پس ما میتونیم از class col-md-3 برای هر ویجت استفاده کنیم که بتونیم در دسکتاپ، 4 ویجت رو در یک ردیف نمایش بدیم.

در صورت تمایل میتونین class رو برای تلفن همراه مشخص کنین.

مثال 2- نمایش 2 ویجت در یک ردیف

بیاین حساب کنیم برای نمایش 2 ویجت در یک ردیف از چه عددی باید استفاده کنیم

2widgets * X = 12 available cells

6=12/2

جواب 6 میشه، پس ما میتونیم از class col-md-6 برای هر ویجت استفاده کنیم تا بتونیم در دسکتاپ، 2 ویجت رو در یک ردیف نمایش بدیم.

پست پیشنهادی : رفع مشکل عدم وجود منوی navigation بعد از نصب قالب وردپرس

در صورت تمایل میتونین class رو برای تلفن همراه مشخص کنین.

مثال 3 – 3 ویجت در یک ردیف، عرض‌های مختلف

بیاین حساب کنیم که برای هر ویجت چه عددی باید استفاده بشه.

می‌خواهیم اولین ویجت 50% از عرض ردیف رو بگیره و بقیه ویجت‌ها هر کدوم 25%.

خب، ما از مثال بالا میدونیم که برای 50% عددش 6 میشه.

(بقیه فضا برای دو ویجت باقیمونده) 6 =(12cells – 6 (50%widgets

(که معادل 25% از کل 12 خونه هست) 3 = 2ویجت / 6 (بقیه فضا)

Final check: 6 + 3 + 3 = 12

بنابراین برای اولین ویجت باید col-md-6 class و برای 2 ویجت بعدی col-md-3 باید وارد بشه.

جمع‌بندی

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

امیدواریم که این آموزش برای شما واضح و قابل درک باشه.

اگر این آموزش رو دوست داشتین لطفا به اشتراکش بذارین:)