آموزش تصویری استفاده از بوت استرپ در وردپرس


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

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

کاربرد اصلی بوت استرپ چیست؟

بوت استرپ ابزار محبوبی است که با ارائه اجزای آماده برای HTML، CSS و جاوا اسکریپت، فرآیند طراحی صفحات وب را ساده کرده و آنها را برای دستگاه های مختلف بهینه می کند. در ادامه این مقاله آموزشی نحوه استفاده از بوت استرپ در وردپرس، مهمترین کاربردهای بوت استرپ را ارائه می دهیم:

  • به سرعت و به راحتی رابط های کاربری برای وب سایت ها و برنامه های کاربردی وب ایجاد کنید
  • به سرعت نمونه های اولیه وب سایت را برای ارزیابی و آزمایش ایده های طراحی بسازید
  • استفاده در پروژه های آموزشی به عنوان ابزاری برای آموزش طراحی وب مدرن و واکنش گرا
  • طراحی های سفارشی برای سیستم های مدیریت محتوا مانند وردپرس با استفاده از ابزارهای بوت استرپ ایجاد کنید

برای آشنایی با بوت استرپ و نحوه نصب و استفاده از آن، مقاله زیر را از دست ندهید.

بوت استرپ چیست؟

مزایا و معایب بوت استرپ

برای کمک به تصمیم گیری آگاهانه تر در مورد استفاده از بوت استرپ در وردپرس، جدولی از مزایا و معایب آن را در زیر تهیه کرده ایم:

معایب بوت استرپ مزایای بوت استرپ
اگر از بوت استرپ در وردپرس به اشتباه استفاده می کنید، وب سایت شما می تواند ضعیف نمایش داده شود. با استفاده از بوت استرپ در وردپرس می توانید وب سایت هایی طراحی کنید که در تمامی دستگاه ها مانند رایانه، تبلت و تلفن همراه به خوبی نمایش داده شوند.
استفاده بیش از حد از طرح های تکراری وب سایت شما را خسته کننده و غیر جذاب می کند. با بوت استرپ می توانید از طرح های آماده مانند دکمه ها و شکل هایی که کار شما را سریعتر و زیباتر می کنند استفاده کنید.
گاهی اوقات بوت استرپ به تنظیمات خاصی نیاز دارد تا در مرورگرها به درستی کار کند. بوت استرپ در مرورگرها به خوبی کار می کند و به کاربران کمک می کند تا وب سایت شما را به درستی مشاهده کنند.
اگر طراحی بسیار خاص و منحصر به فردی دارید، شاید Bootstrap برای شما مناسب نباشد. با استفاده از بوت استرپ در وردپرس، می توانید سبک و ظاهر وب سایت خود را به دلخواه تغییر دهید.
بوت استرپ می تواند جزئیات و کدهای زیادی در پروژه های بزرگ داشته باشد و مدیریت آن دشوار است. با افزودن بوت استرپ به وردپرس، می توانید پروژه های خود را به سرعت توسعه دهید.
گاهی ممکن است اسناد به روز نشوند و اطلاعات قدیمی را منتقل کنند. اسناد بسیاری برای توسعه دهندگان برای استفاده و یادگیری بوت استرپ در دسترس است.
استفاده از jQuery به معنای افزایش اندازه فایل و کاهش سرعت بارگذاری صفحه وب است. بوت استرپ از jQuery برای بهبود قابلیت استفاده وب سایت ها استفاده می کند.
استفاده نادرست از بوت استرپ یا به روز رسانی نامنظم آن می تواند منجر به آسیب پذیری های امنیتی شود. برای رفع آسیب پذیری های امنیتی جدید به طور مرتب به روز می شود.

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

برای افزودن بوت استرپ به وردپرس، ابتدا باید آخرین نسخه بوت استرپ را از سایت اصلی آن دانلود کنید. فایل دانلودی دارای پسوند ZIP است، بنابراین ابتدا باید آن را از حالت فشرده خارج کنید.

در مرحله بعد، از طریق FTP یا مدیریت فایل در کنترل پنل وارد پنل مدیریت وب سایت خود شوید، به دنبال پوشه wp-content و سپس themes بگردید. قبل از آپلود فایل های بوت استرپ، یک پوشه جدید ایجاد کنید و نامی برای به خاطر سپردن آن بگذارید. در نهایت فایل های دانلود شده را در این پوشه جدید آپلود کنید. این به سایت شما اجازه می دهد تا از ویژگی های طراحی بوت استرپ استفاده کند.

