ایجاد اسلایدر (Bootstrap) در وردپرس

یکی از ویژگی های اسلایدر جلب توجه کاربران سایت است . در چارچوب بوت استرپ اسلایدر پیش فرض به نام (Bootstrap Carousel) وجود دارد که می توانید نوشته ها و اخبار و محصولات را به سادگی نمایش دهید.

در پوسته وردپرس سایت سایتوس از همین اسلایدر پیش فرض بوت استرپ استفاده شده است که عنوان و تصاویر شاخص نوشته های وب سایت نمایش میدهد.

با کد زیر در هر جای از پوسته وردپرس قرار دهید:

/**
 * Code Bootstrap Carousel Slider (Create By Cytus.ir)
 */
 
 <?php $ro_slider_query= new WP_Query(array(
        'showposts' => '4'
));
if($ro_slider_query->have_posts()) : ?>
        <!--begin code slider-->
        <div id="carousel-generic" class="carousel slide" data-ride="carousel" style="margin-bottom:20px;">
                <ol class="carousel-indicators">
                        <li data-target="#carousel-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-generic" data-slide-to="2"></li>
            <li data-target="#carousel-generic" data-slide-to="3"></li>
                </ol>
                <div class="carousel-inner" role="listbox">
                        <!--begin slides -->
                        <?php
                        $is_first_item = true;
                        while($ro_slider_query->have_posts()) : $ro_slider_query->the_post();
                                $item_class = 'item';
                                if( $is_first_item ){ 
                                        $item_class .= ' active';
                                        $is_first_item = false;
                                } ?>
                                <div class="<?php echo $item_class; ?>">
                                        <?php the_post_thumbnail( 'full'); ?>
                                        <div class="carousel-caption">
                       <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                    </div>
                                </div>
                        <?php endwhile; ?>      
                </div>
        <a class="left carousel-control" href="#carousel-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-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>    
        </div>
<?php endif; wp_reset_query(); ?>

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *