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

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

فهرست مطالب

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

آخرین نسخه فایل‌های 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 هم در ویرایشگر بلوک (همانطور که در بالا مشاهده می‌کنید) و هم در قسمت ظاهر وب‌سایت شما اعمال شده است (به تصویر زیر نگاه کنید).

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

نتیجه‌گیری

امیدوارم این مقاله در این کار به شما کمک کند و از نتایج آن لذت ببرید. ممکن است این مقاله را نیز برای شما مفید باشد: راهنمای سفارشی‌سازی آسان قالب وردپرس