آموش استفاده از bootstrap در وردپرس در 8 مرحله کاربردی

ادمین 24 اسفند 1400آخرین به روز رسانی: 5 شهریور 1403

0 6 خواندن این مطلب 10 دقیقه زمان میبرد

bootstrap در وردپرس چگونه اضافه می‌شود؟ استفاده از افزونه بوت استرپ در وردپرس چه مزایایی دارد؟ در سال‌های گذشته، ایجاد سایت‌های سازگار و ریسپانسیو با نسخه موبایلی، چندان رواج نداشت. امروزه اما با توجه به افزایش استفاده از گوشی‌های موبایل، بسیاری از افراد برای بازدید از سایت‌ها از تلفن همراه استفاده می‌کنند. در این حال، شما برای اینکه اطمینان یابید که تمامی کاربران می‌توانند از سایت شما بدون هیچ مشکلی بازدید کنند باید یک سایت ریسپانسیو داشته باشید.

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

سرور مجازی آراز

bootstrap (بوت استرپ) یکی از فریم ورک‌های محبوب برای ایجاد سایت‌های ریسپانسیو است. به همین دلیل، افراد تلاش می‌کند تا استفاده از bootstrap در وردپرس را به برنامه کاری خود اضافه کنند.

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

پشتیبانی از سایت

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

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

اگر می‌خواهید از جزییات و موارد خدمات دواپس بیشتر بدانید، پیشنهاد می‌کنیم به وب سایت ما سرزده و یا با شماره‌ی 86084594-021 تماس بگیرید.

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

استفاده از بوت استرپ در وردپرس مزایای بی‌شماری به همراه دارد که در ادامه به برخی از مهم‌ترین آنها اشاره می‌کنیم؛ با ما همراه باشید.

به‌طورکلی، Bootstrap (بوت استرپ) یک پروژه منبع باز است که به دلیل پشتیبانی قوی که دارد با حداقل باگ‌ها ممکن روبه‌روست.
ابزارهای متعددی برای بازنشانی، شبکه‌ها، typography، پرسش‌های رسانه‌ای و… دارد که به شما امکان می‌دهد تا حدامکان آن را گسترش دهید.

کاربران بسیاری از Bootstrap استفاده می‌کنند؛ به همین دلیل، کاملا طبیعی است که شما با مجموعه‌ای عظیم از آموزش‌ها و دموها برای کار با آن سروکار داشته باشید. در نتیجه اینکه شما عموما مشکلی با این برنامه نخواهید داشت و سوالات شما با یک سرچ ساده برطرف می‌شوند.

Bootstrap (بوت استرپ) برای ساخت وب سایت‌های mobile-responsive بسیار کاربردی خواهد بود.

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

ادغام سازی bootstrap در وردپرس به راحتی امکان‌پذیر است. برای اینکار، تنها کافیست از آموزش‌های اصولی استفاده کنید.
می‌توان از صدها افزونه جاوا اسکریپت/جی کوئری که قبلاً با بوت استرپ ادغام شده‌اند، استفاده کرد.

سیستم شبکه Bootstrap 4 در بالای flexbox ساخته شده است. این موضوع سبب می‌شود تا شبکه انعطاف پذیرتری برای توسعه‌دهندگان به وجود بیاید.

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

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

پیش از اینکه آموزش اضافه کردن bootstrap در وردپرس را آغاز کنیم، لازم است مواردی را که در این مسیر، بدانها نیاز پیدا می‌کنید را موردبررسی قرار دهیم.

اولین فایل مورد نیاز style.css است. این فایل CSS شامل سبک‌هایی برای theme است. از همه مهم‌تر، این فایل وظیفه ویژه‌ای برعهده دارد؛ تقویت meta information در مورد theme. به یاد داشته باشید که meta information باید در ابتدا فایل CSS وجود داشته باشد.
فایل دیگر مورد نیاز index.php است که فایل اصلی قالب وردپرس است.

فایل‌های اختیاری زیادی وجود دارد، اما برای تم ساده مبتنی بر بوت استرپ ما فقط فایل‌های زیر را اضافه می‌کنیم:

قسمت‌های سرصفحه و پاورقی قالب وردپرس (header.php و footer.php) را که در هر صفحه از پوسته نمایش داده می‌شوند، قرار دهیم.
functions.php؛ محلی که کدی برای بارگیری تم سفارشی، سبک‌ها و اسکریپت های بوت استرپ و… نوشته می‌شوند.

به هیچ وجه این فرصت طلایی را از دست ندهید! با کلیک کردن بر روی بهترین سرور ابری، اطلاعات بیشتری دریافت کنید تا بیشتر از ما مطمئن شوید!

مرحله 1 افزودن bootstrap در وردپرس ؛ ایجاد پوشه تم

ابتدا به پوشه نصب وردپرس خود رفته و به بخش wp-content -> themes وارد شوید. در این قسمت، باید یک پوشه برای موضوع خود ایجاد کنید. ما در این مرحله، آن را bs-theme می‌نامیم.

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

مرحله 2؛ اضافه کردن style.css

پس از انجام مرحله اول، فایل موردنیاز خود را ایجاد کنید؛ style.css. این فایل، مکانی است که کد CSS سفارشی در آن قرار می‌گیرد. در بالای stylesheet document باید فایل meta information را در مورد موضوع خود، میان نظرات CSS اضافه کنید. به یاد داشته باشید که جانشین‌های <THEME_URI>، <AUTHOR_NAME> و <AUTHOR_URI> را جایگزین کنید. البته با ارزش‌های مربوط به پروژه خود.

/*  

Theme Name: BS 4 Theme

Theme URI: <THEME_URI>

Description: A Theme for WordPress with Bootstrap for styling.

Author: <AUTHOR_NAME>

Author URI: <AUTHOR_URI>

Version: 1.0

*/

پس از انجام تمامی موارد بالا، وردپرس می‌تواند اطلاعات تم شما را در قسمت مدیریت نمایش دهد. البته شما می‌توانید سبک‌های سفارشی خود را در زیر نظرات meta information اضافه کنید. برای مثال، اجازه دهید چند قانون CSS برای استایل کردن<body> اضافه کنید:

@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
body {

  padding-top: 4.5rem;

  font-family: 'Montserrat','Helvetica Neue',Arial,sans-serif;

  color: #001A33;

}

مرحله 3 بوت استرپ در وردپرس ؛ ایجاد بخش Header

بیایید با ایجاد header.php در پوشه themes شروع کنیم. در ادامه مطالب زیر را اضافه کنید:

<!DOCTYPE html>

<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"> <![endif]-->

<!--[if IE 8]><html class="no-js lt-ie9"> <![endif]-->

<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

    <meta name="description" content="">

    <meta name="author" content="">

    <meta name="viewport" content="width=device-width">

    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    <?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">

    <a class="navbar-brand" href="#">

      <?php bloginfo('name'); ?>

    </a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse">

      <ul class="navbar-nav mr-auto">

        <li class="nav-item active">

          <a class="nav-link" href="/">

            Home <span class="sr-only">(current)</span>

          </a>

        </li>

      </ul>

    </div>

  </nav>

meta information در بخش Header

در کد بالا، بیشتر meta information برای بخش head HTML با استفاده از تگ‌های مختلف وردپرس، مانند bloginfo (‘name’) برای دریافت نام سایت و () wp_title برای دریافت عنوان صفحه به () wp_head اضافه شده است. اکشن wp_head توسط وردپرس برای افزودن پیوندها و سایر قابلیت‌ها به بخش head استفاده می‌شود.

ما همچنین از کلاس‌های مختلف Bootstrap برای ایجاد یک navigation bar پاسخگو استفاده کرده‌ایم. navigation bar پویا نیست؛ یعنی با عملکرد منوی وردپرس ادغام نشده است. این بدان معناست که ما نمی‌توانیم یک منوی وردپرس در قسمت مدیریت ایجاد کنیم و آن را در قسمت جلویی وب سایت خود مشاهده کنیم.

دادن قدرت وردپرس به navigation bar استاتیک بوت استرپ قدم بعدی ما خواهد بود.

به هیچ وجه این فرصت طلایی را از دست ندهید! با کلیک کردن بر روی سرور مجازی ابری ایران، اطلاعات بیشتری دریافت کنید تا بیشتر از ما مطمئن شوید!

مرحله 4: یکپارچه سازی Bootstrap Navigation با منوی وردپرس

