اضافه کردن بوت استرپ 5 به وردپرس؛ آموزش کامل و اصولی

برای اضافه کردن بوت استرپ به وردپرس، کپی کردن کدهای سایت بوت استرپ داخل بلوک «شورت‌کد» کافی نیست. این کدها معمولاً HTML هستن و باید اون‌ها رو داخل بلوک «HTML سفارشی» بذارید. فایل‌های CSS و JavaScript بوت استرپ 5 هم باید با روش استاندارد وردپرس بارگذاری بشن تا هم ظاهر اجزا درست باشه و هم بخش‌های تعاملی کار کنن.

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

قبل از اضافه کردن بوت استرپ 5 به وردپرس چه چیزهایی رو بررسی کنید؟

آیا واقعاً برای سایتتون به بوت استرپ نیاز دارید؟

بوت استرپ یک چارچوب آماده برای طراحی رابط کاربریه. یعنی مجموعه‌ای از کلاس‌های CSS و کدهای JavaScript رو در اختیارتون می‌ذاره تا بخش‌هایی مثل ستون، دکمه، کارت، پیام هشدار، تب و پنجره پاپ‌آپ بسازید.

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

بررسی کنید قالب یا افزونه دیگه‌ای بوت استرپ رو بارگذاری نکرده باشه

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

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

از سایت نسخه پشتیبان بگیرید و یک محیط آزمایشی آماده کنید

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

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

بوت استرپ 5 چیه و چه کمکی به وردپرس می‌کنه؟

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

بوت استرپ چه ابزارهایی در اختیارتون می‌ذاره؟

• سیستم Grid یا شبکه‌بندی برای ساخت ردیف‌ها و ستون‌های واکنش‌گرا
• کلاس‌های آماده برای فاصله، رنگ، اندازه و چینش محتوا
• اجزایی مثل دکمه، کارت، پیام هشدار، جدول و فرم
• اجزای تعاملی مثل تب، منوی بازشونده، آکاردئون و Modal یا پنجره پاپ‌آپ

تفاوت بوت استرپ 5 با بوت استرپ 3 و 4

بوت استرپ 5 با نسخه‌های 3 و 4 چند تفاوت مهم داره. نام بعضی کلاس‌ها و ویژگی‌های داده‌ای عوض شده و بوت استرپ 5 برای اجزای JavaScript خودش به jQuery وابسته نیست. ویژگی‌های تعاملی این نسخه معمولاً با پیشوند data-bs- نوشته می‌شن.

پس نباید کد یک جزء از بوت استرپ 5 رو کنار فایل‌های بوت استرپ 3 بذارید و انتظار داشته باشید درست کار کنه. CSS، فایل JavaScript و نمونه‌کدها باید همگی به نسخه‌های سازگار تعلق داشته باشن.

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

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

روش‌های اضافه کردن بوت استرپ 5 به وردپرس

بارگذاری بوت استرپ از CDN

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

استفاده از فایل‌های بوت استرپ داخل قالب

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

اضافه کردن بوت استرپ با افزونه اختصاصی

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

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

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

ساخت چایلد تم برای اضافه کردن بوت استرپ 5

1. بررسی قالب فعال سایت: از مسیر «نمایش ← پوسته‌ها» نام قالب فعال رو ببینید. پوشه چایلد تم باید قالب اصلی یا Parent Theme درست رو معرفی کنه. Parent Theme همون قالب اصلیه که چایلد تم از اون استفاده می‌کنه.
2. ساخت پوشه و فایل‌های چایلد تم: داخل مسیر پوسته‌ها یک پوشه تازه بسازید و فایل‌های style.css و functions.php رو داخل اون بذارید. مقدار Template در سربرگ style.css باید دقیقاً با نام پوشه قالب اصلی یکی باشه.
3. فعال کردن چایلد تم در وردپرس: به صفحه پوسته‌ها برگردید و چایلد تم رو فعال کنید.
4. بررسی درست کار کردن قالب: صفحه اصلی، نوشته‌ها، منوها و نسخه موبایل رو ببینید. اگه ظاهر سایت تغییر غیرمنتظره‌ای داشت، اول ارتباط چایلد تم با قالب اصلی رو بررسی کنید.

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

