آموزش طراحی قالب وردپرس با بوت استرپ

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

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

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

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

بیشتر بخوانید: آموزش صدور فاکتور در ووکامرس به صورت گام به گام

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

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

راه های استفاده از بوت استرپ در وردپرس

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

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

بیشتر بخوانید: خرید بهترین قالب های آموزشی وردپرس

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

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

آشنا کنیم.

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

• در ابتدا یک ارائه دهنده میزبان قابل اعتماد وردپرس را انتخاب و وردپرس را در دامنه خود نصب کنید.
• سپس برنامه Bootstrap را دانلود و از حالت فشرده خارج کنید.
• پس از انجام، با استفاده از یک سرویس گیرنده FTP مانند FileZilla متصل شوید.
• سپس به پوشه wp-content مراجعه کنید. بعد از آن وارد پوشه themes شوید.
• یک پوشه جدید در پوشه Themes ایجاد و نام آن را BootSTheme بگذارید. حالمحتویات بوت استرپ زیپ نشده را در این پوشه آپلود کنید.
• تقریباً هر نصب وردپرس حاوی فایل های php ،header.php ،index.php و style.css می باشد.
• حالا چهار فایل خالی با نام های بالا در پوشه BootSTheme بسازید.

بیشتر بخوانید: چگونه افزونه وردپرس طراحی کنیم؟

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

در پوشه BootSTheme، فایل style.css را باز کرده و کد زیر را در آن قرار دهید:

/*
Theme Name: MyTheme
Theme URI: https://cloudways.com
Description: Mytheme Built on bootstrap
Version:1.1
Author: Ahsan Parwez
Author URI: https://cloudways.com
*/

بیشتر بخوانید: آموزش ساخت صفحه سایت وردپرس با المنتور

مرحله 3: کپی کردن کد

برای این آموزش، ما نمی خواهیم از تمام فایل های CSS و JS ارائه شده در بسته بوت استرپ استفاده کنیم. برای شروع فرآیند توسعه، کد را در فایل bootstrap.min.css کپی کرده و در فایل style.css قرار دهید. در این مرحله، فایل style.css باید شبیه تصویر زیر باشد:

نکته: شما می توانید کد CSS کامل کوچک شده را از وب سایت بوت استرپ دریافت کنید.

بیشتر بخوانید: آموزش افزونه Advanced Database Cleaner

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

برای ساده کردن کارها، از یک قالب HTML استفاده خواهیم کرد. وردپرس دارای توابع داخلی get_header و get_footer می باشد که به صورت پیش فرض فایل ها را به ترتیب header.php و footer.php فراخوانی می کند.

با برش کد HTML از بالا تا اولین ظرف div شروع و آن را در فایل header.php قرار دهید:

فایل footer.php حاوی سایر کد خواهد بود:

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

<?php get_header(); ?>

<?php get_footer(); ?>

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

بیشتر بخوانید: چگونه با وردپرس فروشگاه اینترنتی بسازیم؟

مرحله 5: تنظیم هدر و پاورقی

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

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(). '/style.css' ?>">

اما این همه ماجرا نیست، ویژگی‌های جاوا اسکریپت در صفحه ما هنوز کار نمی ‌کنند و ما هیچ منوی کشویی را مشاهده نخواهیم کرد. برای فعال کردن این کار، باید فایل‌های js خود را به صورت مستقیم توسط URL در footer.php وارد کنیم. بنابراین شکافیست کد زیر را قبل از بسته شدن تگ بدنه قرار دهید:

<script src="../wp-content/themes/MyBSTheme/js/bootstrap.min.js"></script>

بیشتر بخوانید: جستجوی معنایی یا Semantic Search چیست؟

مرحله 6: نمایش پست های ویژه

در مرحله بعد از آموزش ساخت قالب وردپرس بوت استرپ، باید پست ها را به صورت پویا در صفحه اصلی فراخوانی کنیم تا به کاربران نمایش داده شوند. برای اینکار کافیست کد زیر را در index.php خود اضافه نمائید:

<?php
query_posts('posts_per_page=1');
while(have_posts()) : the_post(); ?>
<div>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?></p>
</div>
<?php endwhile; wp_reset_query(); ?>

بیشتر بخوانید: آموزش رفع خطای نمایش سایدبار زیر محتوا در وردپرس + دلایل بروز آن

مرحله 7: فهرست بندی دسته ها

حال در این مرحله قصد داریم دسته بندی ها را در سمت چپ صفحه لیست کنیم. برای اینکار باید چندین نمونه از یک div با کلاس های Bootstrap و تابع وردپرس wp_list_categories(); ایجاد کنیم. سپس باید کد زیر را در index.php قرار دهید:

<div class="panel panel-default panel-body">
<div>
<div>

<ul>
<?php wp_list_categories('orderby=name&title_li='); ?>
</ul>

</div>
</div>
</div>

با این کار دسته بندی ها بر اساس نام با یک افکت شناور زیبا فهرست می شوند.

بیشتر بخوانید: برگه در وردپرس چیست؟ مهمترین کاربردها و آموزش کار با برگه ها در وردپرس

مرحله 8: نمایش آخرین پست ها و نویسندگان

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

<div>

<?php while(have_posts()) : the_post(); ?>

<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<p><?php the_excerpt(); ?></p>
<p> posted by <?php the_author(); ?>

<?php endwhile; wp_reset_query(); ?>

</div>

توابع وردپرس the_author(); و نام کاربری نویسنده پست را بررسی کنید.

بیشتر بخوانید: آموزش حذف و نصب مجدد وردپرس بدون از دست رفتن اطلاعات

بیشتر بخوانید: آموزش رایگان 0 تا 100 ساخت، طراحی و راه اندازی فروشگاه اینترنتی

جمع بندی: چگونگی طراحی قالب ورپرس با توت استرپ

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

منبع: cloudways