Как в WordPress вывести рубрику в виде слайдера

В этом уроке я вам расскажу, как создать в WordPress на ситстеме Bootstrap 4 вывод определенной рубрики слайдерером.

1. Создаем в нашей темы папку js и кидаем все содержимое в эту папку, которе мы должны будем скачать тут https://yadi.sk/d/vrdN7Ju38O-55g
2. Открываем в нашей темы footer.php (подвал) и до вставляем этот код — это код подключит наш скрипт, который мы скачали ранее. так настроим под себя

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<!-- bxSlider Javascript file -->
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="<?php echo get_template_directory_uri(); ?>/js/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
    $(document).ready(function(){
        $('.slider1').bxSlider({
            slideWidth: 1200,//ширина слайдера
            maxSlides: 5,//максимальное количество слайдов
            moveSlides: 1,//количество слайдов для смещения при анимации
            auto: false,//Автоматическая смена слайдов
            autoStart: false,//автоматический старт
            slideMargin: 10//отступ между слайдами
        });
    });
</script>

3. Этот код вставляем в нужное место, где мы хотим вывести рубрику ввиде слайдера

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="slider1">
    <?php
    $args = array('cat'=>'6','showposts' => 10,'order' => 'DESC' );
     query_posts($args);
     while ( have_posts() ) : the_post();
   ?>
    <div class="slide">
        <h3><?php the_title(); ?></h3>
     <?php the_content();?>
    </div>
      <?php endwhile; wp_reset_query(); ?>
        <?php $wp_query1 = $temp_query1; ?>
</div>

Настройки внешнего вида вы сможете изменить в файле jquery.bxslider.css

Оставить отзыв

Ваш e-mail не будет опубликован. Обязательные поля помечены *