lostyazilim
tr.link

WordPress Özel Alan Destekli Slider Eklemek

3 Mesajlar 1.184 Okunma
lstbozum
tr.link

batufan batufan WM Aracı Kullanıcı
  • Üyelik 22.01.2012
  • Yaş/Cinsiyet 28 / E
  • Meslek Öğrenci
  • Konum İzmir
  • Ad Soyad B** K**
  • Mesajlar 243
  • Beğeniler 20 / 15
  • Ticaret 1, (%100)
Merhaba arkadaşlar,
Kısa bir zaman önce php diline başladım ve hergün daha iyi olmak için kendimi geliştirmeye devam ediyorum. Yeniyim makalemde hatalarım varsa düzeltelim ama birçok kez gözden geçirdim ve hata olmadığı fikrindeyim. Şimdi sizlerle Wordpress'de özellikle sayfa içlerinde kullanılmaya elverişli olan slider çalışmamı paylaşmak istiyorum.
Sliderın frameworkü Tayfun Erbilen e ait ve teşekkürlerimi buradan da sunuyorum. Ben ise bu sliderı Wordpress'e uyumlu hale getirdim. Sitemdeki konuda da sahip olabileceğiniz kafanızdaki soruların çözümlerini de paylaştım. Sliderın birdahaki versiyonunda panelli hazır hale getireceğim ama şimdiki haliyle de biraz html css bilen bir kişi üstesinden gelebilir. Şimdi sitemdeki makalemden parçalar paylaşacağım.

Orjinal Konu: http://bkorkut.com/wordpress-ozel-alan-destekli-slider-eklemek/

Sizin İstediğiniz Yerde Göstermenizi Sağlayacak Kodun PHP Bölümüdür, css bölümü sitemdeki dosyayı indirdiğinizde içinde styles klosöründe bulunuyor.




    $alternatif= get_bloginfo( 'template_directory', 'display' )."/scripts/alternatif.jpg";
    $resim= get_post_meta($post->ID, "bir", true);
    $resim_iki= get_post_meta($post->ID, "iki", true);
    $resim_uc= get_post_meta($post->ID, "uc", true);
    $resim_dort= get_post_meta($post->ID, "dort", true);
    if ($resim == true) { echo "
  • ";} else if ($resim_uc != true) { echo ""; }
    if ($resim_iki == true) { echo "
  • ";} else if ($resim_uc != true) { echo ""; }
    if ($resim_uc == true) { echo "
  • ";} else if ($resim_uc != true) { echo ""; }
    if ($resim_dort == true) { echo "
  • ";} else if ($resim_dort != true) { echo ""; }
    ?>







İndir:
Buradan indirebilirsiniz.

Demo:

Sliderın çalışır vaziyetteki halini görmek için http://bkorkut.com/lab/bslider/ adresine gidebilirsiniz.
Bu sliderın html versiyonuna buradan gidebilirsiniz.

Kurulum Aşamaları:
1) İndirdiğimiz sıkıştırılmış dosyayı açtıktan sonra scripts klosörünü tema klosörünüzün içine atın.
2) header.php içinde tanımlamamız gereken durumlar var. Onlarda aşağıda bulunuyor. Direk kopyala yapıştır yapın doğru kısma.

<script></script>
<script></script>
<script></script>
<script>
$(function(){

$('#slider1').pSlider({
slider: $('#slider1 ul li'),
button: {
next: $('#slider1 .next'),
prev: $('#slider1 .prev')
},
pagination: $('#slider1 .pagination'),
loop: true,
auto: true,
time: 3000
});

});
</script>


4) İndirmiş olduğunuz klosördeki auto.html içindeki veya yazımın en üstünde vermiş olduğum kodları WordPress Özel Alanın geçerli olduğu herhangi bir php dosyasında istediğiniz yere yapıştırın.
5) styles klosörünün içindeki style.css de bulunanları temanızın style.css ine ekleyin.
 

 

wmaraci
reklam

impjix impjix WM Aracı Kullanıcı
  • Üyelik 10.03.2013
  • Yaş/Cinsiyet 33 / E
  • Meslek Yazılım Mühendisi
  • Konum Ankara
  • Ad Soyad F** A**
  • Mesajlar 2426
  • Beğeniler 809 / 814
  • Ticaret 17, (%100)
Dostum günlerdir benzeri birşey arıyorum ama altta 2. rakama tıklamadan sadece mouse ile üzerine geldiğinde 2. slide'a geçme özelliği var mı acaba?
 

 

batufan batufan WM Aracı Kullanıcı
  • Üyelik 22.01.2012
  • Yaş/Cinsiyet 28 / E
  • Meslek Öğrenci
  • Konum İzmir
  • Ad Soyad B** K**
  • Mesajlar 243
  • Beğeniler 20 / 15
  • Ticaret 1, (%100)
Dostum javascript konusunda bilgim fazla değil fakat demo bölümünde Tayfun Erbilen in sitesine de link vermiştim orada parametrelerde paylaşılmış durumda ordan cevap bulabilirsin bu duruma sanırsam
 

 

wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al