Создаём собственную тему для WordPress (Часть 4)
Подключение Bootstrap 5 к WordPress можно сделать через enqueueing (правильный способ загрузки стилей и скриптов в WordPress). Мы будем использовать хук wp_enqueue_scripts
для добавления стилей и скриптов Bootstrap.
Шаг 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.
Комментариев: 0