نحوه اضافه کردن بوت‌استرپ به وردپرس و استفاده در پوسته‌ها

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

فهرست مطالب

بوت‌استرپ را دانلود کنید و آن را درون پوسته قرار دهید

آخرین نسخه فایل‌های CSS و JS کامپایل‌شده (Compiled) بوت‌استرپ را از اینجا دانلود کنید. پس از دانلود و استخراج فایل، به پوشه css بروید و فایل bootstrap.css را کپی کنید. شما باید این فایل را در پوشه پوسته (والد یا فرزند) خود قرار دهید. من این فایل را در پوشه assets > css پوسته خودم قرار دادم.

نحوه اضافه کردن بوت‌استرپ به وردپرس در فایل functions.php

اگر توسعه‌دهنده پوسته هستید، کدهای زیر را به فایل functions.php پوسته والد (parent) اضافه کنید. در صورتی که فقط از پوسته استفاده می‌کنید، در فایل functions.php پوسته فرزند (child) اضافه کنید. اگر پوسته فرزند ندارید، این مقاله را دنبال کنید: نحوه ایجاد پوسته فرزند در وردپرس

فایل functions.php در پوشه ریشه پوسته والد/فرزند شما قرار دارد. اگر وجود ندارد، آن را ایجاد کنید. اگر نمی‌دانید چگونه فایل functions.php را ویرایش یا ایجاد کنید، به این مقاله مراجعه کنید: نحوه ویرایش فایل functions.php در پوسته‌های وردپرس

این کدها را بعد از عبارت <?php قرار دهید. اگر فایل bootstrap.css را در مسیر assets > css قرار ندادید، باید مسیر آن را در کد زیر ویرایش کنید. اگر اکنون در حال ایجاد فایل functions.php هستید، فراموش نکنید که عبارت <?php را قبل از کد زیر اضافه کنید.

/**
 * Enqueue Bootstrap CSS in the editor.
 */
function alvandwp_bootstrap_editor() {
	add_editor_style( './assets/css/bootstrap.css' );
}
add_action( 'after_setup_theme', 'alvandwp_bootstrap_editor' );

/**
 * Enqueue Bootstrap CSS in the frontend.
 */
function alvandwp_bootstrap_frontend() {
	wp_enqueue_style( 'bootstrap-style', get_stylesheet_directory_uri() . '/assets/css/bootstrap.css' );
}
add_action( 'wp_enqueue_scripts', 'alvandwp_bootstrap_frontend', 9 );

توضیحاتی در مورد قطعه کد بالا

کدهای بالا شامل بارگذاری فایل CSS بوت‌استرپ در ویرایشگر و بخش کاربری هستند. پارامتر 9 در add_action('wp_enqueue_scripts', 'alvandwp_bootstrap_frontend', 9) تضمین می‌کند که استایل‌های فریم‌ورک اولویت کمتری نسبت به استایل‌های موجود در style.css یا استایل‌های تعریف‌شده توسط کاربر از طریق ویرایشگر بلوک/سایت داشته باشند. بنابراین، در صورت بروز تداخل، استایل‌های بوت‌استرپ در بخش کاربری نادیده گرفته می‌شوند.

نحوه اضافه کردن بوت‌استرپ به وردپرس در ویرایشگر بلوک/سایت

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

کلاس بوت‌استرپ bg-success هم در ویرایشگر بلوک (همانطور که در بالا مشاهده می‌کنید) و هم در قسمت ظاهر وب‌سایت شما اعمال شده است (به تصویر زیر نگاه کنید).

مراحل استفاده از بوت استرپ در ویرایشگر سایت تقریبا یکسان است.

نتیجه‌گیری

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