WordPress Eklentisiz Slider [Manşet] Yapımı

WordPress Eklentisiz Slider [Manşet] Yapımı

 

WordPress Eklentisiz Slider [Manşet] Yapımı

Merhaba arkadaşlar. Bu gün yepyeni bir kod ile karşınızdayım. Sizler için ufak kodlar ile wordpress slider yaptım. Önceden beri takip ettiğim bir site olan Prototurk.com‘da bu slider’ın yapım dersi mevcuttu. Oradaki slider’ı kodladım ve bunu wordpress’e entegre ederek ortaya güzel bir şey çıkartmaya çalıştım. Şimdi yavaş yavaş kodlarımızdan bahsedelim.

 

Öncelikle eğer HTML / CSS / jQuery ve WordPress kod yapısı hakkında bilginiz yok ise bu işe hiç girmeyin, sadece hazır verileni alın kullanın derim. Ama bilenler için anlatıma başlıyorum.

İlk kod aşaması olarak HTML, jQuery ve CSS kullanarak slider’ımızı oluşturuyoruz, zaten wordpress entegre işi çok basit.

[code lang="html"]

<div id="slider">  // Slider adında bir alan oluşturuyoruz.
<ul id="resim"> // Resimlerimizi listeleyeceğimiz alanı oluşturuyoruz.
<li><a href="#"><img src="img/1.png" alt="Resim1"/></a></li>
<li><a href="#"><img src="img/2.png" alt="Resim2"/></a></li> // Resimleri ekliyoruz.
<li><a href="#"><img src="img/3.png" alt="Resim3"/></a></li>
<li><a href="#"><img src="img/4.png" alt="Resim4"/></a></li>
</ul>
<ul id="buton"> // Buton numaralarımızı yazıyoruz.
<li><a href="#">1</a></li>
<li><a href="#">2</a></li> // Butonlarımızı yerleştiriyoruz.
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</div>

[/code]

Bunları CSS ile hemen biraz düzenleyelim.

buraya kadar her şey basitti. Şimdi işin en zor kısmına geldik. [Zor dediğime bakmayın buda basit aslında. Tabi bilene]

Slider’ımızın jQuery’sini yazacağız.

[code lang="js"]

// Sayfamız hazır olduğunda işlemi başlatıyoruz.

$(function(){

var Slider = 0;
$.Slider = function(toplam){
$("#slider ul#buton li").removeClass("aktif");      // Eğer Slider değişkenimiz toplam'a eşit ise aktif sınıfını ve tüm resimleri silip işlemi başlatıyoruz.
$("#slider ul#resim li").hide();
if(Slider < toplam-1){     // Değişkenimiz toplam-1'den küçük ise işlem yaptırıyoruz. Neden -1 derseniz index değerleri 0'dan başlıyor ve ilk resimi 0'a eşitlememiz gerek.
Slider++;    // Slider'ı 1 artırıyoruz.
$("#slider ul#buton li:eq("+Slider+")").addClass("aktif");       // Seçili butona aktif sınıfını ekliyoruz.
$("#slider ul#resim li:eq("+Slider+")").fadeIn();        // Geçişimizi fadeIn() metodu ile yapıyoruz.
}else {       // Değilse
$("#slider ul#buton li:first").addClass("aktif");
$("#slider ul#resim li:first").fadeIn();
Slider = 0;
}
}

var toplamLi = $("#slider ul#resim li").length;   // Resimlerin uzunluğunu bir değişkene atıyoruz
var interval = setInterval('$.Slider('+toplamLi+')', 2000);     // Eğer Slider değişkeni üstteki değişkendeyse 2 saniye sonra diğer resime geçiyoruz.

$("#slider").hover(function(){     // Burada da mouse üzerine geldiğimizde slider duruyor gidince devam ediyor.
clearInterval(interval);
},function(){
interval = setInterval('$.Slider('+toplamLi+')', 2000);
});

$("#slider ul#buton li:first").addClass("aktif");
$("#slider ul#resim li").hide();
$("#slider ul#resim li:first").show();
$("#slider ul#buton li").click(function(){
var indis = $(this).index();
$("#slider ul#buton li").removeClass("aktif");
$(this).addClass("aktif");
$("#slider ul#resim li").hide();
$("#slider ul#resim li:eq("+indis+")").fadeIn();
Slider = indis;
return false
});
});

[/code]

WordPress Eklentisiz Slider [Manşet] Yapımı

Aşağıdaki JjFiddle'dan kodların sade hallerini alabilirsiniz. Ayrıca incelemek isterseniz "Result" kısmında örneği inceleyebilirsiniz.

 

Buraya kadar anlattığım her şeyi Prototürk'deki videodan kendinizde yapabilirsiniz. Şimdi gelelim bunu WordPress'e entegre etmeye. Özel alan ile döngü oluşturma mantığını 1-2 yazı sonra anlatacağım. Onun için onu anlatmadan direk olarak olaya girmek istiyorum.

 

WordPress Entegresi

Buton yapımız aynı kalacak sadece üst tarafındaki resim kısmında işlemleri gerçekleştireceğiz. hemen kodlarımızı yazalım.

buradaki "OZELALANADI" kısmına istediğiniz özel alan adını yazın ve ardından yazılarınıza buraya eklediğiniz isimle bir özel alan ekleyin. O özel alanın "Değer" kısmında ise yayınlamak istediğiniz resmin URL'si yer alsın arkadaşlar.

 

