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.
// Slider adında bir alan oluşturuyoruz.
// Resimlerimizi listeleyeceğimiz alanı oluşturuyoruz.
Bunları CSS ile hemen biraz düzenleyelim.
/* İlk olarak gerekli sıfırlamaları yapıyoruz. Bunu reset.css yardımı ile de yapabilirsiniz. */
body {margin: auto; font: 12px Arial;}
a {text-decoration: none;}
ul,li {padding: 0; margin: 0; list-style: none;}
/* Slider'ımızı şekillendiriyoruz */
#slider {width: 700px; height: 298px; margin: 20px auto; overflow: hidden; position: relative; border: 1px solid #ddd; padding: 5px; background-color: #eee;}
#slider ul#resim li a img {width: 700px; height: 300px; }
#slider ul#buton {position: absolute; bottom: 10px; left: 10px;}
#slider ul#buton li{float: left; margin-right: 5px}
#slider ul#buton li a{display: block; padding: 3px 6px; color: #fff;}
#slider ul#buton li.aktif a{background: #9d0a0a; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
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.
// 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
});
});
Aşağıdaki JjFiddle'dan kodların sade hallerini alabilirsiniz. Ayrıca incelemek isterseniz "Result" kısmında örneği inceleyebilirsiniz.
[IFRAME style="width: 100%; height: 300px" src="http://jsfiddle.net/erenkeskin95/jF4wF/5/embedded/" allowfullscreen="allowfullscreen" frameborder="0"][/IFRAME]
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.
have_posts()) : $slider -> the_post(); ?>
ID, "OZELALANADI" , true);
if($manset != "") { ?>
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.
Yazar: Eren Keskin
Kategori: jQuery, Wordpress
Web Adresi: ErenKeskin.com
Kaynak: http://erenkeskin.com/wordpress-eklentisiz-slider-manset-yapimi/
