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

Eren Keskin 26 Nisan 2012 16 Yorum
wordpress

 

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]

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://www.rasitozkardes.k12.tr raozkardes

    Merhaba, okul sitemizi 7 yıldır wp ile amatörce yürütmekteyim. php, css bilgim yeterli olmadığı için bu işe gönül koymuş olan yerli yabancı sitelerden elde ettiğim ipuçları ile 7. yılı geride bıraktık. Şu anki temamız wp2.2 uyumlu ama oldukça işlevsel uzun yıllardır işimizi görüyor.

    Kurumsal temanızı wp ye entegre ederseniz okul sitemizde kullanmak istiyoruz. Header bölümünde hem sayfalar hem de kategoriler menüleri olmalı.

    Emekleriniz için teşekkür ederim. İyi çalışmalar dilerim.

    • http://erenkeskin.com Eren Keskin

      Siz kendinize uygun bir tasarımı iletişim kısmından bana ulaştırın. Bir bakalım.

  • http://keremzor.com Kerem ZOR

    Ellerine sağlık Eren :)

  • http://wogizm.com Volkan A.

    Ellerine sağlık hocam boş bir zamanım olursa wp entegre etmek isterim.

  • http://serkanulu.com Serkan Ulu

    Tema çok güzel olmuş, özllikle sade oluşu görsel güzellik katıyo.

  • http://www.hdfilmdukkani.com Hasan

    Gayet hoş . Teşekkürler.

  • http://www.grafikerweb.tk muhammet

    wordpress e kodlamaya uğraşayım dha ilk defa wordpress kodlicam umarım başarırım

Merhaba, Ben Eren Keskin

Bana ulaşmak için 0 543 765 03 05 numarasını kullanabilir veya
erenkeskin95@gmail.com adresine mail atabilirsiniz

İletişim Formu Adres Bilgisi