فایل های Bootstrap دانلود شده را به پوشه themes اضافه کنید

برای اطمینان از اینکه وردپرس به درستی با Bootstrap کار می کند، فایل های مورد نیاز مانند style.css، index.php، header.php و footer.php باید در پوشه Bootstrap وجود داشته باشد.

سپس فایل style.css را در پوشه Bootstrap خود باز کنید و اطلاعات موجود در آن را متناسب با ویژگی ها و نیازهای سایت خود تغییر دهید. به طور خاص، اطلاعات مورد نظر خود را بین /* و */ قرار دهید که نمونه آن به صورت زیر است:

/*

Theme Name: MyBootstrapTheme

Author: YourBusinessName

Description: ThemeDescription

Version: 1.0

Theme URI: yourwebsite.com

*/

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

آموزش استفاده از بوت استرپ به زبان ساده

بوت استرپ برای استفاده در وردپرس و سایر پروژه های وب بسیار موثر است. در این قسمت از مقاله نحوه افزودن بوت استرپ به وردپرس قدم به قدم نحوه استفاده از بوت استرپ را به شما آموزش می دهیم:

مرحله اول: دانلود و اضافه کردن بوت استرپ به پروژه

قبل از استفاده از بوت استرپ در وردپرس، باید فایل های CSS و جاوا اسکریپت آن را به پروژه خود اضافه کنید. برای این کار می توانید Bootstrap را از وب سایت رسمی آن (getbootstrap.com) دانلود کرده و فایل های CSS و JS را به فایل HTML خود پیوست کنید.

مرحله دوم: استخراج فایل ها و ساختار پوشه

یک فایل zip دانلود خواهد شد. فایل را از حالت فشرده خارج کرده و وارد پوشه (Distribution) شوید. دو پوشه به نام‌های CSS و JS وجود دارد. می توانید فایل HTML خود را در این پوشه ایجاد کنید و سپس لینک های آن را در قسمت مربوطه وارد کنید.

در پوشه فایل های CSS، مهم ترین فایل های مورد استفاده bootstrap و bootstrap.min و در پوشه فایل های JS، مهم ترین فایل ها bootstrap.min.js و bootstrap.js هستند.

مرحله سوم: ایجاد یک پروژه و پیوند فایل ها

شما باید یک پوشه جداگانه برای پروژه خود ایجاد کنید و یک فایل HTML در آن ایجاد کنید. سپس فایل های استخراج شده بوت استرپ را که قبلا دانلود کرده اید در زیر پوشه پروژه کپی کنید. در تگ هدر فایل HTML، به فایل CSS پیوند دهید. همچنین فایل jQuery را که دانلود کرده اید در پوشه JS کپی کنید. در نهایت مطمئن شوید که تمامی فایل های دانلود شده و صفحه HTML در پوشه پروژه قرار دارند.

یک پوشه و فایل HTML جداگانه برای پروژه راه اندازی سایت ایجاد کنید

در تگ هدر فایل HTML، به فایل CSS پیوند دهید. همچنین فایل jQuery را که دانلود کرده اید در پوشه JS کپی کنید. در نهایت مطمئن شوید که تمامی فایل های دانلود شده و صفحه HTML در پوشه پروژه قرار دارند.

به فایل CSS در تگ هدر فایل HTML پیوند دهید

مرحله 4: کد را اجرا کنید و نتیجه را ببینید

پس از انجام مراحل بالا، کد نهایی مانند مثال زیر خواهد بود. کد نهایی پس از ذخیره فایل ها در همان پوشه و افزودن لینک زیر تگ head و body قابل مشاهده خواهد بود.

کد لانچر را اجرا کنید و نتیجه را ببینید

اجزای Bootstrap را اضافه کنید

Bootstrap مجموعه ای از ابزارها و اجزای آماده مانند دکمه ها، سیستم شبکه، نوار ناوبری و موارد دیگر را ارائه می دهد. برای استفاده از این ابزارها، می توانید به سادگی کلاس های Bootstrap را به تگ های HTML خود اضافه کنید.

  • دکمه اصلی