بارگذاری اصولی فایل‌های بوت استرپ 5 در وردپرس

Enqueue چیه و چرا باید از اون استفاده کنید؟

Enqueue اسم روش استاندارد ثبت و بارگذاری فایل‌های CSS و JavaScript در وردپرسه. با این روش، وردپرس می‌تونه نسخه، وابستگی و ترتیب فایل‌ها رو مدیریت کنه. پس بهتره تگ‌های link و script رو مستقیم داخل محتوای برگه یا فایل header.php نچسبونید.

اضافه کردن فایل CSS بوت استرپ

اگه فایل bootstrap.min.css رو داخل پوشه assets/bootstrap/css چایلد تم گذاشتید، می‌تونید اون رو با کد زیر ثبت کنید:

function mihanwp_enqueue_bootstrap_assets() {
    wp_enqueue_style(
        'bootstrap-5',
        get_stylesheet_directory_uri() . '/assets/bootstrap/css/bootstrap.min.css',
        array(),
        '5.x'
    );
}
add_action( 'wp_enqueue_scripts', 'mihanwp_enqueue_bootstrap_assets' );

به‌جای 5.x شماره دقیق نسخه‌ای رو بنویسید که دانلود کردید. شماره نسخه رو حدس نزنید و اون رو از بسته رسمی همون فایل بردارید.

اضافه کردن فایل JavaScript Bundle بوت استرپ

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

wp_enqueue_script(
    'bootstrap-5-bundle',
    get_stylesheet_directory_uri() . '/assets/bootstrap/js/bootstrap.bundle.min.js',
    array(),
    '5.x',
    true
);

تعیین وابستگی، نسخه و محل بارگذاری فایل‌ها

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

بررسی بارگذاری درست فایل‌ها در سایت

بعد از ذخیره کد، کش سایت و مرورگر رو پاک کنید. صفحه آزمایشی رو باز کنید و توی بخش Network مرورگر دنبال bootstrap.min.css و bootstrap.bundle.min.js بگردید. هر فایل باید فقط یک بار و بدون خطای 404 بارگذاری بشه.

اضافه کردن بوت استرپ 5 از طریق CDN

1. گرفتن لینک‌های نسخه موردنیاز از سایت رسمی بوت استرپ: صفحه راه‌اندازی بوت استرپ رو باز کنید و نشانی CSS و JavaScript Bundle همون نسخه رو بردارید. ویژگی‌های امنیتی معرفی‌شده کنار لینک‌ها رو هم نادیده نگیرید.
2. ثبت فایل CSS با روش استاندارد وردپرس: نشانی کامل CSS رو به‌عنوان پارامتر دوم wp_enqueue_style() بذارید.
3. ثبت فایل JavaScript Bundle با روش استاندارد وردپرس: نشانی Bundle رو با wp_enqueue_script() ثبت کنید و نسخه دقیق فایل رو بنویسید.
4. بررسی نتیجه در صفحه آزمایشی: یک دکمه و یک بخش بازشونده بسازید تا بارگذاری CSS و JavaScript رو جداگانه آزمایش کنید.

لینک‌های CDN ممکنه با انتشار نسخه‌های تازه تغییر کنن. برای همین، لینک رو از مستندات رسمی نسخه‌ای بردارید که واقعاً می‌خواید استفاده کنید و شماره نسخه رو بدون آزمایش عوض نکنید.

استفاده از فایل‌های بوت استرپ داخل قالب وردپرس

1. دانلود نسخه موردنیاز از سایت رسمی بوت استرپ: بسته کامپایل‌شده رو از صفحه دانلود رسمی بگیرید.
2. قرار دادن فایل‌ها داخل چایلد تم: فایل‌های کم‌حجم‌شده CSS و Bundle رو داخل پوشه‌ای مشخص مثل assets/bootstrap بذارید.
3. ثبت مسیر فایل‌ها در وردپرس: مسیر رو با get_stylesheet_directory_uri() بسازید تا به پوشه چایلد تم اشاره کنه.
4. بررسی نسخه و ترتیب بارگذاری: مطمئن بشید CSS و JavaScript به یک نسخه تعلق دارن و فایل سفارشی شما بعد از CSS بوت استرپ بارگذاری می‌شه.

