Sitenize Kolayca Slider Ekleyin

SliderMerhaba arkadaşlar. Bu makalemde an itibariyle giriş sayfamızda da kullandığımız sliderın kodlarını paylaşacağım. Gayet şık ve hızlı olan tasarımımızı flexslider.js ile kusursuz bir sunuma döndüreceğiz.

Ayrıca WordPress kullanıcılarını da düşündük. Bu makalemde aynı sliderı WordPress içerisinde nasıl kullanabileceğinizi göstereceğim. Böylece gereksiz slider eklentileriyle sitenizi yavaşlatmaya son vereceksiniz.

İşlem sıramız şöyle olacak ; Ek Dosyalar > HTML Kodları > CSS Kodları > WordPress Eklentisi

ÖRNEĞİ GÖRÜNTÜLE

Yapacağımız slider tam olarak neye benzeyecek diyorsanız ;

Slider

Hadi yavaş yavaş işe koyulalım.

1.jQuery ve Flexslider.JS’yi sitemize dahil edelim

Aşağıdaki kodu <head></head> tagları arasına koyarak işleme başlayabiliriz. Böylece jQuery scriptleri sitemizde aktif olacak.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Flexslider.JS’ye ihtiyacımız olacak. Onu da burayı sağ tıklayıp Farklı Kaydet diyerek indirebilirsiniz.

Ve son olarak sliderı sağa sola kaydırmamızı sağlayan görsele ihtiyaç duyacağız. Onu da aşağıdan download edebilirsiniz.

2.CSS ile tasarımımızı tamamlayalım

Aşağıdaki CSS kodları sliderın temelini oluşturmakta. O yüzden eksiksiz olarak ekleyin. Satır 22’de üstteki görseli kullanıyoruz. O kısmı kendinize göre düzenleyebilirsiniz.

.flexslider {margin:20px auto !important; padding: 0; opacity: 1; -webkit-transition: opacity 1s ease; width:690px;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}
.flexslider ol,ul,li{margin:0; padding:0; list-style: none;}
.flexslider .slides img {width: 690px; height:270px; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

.slides div{background-color:black; opacity:0.7; bottom:0px; padding:10px; position:absolute ;font:13px Tahoma; text-align:center; border-radius:0 5px 0 0;}
.slides div a{color:white; text-decoration:none;}

.no-js .slides > li:first-child {display: block;}

.flexslider {background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}

.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
.flex-direction-nav .flex-prev {left: -36px;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%;display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
 .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
 .flex-direction-nav .flex-next {opacity: 1; right: 0;}
}

.loading .flexslider {opacity: 0 !important;}
.loading:before{content: 'Listeleniyor'; display: block; margin: 100px 0 0; text-align: center; color: black; font-weight: bold; font-size: 30px; opacity: 0.3;}

3.Nerede gösterilsin?

Şimdi son işleme geldik. Sliderı yayınlayacağınız yeri seçtikten sonra aşağıdaki kodları o kısma direkt olarak yapıştırın. Örnek içerisine iki adet sunum da ekledim.

<section class="loading">
<div class="flexslider">
<ul class="slides">
<li><div><a href="http://www.adobewordpress.com/photoshop-ile-gun-dogumu/" rel="bookmark" target="_blank">Photoshop ile Gün Doğumu</a></div><a href="http://www.adobewordpress.com/photoshop-ile-gun-dogumu/" rel="bookmark" target="_blank"><img width="690" height="270" src="http://www.adobewordpress.com/wp-content/uploads/2013/06/sun-set-photoshop.jpg" alt="Gün Doğumu" /></a></li>
<li><div><a href="http://www.adobewordpress.com/photoshop-ile-guvenlik-kamerasi-goruntusu/" rel="bookmark" target="_blank">Photoshop ile Güvenlik Kamerası Görüntüsü Nasıl Yapılır?</a></div><a href="http://www.adobewordpress.com/photoshop-ile-guvenlik-kamerasi-goruntusu/" rel="bookmark" target="_blank"><img width="690" height="270" src="http://www.adobewordpress.com/wp-content/uploads/2013/06/photoshop-security-cam.jpg" alt="Photoshop ile Güvenlik Kamerası Görüntüsü" /></a></li>
</ul>
</div>
</section>
<script defer src="jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('section').removeClass('loading');
}
});
});
</script>