برای انجام اینکار، به یک walker class وردپرس نیاز داریم. این فایل به توسعه‌دهندگان امکان می‌دهد تا از ساختارهای داده tree-like با هدف ارائه نشانه گذاری HTML عبور کنند. چند walker class بوت استرپ در اینترنت موجود است. برای این آموزش، با Dominic Businaro’s BS4navwalker که به صورت رایگان در GitHub در دسترس است، آشنا می‌شویم.

پس از آن، bs4navwalker.php را دانلود کرده و آن را در فهرست اصلی تم خود ذخیره کنید. (قبلاً در این آموزش، آن را bs-theme نامیدیم). در مرحله بعد، ما یک فایل functions.php در پوشه ریشه تم ایجاد کرده و این خط کد را می‌نویسیم:

require_once('bs4navwalker.php');

اکنون می‌توانیم از Bootstrap navigation walker class در فایل‌های تم خود استفاده کنیم.

تغییر عنصر برای افزودن bootstrap در وردپرس

نشانه گذاری عنصر nav را که به تازگی نوشتیم پیدا کرده و آن را به صورت زیر تغییر می‌دهیم:

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">

  <a class="navbar-brand" href="#">

    <?php bloginfo('name'); ?>

  </a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <?php

    wp_nav_menu([

      'menu'            => 'primary',

      'theme_location'  => 'menu-1',

      'container'       => 'div',

      'container_id'    => 'navbarCollapse',

      'container_class' => 'collapse navbar-collapse',

      'menu_id'         => false,

      'menu_class'      => 'navbar-nav mr-auto',

      'depth'           => 0,

      'fallback_cb'     => 'bs4navwalker::fallback',

      'walker'          => new bs4navwalker()

    ]);

  ?>

کد بالا فرض می‌کند که ما قبلاً یک منو در قسمت مدیریت وردپرس ایجاد کرده‌ایم و چند صفحه در پایگاه داده وردپرس ذخیره شده است. برای نمایش نوار ناوبری خود، از تابع ()wp_nav_menu استفاده کنید. مقادیر منو و پارامترهای theme_location را که به () wp_nav_menu می‌دهیم از تنظیمات منوی وردپرس گرفته شده‌اند. این اطلاعات را باید قبلا در قسمت مدیریت ایجاد می‌کردیم.

مقادیر پارامترهای container، container_id، و container_class از کلاس‌های Bootstrap و ویژگی CSS id در عنصر div گرفته شده‌اند که عنصر ul حاوی آیتم‌های لیست پیوندهای پیمایش ما را می‌پیچد. مقدار پارامتر menu_class از کلاس Bootstrap در عنصر ul می‌آید.

مقدار پارامتر عمق نشان می‌دهد که منوی پیمایش ما قرار است چند سطح سلسله مراتبی داشته باشد. ما این را روی 0 قرار داده‌ایم که مقدار پیش فرض است و مخفف همه است.

پارامتر واکر در اینجا بسیار مهم است و ما آن را روی نمونه جدیدی از کلاس bs4navwalker قرار داده‌ایم که مسئول رندر کردن نشانه‌گذاری ناوبری Bootstrap است.

مرحله 5 استفاده از bootstrap در وردپرس ؛ ایجاد بخش Footer

مرحله بعدی ایجاد فایل footer.php و اضافه کردن محتوای زیر است:

<footer> 

    </footer>

    < ?php wp_footer(); ?>

  </body>

</html>

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

توجه به این نکته مهم است که بسیاری از افزونه‌ها از ()wp_head و () wp_footer برای قرار دادن عناصر مورد نیاز در ابتدا و پاورقی صفحه استفاده می‌کنند. بنابراین، باید مطمئن شوید که هر دو را همانطور که در این آموزش نشان داده شده است اضافه کنید. انجام این کار از شکستن عملکرد این افزونه‌ها در هنگام فعال شدن موضوع جلوگیری می‌کند.

مرحله 6؛ افزودن فایل قالب index.php

index.php دومین فایل مورد نیاز برای هر قالب وردپرس است، پس بیایید جلو برویم و آن را ایجاد کنیم. سپس باید مطالب زیر را اضافه کنیم:

<?php get_header(); ?>

  <!-- Other Content here -->

<?php get_footer(); ?>