استفاده از کدهای بوت استرپ 5 در ویرایشگر وردپرس

تفاوت بلوک شورت‌کد با بلوک HTML سفارشی

شورت‌کد یک دستور وردپرسی داخل کروشه، مثل

اضافه کردن بلوک HTML سفارشی

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

قرار دادن کد بوت استرپ داخل بلوک

نمونه HTML رو از مستندات رسمی همون نسخه بردارید و داخل بلوک بذارید.

متن‌ها، نشانی‌ها و شناسه‌ها رو متناسب با صفحه خودتون عوض کنید. تگ‌های script و link رو داخل این بلوک نذارید؛ چون فایل‌ها باید با Enqueue بارگذاری بشن.

بررسی نتیجه در پیش‌نمایش صفحه

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

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

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

ساخت چیدمان واکنش‌گرا با سیستم Grid بوت استرپ 5

Container، Row و Column به زبان ساده

container محتوای صفحه رو داخل یک محدوده منظم نگه می‌داره. row یک ردیف می‌سازه و کلاس‌های col ستون‌های اون ردیف رو مشخص می‌کنن. ستون‌ها باید داخل ردیف باشن و ردیف هم معمولاً داخل Container قرار می‌گیره.

ساخت یک ردیف دو ستونه

<div class="container">
  <div class="row">
    <div class="col-md-6">محتوای ستون اول</div>
    <div class="col-md-6">محتوای ستون دوم</div>
  </div>
</div>

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

کلاس col-md-6 یعنی هر ستون از اندازه متوسط به بالا نصف ردیف رو می‌گیره. در عرض‌های کوچک‌تر، ستون‌ها به‌صورت پیش‌فرض تمام عرض رو می‌گیرن و زیر هم می‌افتن.

تنظیم فاصله بین ستون‌ها

برای ایجاد فاصله بین ستون‌ها می‌تونید کلاسی مثل g-3 رو به ردیف اضافه کنید. عدد بزرگ‌تر فاصله بیشتری می‌سازه. حتماً فاصله رو در موبایل هم ببینید تا محتوا بیش از حد فشرده یا پراکنده نشه.

بررسی چیدمان در موبایل و دسکتاپ

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

ساخت چند بخش کاربردی با بوت استرپ 5

ساخت دکمه

<a class="btn btn-primary" href="https://example.com/">مشاهده جزئیات</a>

نشانی نمونه رو با مقصد واقعی عوض کنید. متن دکمه بهتره نتیجه کلیک رو روشن بگه؛ مثلاً «مشاهده دوره» از «اینجا کلیک کنید» دقیق‌تره.

ساخت پیام هشدار

<div class="alert alert-warning" role="alert">
  قبل از ادامه از سایتتون نسخه پشتیبان بگیرید.
</div>

ساخت کارت محتوا

<div class="card">
  <div class="card-body">
    <h3 class="card-title">عنوان کارت</h3>
    <p class="card-text">توضیح کوتاه این بخش رو اینجا بنویسید.</p>
  </div>
</div>

ساخت بخش بازشونده

برای ساخت بخش بازشونده می‌تونید از Collapse یا Accordion استفاده کنید. شناسه بخش و مقدار هدف دکمه باید دقیقاً با هم هماهنگ باشن. مثلاً اگه شناسه محتوا helpContent هست، هدف دکمه باید #helpContent باشه.

ساخت تب

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

ساخت پنجره پاپ‌آپ

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

کار با اجزای تعاملی بوت استرپ 5

چرا بعضی اجزا به JavaScript نیاز دارن؟