WordPress kullanıcıları ne yapacak?

İşlem çok kısa ve basit. Yukarıdaki 3. adımı direkt olarak atlayın. Sliderı anasayfanızda yayınlayacağınızı varsayıyorum. Temanızın içindeki index.php dosyasını açtıktan sonra istediğiniz alana kodlarımızı giriyoruz.

<section class="loading">
<div class="flexslider">
<ul class="slides">
<?php query_posts('orderby=date&order=DESC&showposts=10'); ?>
<?php while (have_posts()) : the_post(); ?>
<li><div><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></div><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_post_thumbnail();?></a></li>
<?php endwhile; wp_reset_query()?>
</ul>
</div>
</section>
<script defer src="jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('section').removeClass('loading');
}
});
});
</script>

Bu kadar. Eğer belirli bir kategoriden yayın yapmak istiyorsanız 4. satırı aşağıdaki gibi değiştirin. Yine aynı satırdan showposts alanını değiştirerek yayın sayısıyla oynayabilirsiniz.

<?php query_posts('cat=KATEGORI-ID&orderby=date&order=DESC&showposts=10'); ?>

Download

Eğer sliderı eklemeyi başaramadıysanız, kolay yolu var. Buyrun sliderı buradan  indirin ve kullanın.

Download Adresi : http://www.adobewordpress.com/wp-content/uploads/files/aw-slider.zip
Zip Şifresi : adobewordpress.com

Ve son

HTML5 ve tüm mobil cihazlara uyumlu sliderımız hazır. Güle güle kullanın.

