Bootstrap JS Carusel в теме WordPress

25.01.2017 | Написав

Bootstrap в своем составе имеет ряд javascript’ов. Один из них – карусель. Если Вы используете в своей теме этот популярный фреймверк, то я покажу, как с помощью него на сайте можно сделать слайдер банеров. Делаем так:
1. Создадим отдельный тип контента «Банеры». Для этого в functions.php темы добавим код:

// новый тип записи "Банеры"
function create_bscarousel() {
    register_post_type('bscarousel', array(
        'labels' => array(
            'name'            =>  'Банеры',
            'singular_name'   =>  'Банеры',
            'add_new'         =>  'Добавить слайд',
            'add_new_item'    =>  'Добавить слайд',
            'edit'            =>  'Редактировать слайд',
            'edit_item'       =>  'Редактировать слайд',
            'new_item'        =>  'Новый слайд',
            'all_items'       =>  'Все слайды',
            'view'            =>  'Посмотреть',
            'view_item'       =>  'Посмотреть слайд',
            'search_items'    =>  'Искать слайды',
            'not_found'       =>  'Не найдено',
            ),
        'public' => true,
        'supports' => array( 'title', 'editor', 'custom-fields'),
        'taxonomies' => array( '' ),
        'has_archive' => true,
        'capability_type' => 'post',
        'menu_icon'   => 'dashicons-format-gallery',
        'rewrite' => array('slug' => 'slider'),
        ));
}
add_action( 'init', 'create_bscarousel' );

2. В папке темы создадим файл bootstrap_carousel.php с кодом:

<?php
    global $post;
    $args = array( 'numberposts' => -1, 'post_type' => 'bscarousel', 'orderby' => 'modified', 'order' => 'DESC' );
    $myposts = get_posts( $args );
    $tmpl_url = get_bloginfo('template_url');
	$i = 0;
	$j = 0;
?>
 
<div class="container-fluid slider-banners">
<div class="row-fluid">
<div id="carousel1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
 
<?php
foreach( $myposts as $post ) { 
	setup_postdata($post);
	$bscarousel_img=get_post_meta($post->ID, 'bscarousel_img', true);
	$bscarousel_link=get_post_meta($post->ID, 'bscarousel_link', true);
?>
 
<div class="item<?php if ($i == 0) echo ' active'; ?>">
<img class="img-responsive" src="<?php echo $tmpl_url.$bscarousel_img;?>" alt="thumb">
<div class="carousel-caption"><a href="<?php echo $bscarousel_link;?>"><?php echo $post->post_content; ?></a></div>
</div>          
 
 
<?php
$i++;
	}
wp_reset_postdata();
?>
 
</div>
<ol class="carousel-indicators">
<?php
foreach( $myposts as $post ) { 
?>
<li data-target="#carousel1" data-slide-to="<?php echo $j; ?>" class="<?php if ($j == 0) echo 'active'; ?>"> </li>
<?php
$j++;
}
?>
</ol>
<a class="left carousel-control" href="#carousel1" data-slide="prev"><span class="icon-prev"></span></a>
<a class="right carousel-control" href="#carousel1" data-slide="next"><span class="icon-next"></span></a>
</div>
</div>
</div>

3. В нужном месте темы вставим вызов нашей функции create_bscarousel():

<!-- слайдер банеров -->
<?php get_template_part('bootstrap_carousel'); ?>
<!-- /слайдер банеров -->

4. Осталось в консоли добавить в разделе «Банеры» нужно количество банеров. Путь к картинке банера указываем в произвольном поле bscarousel_img, ссылку с банера в bscarousel_link, текст банера – это текст записи.
В итоге у Вас получится такой слайдер, как крутится у меня на главной странице.

Рубрика: Веброзробка
Позначки:, ,
Коментарі читачів статті "Bootstrap JS Carusel в теме WordPress"

Немає коментарів.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.

Цей сайт використовує Akismet для зменшення спаму. Дізнайтеся, як обробляються ваші дані коментарів.