Kodlar tamamen el emeği göz nurudur. Bu kodları daha da geliştirip bir manşet eklentisi yapma yoluna kadar gideceğim. Görünümde bi hayli değişiklik yapmayı düşünüyorum. Buradan bana özel alan mantığını öğrettiği için İsmail Usluer'e, Slider mantığını kavrattığı içinde Tayfun Erbilen'e teşekkür ederim.

  
  • http://ekbilgi.net salih

    kardeşim eline sağlık başarılarının devamını dilerim..

  • mehmet

    Çalışman için emeğine sağlık ancak benim bir sorum olacaktı. Yaptığımız slider i bir ziple plugins e gönderip çıkatacakmıyız veya hangi dosyaları nereye atacağız bu konudabiraz acemiyim yardımcı olursanız sevinirim.Ben bir plugin arıyorum da örneğin resimler butonuna tıkladığımızda farklı alt sayfalardaki galerilerden örnek bir resim bulunup tıklandığı zaman resismler sayfasına gitsin.Direk bir resim koyup bağlantı eklediğimde çirkin bir görünüm oluyor elimde jquery kodları da var ama nasıl wordpress e entegre edeceğimi bilmememkteyim http://www.yumaklibar.com/wp-content/uploads/2012… linkinden jquerysini merak ederseniz indirebilirsiniz.Kısacası sizden ricam şu:Eğer wordpress e entegresini anlatabilir misiniz veya Bildiğiniz aynı özelliklerde bir eklenti var mı?

    şimdiden teşekkürler(gerçi bir soru deyip on tane soru sordum ama :))

  • http://www.erenkeskin.com Eren Keskin

    Bu dosyaları index.php'de <?php get_header(); ?> kodunun altına yerleştiriniz [PHP dosyalarını sadece] CSS dosyalarınıda style.css'e ekleyiniz. Yolladığınız dosyayıda inceleme fırsatı bulduğum bir vakit inceleyeceğim.

  • mehmet kü&ccedi

    Teşekkür ederim. Ayrıca yolladığım örnekteki jquery isteğimi karşılamıyor ama en azından farklı kategorilerdeki resimlerin aynı sayfada gösterilmesine bir örnek olabilir.

  • http://www.besindestekleri.gen.tr Batuhan

    Merhaba ,

    Yazınız pek açık olmamış. JQuery de deneyimli olanlara hitap ediyor. Php kodları tamam fakat ; html js kısmını nasıl toplayacağız veya nereye atacağız ?

    Bilgilendirirseniz sevinirim.

  • emre

    Oncelikle tesekkurler bu yararli paylasim icin. kendi gerekli gordugum duzenlemeleri yaptimda sadece bir konuda yardima gerek duydum. numaranin ustune getirdigimizde uzerine tiklamadan ustundeki resmi nasil degistirebiliriz. yani aktif oldugunda usteki resimde aktif olan numaranin resmi olmasini nasil saglayabiliriz. tesekkurler

  • http://evedi.net barış

    öncelikle anlatımın için teşekkürler, benim 2 sorum olacaktı, yazı başlıklarını nasıl görüntüleyebiliriz? birde mause üzerine getirildiğinde nasıl geçiş sağlarız?

  • http://www.zindereklam.com hasan

    çok güzel eline sağlık

  • http://burakisci.com Burak İşci

    Teşekkürler acaba slider da konu başlıklarını da göstermek için ne yapabilirim?Yani bazı sliderler de olduğu gibi resimle beraber konu başlığının da gözükmesini istiyorum…

  • http://erenkeskin.com Eren Keskin

    fonksiyonunu görünmesini istediğiniz yere koymanız yeterli. Gerisi CSS’e bakıyor :)

  • http://www.atesantelefon.com dogan kural

    enes kendı işyerime yaptıgım sitenin anasayfasında slide shoe yukarıda yaptıgı ngıbı calıstırmak ıstıyorum bır cok plugin kurdum ama istedigimi elde edemedım email adresın yada sana ulasabılecegım bır yer varsa yardımcı olursan cok sevınırım

  • http://erenkeskin.com Eren Keskin

    Merhaba Doğan Bey,

    Bana ulaşabileceğiniz adresler “İletişim” sayfasında yer alıyor hocam. Oradan bana ulaşabilirsiniz.

  • http://www.cemoncu.com Cem Öncü

    Merhaba Enes bey uzun zamandır WordPress için haber manşet eklentisi arıyorum ancak bulamadım sizin anlattığınız bu bilgiler için teşekkürler ama benim isteğim webaslan.com yada fanatik.com.tr gibi bir manşet eklentisi arıyorum bu konuda yardımcı olursanız sevinirim :)

  • Burak Basri

    Merhabalar Eren Bey. Önceden de sorulmuş ama şu konu başlıklarının da slider üzerinde resimle beraber görünmesi konusunda kodlarla örnek verebilir misini?

  • http://erenkeskin.com Eren Keskin

    @Cem Öncü: Merhaba Cem Bey, Google’da wordpress slider olarak ararsanız bu tarz çok tema mevcut hocam.

    @Burak Basri: Merhaba Burak Bey, görünmesini istediğiniz yere < ?php the_title() ? > kodunu eklemeniz yeterli. (Boşlukları silmeyi unutmayın.)

  • http://ceyhunkulus@hotmail.com Nihat

    Merhaba
    Yukarıda vermiş olduğunuz kodlarla oluşturulmuş manşetim var. Sorunum mouse üzerine geldiğinde stop, mouse ayrıldığında start yapmıyor.Ne yaptıysam problem çözülmedi.