WordPress Kategorileri Yan Yana Sıralama

wordpress 8 Kasım 2013 Cuma Unknown 0 yorum

Genelde çok kategorili WordPress sitemizde kategorileri göstermek istediğimizde , kategoriler 2′şerli değilde alt alta sıralanır ve ortaya hoş bir görüntü çıkmaz.

İşte bu yazımızda bu sorunu ortadan kaldıracak , kategorileri 2′şerli bir biçimde çıkartacağız.Öncelikle birazdan yapacağımız işlemdeki kod Sipsi temasının bileşen bölümüne özel olarak kodlanmış bir kod.

WordPress Kategorileri 2'şerli Sıralayalım

Öncelikle temamızın style.css dosyasının en altına şu kodu ekleyelim ;

.ciftsutunlukategori {background:#fff;border:1px solid #ddd;width:302px;padding-bottom:0px;margin-bottom:0px;}
 .ciftsutunlukategori ul {margin:0px;padding-top:10px;padding-left:40px;}
 .ciftsutunlukategori li {background-image:url(wp-content/themes/softartz/img/liste.png);list-style:none;background-repeat:no-repeat;padding-left:15px;padding-top:1px;margin:0px;width:115px;float:right;margin-bottom:3px;}

Kodları ekledikten sonra functions.php dosyamıza giderek ?> kodundan hemen önce şu kodu ekleyelim ;

/*
* Plugin Name: Çift Sütünlu Kategori Bileşeni
*/

add_action( 'widgets_init', 'sip_ciftsutun_widgets' );

function sip_ciftsutun_widgets() {
register_widget( 'sip_ciftsutun_widget' );
}

class sip_ciftsutun_widget extends WP_Widget {

function sip_ciftsutun_widget() {

/* Widget settings */
$widget_ops = array( 'classname' => 'widget_ciftsutun', 'description' => __('Bu bileşen ile kategorileri çift sütun halinde gösterebilirsiniz.', 'sip') );

/* Create the widget */
$this->WP_Widget( 'sip_ciftsutun_widget', __('Çift Sütunlu Kategori Bileşeni', 'sip'), $widget_ops );
}

function widget( $args, $instance ) {

?>
<h3>Kategoriler</h3>
<div class="ciftsutunlukategori">
<ul>
<?php wp_list_cats('title_li='); ?>
</ul>
<div class="temizle"></div>
</div>
<?php
echo $after_widget;
}

function update( $new_instance, $old_instance ) {}

function form( $instance ) {

$instance = wp_parse_args( (array) $instance, $defaults ); ?>

<p>
Bileşenin Ayalarını Tema Panelinden Yapınız!
</p>

<?php
}
}

Bu koduda ekledikten sonra Bileşenler kısmına gittiğimizde Çift Sütunlu Kategori Bileşeni adlı bir bileşen gelmiş olması gerekiyor.Bunu sürükleyip istediğimiz yere bırakalım.Evet! Kodumuz çalıştı 2′şerli şekilde gözüküyor.Ama boyutlarında sıkıntı var öyle değil mi ? : )

Bunun için style.css dosyasına eklediğimiz kodun width ve margin gibi ayarlarını temanıza göre düzenlerseniz bu sorun ortadan kalkacaktır.