دکمه اصلی نوعی دکمه بوت استرپ است که برای نشان دادن یک عمل مهم در یک صفحه وب استفاده می شود. این دکمه دارای ویژگی های ظاهری برجسته ای مانند رنگ آبی و حاشیه ضخیم تر است که توجه کاربر را به خود جلب می کند.

نحوه کار با مؤلفه Bootstrap Buttons
  • سیستم شبکه

سیستم گرید به شما امکان می دهد صفحاتی را ایجاد کنید که برای صفحه های مختلف مناسب هستند. این سیستم بر اساس یک شبکه 12 ستونی است که امکان ایجاد آسان صفحات واکنشگرا را فراهم می کند.

نحوه استفاده از جزء شبکه سیستم در بوت استرپ
  • نوار ناوبری

برای ایجاد نوار ناوبری باید از کلاس navbar استفاده کنید. این کلاس به شما کمک می کند تا به راحتی منوی کشویی، نوار ناوبری و تنظیمات قابل تنظیم را انجام دهید.

ویژگی های بوت استرپ چیست؟

بوت استرپ دارای ویژگی های مختلفی از جمله موارد زیر است:

1. طراحی وب سایت واکنش گرا

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

2. توسعه سریع

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

معرفی ویژگی های فریم ورک بوت استرپ

3. سازگار با تمام مرورگرها

سازگاری مرورگر به این معنی است که یک وب سایت می تواند در همه مرورگرهای مختلف مانند کروم، فایرفاکس و سافاری به درستی کار کند.

گاهی اوقات یک وب سایت در یک مرورگر خاص به خوبی نمایش داده می شود اما در مرورگر دیگری مشکل دارد. بوت استرپ به توسعه دهندگان کمک می کند تا این مشکل را حل کنند.

این فریم ورک به گونه ای طراحی شده است که وب سایت های ایجاد شده با آن در تمامی مرورگرهای مدرن به درستی نمایش داده شوند. این ویژگی برای توسعه دهندگان بسیار مهم است زیرا دیگر نگران تفاوت نمایش در مرورگرهای مختلف نخواهند بود.

4. سفارشی سازی آسان

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

5. افزونه های جاوا اسکریپت

بوت استرپ دارای ابزارهای جاوا اسکریپت ویژه ای است که جذابیت وب سایت ها را افزایش می دهد. به عنوان مثال، افزونه Carousel به شما اجازه می دهد عکس ها و متن ها را به صورت اسلایدر نمایش دهید. افزونه modal برای نمایش پنجره های بازشو به کاربر استفاده می شود. همچنین از منوی کشویی و پلاگین های راهنما برای ایجاد منوها و یادداشت های توضیحی در وب سایت ها استفاده می شود. این ابزارها به توسعه دهندگان کمک می کنند تا وب سایت های جذاب و واکنش گرا بسازند و نیاز به کدنویسی پیچیده را کاهش دهند.

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

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

خرید هاست ابری

نتیجه

استفاده از بوت استرپ در وردپرس را در این مقاله وبلاگ پارس پک توضیح دادیم. بوت استرپ یک چارچوب رایگان و متن باز برای پروژه های وب است. این فریم ورک ساده ترین راه برای ساخت وب سایت های پیشرفته و واکنش گرا است و تا حدی از نوشتن کدهای HTML، CSS و JS خودداری می کند. تجربه شما از افزودن بوت استرپ به وردپرس چیست؟ تجربه خود از استفاده از بوت استرپ در وردپرس را در قسمت نظرات به اشتراک بگذارید.

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

1. چرا باید از بوت استرپ برای پروژه وب خود استفاده کنیم؟

بوت استرپ به توسعه دهندگان اجازه می دهد تا به سرعت و کارآمد وب سایت های واکنش گرا و جذاب ایجاد کنند. با استفاده از این فریم ورک، می توانید از طرح های از پیش ساخته شده، ابزارهای آماده و اجزای سازنده برای کاهش زمان پروژه استفاده کنید.

2. آیا بوت استرپ فقط برای طراحان وب حرفه ای است؟

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

3. آیا بوت استرپ با ابزارهای دیگر سازگار است؟

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

منابع: medium.com geeksforgeeks.org