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

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

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

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

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

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

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

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

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

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

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

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

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

برای ملاقات

مرحله 1: بسته بوت لودر را از حالت فشرده خارج کنید

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

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

مرحله 2: Bootstrap را پیکربندی کنید

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

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

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

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

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

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

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

مرحله 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 وردپرس echo get_stylesheet_uri () stylesheet راه اندازی را درج می کنیم. همچنین می توانید style.css را با افزودن کد زیر در بالای فایل header.php اضافه کنید:

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

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

<script src="

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

مرحله 6: نمایش پست های انتخاب شده

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

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

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

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

در این مرحله، دسته بندی ها را در سمت چپ صفحه فهرست می کنیم. برای این کار به چند نمونه از div ها با کلاس های بوت استرپ و تابع وردپرس 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=" 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(); و نام کاربری نویسنده پست را بررسی کنید.

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

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

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

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

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

خلاصه: نحوه طراحی قالب وردپرس با Totstrap

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

منبع: cloudways