CSS ظاهر یک جزء رو می‌سازه، ولی رفتارهایی مثل باز شدن پنجره، عوض شدن تب یا بسته شدن پیام به JavaScript نیاز دارن. اگه فقط CSS بوت استرپ رو بارگذاری کنید، دکمه‌ها ظاهر می‌گیرن، ولی اجزای تعاملی احتمالاً هیچ واکنشی نشون نمی‌دن.

JavaScript Bundle چه کاری انجام می‌ده؟

فایل bootstrap.bundle.min.js کدهای تعاملی بوت استرپ و وابستگی لازم بعضی از اون‌ها رو یکجا ارائه می‌کنه. استفاده از Bundle برای شروع ساده‌تره، ولی باید مطمئن بشید قالب یا افزونه دیگه‌ای همون فایل رو دوباره بارگذاری نکرده.

استفاده درست از ویژگی‌های data-bs

در بوت استرپ 5 ویژگی‌هایی مثل data-bs-toggle و data-bs-target رفتار هر جزء رو مشخص می‌کنن. اگه یک نمونه قدیمی با ویژگی‌هایی مثل data-toggle دارید، اون رو بدون بررسی وارد پروژه بوت استرپ 5 نکنید.

بررسی خطاهای اجزای تعاملی در مرورگر

ابزار توسعه‌دهنده مرورگر رو باز کنید و بخش Console رو ببینید. Console جاییه که خطاهای اجرای کد رو نشون می‌ده. خطاهای JavaScript، نبودن فایل Bundle و شناسه اشتباه می‌تونن جلوی اجرای جزء رو بگیرن. بعد از هر تغییر هم کش رو پاک کنید و صفحه رو دوباره باز کنید.

شخصی‌سازی ظاهر بوت استرپ بدون آسیب زدن به قالب

اضافه کردن کلاس اختصاصی به اجزای بوت استرپ

کنار کلاس‌های بوت استرپ یک کلاس اختصاصی مثل mihanwp-course-card بذارید. با این کار تغییرات شما فقط روی همون بخش اثر می‌ذارن و دکمه‌ها یا کارت‌های دیگه سایت ناخواسته عوض نمی‌شن.

نوشتن CSS سفارشی در چایلد تم

استایل سفارشی رو داخل فایل جداگانه چایلد تم بنویسید و اون فایل رو بعد از CSS بوت استرپ بارگذاری کنید. انتخابگر رو تا جای ممکن مشخص نگه دارید و از تغییر عمومی کلاس‌هایی مثل .btn یا .container دوری کنید.

جلوگیری از تغییر ناخواسته استایل‌های قالب

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

چرا بهتره فایل اصلی بوت استرپ رو ویرایش نکنید؟

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

جلوگیری از تداخل بوت استرپ 5 با قالب و افزونه‌ها

پیدا کردن نسخه‌های تکراری CSS و JavaScript

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

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

کلاس‌های عمومی مثل container، row و btn ممکنه داخل قالب هم تعریف شده باشن. ابزار Inspect مرورگر بهتون نشون می‌ده هر قانون CSS از کدوم فایل اومده و کدوم قانون روی بقیه غلبه کرده.

آزمایش افزونه‌ها و قالب در محیط آزمایشی

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

حذف فایل‌های تکراری بدون خراب شدن سایت

قبل از اینکه بارگذاری یک فایل رو حذف کنید، ببینید کدوم اجزای سایت به اون وابسته هستن. بعد فقط همون فایل تکراری رو با تنظیمات رسمی یا تابع wp_dequeue_style() و wp_dequeue_script() کنار بذارید. این توابع به Handle دقیق فایل نیاز دارن. Handle هم نامی داخلیه که وردپرس برای شناسایی فایل ثبت‌شده استفاده می‌کنه، پس بدون شناخت اون از این توابع استفاده نکنید.

بهینه‌سازی سرعت سایت بعد از اضافه کردن بوت استرپ 5

فقط فایل‌های موردنیاز رو بارگذاری کنید

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

بوت استرپ رو فقط در صفحه‌های لازم بارگذاری کنید

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

