بیش از 52% از کل ترافیک وب را کاربران تلفن همراه تشکیل داده اند و این عدد روز به روز در حال افزایش است. همین واقعیت باعث شده که به مرور زمان ابزارها و تکنیک های بیشتری برای طراحی وب سایت های ریسپانسیوتر طراحی شوند. یکی از این ابزارها نیز بوت استرپ است. به کمک این ابزار قدرتمند می توانید انواع تم های وردپرسی واکنش گرا را به راحتی خلق کنید. می خواهید بدانید چگونه؟ در این راهنما از استورمانستر همراه ما باشید تا نحوه طراحی قالب وردپرس با بوت استرپ را با هم بررسی کنیم. پیش از آن بد نیست آموزش ساخت قالب وردپرسی بدون نیاز به کدنویسی را مطالعه کنید.

مروری بر وردپرس

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

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

بوت استرپ (Bootstrap) یکی از فریم ورک هایی است که توسط یکی از تیم های توسعه دهنده وردپرس طراحی شده است. این فریم ورک منبع باز، طوری طراحی شده که سایت هایی که در آن ساخته می شوند ریسپانسیو باشند. بر همین اساس به کمک این ابزار می توان تم های منبع باز واکنش گرایی را بر پایه کدهای HTML، CSS و جاوااسکریپت طراحی کرد.

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

مراحل 8 گانه طراحی قالب وردپرس با بوت استرپ

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

مرحله اول: Unpack کردن بوت استرپ

اول از همه باید بوت استرپ را روی دامنه خود نصب کنید. برای این کار مراحل زیر را طی کنید.

1. بوت استرپ را دانلود کرده و از حالت فشرده خارج کنید.
2. با استفاده از یک سرویس گیرنده FTP به سرور خود متصل شوید.
3. در فایل های خود به مسیر wp-content> themes بروید.
4. در پوشه Themes یک پوشه جدید بسازید و نام آن را ” BootSTheme” بگذارید. سپس محتویات بوت استرپ را که از حالت زیپ خارج کرده بودید، در این پوشه بریزید.
5. تقریباً همه تم های وردپرسی این 4 فایل را دارند:

• php
• php
• php
• css

پس 4 فایل خالی با نام های بالا در پوشه BootSTheme که تازه ساخته اید، ایجاد کنید. در واقع قرار است در این پوشه ها، پایه های تم جدید خود را بسازید.

مرحله دوم: پیکربندی بوت استرپ

اولین کاری که برای پیکربندی بوت استرپ می خواهیم انجام دهیم، وارد کردن کدهای CSS است. پس در پوشه BootSTheme فایل “style.css” را باز کرده و کد زیر را در آن Paste کنید.

/*

Theme Name: MyTheme

Theme URI: https://cloudways.com

Description: Mytheme Built on bootstrap

Version:1.1

Author: Ahsan Parwez

Author URI: https://cloudways.com

*/

این کدها مشخصات قالب جدید بوت استرپی را مشخص می کنند. بنابراین بهتر است شما این مشخصات را به دلخواه خود تغییر دهید.

مرحله سوم: ادامه کدهای CSS

حالا می خواهیم باقی کدهای فایل “style.css” را بنویسیم. کدهای این قسمت را باید از فایلی به نام “bootstrap.min.css” که فایل های اصلی بوت استرپ دانلود شده است، پیدا کنید. این کدها را کپی کرده و در فایل “style.css” paste کنید. در این مرحله فایل style.css باید شبیه به تصویر زیر باشد:

نکته: می توانید کدهای کامل CSS را در سایت خود Bootstrap هم پیدا کنید.

مرحله چهارم: راه اندازی قالب HTML

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

وردپرس دارای توابع داخلی ” ()get_header” و “() get_footer” است. این توابع به طور پیشفرض فایل های “header.php” و “footer.php” را فراخوانی می کنند. پس ما هم باید اینجا همین کار را انجام دهیم.

برای این کار کدهای HTML (که در فایل های اصلی سایت است) را از بالا تا اولین Div کات کنید. سپس این کدها را داخل فایل “header.php” که در پوشه BootSTheme ساخته بودید، قرار دهید. بنابراین این فایل به شکل زیر خواهد بود:

بعد از این کار، ادامه کدهای HTML را در فایل “footer.php” قرار دهید. فایل footer.php نیز مثل تصویر زیر خواهد بود:

در این جای کار اگر قالب وردپرس بوت استرپ را در وردپرس خود آپلود کرده و آن را فعال کنید، هنوز چیزی نمی بینید. چرا؟ چون فایل “index.php” خالی است. این فایل را باید با چه چیزی پر کنیم؟ با فراخوانی توابع هدر و فوتر. برای بارگذاری این دو، از توابع داخلی خود وردپرس برای فراخوانی آنها استفاده می کنیم. پس کدهای زیر را در فایل index.php قرار دهید:

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

مرحله 5: تنظیم کردن هدر و فوتر

در این مرحله در فایل header.php تابع echo get_stylesheet_uri() را بنویسید. با این کار، استایل هایی که نوشته اید (کدهای CSS در فایل style.css) را به صفحات خود اضافه می کنید. پس تکه کد زیر را به فایل header.php اضافه کنید:

echo get_stylesheet_uri()

همچنین می توانید فایل style.css (یا در واقع همان کدهای استایل) را با افزودن کد زیر در بالای فایل header.php به سایت خود اضافه کنید:

">

اما صبر کنید! کدهای جاوااسکریپت هنوز هم فعال نیستند و برای مثال هیچ یک از منوها قابلیت کشویی ندارند. برای فعال کردن کدهای جاوااسکریپت، به فایل footer.php بروید و کد زیر را قبل از بسته شدن تگ body قرار دهید:

حالا برای این که به وردپرس بگویید که قلاب های افزونه ها را کجا قرار دهد، کدهای ();php wp_footer?> و ();php wp_head?> را هم در هر دو فایل های header.php و footer.php قرار دهید. به علاوه برای تنظیم کردن عناوین داینامیک سایت نیز تابع wp_title(); را در فایل header.php بین تگ های باز و بسته