Слайдер карусели Bootstrap – CSS и JS не работают

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

Я думаю, что файл CSS или JS не загружается, как я могу это исправить.
Скриншот

functions.php здесь.

function pp_scripts() {
// Регистрация стиля Bootstrap
wp_enqueue_style( 'bootstrap_min', get_stylesheet_directory_uri().'/css/bootstrap.min.css' );

wp_enqueue_script('jquery');
// Регистрация скрипта Bootstrap
wp_enqueue_script( 'bootstrap_min', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '', true );
}
add_action( 'wp_enqueue_scripts', 'pp_scripts' );

add_action( 'init', 'custom_bootstrap_slider' );
/**
 * Регистрация настраиваемого типа поста.
 */
function custom_bootstrap_slider() {
    $labels = array(
        'name'               => _x( 'Slider', 'post type general name'),
        'singular_name'      => _x( 'Slide', 'post type singular name'),
        'menu_name'          => _x( 'Bootstrap Slider', 'admin menu'),
        'name_admin_bar'     => _x( 'Slide', 'add new on admin bar'),
        'add_new'            => _x( 'Add New', 'Slide'),
        'add_new_item'       => __( 'Name'),
        'new_item'           => __( 'New Slide'),
        'edit_item'          => __( 'Edit Slide'),
        'view_item'          => __( 'View Slide'),
        'all_items'          => __( 'All Slide'),
        'featured_image'     => __( 'Featured Image', 'text_domain' ),
        'search_items'       => __( 'Search Slide'),
        'parent_item_colon'  => __( 'Parent Slide:'),
        'not_found'          => __( 'No Slide found.'),
        'not_found_in_trash' => __( 'No Slide found in Trash.'),
    );

    $args = array(
        'labels'             => $labels,
        'menu_icon'      => 'dashicons-star-half',
                'description'        => __( 'Description.'),
        'public'             => true,
        'publicly_queryable' => true,
        'show_ui'            => true,
        'show_in_menu'       => true,
        'query_var'          => true,
        'rewrite'            => true,
        'capability_type'    => 'post',
        'has_archive'        => true,
        'hierarchical'       => true,
        'menu_position'      => null,
        'supports'           => array('title','editor','thumbnail')
    );

    register_post_type( 'slider', $args );
}

для файла шаблона

<?php  $slider = get_posts(array('post_type' => 'slider', 'posts_per_page'   => 5)); ?>

<?php div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Индикаторы -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Обертка для слайдов -->
  <div class="carousel-inner" role="listbox">
    <?php $slider = get_posts(array('post_type' => 'slider', 'posts_per_page' => 5)); ?>
      <?php $count = 0; ?>
      <?php foreach($slider as $slide): ?>
      <div class="item <?php echo ($count == 0) ? 'active' : ''; ?>">
        <img src="https://wordpress.stackexchange.com/questions/331806/<?php echo wp_get_attachment_url( get_post_thumbnail_id($slide->ID)) ?>" class="img-responsive"/>
      </div>
      <?php $count++; ?>
    <?php endforeach; ?>
  </div>

  <!-- Элементы управления -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>?>

Попробуйте изменить это:

// Регистрация стиля Bootstrap
wp_enqueue_style( 'bootstrap_min', get_stylesheet_directory_uri().'/css/bootstrap.min.css' );

На это:

// Регистрация стиля Bootstrap
wp_enqueue_style( 'bootstrap_min', get_template_directory_uri() .'/css/bootstrap.min.css' );

Ответ или решение

Для успешного функционирования Bootstrap Carousel Slider в вашем проекте, необходимо учитывать несколько важных аспектов, связанных с загрузкой CSS и JavaScript файлов. Давайте разберем возможные проблемы и их решения:

Исходная проблема

Ваш код включает функции для регистрации и загрузки стилей и скриптов Bootstrap, но, вероятно, имеет некоторые замеченные несоответствия, что вызывает неработоспособность слайдера. Основные моменты:

  1. Проблема загрузки стилей и скриптов. Убедитесь, что правильные файлы CSS и JS загружаются на вашей странице.
  2. Некорректная HTML-разметка слайдера. Проверьте, корректно ли закодированы HTML-структуры и подключен ли jQuery перед Bootstrap.

Решение

  1. Исправьте путь к стилям и скриптам:

    В вашем functions.php, возможно, стоит заменить пути к ресурсам. Вы предложили следующее изменение:

    // Замена пути получения стилей
    wp_enqueue_style( 'bootstrap_min', get_template_directory_uri() . '/css/bootstrap.min.css' );

    Это изменение корректно, так как get_template_directory_uri() будет возвращать ориентированный на шаблон каталог, где и хранится файл Bootstrap.

  2. Проверка на jQuery. Убедитесь, что jQuery загружается перед Bootstrap скриптом:

    wp_enqueue_script('jquery');
    wp_enqueue_script('bootstrap_min', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true);

    Обратите внимание, что я добавил ‘jquery’ в зависимые скрипты массива.

  3. Проверьте HTML-разметку на предмет валидности и корректного использования классов Bootstrap:

    <?php $slider = get_posts(array('post_type' => 'slider', 'posts_per_page' => 5)); ?>
    
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
     <!-- Индикаторы -->
     <ol class="carousel-indicators">
       <?php for ($i = 0; $i < count($slider); $i++): ?>
         <li data-target="#carousel-example-generic" data-slide-to="<?php echo $i; ?>" <?php if ($i == 0) echo 'class="active"'; ?>></li>
       <?php endfor; ?>
     </ol>
    
     <!-- Обертка для слайдов -->
     <div class="carousel-inner" role="listbox">
       <?php $count = 0; ?>
       <?php foreach ($slider as $slide): ?>
         <div class="item <?php echo ($count == 0) ? 'active' : ''; ?>">
           <img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($slide->ID)); ?>" class="img-responsive"/>
         </div>
         <?php $count++; ?>
       <?php endforeach; ?>
     </div>
    
     <!-- Управляющие элементы -->
     <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
       <span class="sr-only">Previous</span>
     </a>
     <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
       <span class="sr-only">Next</span>
     </a>
    </div>
  4. Проверка консоли браузера. Это поможет определить, если возникают ошибки при загрузке конкретных файлов или конфликтов между скриптами.

  5. Убедитесь, что все файлы доступны и известен их правильный путь на сервере. Проверьте директорию /css/ и /js/, чтобы убедиться, что файлы bootstrap.min.css и bootstrap.min.js действительно существуют и не имеют проблем с правами доступа.

Итог

Следуя вышеописанным шагам и проверке каждого аспекта, вы сможете устранить проблемы с работоспособностью Bootstrap Carousel Slider на вашем веб-сайте. Это поможет улучшить впечатление пользователей и обеспечит более функциональный интерфейс.

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

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