استفاده از () get_header و () get_footer به وردپرس دستور می‌دهد که قالب‌های ایجاد شده قبلی header.php و footer.php را در داخل index.php قرار دهد.

مرحله 7 افزودن بوت استرپ در وردپرس ؛ اضافه کردن حلقه وردپرس

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

<div>

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

    <h2>

      <a href="<?php the_permalink() ?>">

        <?php the_title(); ?>

      </a>

    </h2>

    <?php the_content(); ?>

  <?php endwhile; else: ?>

    <p>There no posts to show</p>

  <?php endif; ?>

</div>

این چیزی است که در بالا اتفاق می‌افتد؛ با فراخوانی () have_posts بررسی می‌کنیم که آیا پستی وجود دارد یا خیر. با استفاده از حلقه while، روی تمام پست‌های موجود حلقه می‌زنیم. در نهایت عنوان و محتوای هر پست را نشان می‌دهیم. همچنین می‌توانیم اطلاعات اضافی مانند تاریخ انتشار پست، نویسنده پست، نظرات مرتبط با هر پست و… را دریافت کنیم.

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

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

برای اینکه به تم خود یک ظاهر بوت استرپ بدهیم، باید فایل‌های بوت استرپ را در پروژه خود قرار دهیم. بیایید فایل ZIP Bootstrap را از getbootstrap.com گرفته و فایل‌ها را در موضوع خود کپی کنیم. (برای اهداف سازمانی، می‌توانیم پوشه‌های css و js را به پروژه خود اضافه و فایل‌های مربوطه را در پوشه مناسب قرار دهیم.)

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

- bs-theme

  - style.css

  - footer.php

  - functions.php

  -  header.php

  - index.php

  - single.php

  - css

      - bootstrap.min.css

  - js

    - vendor

      - bootstrap.bundle.min.css

در مرحله بعد، موارد زیر را انجام خواهیم داد:

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

باز کردن functions.php

بیایید با باز کردن functions.php و اضافه کردن کد زیر شروع کنیم:

<?php




function themebs_enqueue_styles() {




  wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css' );

  wp_enqueue_style( 'core', get_template_directory_uri() . '/style.css' );




}

add_action( 'wp_enqueue_scripts', 'themebs_enqueue_styles');




function themebs_enqueue_scripts() {

  wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/vendor/bootstrap.bundle.min.js', array( 'jquery' ) );

}

add_action( 'wp_enqueue_scripts', 'themebs_enqueue_scripts');

بررسی روش‌های مختلف وردپرس

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

()wp_enqueue_style: این متد شیوه نامه ارسال شده را به عنوان پارامتر در صف قرار داده و بارگذاری می‌کند. در کد بالا، ما از آن برای بارگیری شیوه‌نامه بوت استرپ و فایل CSS سفارشی خود استفاده می‌کنیم.
()wp_enqueue_script: این متد یک فایل اسکریپت را در صف قرار داده و بارگذاری می‌کند. ما از آن برای بارگیری بسته جاوا اسکریپت Bootstrap استفاده کرده‌ایم که کتابخانه jQuery را به عنوان یک وابستگی نشان می‌دهد. jQuery قبلاً همراه با وردپرس بود، بنابراین نیازی به بارگیری آن با استفاده از URL نداریم. (وردپرس دقیقاً می‌داند که آن را از کجا دریافت کند.)
()get_template_directory_uri: این روش URI دایرکتوری تم فعال شده فعلی را دریافت می‌کند.
add_action(‘wp_enqueue_scripts’, ‘…’): این روش توابع ما را به اکشن wp_enqueue_scripts متصل می‌کند (در هنگام صف‌بندی سبک‌ها و اسکریپت‌هایی که باید در قسمت جلویی وب‌سایت ظاهر شوند استفاده می‌شود).

این موضوع اکنون با ظاهر براق Bootstrap آن است:

در این آموزش، نحوه ایجاد یک تم ساده وردپرس را دیدیم که آخرین نسخه Bootstrap را ادغام می‌کند. با استفاده از این مهارت جدید توسعه دهنده خود، اکنون آماده هستید که قالب وردپرس عالی و مبتنی بر بوت استرپ خود را ایجاد کنید و آن را با جهان به اشتراک بگذارید!

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