Подключение Bootstrap 5 к WordPress можно сделать через enqueueing (правильный способ загрузки стилей и скриптов в WordPress). Мы будем использовать хук wp_enqueue_scripts для добавления стилей и скриптов Bootstrap.

Можно подключить Bootstrap и традиционным способом, добавив необходимый код в header.php сайта.

Шаг 1: Подключение Bootstrap 5 в WordPress

Добавьте следующий код в файл functions.php вашей темы, чтобы подключить стили и скрипты Bootstrap 5:

function enqueue_bootstrap() {
    // Подключение стилей Bootstrap 5
    wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css');

    // Подключение скриптов Bootstrap 5 с поддержкой Popper.js
    wp_enqueue_script('bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_bootstrap');

Этот код делает следующее:

  • Подключает CSS-файл Bootstrap 5 с использованием CDN (Content Delivery Network).
  • Подключает JavaScript файл Bootstrap 5 с поддержкой Popper.js (нужен для работы некоторых компонентов Bootstrap, таких как всплывающие подсказки и модальные окна).

Шаг 2: Подключение собственной темы стилей

Если вы хотите добавить собственные стили поверх Bootstrap, создайте файл style.css в папке вашей темы и подключите его следующим образом:

function enqueue_custom_styles() {
    // Подключение основного файла стилей темы
    wp_enqueue_style('theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');

Шаг 3: Подключение Bootstrap в шаблонах

Теперь, когда Bootstrap подключён, вы можете использовать его классы в шаблонах WordPress. Например, вы можете обновить header.php для использования компонентов Bootstrap:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header class="bg-dark text-white p-3">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-dark">
                <div class="container-fluid">
                    <a class="navbar-brand" href="<?php echo esc_url(home_url('/')); ?>">
                        <?php bloginfo('name'); ?>
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <?php
                        wp_nav_menu(array(
                            'theme_location' => 'primary',
                            'container' => false,
                            'menu_class' => 'navbar-nav ms-auto',
                        ));
                        ?>
                    </div>
                </div>
            </nav>
        </div>
    </header>
    <div class="container mt-4">

Шаг 4: Использование компонентов Bootstrap

Теперь вы можете использовать компоненты Bootstrap в своих шаблонах. Например, для создания карточек или кнопок, просто добавляйте соответствующие классы Bootstrap:

<div class="card">
    <div class="card-body">
        <h5 class="card-title"><?php the_title(); ?></h5>
        <p class="card-text"><?php the_excerpt(); ?></p>
        <a href="<?php the_permalink(); ?>" class="btn btn-primary">Читать далее</a>
    </div>
</div>

Результат

Теперь на вашем сайте подключён Bootstrap 5, и вы можете использовать все его компоненты, такие как сетки, карточки, кнопки и модальные окна, чтобы создать современный и адаптивный дизайн WordPress.