Şu konuda bir arkadaşımızın sorusu üzerine basit jquery & php yapısıyla oluşturulmuş fakat tam aksine dinamik ve de kullanışlı bir çoklu yazı döngüsü oluşturdum.
Birçok site artık bunu kullanmayı adet haline getirdi ama paylaşan pek olmadı sanırım.Her neyse, birden çok kategoriye ait yazıları jquery kullanarak ayrı ayrı listeletmenin onlarca yolu vardır.Ben bu yolu seçtim.
Benim oluşturduğum bu örneği kullanarak yarattığınız temalarda,bir iki satır daha fazla kod yardımıyla panele bağlı,kullanışlı bir tema yaratabilirsiniz.Son hali şu şekilde olacak içerik menümüzün yapımına başlayalım.
Önce temanın header.php dosyasına
tagından önce şu kodları ekleyin.
<script></script>
<script>/organictabs.jquery.js"></script>
<script>
$(function() {
$("#wpustam_kat_list").organicTabs();
});
</script>
Temanızın klasörüne organictabs.jquery.js adlı js dosyanızı yolladıktan sonra style.css i açın ve en altına şu kodları ekleyin.
#wpustam_kat_list { }
#wpustam_kat_list .nav { overflow: hidden; margin: 0 0 10px 0; }
#wpustam_kat_list .nav li { width: 97px; float: left; margin: 0 10px 0 0; }
#wpustam_kat_list .nav li a { display: block; padding: 3px; background: #eee; color: black;text-align: center; border: 0; }
#wpustam_kat_list ul { list-style: none; }
#wpustam_kat_list ul li a { display: block; border-bottom: 1px solid #999; padding: 4px; color: #666; }
#wpustam_kat_list ul li:last-child a { border: none; }
#wpustam_kat_list ul li a:hover, #wpustam_kat_list ul li a:focus { background: red; color: white; }
#wpustam_kat_list li.nav-one a.current { background-color: red; color: white; }
ul.featured li a:hover { background-color: #000; color: white; }
.hide { position: absolute; top: -9999px; left: -9999px; }
Daha sonra yazıları listeletmek istediğiniz yere şu kodları yapıştırın:
$kat_id1 = get_cat_ID( 'Kategori Adı' );
$kat_id2 = get_cat_ID( 'Kategori Adı' );
$kat_id3 = get_cat_ID( 'Kategori Adı' );
$kat_id4 = get_cat_ID( 'Kategori Adı' );
$kat_id1_ad = get_cat_name( $kat_id1 );
$kat_id2_ad = get_cat_name( $kat_id2 );
$kat_id3_ad = get_cat_name( $kat_id3 );
$kat_id4_ad = get_cat_name( $kat_id4 );
?>
Yukarıda verdiğim kodların en üstündeki
$kat_id1 = get_cat_ID( 'Kategori Adı' );
$kat_id2 = get_cat_ID( 'Kategori Adı' );
$kat_id3 = get_cat_ID( 'Kategori Adı' );
$kat_id4 = get_cat_ID( 'Kategori Adı' );
kısmında listeletmek istediğiniz dört kategorinin adını yazın ve daha sonra kodu isteğinie göre şekilllendirin.
Normal bir have_post() döngüsü içerisindeki gibi dilediğiniz WordPress etiketlerinin kullanabilirsiniz.Her bir döngüyü ayrı ayrı düzenlemeyi unutmayınız.
Ayrıca CSS yapısını kendinize göre düzenleyerek temanıza daha uyumlu hale getirebilirsiniz.
Js dosyasını buradan indirebilirsiniz.
Yazıyı kaynak göstererek sitelerinizde yayımlayabilirsiniz.
Kaynak
