Вопрос или проблема
У меня есть HTML-слидер Bootstrap, который отлично работает с подписями и всем остальным. Я хотел бы интегрировать его в свою тему Wp (это моя первая тема, так что я полный новичок). Я нашел код, который, кажется, помогает, но он показывает только три картинки и ничего не слайдится… если я жестко кодирую слайдер, он работает. Я понимаю, что могу оставить его жестко закодированным, но тогда это не будет настоящим WP 😉 СПАСИБО. Вот код:
functions.php – теперь весь файл.
function load_stylesheets()
{
wp_register_style('style', get_template_directory_uri() . '/style.css', array(), 1,'all');
wp_enqueue_style('style');
wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap-4.1.3-dist/css/bootstrap.min.css', array(), 1,'all');
wp_enqueue_style('bootstrap');
wp_register_style('fixedcss', get_template_directory_uri() . '/css/fixed.css', array(), 1,'all');
wp_enqueue_style('fixedcss');
wp_register_style('custom', get_template_directory_uri() . '/custom.css', array(), 1,'all');
wp_enqueue_style('custom');
}
add_action('wp_enqueue_scripts', 'load_stylesheets');
//загрузка скриптов
function load_javascript()
{
wp_register_script('custom', get_template_directory_uri() . '/js/custom.js', 'jquery', 1, true);
wp_enqueue_script('custom');
wp_register_script('bootstrapjs', get_template_directory_uri() . '/bootstrap-4.1.3-dist/js/bootstrap.min.js',array('jquery'), 1 , true);
wp_enqueue_script('bootstrapjs');
}
add_action('wp_enqueue_scripts', 'load_javascript');
// поддержка меню темы
add_theme_support('menus');
// регистрация меню, =>__ важна для переводов!
register_nav_menus
(
array('top-menu' =>__('Top Menu', 'theme')
)
);
//поддержка темы woocommerce
function customtheme_add_woocommerce_support()
{
add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'customtheme_add_woocommerce_support' );
//Слайдер изображений
function themename_slider_home_images_setup($wp_customize)
{
$wp_customize->add_section('home-slider-images', array(
'title' => 'Home Slider',
));
$wp_customize->add_setting('home-slider-first-image');
$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,
'home-slider-first-image',
array(
'label' => __( 'First Image', 'theme_name' ),
'section' => 'home-slider-images',
'settings' => 'home-slider-first-image'
)
)
);
$wp_customize->add_setting('home-slider-second-image');
$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,
'home-slider-second-image',
array(
'label' => __( 'Second Image', 'theme_name' ),
'section' => 'home-slider-images',
'settings' => 'home-slider-second-image'
)
)
);
$wp_customize->add_setting('home-slider-third-image');
$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,
'home-slider-third-image',
array(
'label' => __( 'Third Image', 'theme_name' ),
'section' => 'home-slider-images',
'settings' => 'home-slider-third-image'
)
)
);
}
add_action('customize_register', 'themename_slider_home_images_setup');`
front-page.php:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Индикаторы -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Обертка для слайдов -->
<div class="carousel-inner">
<div class="item active">
<img src="<?php echo get_theme_mod('home-slider-first-image');?>" alt="caption3!" >
</div>
<div class="item header-image"
<img src="<?php echo get_theme_mod('home-slider-second-image');?>" alt="caption2" >
</div>
<div class="item header-image">
<img src="<?php echo get_theme_mod('home-slider-third-image');?>" alt="I am a caption"
</div>
</div>
Вы правильно пометили свой вопрос с wp_enqueue_script
, но он не появляется в вашем коде, поэтому, вероятно, отсутствует библиотека jQuery и, возможно, bootstrap.
Попробуйте добавить следующее:
add_action('wp_enqueue_scripts', 'wp_add_jquery');
function wp_add_jquery () {
wp_register_script( 'my_jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
// Здесь добавьте другие скрипты (bootstrap и др.)
}
Проверьте подключение зависимостей bootstrap & Jquery.
Вам нужно загрузить свой стиль bootstrap & Jquery с помощью действия wp_enqueue_style и wp_enqueue_script.
Пример: В functions.php
function my_scripts() {
wp_enqueue_style('bootstrap4', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');
wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.3.1.slim.min.js', array( 'jquery' ),'',true );
wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', array( 'jquery' ),'',true );
wp_enqueue_script( 'boot3','https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array( 'jquery' ),'',true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
Также в вашем кастомном js нужно добавить это $('.carousel').carousel();
Я добавил
wp_deregister_script('jquery');
в мой functions.php и теперь это работает, предполагаю, что был конфликт с моим подключенным jquery.
.
Ответ или решение
Проблема с неработающим слайдером Bootstrap в теме WordPress
Для успешной интеграции слайдера Bootstrap в вашу тему WordPress необходимо правильно подключить все необходимые скрипты и стили, а также убедиться, что в коде слайдера нет синтаксических ошибок. Рассмотрим, в чем может заключаться проблема и как ее можно решить.
Возможные причины проблемы
-
Не подключены jQuery и Bootstrap: Ваша проблема, скорее всего, связана с неполным или неправильным подключением библиотек jQuery и Bootstrap.
-
Синтаксические ошибки в HTML: Обратите внимание на синтаксис элемента
<div class="item header-image"
, у которого отсутствует закрывающая скобка>
. -
Несовместимость версий: Возможна несовместимость версии jQuery или Bootstrap с вашей имплементацией.
Решение проблемы
-
Подключение необходимых библиотек
Убедитесь, что jQuery и Bootstrap правильно подключены через
wp_enqueue_scripts
. Используйте актуальные версии и подключайте их следующим образом:function my_scripts() { // Подключаем стили Bootstrap wp_enqueue_style('bootstrap4', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'); // Подключаем скрипты jQuery и Bootstrap wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.3.1.min.js', array(), null, true); wp_enqueue_script('popper', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', array('jquery'), null, true); wp_enqueue_script('bootstrap4', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array('jquery', 'popper'), null, true); } add_action('wp_enqueue_scripts', 'my_scripts'); // Не забудьте инициализировать слайдер function custom_js() { ?> <script type="text/javascript"> jQuery(document).ready(function($) { $('.carousel').carousel(); }); </script> <?php } add_action('wp_footer', 'custom_js');
-
Исправление HTML-кода
Убедитесь, что ваш HTML-код не содержит ошибок:
<div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="<?php echo get_theme_mod('home-slider-first-image'); ?>" alt="Caption 1"> </div> <div class="carousel-item"> <img src="<?php echo get_theme_mod('home-slider-second-image'); ?>" alt="Caption 2"> </div> <div class="carousel-item"> <img src="<?php echo get_theme_mod('home-slider-third-image'); ?>" alt="Caption 3"> </div> </div> </div>
-
Проверка конфликтов версии
Иногда бывают конфликты с уже подключенным jQuery в WordPress. Можно попробовать отключить дефолтный jQuery:
function deregister_script() { wp_deregister_script('jquery'); } add_action('wp_enqueue_scripts', 'deregister_script', 11);
Однако использование этой опции требует осторожности, так как может привести к ошибкам в других частях вашего сайта.
Заключение
Следуя предложенным здесь шагам, вы сможете решить проблему с неработающим слайдером в WordPress. Убедитесь, что все скрипты и стили корректно подключены и что нет синтаксических ошибок в вашем HTML-коде. Если у вас остаются вопросы или сомнения, рекомендуется обратиться к более опытному разрабатывателю за помощью.