Sidebar’da Kayan Rastgele Yazılar Oluşturma

Örneğini yan tarafta görebileceğiniz Rastgele Yazılar, bir eklenti ile oluşturulmadı. Bazı Magazine temalarda böyle güzel şeyler görmek mümkün. Ben de yandaki Rastgele Yazılar uygulamasını Scarlett isimli temada gördüm. Sürekli kayarak dikkat çekmesi, kullanıcıya başka sayfalara yönlendirmesi gibi sebepler yüzünden burada da kullanmak istedim. Açık kaynak özgürlüğü bu olsa gerek, biraz uğraşı ile kullanmayı başardım (:.

Şimdi kendi sitelerinde de bunu kullanmak isteyenler olabileceğini düşünüp nasıl yaptığımı açıklıyorum.

Kodları burada vermek karmaşıklık yaratıyor (ancak yazının sonunda bana yardımcı olabilirsiniz). Dilerseniz dosyaları inceleyebilirsiniz. İndireceğiniz dosyaları hangi klasörlere atacağınıza gelince:

—

Rastgele.php ve rastgele.css tema klasörüne atılacak

jquery-1.2.6.js ve spy.js temanız içinde javascript klasörüne atılacak.

post.jpg tema klasörü içinde images klasörüne atılacak.

—

Dosyaları http://www.sosyoblog.org/wp-content/yuklemeler/rastgele.rar adresinden indirebilirsiniz. (Nedense bağlantı veremedim, kopyalayıp yapıştırma ile idare edin.)

Sidebarda görünmesini istediğimiz yerde bir yerde bu kodla rastgele.php dosyasını çağırıyoruz.

<?php include (TEMPLATEPATH . ‘/rastgele.php’); ?>

Sidebar’a yerleştirdik. Şimdi hareketi sağlamalıyız. Tema klasörümüz içinde yaratacağımız javascript klasörüne bu 2 dosyayı atmalıyız. Bunlardan jquery-1.2.6.js, JQuery Javascript kütüphanesini sitemize kurmamız için, spy.js ise rastgele yazıların kaymasını sağlayan kodları içeren dosya.

Hareket de tamam, bir de işin tasarımı kaldı. Bunun için de tabi ki css kullanacağız. Rastgele.css dosyamızı tema klasörümüze attığımıza göre, o da tamam. Css kodlarıyla oynayarak istediğiniz tasarıma yaklaşabilirsiniz.

Images klasörüne de post.jpg’yi atmayı unutmayın.

Hepsi tamamsa header.php dosyamıza eklememiz gereken kodlar:

<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/javascript/jquery-1.2.6.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/javascript/spy.js”></script>
<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_directory’); ?>/rastgele.css” media=”screen” />

Eğer size yardımcı olabildiysem, siz de bana olun. Kodların sitede daha işlevsel ve okunaklı görünebilmesi için hangi eklentiyi ve nasıl kullanmalıyım?  Teşekkürler.

Buna bakanlar bunlara da baktı:

• BlogKocum’dan Ücretsiz Wordpress Hosting
• Wordpress’te Sayfa Sıralamasını Ayarlamak