Merhaba Arkadaşlar, bu yazımda iki konuyu ele almaya çalışacağım.

İlk işlem olarak Css & kodlamasını yapacağız ardından bu slider kodlamasını wordpress kodlarımıza uygun hale getireceğiz. WordPress slider uygulamasın da döngü içerisinde kullanıma göre detaylar vermeye çalışacağım umarım yazım faydalı olur, ayrıca elinizde bulunan özel kodlanmış veya kodlanmaya hazır daha özel sliderler varsa onlarıda bu döngüler yardımıyla wordpress temanıza  giydirebilirsiniz.

Haydi Başlayalım…

Adım – 1 (Belirlenmiş Slider Kodlarımız)

Ben Basit bir slider belirledim siz farklı değişik sliderler kullanabilirsiniz.

Html Kodlarımız (Slider için)

<div id="slider">
<a class="control_next" href="#">ileri</a>
<a class="control_prev" href="#">geri</a>
<ul>
<li>SLIDE 1</li>
<li style="background: #aaa;">SLIDE 2</li>
<li>SLIDE 3</li>
<li style="background: #aaa;">SLIDE 4</li>
</ul>
</div>

Css Kodlarımız (Slider için)

#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0;
border-radius: 4px
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 300px;
background: #ccc;
text-align: center;
line-height: 300px
}
a.control_prev,
a.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: .8;
cursor: pointer
}
a.control_prev:hover,
a.control_next:hover {
opacity: 1;
-webkit-transition: all .2s ease
}
a.control_prev {
border-radius: 0 2px 2px 0
}
a.control_next {
right: 0;
border-radius: 2px 0 0 2px
}
.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px
}

jS kodlarımız Slider için

jQuery(document).ready(function($) {
$('#checkbox').change(function() {
setInterval(function() {
moveRight();
}, 3000);
});
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({
width: slideWidth,
height: slideHeight
});
$('#slider ul').css({
width: sliderUlWidth,
marginLeft: -slideWidth
});
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: +slideWidth
}, 200, function() {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: -slideWidth
}, 200, function() {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
$('a.control_prev').click(function() {
moveLeft();
});
$('a.control_next').click(function() {
moveRight();
});
});

Birde <head> tagları arasına eklemeniz gereken kod var,

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Artık css jquery slider hazır.

css-jquery-wordpress-slider

Css & Jquery Slider

Adım – 2 (WordPress’e Entegre)

Öncelikle kısa açıklamamı yapayım daha sonra kodlara geçelim, bu kısımda yapacağım işlemleri özetleyecek olursak wordpress temanızın belirlediğiniz kategorisinden başlık,isim,resim,içerik ve konuya ait ne isterseniz bu slider ve döngü içerisinde gösterebilirsiniz. Daha önce verdiğim bir konudaki döngüyü ele alıp bu slider’de kullanıp wordpresse entegrasyonunu sağlayacağız.

Bu işlemimizi yaparken html kodları dışında hiç bir kod ile alakalı işlem yapmayacağız. Bu işlem’de <ul> Taglarına ait <li> taglarını tek bir tane olacak şekilde belirliyoruz. Daha sonra ilk <li> öncesi döngü başlangıç ilk </li> sonrası döngü bitiş kodlarımızı ekliyoruz, işlem tamamlanmış oluyorur.

Kodlarımız. [HTML+PHP]

<div id="slider">
<a class="control_next" href="#">ileri</a>
<a class="control_prev" href="#">geri</a>
<ul>
<?php if (have_posts()) : ?>
<?php $metinsarac = new WP_Query("cat='11'&showposts=5"); while($metinsarac ->have_posts()) : $metinsarac ->the_post();?>
<li><?php the_title(); ?></li>
<?php endwhile; ?>
<?php endif; ?>
</ul>
</div>

 

Belirlediğimiz sliderin wordpress’e entegrasyonunu ve 11.numaralı kategoriden en fazla 5 tane olacak şekilde yazı çekmesi işlemini tamamladık.Umarım yardımcı olabilmişimdir.

Kolay gelsin.

Metin Saraç 0 146 14 Kasım 2015
0 beğeni - 0 Yorum