آموزش ویدیویی افزودن و استفاده از بوت استرپ در وردپرس
در صورتی که تمایل دارید نحوه کار با بوت استرپ در وردپرس و قالب دیوی را به صورت ویدیویی آموزش ببینید، ویدیوی زیر را مشاهده کنید.
بوت استرپ چیست؟
گرچه فریم ورک بوت استرپ1Bootstrap به اندازه کافی شناخته شده هست، اما در اینجا توضیحات مختصری در مورد آن می‌دهیم. بوت استرپ توسط دو کارشناس توییتر2Twitter به نام‌های مارک اتو3Marc Otto و جاکوب تورنتون4Jacob Thornton ایجاد شد. با توجه به این مسئله که بسیاری از کاربران اینترنتی توسط تلفن‌های همراه خود به جستجوی وب می‌پردازند، آنها تصمیم به طراحی فریم ورکی گرفتند که اولویت آن طراحی برای موبایل5mobile-first design باشد. به همین دلیل بوت استرپ میان توسعه دهندگان وب بسیار مشهور شد. برای اجرای طراحی واکنش‌گرای مناسب، بوت استرپ از سیستم گریدبندی و ستون بندی خاصی استفاده کرد که طراحی صفحه را در رزولوشن‌های مختلف تغییر می‌داد. یعنی چیدمان المان‌ها با توجه به اینکه کاربر از طریق صفحه کامپیوتر به سایت نگاه می کند یا صفحه موبایل و … متفاوت بود.
بوت استرپ از زبان‌های HTML ، CSS و JavaScript ساخته شده است. این ابزار یک فریم ورک رایگان است که به کاربران اجازه می‌دهد اجزای وب سایت خود را به کمک المان‌های موجود در آن شکل دهند. البته توسعه‌دهندگان و برنامه‌نویسانی هم وجود دارند که بر مبنای این فریم ورک، کامپوننت‌های مختلفی را توسعه داده و در بازارهای این زمینه به فروش می‌رسانند. مشابه وردپرس، بوت استرپ نیز در میان طراحان وب سایت بسیار مشهور و محبوب است و به شما کمک می‌کند تا وبسایت‌های زیبایی ایجاد کنید.
روش‌های استفاده از بوت استرپ در وردپرس
اکنون که مقداری بیشتر با بوت استرپ آشنا شدید، به سراغ بررسی روش‌هایی برای استفاده از بوت استرپ در وردپرس می‌رویم. شاید بتوان روش‌های مختلفی برای این کار پیدا کرد. ما در این مقاله بیشتر به توضیح دو روش زیر می‌پردازیم:
- نصب و افزودن بوت استرپ به صورت دستی
- کمک گرفتن از قالب‌های سازگار با بوت استرپ
افزودن بوت استرپ به وردپرس به صورت دستی
یکی از روش‌های رایج استفاده از بوت استرپ در وردپرس، کمک گرفتن از CDN مربوط به این فریم‌ورک است. در واقع CDNها لینک‌هایی هستند که کدهای مربوط به بوت استرپ را در خود جای داده‌اند. با اضافه کردن این لینک‌ها به سایت خود می‌توانید از قابلیت‌های فریم‌ورک بوت استرپ در وردپرس بهره‌مند شوید. برای دسترسی به این لینک‌ها، کافی است به سایت اصلی بوت استرپ مراجعه کنید. در بخشی به نام Include via CDN شما لینک‌های CSS و JavaScript مربوط به این فریم ورک را پیدا می‌کنید.
با کپی کردن این کدها و لینک‌ها، می‌توانید به سراغ مراحل بعدی مقاله بروید. اما قبل از آن نیاز است که توضیح دهیم روال اضافه کردن بوت استرپ به وردپرس بسته به اینکه از چه تم یا افزونه‌هایی در سایت وردپرسی خود استفاده می‌کنید، ممکن است مقداری متفاوت باشد. ما در این مقاله به صورت خاص بوت استرپ در قالب دیوی را بررسی می‌کنیم. لذا نحوه اضافه کردن بوت استرپ به قالب دیوی را در بخش بعدی توضیح می‌دهیم.
اضافه کردن بوت استرپ در قالب دیوی
بعد از کپی کردن کدها یا لینک‌هایی که در بخش قبل توضیح داده شد، به سراغ داشبورد وردپرس سایت خود بروید. در قسمت Divi و سپس Theme Options به سراغ تب Integration بروید.
در این قسمت می‌توانید کدهای مختلفی به سایت خود اضافه کنید. کدها و لینک‌های کپی شده در بخش قبل را در قسمتی که با عنوان Add code to the <head> of your blog مشخص شده است، جا‌یگذاری کنید.
فراموش نکنید که حتما بر روی دکمه Save Changes کلیک کنید تا تغییرات شما اعمال گردد.
استفاده از بوت استرپ در وردپرس
خوب اکنون دیگر سایت شما که از قالب دیوی استفاده می‌کند، بوت استرپ را می‌شناسد. یعنی می‌توانید از کدها، کامپوننت‌ها و کلاس‌های بوت استرپ در ساختن صفحات وب سایت خود بهره ببرید. در اینجا با ذکر مثال نشان می‌دهیم که چگونه عملا از بوت استرپ در قالب دیوی استفاده کنید. یک صفحه جدید ایجاد کنید. طبق معمول برای ویرایش آن، از گزینه Edit With The Divi Builder استفاده کنید تا به ویرایش‌گر افزونه دیوی بیلدر دسترسی پیدا نمایید.
در ویرایش‌گر دیوی بیلدر شما می‌توانید از ماژول‌های مختلف این افزونه برای طراحی صفحه سایت خود، استفاده کنید. اما برای اضافه کردن کدهای بوت استرپ باید از ماژول Code بهره ببرید. با انتخاب این ماژول، در تب Content و در قسمت Text کد مورد نظر خود را وارد کنید. به عنوان مثال ما از کامپوننت Button در بوت استرپ استفاده کرده‌ایم. کدهای مربوطه را از سایت بوت استرپ کپی کرده و در این ماژول از افزونه دیوی بیلدر قرار داده‌ایم.
بعد از این کار مشاهده می‌کنید که کامپوننت‌های بوت استرپ به همان شکل در صفحه سایت شما ظاهر می‌شوند. به بیان دیگر کلاس‌های بوت استرپ مانند btn و btn-secondary (استفاده شده در این مثال) توسط وردپرس و قالب دیوی شناخته شده و در سایت اعمال می‌شوند. به این ترتیب شما می‌توانید از تمامی کلاس‌های بوت استرپ و هر آنچه در راهنمای این فریم ورک CSS مشاهده می‌کنید، در طراحی خود استفاده کنید.
کمک گرفتن از قالب‌های سازگار با بوت استرپ
همانطور که در ابتدای مقاله ذکر شده، روش‌های مختلفی برای استفاده از بوت استرپ در وردپرس وجود دارد. یکی از این روش‌ها کمک گرفتن از قالب‌های سازگار با بوت استرپ است. برای ساختن یک قالب وردپرس، برنامه‌نویس‌ها از کدهای مختلفی جهت طراحی صفحات و ایجاد ساختار مناسب برای عملکرد بهینه قالب استفاده می‌کنند. برخی از توسعه‌دهندگان قالب‌های وردپرس، هنگام ساخت قالب مسئله استفاده از بوت استرپ در طراحی وب را نیز در نظر می‌گیرند و در کدهای خود لحاظ می‌کنند. اگر چنین قالب‌هایی را نصب کنید، استفاده از بوت استرپ در وردپرس برای شما امکان پذیر خواهد بود. از جمله قالب‌های وردپرسی که چنین قابلیت‌هایی در خود دارد، قالب مربوط به ساخت سایت رزومه به نام Inbio است.
برای اینکه مطمئن شوید قالبی که قرار است در سایت خود استفاده کنید، از بوت استرپ پشتیبانی می‌کند یا نه، حتما اطلاعات مربوط به آن قالب را به دقت بخوانید. مثلا اگر به صفحه توضیحات این قالب مراجعه کنید، مشاهده می‌کنید که در قسمت Compatible With گزینه‌هایی مانند Bootstrap 4.x و Bootstrap 5.x قرار دارند. این بدان معناست که این قالب با نسخه‌های 4 و 5 بوت استرپ سازگاری دارد.
جمع‌بندی
در این مقاله به توضیح نحوه استفاده از بوت استرپ در وردپرس پرداختیم. راهکارها و روش‌هایی برای استفاده از بوت استرپ بیان کردیم. از جمله اینکه نشان دادیم چگونه می‌توانید آن را در قالب دیوی اضافه کنید. البته توجه داشته باشید که موضوع «بوت استرپ در وردپرس» چندان مبحث پیچیده‌ای نیست. آنچه مهم‌تر است، این است که با ساختار بوت استرپ و چگونگی کار با المان‌ها و کلاس‌های آن آشنایی داشته باشید. بنابراین توصیه می‌کنیم ابتدا با بررسی راهنمای سایت اصلی، با نحوه کار بوت استرپ به خوبی آشنا شوید.
