Bootstrap to WordPress: Slider

Temalarınızda bootstrap kullanıyorsanız güzel bir slider sizi bekliyor, bu yazımda Bootstrap framework’unda bulunan Slider diğer adıyla carousel’i wordpress’e entegre ettim.

[button color=”btn-danger” size=”” link=”http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=carousel” icon=”” target=”false”]Demo[/button]

İlk olarak slider’ımızın orjinal kodlarını vererek başlayalım, bu kod bootstrap tarafından veriliyor.

<div id="myCarousel" class="carousel slide">
<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>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

Şimdide wordpress’e göre düzenleyerek entegre edelim. showposts=5&cat=2' kodunu kendinize göre değiştirmeyi unutmayın.

Shotposts: Slider’da gözükmesini istediğiniz maksimum yazı sayısı
Cat: Kategori id’si

<?php
$number = 0;
query_posts('showposts=5&cat=2');
if(have_posts()):
?>
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<?php while(have_posts()): the_post(); ?>
<li data-target="#myCarousel" data-slide-to="<?php echo $number++; ?>"></li>
<?php endwhile; ?>
</ol>

<!-- Carousel items -->
<div class="carousel-inner">
<?php while(have_posts()): the_post(); ?>
<div class="item">
<?php the_post_thumbnail('large'); ?>
<div class="carousel-caption">
<h4><?php the_title(); ?></h4>
<?php the_excerpt(); ?>
</div>
</div>
<?php endwhile; ?>
</div>

<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<?php endif; wp_reset_query(); ?>

Şimdide aktif sınıfını ekleyelim.

<script>
jQuery(document).ready(function(){
$(".carousel-indicators li:first").addClass("active");
$(".carousel-inner .item:first").addClass("active");
});
</script>

Son olarak Bootstrap’ın css ve js dosyalarını temanıza eklediğinizden emin olun. Dosyalar için tıklayın.

Yayınlayan

Uckan

1995 doğumlu, balıkesirde yaşayan Fenerbahçeli kendi halinde bir yazar..

“Bootstrap to WordPress: Slider” üzerine 8 yorum

      1. sorunu çözdüm hocam araştırdım netten slider dosyasına bunu ekledim
        var $ = jQuery.noConflict();
        $(document).ready(function() {
        $(‘#myCarousel’).carousel({ interval: 3000, cycle: true });
        });
        oldu

  1. Verdiğiniz kodları ekledim ve kategori id düzenledim ama olmadı sadece alt alta 1 2 3 4 5 diye yazıyor.

    1. Kodların çalışıp çalışmadığını kontrol etmek için tekrar denedim çalıştı. Kategori ayarlarını yapmayı unutmayın.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir