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

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

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

افزودن بوت استرپ به وردپرس با شورت کد چه کاربردی داره؟

بوت استرپ و شورت‌کد به زبان ساده

بوت استرپ یک مجموعه آماده از استایل‌ها و ابزارهای رابط کاربریه. برای نمونه، به‌جای اینکه ظاهر یک دکمه رو از صفر با CSS بسازید، می‌تونید کلاس‌هایی مثل btn و btn-primary رو به اون بدید.

شورت‌کد هم یک عبارت کوتاه داخل کروشه‌ست که وردپرس اون رو به خروجی واقعی تبدیل می‌کنه. برای مثال، شورت‌کدی مثل [mw_bootstrap_button text="خرید محصول"] می‌تونه یک دکمه کامل رو نمایش بده. شما شورت‌کد ساده رو وارد می‌کنید و کدی که می‌سازیم، HTML امن و لازم رو تحویل مرورگر می‌ده.

چه وقت‌هایی استفاده از بوت استرپ انتخاب مناسبیه؟

• قالب یا پروژه شما از قبل بر پایه بوت استرپ ساخته شده.
• برای چند بخش مشخص به دکمه‌ها، هشدارها یا چیدمان‌های آماده بوت استرپ نیاز دارین.
• می‌خواید یک ظاهر هماهنگ رو در چند نوشته تکرار کنید.
• با بررسی و نگهداری کدهای چایلد تم مشکلی ندارین.

چه وقت‌هایی بلوک‌های خود وردپرس انتخاب بهتری هستن؟

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

قبل از شروع به چه چیزهایی نیاز دارین؟

ساخت چایلد تم برای جلوگیری از حذف تغییرات

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

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

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

بررسی تداخل احتمالی بوت استرپ با قالب وردپرس

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

مرحله اول: بارگذاری بوت استرپ در وردپرس

اضافه کردن فایل‌های CSS و JavaScript با تابع wp_enqueue

تابع wp_enqueue_style فایل‌های CSS و تابع wp_enqueue_script فایل‌های JavaScript رو به روش استاندارد وردپرس وارد صفحه می‌کنن. کد زیر رو به فایل functions.php چایلد تم اضافه کنید. اگه ابتدای فایل از قبل <?php داره، این عبارت رو دوباره وارد نکنید.

<?php
function mw_enqueue_bootstrap_assets() {
    wp_enqueue_style(
        'mw-bootstrap',
        'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css',
        array(),
        '5.3.8'
    );

    wp_enqueue_script(
        'mw-bootstrap-bundle',
        'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js',
        array(),
        '5.3.8',
        true
    );
}
add_action( 'wp_enqueue_scripts', 'mw_enqueue_bootstrap_assets' );

نسخه Bundle جاوا اسکریپت وابستگی‌های لازم برای بخش‌هایی مثل دکمه بستن هشدار رو همراه خودش داره. برای استفاده از دکمه‌های ساده، فقط CSS کافیه؛ ولی چون در ادامه هشدار قابل‌بستن می‌سازیم، فایل JavaScript رو هم بارگذاری می‌کنیم.

بارگذاری Bootstrap Icons برای استفاده از آیکون‌ها

Bootstrap Icons کتابخانه آیکون رسمی و جدا از بوت استرپه. این کد رو داخل همون تابع و قبل از آکولاد پایانی اون قرار بدید:

wp_enqueue_style(
    'mw-bootstrap-icons',
    'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css',
    array(),
    '1.13.1'
);

بعد از اضافه‌کردن این بخش، تابع شما سه فایل رو بارگذاری می‌کنه: استایل بوت استرپ، اسکریپت Bundle و استایل آیکون‌ها.

بررسی درست بارگذاری‌شدن فایل‌ها در سایت

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

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

اضافه کردن کد شورت‌کد به چایلد تم

کد زیر یک شورت‌کد با نام mw_bootstrap_button می‌سازه. اون رو بعد از کد قبلی داخل فایل functions.php چایلد تم قرار بدید:

function mw_bootstrap_button_shortcode( $atts ) {
    $atts = shortcode_atts(
        array(
            'text'  => 'مشاهده بیشتر',
            'url'   => '#',
            'color' => 'primary',
            'size'  => 'normal',
        ),
        $atts,
        'mw_bootstrap_button'
    );

    $allowed_colors = array( 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark' );
    $allowed_sizes  = array( 'small', 'normal', 'large' );

    $color = in_array( $atts['color'], $allowed_colors, true ) ? $atts['color'] : 'primary';
    $size  = in_array( $atts['size'], $allowed_sizes, true ) ? $atts['size'] : 'normal';

    $size_class = '';
    if ( 'small' === $size ) {
        $size_class = ' btn-sm';
    } elseif ( 'large' === $size ) {
        $size_class = ' btn-lg';
    }

    return sprintf(
        '<a class="btn btn-%1$s%2$s" href="%3$s">%4$s</a>',
        esc_attr( $color ),
        esc_attr( $size_class ),
        esc_url( $atts['url'] ),
        esc_html( $atts['text'] )
    );
}
add_shortcode( 'mw_bootstrap_button', 'mw_bootstrap_button_shortcode' );

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

این شورت‌کد چهار ویژگی داره. text متن دکمه، url مقصد لینک، color رنگ و size اندازه دکمه رو مشخص می‌کنه. برای نمونه می‌تونید این عبارت رو داخل نوشته قرار بدید:

[mw_bootstrap_button text="خرید محصول" url="https://example.com/product/" color="success" size="large"]

برای رنگ می‌تونید از primary، secondary، success، danger، warning، info، light یا dark استفاده کنید. اندازه هم باید یکی از مقدارهای small، normal یا large باشه.

محدود کردن ورودی‌ها و امن‌سازی خروجی شورت‌کد

در کد بالا رنگ و اندازه فقط از یک فهرست مجاز انتخاب می‌شن. تابع esc_url آدرس لینک، esc_html متن دکمه و esc_attr مقدار کلاس‌ها رو برای خروجی امن آماده می‌کنن. به کاربر اجازه ندید نام کلاس یا کد HTML دلخواه رو از راه شورت‌کد اجرا کنه.

استفاده از شورت‌کد دکمه داخل نوشته یا برگه

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

مرحله سوم: ساخت شورت کد جعبه هشدار بوت استرپ

تعریف نوع و متن پیام هشدار

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

function mw_bootstrap_alert_shortcode( $atts ) {
    $atts = shortcode_atts(
        array(
            'text'        => 'پیام شما',
            'type'        => 'info',
            'dismissible' => 'no',
        ),
        $atts,
        'mw_bootstrap_alert'
    );

    $allowed_types = array( 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark' );
    $type = in_array( $atts['type'], $allowed_types, true ) ? $atts['type'] : 'info';
    $is_dismissible = 'yes' === strtolower( $atts['dismissible'] );

    $classes = 'alert alert-' . $type;
    $button  = '';

    if ( $is_dismissible ) {
        $classes .= ' alert-dismissible fade show';
        $button = '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"></button>';
    }

    return sprintf(
        '<div class="%1$s" role="alert">%2$s%3$s</div>',
        esc_attr( $classes ),
        esc_html( $atts['text'] ),
        $button
    );
}
add_shortcode( 'mw_bootstrap_alert', 'mw_bootstrap_alert_shortcode' );

اضافه کردن دکمه بستن به جعبه هشدار

برای نمایش دکمه بستن، مقدار dismissible رو برابر yes بذارید. ویژگی data-bs-dismiss="alert" به اسکریپت بوت استرپ می‌گه که بعد از کلیک، کادر رو ببنده. اگه فایل Bundle مرحله اول بارگذاری نشده باشه، این دکمه کار نمی‌کنه.

استفاده از شورت‌کد هشدار در ویرایشگر وردپرس

[mw_bootstrap_alert text="تنظیمات با موفقیت ذخیره شد." type="success" dismissible="yes"]

برای پیام خطا مقدار type رو روی danger و برای اخطار روی warning بذارید. بهتره متن پیام کوتاه باشه و دقیقاً به کاربر بگه چه اتفاقی افتاده یا قدم بعدی چیه.

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

انتخاب آیکون از Bootstrap Icons

داخل سایت Bootstrap Icons آیکون موردنظرتون رو پیدا کنید. نام‌هایی مثل check-circle، download و cart قابل‌استفاده هستن. فقط بخش نام رو بردارید و پیشوند bi- رو داخل شورت‌کد ننویسید.

محدود کردن نام آیکون و ویژگی‌های قابل‌استفاده

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

function mw_bootstrap_icon_shortcode( $atts ) {
    $atts = shortcode_atts(
        array(
            'name'  => 'check-circle',
            'label' => '',
        ),
        $atts,
        'mw_bootstrap_icon'
    );

    $allowed_icons = array( 'check-circle', 'download', 'cart', 'heart', 'info-circle', 'exclamation-triangle' );
    $name = in_array( $atts['name'], $allowed_icons, true ) ? $atts['name'] : 'check-circle';

    if ( '' !== $atts['label'] ) {
        return sprintf(
            '<span><i class="bi bi-%1$s" aria-hidden="true"></i> %2$s</span>',
            esc_attr( $name ),
            esc_html( $atts['label'] )
        );
    }

    return sprintf(
        '<i class="bi bi-%1$s" aria-hidden="true"></i>',
        esc_attr( $name )
    );
}
add_shortcode( 'mw_bootstrap_icon', 'mw_bootstrap_icon_shortcode' );

اگه آیکون دیگه‌ای لازم دارین، نام دقیق اون رو به آرایه $allowed_icons اضافه کنید. استفاده از فهرست مجاز جلوی ورود کلاس‌های پیش‌بینی‌نشده رو می‌گیره.

نمایش آیکون کنار متن یا دکمه

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

[mw_bootstrap_icon name="download" label="دانلود فایل"]

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

چطور شورت کدها رو در ویرایشگر وردپرس وارد کنید؟

استفاده از بلوک شورت‌کد در ویرایشگر

داخل ویرایشگر روی دکمه افزودن بلوک بزنید، «شورت‌کد» رو جست‌وجو کنید و بلوک اون رو اضافه کنید. عبارت شورت‌کد رو بدون تگ <pre> یا <code> داخل بلوک بذارید. نمایش واقعی معمولاً در پیش‌نمایش یا صفحه منتشرشده دیده می‌شه.

استفاده از شورت‌کد داخل ابزارک یا بخش‌های قالب

در بخش‌های بلوکی قالب می‌تونید بلوک شورت‌کد رو اضافه کنید. اگه یک فایل PHP از قالب باید شورت‌کد رو اجرا کنه، توسعه‌دهنده می‌تونه از do_shortcode() استفاده کنه. ورودی این تابع باید از کد مطمئن بیاد و نباید متن کنترل‌نشده کاربر رو اجرا کنه.

پیش‌نمایش و بررسی نتیجه در موبایل و دسکتاپ

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

جلوگیری از تداخل بوت استرپ با قالب و افزونه‌ها

بارگذاری فایل‌ها فقط در صفحه‌های موردنیاز

اگه فقط چند برگه به بوت استرپ نیاز دارن، فایل‌ها رو در همون برگه‌ها بارگذاری کنید. برای نمونه، کد زیر فقط در برگه‌هایی با شناسه ۱۲ و ۳۴ اجرا می‌شه. شناسه‌ها رو با برگه‌های خودتون عوض کنید:

function mw_enqueue_bootstrap_assets() {
    if ( ! is_page( array( 12, 34 ) ) ) {
        return;
    }

    wp_enqueue_style(
        'mw-bootstrap',
        'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css',
        array(),
        '5.3.8'
    );

    wp_enqueue_style(
        'mw-bootstrap-icons',
        'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css',
        array(),
        '1.13.1'
    );

    wp_enqueue_script(
        'mw-bootstrap-bundle',
        'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js',
        array(),
        '5.3.8',
        true
    );
}
add_action( 'wp_enqueue_scripts', 'mw_enqueue_bootstrap_assets' );

این نسخه جای تابع مرحله اول رو می‌گیره؛ هر دو تابع رو هم‌زمان نگه ندارید.

جلوگیری از بارگذاری چندباره بوت استرپ

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

بررسی تغییر ناخواسته فونت، فاصله‌ها و دکمه‌های قالب

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

روش محدود کردن استایل‌ها به یک بخش مشخص

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

خطاهای رایج در افزودن بوت استرپ به وردپرس

شورت‌کد به‌جای خروجی، به‌صورت متن نمایش داده می‌شه

اول نام شورت‌کد و کروشه‌ها رو بررسی کنید. بعد مطمئن بشید کد PHP داخل چایلد تم فعال قرار گرفته و خطای نگارشی نداره. شورت‌کد رو داخل بلوک «کد» نذارید؛ چون این بلوک برای نمایش خود کده و اون رو اجرا نمی‌کنه.

استایل دکمه یا هشدار اعمال نمی‌شه

اگه HTML نمایش داده می‌شه ولی ظاهر بوت استرپ رو نمی‌بینید، فایل CSS بارگذاری نشده یا یک استایل دیگه اون رو بازنویسی کرده. زبانه Network و بخش Styles در Inspect رو بررسی کنید. کش رو هم پاک کنید.

منو، پاپ‌آپ یا دکمه بستن کار نمی‌کنه

این بخش‌ها به JavaScript نیاز دارن. بررسی کنید فایل bootstrap.bundle.min.js بدون خطا بارگذاری شده باشه. زبانه Console مرورگر هم خطاهای JavaScript رو نشون می‌ده. اگه چند نسخه بوت استرپ هم‌زمان اجرا می‌شن، اول این تداخل رو برطرف کنید.

آیکون بوت استرپ نمایش داده نمی‌شه

Bootstrap Icons فایل جداگانه‌ای داره و همراه CSS اصلی بوت استرپ بارگذاری نمی‌شه. آدرس فایل آیکون‌ها و نام کلاس رو بررسی کنید. نامی که داخل شورت‌کد می‌ذارید باید داخل فهرست مجاز تابع هم باشه.

ظاهر قالب بعد از افزودن بوت استرپ به‌هم می‌ریزه

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

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

نکات مهم برای سرعت و امنیت سایت

• اگه فقط CSS لازم دارین، فایل JavaScript رو بارگذاری نکنید.
• فایل‌ها رو فقط در صفحه‌هایی وارد کنید که از شورت‌کدها استفاده می‌کنن.
• رنگ، اندازه، نوع هشدار و نام آیکون رو با فهرست مجاز کنترل کنید.
• متن، آدرس و ویژگی‌های HTML رو با تابع مناسب وردپرس امن کنید.
• هیچ ورودی کاربر رو با eval یا تابع‌های مشابه اجرا نکنید.
• بعد از تغییر نسخه یا آدرس فایل‌ها، کش سایت و CDN رو پاک کنید.

فایل‌های اضافی می‌تونن زمان بارگذاری و رندر صفحه رو بیشتر کنن. برای بررسی نتیجه می‌تونید از راهنمای Google Lighthouse استفاده کنید. اگه اسکریپت‌ها جلوی نمایش سریع صفحه رو می‌گیرن، آموزش رفع JavaScript مسدودکننده رندر در وردپرس هم کمکتون می‌کنه.

آیا برای هر سایت وردپرسی به بوت استرپ نیاز دارین؟

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

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

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

جمع‌بندی

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

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

سؤال‌های متداول

تیم تولید محتوا

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