Слайдер Bootstrap не работает

Вопрос или проблема

У меня есть 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 необходимо правильно подключить все необходимые скрипты и стили, а также убедиться, что в коде слайдера нет синтаксических ошибок. Рассмотрим, в чем может заключаться проблема и как ее можно решить.

Возможные причины проблемы

  1. Не подключены jQuery и Bootstrap: Ваша проблема, скорее всего, связана с неполным или неправильным подключением библиотек jQuery и Bootstrap.

  2. Синтаксические ошибки в HTML: Обратите внимание на синтаксис элемента <div class="item header-image", у которого отсутствует закрывающая скобка >.

  3. Несовместимость версий: Возможна несовместимость версии jQuery или Bootstrap с вашей имплементацией.

Решение проблемы

  1. Подключение необходимых библиотек

    Убедитесь, что 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');
  2. Исправление 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>
  3. Проверка конфликтов версии

    Иногда бывают конфликты с уже подключенным jQuery в WordPress. Можно попробовать отключить дефолтный jQuery:

    function deregister_script() {
       wp_deregister_script('jquery');
    }
    add_action('wp_enqueue_scripts', 'deregister_script', 11);

    Однако использование этой опции требует осторожности, так как может привести к ошибкам в других частях вашего сайта.

Заключение

Следуя предложенным здесь шагам, вы сможете решить проблему с неработающим слайдером в WordPress. Убедитесь, что все скрипты и стили корректно подключены и что нет синтаксических ошибок в вашем HTML-коде. Если у вас остаются вопросы или сомнения, рекомендуется обратиться к более опытному разрабатывателю за помощью.

Оцените материал
Добавить комментарий

Капча загружается...