Bu da ilginizi çekebilir  WordPress'te Resimlere Filigran Ekleme


  • Mert Köseoğlu

    Teşekkürler çok faydalı oldu bu

  • JasonBaba

    Süper! Tam aradığım şey.

  • Helal site de güzel bilgilerde..

  • Cem

    hocam ne yaptıysam çalıştıramadım wordpress olarak kullanmak istiyorum yardımcı olursanız sevinirim

    • Hata mı aldınız?

      • Cem

        her şeyi denedim ancak sadece Listeleniyor diye bir yazı çıktı alanda o kadar 🙂

        • mücahit arıgün

          aynen bendede listeleniyor diye bi yazı çıkıyor o kadar nasıl yapacağız

  • Cem

    Hocam slider sorunun jquary çakışmasından dolayı kaynaklandığı buldum ancak bu sorunun nasıl ortadan kalkacağı konusunda bir fikrim yok jquary hakkında da pek bir bilgim yok yardımcı olabilirseniz sevinirim

  • Selman Ferid Ilgar

    hocam bu harflarinizi ayarlarmısınız? bazılarında boşluk var tam anlaşılmıyor teşekkür ederim

  • Arkadaşlar örnek bağlantı çalışmıyormuş hiç uyarmıyorsunuz 🙂 Geçtiğimiz günlerde test sayfalarının ek dosyalarını yeniden isimlendirmiştim. Dolayısıyla slider da bozulmuş. Şimdi düzeltmeyi yaptım. Artık çalışıyor.

    @selmanferidilgar:disqus Ne demek istediğinizi anlayamadım. Adobewordpress’in yazı tipiyle ilgili bir sorun mu yaşıyorsunuz?

    @7de5262b58d77af2d7b0bff0da4e30ed:disqus 1.5.1 yeterli olacaktır. Sitenizdeki aktif jQuery’i güncelleyin ya da direkt olarak 1.5.1’i include edin.

  • Onur

    Verilen kodları denedim olmadı,verdiğiniz dosyayı indirip kodları denedim hata vs yok sadece listeleniyor yazıyor bekliyorum fakat tık yok ?

  • coskun

    internet exploerer da çalışmıyor, çözümü varmı ?

  • ibrahim webtasari.net

    evet expolerde görüntü çıkıyor fakat ilerlemiyor??

  • ufuksonmezuA

    hocam başka slider da eklerseniz harika olur

  • feyzullah

    adamsın adamın dibisin kare köküsün devamı gelir inş 😀

  • kadir

    mrb hocam ekleme tmm fakat sağa sola kaydırmada oklar çıkmıyo fi ve fl yazıyor yardımcı olursanız sevinirim teşk.

  • Cenk

    internet explorer örnek hatalı nasıl düzeltebilirim?

  • 24saatonline .

    Harika paylaşım için teşekkürler, fakat şöyle bir sorunla karşılaştım; Chrome, Mozilla ve İE-9 ve üzeri tüm browserlar da sorunsuz oynayan slider İE-9 altı sürümlerde oynatma sorunu yaşıyor. Bu sorunu nasıl düzeltebilirim?

  • özer

    hocam acil yardımına ihtiyacım var çok güzel oldu ama page sayfalarında çalışmıyor :s listeleniyor yazısı çıkıyor bir tek :S

    • Page sayfalarında query post olmadığı için olabilir. Google’da “wordPress list posts on page” diye aratırsan bir şeyler çıkacaktır.

      • özer

        hocam yazdım bi sürü sitede farklı şeyler var. Siz bir kaynak verebilirmisiniz?

      • özer

        hocam lütfen yardımcı olun siteye koyduk şimdi kaldırmak istemiyorum

  • 24saatonline .

    24saatonline . • 2 ay önce

    Harika paylaşım için teşekkürler, fakat şöyle bir sorunla karşılaştım; Chrome, Mozilla ve İE-9 ve üzeri tüm browserlar da sorunsuz oynayan slider İE-9 altı sürümlerde oynatma sorunu yaşıyor. Bu sorunu nasıl düzeltebilirim?

  • ice_berk

    kardeş iyi geceler. genelde olan problem bnde de oldu “Listeleniyor” diye yazı çıkıyor ve sürekli o şekilde kalıyor. nasıl düzelir bu problem.

  • unayir

    hocam eline sağlık çok güzel kendi siteme ekledim ama sliderin altında çıkan yuvarlakları kapatmak istiyorum ben nasıl yapabilirim yardımcı olur musun

  • Hibrahimozan

    Allah senden razı olsun hocam hakkını helal et yeni işimde ilk sitemde ki tek eksiğimi sayende tamamladım

    • Ayşegül Gülen

      Merhabalar. bende ilk işimde böyle bir şeyle karşılaştım fakat sitemde uygulayamadım. WordPress ile yapıyorum. Yardımcı olabilir misniz acaba?

  • Metin

    Hocam ellerinize sağlık, herkesin rahatlıkla istifade edebileceğini düşünüyorum. Fakat benim bir sorum olacak. HTML bir sitede bu slider ı kullanmak istesek. Her link için ayrı ayrı image değiştirmek değilde. Eski Flash “xml” uygulamaları gibi. Tek bir yerden müdahaleyle slider ımızdaki imajların değişmesini sağlayabilirmiyiz. Tşk.

  • Gökhan

    WordPress’te neyi nereye ekleyeceğim hiç anlamadım, Biraz daha alt seviye için anlatabilir misiniz lütfen çok ihtiyaç var. Dosyaları indirip ftp çeşitli yerlere attım css kodlarını css dosyasına ekledim index.php ye söylenen kısmı ekledim ama bir türlü olmadı…

  • ff

  • Html kod olarak slider bulan varsa info@erolguzelcom dan ulaşsın bana bir zahmet tşkler şimdiden..!

  • Harika

  • Çağrı Yılmaz

    Kategoriyi temaya yaptığım admin panelinden düzenlemek istiyorum. Nasıl yapabilirim acaba ?

    query_posts(‘cat= &orderby=date&order=DESC&showposts=6’); ?>

    Bu şekilde doğal olarak hata alıyorum. Nasıl düzenlemeliyim bunu ?

  • Neşe Altınışık

    teşekkürler… süper oldu…

    • Ayşegül Gülen

      Merhabalar. ilk işimde böyle bir şeyle karşılaştım fakat her yazılanı yapmama rağmen sitemde uygulayamadım. WordPress ile yapıyorum. Yardımcı olabilir misniz acaba çok acilll?

  • Salihbahadir

    Hocam bu sliderda projemdeki Jquery kütüphaneleri çakışıyor ne yapabilirim.

  • Ayşegül Gülen

    Merhabalar. bende ilk işimde böyle bir şeyle karşılaştım fakat sitemde uygulayamadım. WordPress ile yapıyorum. Yardımcı olabilir misniz acaba çok acilll?