WordPress İçin Dinamik Slider Yapımı (Video Anlatım Eklendi)

wordpress flexslider kullanımı

Wordpress Dinamik Slider Yapımı

Selam arkadaşlar bugün wordpress için slider yapımını anlatacağım, hemen dersimize başlayalım. öncelikle advanced custom fields pro eklentisini kurmanız gerekiyor bu linkten indirebilirsiniz. eklenti bize bazı ek özellikler veriyor. 

eklentiyi kurduktan sonra yan menüde özel alanlar diye bir bölüm çıkacak oraya tıklayın ve yeni bir özel alan ekleyin daha sonra alan etiketi kısmından bir isim veriyoruz, alan tipini tekrarlayıcı olarak ayarlayın..

wordpress slider yapımı

aşağıda alt alanlar diye bir bölüm açılıyor. burdan 2 tane daha alan oluşturuyoruz metin ve görsel alanı  

alan tipi


sayfayı aşağı doğru indirdiğinizde tuş etiketi diye bir bölüm göreceksiniz. buraya slider ekle yazıyoruz butonumuzun ismi oluyor..




Biraz daha aşağı indiğimizde konum bölümünü göreceksiniz buradan sayfa ve hangi sayfada göstereceksek o sayfa bölümünü seçiyoruz..

konum ayarlama

İşlemlerin hepsini yaptıktan sonra yandaki yayımla bölümünden kaydediyoruz..


şimdi sayfalar bölümünden seçtiğimiz sayfayı düzenliyoruz. ben hakkımda sayfasını seçmiştim onu düzenliyorum. siz hangi sayfayı seçtiyseniz onu düzenleyeceksiniz. aşağıda sayfaya ek bir bölüm geldiğini göreceksiniz..


özel alan oluşturma

slider ekle butonuna basarak 3 tane resim ekliyoruz, ve sayfayı güncelliyoruz. güncelle demeyi unutmayın yoksa resimler kayıt edilmez..

slider resim ekleme



Slider ı göstermek için bir tane plugin kullanıcağız bu pluginin ismi flexslider 2   bu linkten indirebilirsiniz. 

indirdikten sonra rar içindeki dosyaları temanızın ana dizinine atın, dosya isminide flex-slider olarak değiştirin. dosya içinde bize lazım olan jquery.flexslider-min.jsflexslider.css ve font klasorudur, onun dışındaki diğer herşeyi silebilirsiniz. bunları yaptıktan sonra bide bu dosya içinde script.js adında bir dosya oluşturun. jquery kutuphanesinide indirip bu klasorun içine atın çünkü wordpress in kendi script kodlarında jquery dahil edilmemiş. 

flex slider kullanımı

şimdi bu dosyaların hepsini sayfaya dahil etmemiz gerekiyor bunun için functions.php dosyasını açıyoruz. aşağıdaki kodları sayfanın en altına yapıştırın

function stil()
{ 

      wp_register_style("flex", get_template_directory_uri() . "/flex-slider/flexslider.css", array(), false, "all");
       wp_enqueue_style("flex");

}

add_action("wp_enqueue_scripts","stil");


function jquery()
{ 

    wp_deregister_script("jquery");
    
    wp_enqueue_script("jquery", get_template_directory_uri() . "/flex-slider/jquery-3.4.1.min.js", "", 1, true);

}

add_action("wp_enqueue_scripts","jquery");



function scriptjs()
{ 
    
     wp_register_script("flexjs", get_template_directory_uri() . "/flex-slider/jquery.flexslider-min.js", "", 1, true);
     wp_enqueue_script("flexjs");

     wp_register_script("customjs", get_template_directory_uri() . "/flex-slider/script.js", "", 1, true);
    wp_enqueue_script("customjs");

}

add_action("wp_enqueue_scripts","scriptjs");

burdaki kodlar dosyaları sayfayamıza dahil etmemize yarıyor başka bir işlemi yoktur. nasıl çalıştığını wordpress tema yapımı dersinde anlatmıştım o dersi de ücretli olarak veriyorum isterseniz buradan satın alabilirsiniz. satın alırsanız bu adresten bana mesaj yazamayı kesinlikle unutmayın videoyu size göndereyim..

 evet şimdi devam ediyoruz. flexslider  sitesinde bize bazı kodlar veriyor, bunlar js ve css kodları öncelikle js kodlarını alıyoruz yalnız burda şöle bir durum var verdikleri kodda load fonksiyonu kullanılmış bu fonksiyon artık kullanılmıyor, o yüzden bunu on load şeklinde değiştiriyoruz değiştirilmiş halini aşağıda paylaştım oluşturduğumuz script.js içine kopyalayın..

$(window).on("load",function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});


html kodlarını da bizim ekliyeceğimiz kodlar arasına yerleştiriyoruz ben bunu ayarladım ve aşağıda paylaştım. have_rows("slider")  yazarak bizim oluşturduğumuz slider özel alanını çağıyoruz ve döngüye sokuyoruz get_sub_field("resim") ve get_sub_field("metin") fonksiyonuylada alt alanlarımızı çağırmış oluyoruz...

 <?php if(have_rows("slider")) :?>
         <div class="flexslider">
         <ul class="slides">
         
         <?php while(have_rows("slider")): the_row();?>
         
             <?php $metin = get_sub_field("metin");?>
             <?php $resim = get_sub_field("resim");?>
             <?php $resimurl = $resim["sizes"]["slider"];?>
    
             <li><img src="<?php echo $resimurl;?>" alt="<?php $metin;?>"></li>
         
         <?php endwhile;?>
         </ul>
         </div> 
         <?php endif;?>


Son olarak functions.php ye şu kodu eklemeyi unutmayın  resimin boyutunu ayarlamamızı sağlıyor. 


add_image_size("slider", 1200, 700, true);

slider ı görmek için oluşturduğunuz sayfayı görüntülemeniz yeterldir ben hakkında sayfasına yapmıştım onu açıyorum sonuç aşağıdaki gibi olucaktır..




Bu derste anlatacaklarım bu kadar dı sormak istediğiniz sorular varsa bana bu konu altında yada sorabilir.com sitesin den sorularınızı sorabilirsiniz. herkese iyi çalışmalar.


WordPress Dinamik Slider Yapımı Video Anlatım






Blogger 100 mb dan fazla dosya yüklemeye izin vermediği için vimeo sitesine yüklemek zorunda kaldım :D

Bizi youtube kanalımızdanda takip edebilirsiniz : http://bit.ly/2PjNlaX 






Yorumlar

Popular

Youtube İçin Abone Ol Animasyonu yapmak