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