حجم و تعداد درخواست‌های صفحه رو بررسی کنید

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

کش سایت رو پاک کنید و سرعت رو دوباره بسنجید

بعد از تغییر CSS یا JavaScript، کش افزونه، سرور، CDN و مرورگر رو پاک کنید. صفحه رو چند بار در شرایط یکسان بسنجید تا نتیجه یک اجرای اتفاقی باعث تصمیم اشتباه نشه.

بررسی دسترس‌پذیری و نمایش صفحه در دستگاه‌های مختلف

آزمایش صفحه با موبایل، تبلت و دسکتاپ

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

بررسی خوانایی متن و اندازه دکمه‌ها

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

بررسی کار با صفحه‌کلید

با کلید Tab بین دکمه‌ها، لینک‌ها و کنترل‌ها حرکت کنید. جای تمرکز باید دیده بشه و کاربر بتونه پنجره یا منوی بازشده رو بدون ماوس ببنده.

استفاده درست از عنوان‌ها و ویژگی‌های دسترس‌پذیری

عنوان‌ها رو براساس ساختار محتوا انتخاب کنید، نه اندازه ظاهری اون‌ها. ویژگی‌هایی مثل aria-label رو فقط وقتی اضافه کنید که معنی کنترل بدون اون روشن نیست. نمونه رسمی هر جزء رو پایه کار بذارید و ویژگی‌های دسترس‌پذیری اون رو بی‌دلیل حذف نکنید.

رفع مشکل‌های رایج بوت استرپ 5 در وردپرس

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

اول بارگذاری فایل CSS رو در بخش Network بررسی کنید. خطای 404، مسیر اشتباه، کش قدیمی یا شرط نادرست بارگذاری می‌تونه علت مشکل باشه. بعد مطمئن بشید نام کلاس‌ها رو دقیقاً طبق مستندات بوت استرپ 5 نوشتید.

چرا تب، پاپ‌آپ یا بخش بازشونده کار نمی‌کنه؟

فایل JavaScript Bundle رو بررسی کنید. بعد مطمئن بشید ویژگی‌های data-bs و شناسه هدف درست هستن. تکراری بودن شناسه یا استفاده از نمونه بوت استرپ 3 و 4 هم می‌تونه جلوی اجرا رو بگیره.

چرا ظاهر قالب بعد از اضافه کردن بوت استرپ به هم می‌ریزه؟

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

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

چون کدهای سایت بوت استرپ HTML هستن و شورت‌کد وردپرس نیستن. اون‌ها رو داخل بلوک «HTML سفارشی» بذارید. بلوک «شورت‌کد» فقط برای دستورهایی مناسبه که وردپرس یا یک افزونه تعریف کرده.

چرا صفحه در موبایل درست نمایش داده نمی‌شه؟

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

چطور تداخل CSS و JavaScript رو پیدا کنید؟

1. کش سایت و مرورگر رو پاک کنید.
2. خطاهای Console و فایل‌های Network رو بررسی کنید.
3. قانون‌های CSS عنصر خراب رو با Inspect ببینید.
4. افزونه‌ها رو روی محیط آزمایشی یکی‌یکی غیرفعال کنید.
5. قالب رو موقتاً با یک قالب پیش‌فرض آزمایش کنید.

آیا اضافه کردن بوت استرپ 5 برای سایت شما انتخاب مناسبیه؟

چه زمانی بوت استرپ 5 انتخاب کاربردی‌ایه؟

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

چه زمانی بهتره از بلوک‌های وردپرس استفاده کنید؟

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

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

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

جمع‌بندی

برای اضافه کردن بوت استرپ به وردپرس، فایل‌های CSS و JavaScript نسخه 5 رو با Enqueue بارگذاری کنید و کدهای HTML رو داخل بلوک «HTML سفارشی» بذارید. بلوک «شورت‌کد» جای کدهای سایت بوت استرپ نیست.

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

برای آشنایی با یک مسیر مرتبط، آموزش افزودن بوت استرپ به وردپرس رو هم می‌تونید ببینید.

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

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

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