Merhabalar.
Ş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.
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.
Daha sonra yazıları listeletmek istediğiniz yere şu kodları yapıştırın:
Yukarıda verdiğim kodların en üstündeki
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
Ş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
Kod:
</head>
Kod:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="<?php bloginfo( template_url); ?>/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.
Kod:
#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: [URL=http://forum.iyinet.com/usertag.php?do=list&action=hash&hash=eee]#eee[/URL] 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 [URL=http://forum.iyinet.com/usertag.php?do=list&action=hash&hash=999]#999[/URL] padding: 4px; color: [URL=http://forum.iyinet.com/usertag.php?do=list&action=hash&hash=666]#666[/URL] }
#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: [URL=http://forum.iyinet.com/usertag.php?do=list&action=hash&hash=000]#000[/URL] color: white; }
.hide { position: absolute; top: -9999px; left: -9999px; }Daha sonra yazıları listeletmek istediğiniz yere şu kodları yapıştırın:
PHP:
<?php
$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 );
?>
<div id="wpustam_kat_list">
<ul class="nav">
<li class="nav-one"><a href="#bir" class="current"><?php echo $kat_id1_ad; ?></a></li>
<li class="nav-two"><a href="#iki"><?php echo $kat_id2_ad; ?></a></li>
<li class="nav-three"><a href="#uc"><?php echo $kat_id3_ad; ?></a></li>
<li class="nav-four last"><a href="#dort"><?php echo $kat_id4_ad; ?></a></li>
</ul>
<div class="list-wrap">
<ul id="bir">
<?php $tabla = new WP_Query(); ?>
<?php $tabla->query('cat=' . $kat_id1 . '&showposts=5'); ?>
<?php while($tabla->have_posts()) : $tabla->the_post(); ?>
<br>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</br>
<?php endwhile; ?>
</ul>
<ul id="iki" class="hide">
<?php $tabla = new WP_Query(); ?>
<?php $tabla->query('cat=' . $kat_id2 . '&showposts=5'); ?>
<?php while($tabla->have_posts()) : $tabla->the_post(); ?>
<br>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</br>
<?php endwhile; ?>
</ul>
<ul id="uc" class="hide">
<?php $tabla = new WP_Query(); ?>
<?php $tabla->query('cat=' . $kat_id3 . '&showposts=5'); ?>
<?php while($tabla->have_posts()) : $tabla->the_post(); ?>
<br>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</br>
<?php endwhile; ?>
</ul>
<ul id="dort" class="hide">
<?php $tabla = new WP_Query(); ?>
<?php $tabla->query('cat=' . $kat_id4 . '&showposts=5'); ?>
<?php while($tabla->have_posts()) : $tabla->the_post(); ?>
<br>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</br>
<?php endwhile; ?>
</ul>
</div>
</div>Yukarıda verdiğim kodların en üstündeki
PHP:
$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