Zamanında firuze.com adlı projemiz için geliştirdiğim eklentinin daha hafifi fakat bir o kadar da kullanışlı versiyonunu sizlerle paylaşacağım. Ben şimdilik sadece resim gösteriminde kullanıyorum dileyen arkadaşlar içerikde gösterebilirler sadece css kodları ile oynamaları yeterlidir. İlk olarak ayrı bir bölüm olarak yapacağımız için yeni bir content-type oluşturmamız gerekli daha önceki konularımda buna sıkça değindim.

headline (manşet) adında yeni bir content-type oluşturalım

functions.php dosyamızda uygun görülen bir yere bu kod blooğunu yapıştıralım

function headline_section() {
	register_post_type('headline',
                array(
					'labels' => array(
						'name' => __('Headline'),
						'singular_name' => __('Headline'),
						'add_new' => __('Add Headline'),
						'add_new_item' => __('Add Headline'),
						'edit_item' => __('Edit Headline'),
						'new_item' => __('Headline'),
						'view_item' => __('Show Headline'),
						'search_items' => __('Headline Search'),
						'not_found' => __('No Headline'),
						'not_found_in_trash' => __('No Headline in Trash')
					),
					'public' => true,
					'rewrite' => array('slug' => 'headline'),
					'menu_position' => 8,
					'show_ui' => true,
					'supports' => array('title', 'editor', 'thumbnail'))
				);
}
add_action('init', 'headline_section');

sonrasında manşet alanında dönecek olan resimlerimizi hazırlayalım bunun içinde yüklediğimiz resimlerin bizim istediğimiz boyutta kesilmesi için resim boyutumuzu ve onu çağıracağımzı değişken adını girmeliyiz.

resimlerimizi hazırlayalım

yine functions.php dosyamıza resim kesme biçme kodlarımızı ekliyoruz..

add_theme_support('post-thumbnails');
add_image_size('mainSlider', 980, 310, true); // genişliği 980px yüksekliği 310px olan resim kestirdik

Sonrasında admin ekranına yukarıda oluşturduğumuz Headline adlı menünün gelmiş olması lazım. Oradan zavkinize göre ekleme yapın ve görüntülenmesini istediğiniz resimleri tek tek girin fakat önizleme resmi yapmayı unutmayın.
Sonrasında ise kayan içerik neredeyse veya nerde görüntülenmesini istiyorsanız oraya aşağıdaki kodumuzu koyuyoruz.

kayan içerik sistemini oluşturalım

<div class="sliderContainer">
	<ul class="mainSlider">

		<?php
				$anaHaber = new WP_Query();
				$anaHaber->query('post_type=headline&order=ASC&showposts=-1'); ?>
			<?php while ($anaHaber->have_posts()) : $anaHaber->the_post(); ?>
			<?php
				$anaHaberResim = get_children(array(
				'post_parent' => get_the_ID(),
				'post_type' => 'attachment',
				'numberposts' => -1,
				'order' => 'DESC',
				'orderby' => 'date',
				'post_mime_type' => 'image'));
			$i=1;
			foreach($anaHaberResim as $listele) {
				$img=wp_get_attachment_image_src($listele->ID, 'mainSlider');
				$cap=$listele->post_title;

			}
		?>
	    <li>
	    	<a href="<?php the_permalink(); ?>"><img src="<?php echo $img[0]; ?>" alt="<?php echo $cap; ?>"></a>
	    </li>
	    <?php $i++; endwhile; ?>

	</ul>
</div>

Şimdi sırada ise bu kalıbı css ile biçimlendirelim.

css kodlarımız

.sliderContainer { width:980px; height:310px; overflow:hidden; position:relative; float:left; }
ul.mainSlider { position:relative; width:50000px; height:310px; }
ul.mainSlider li { float:left }

herşey bu kadar fakat ileri geri butonu koymadan hareket ettirelim ki ziyaretçilerimiz şaşırmasın

javascript kodlarımız

var say = $('ul.mainSlider li').length;
var headline = $('ul.mainSlider');
$(document).ready(function(){
	var click = 1;
	if(say>1)
	{
		setInterval(function(){
			headline.stop();
			headline.animate({"margin-left": (click*-980) + "px"});
			click++;
			if(click >= say) { click=0; }
   		}, 8000);
	}
});

Kodda gördüğünüz 8000 değeri 8000 milisaniye yeni 8 saniyeye eşittir siz de çalışması için class değerlerini javascript dosyasına doğru girmelisiniz.