arkaplan

WordPress Çift Sütunlu Kategori Alanı Yapımı

5 sene önce

Merhaba arkadaşlar bu dersimde sizlere wordpress blogunuzda ki kategori listelenmesini nasıl çift sütunlu yapabileceğinizi göstereceğim.Özellikle on ve üzeri yani siterinde çok fazla kategori bulunan arkadaşlarımızın işine yaracağını düşündüğüm kategorileri çift sütunlu gösterme yöntemini gelin beraber inceleyelim.Bu konuyu araştırmaya sitemde ki kategori sayısının artması sonucu başlamıştım ne yazık ki alt alta on dört tane kategori hiç güzel görünüm oluşturmuyordu bende birkaç site de görmem üzerine çift sütunlu kategori yapılışını araştırmaya başlamıştım.Bulduğum sonuçlar ile çift sütunlu kategori alanı yapımını ilk defa Baharat V1 teması ile uygulama başlamıştım ve temayı sizlerle paylaşmıştım.Şimdi temamı kullanmayan ama kategorilerini çift sütunlu olarak göstermek isteyen arkadaşlar için kategorilerini çift sütunlu göstermelerini sağlayacak kodu paylaşıyorum.

Öncelikle arkadaşlar aşağıda ki CSS kodlarını CSS dosyanızın içerisine ekleyin , kodlarda ki 150px olan genişlikleri kendi sidebarınızın genişliğine göre ayarlarsanız daha güzel bir görünüm elde edersiniz.

REKLAM

.right {float:left; width:140px;} .left {float:left; width:140px;}

Yukarıda ki kodları CSS dosyanıza ekledikten sonra aşağıda ki kodu da çift sutunlu kategori bileşeninizi nerede göstermek istiyorsanız oraya ekleyin.

<div class=ciftsutun>
<div class=bilesenbaslik><strong>Kategoriler</strong></div>
<div class=kategoriicerik><?php
$cats = explode("<br />",wp_list_categories('title_li=&echo=0&depth=1&style=none'));
$cat_n = count($cats) - 1;
for ($i=0;$i<$cat_n;$i++):
if ($i<$cat_n/2):
$cat_left = $cat_left.'<li>'.$cats[$i].'</li>';
elseif ($i>=$cat_n/2):
$cat_right = $cat_right.'<li>'.$cats[$i].'</li>';
endif;
endfor;
?>
<ul class="left"> 
<?php echo $cat_left;?>
</ul>
<ul class="right"> 
<?php echo $cat_right;?>
</ul></div>
<div class="temizlik"></div>
</div>

İşte bu kadar kolay arkadaşlar , hayırlı kullanımlar dilerim.

Yorumlar (9)

  1. Nazım dedi ki:

    Teşekkür ederim Burak :)

  2. ImOttoman dedi ki:

    Sağolun teşekkürler

  3. zardon dedi ki:

    eyvallah guzel paylasim, lazim olacak bir kod oldugu icin arsivime aldim.

  4. onur dedi ki:

    kodda sıkıntı var galiba olmuyor. şun farklı bi tema kullanıyorum ve yönergeleri uyguladığımda çift sütun olmuyor .

  5. q0x dedi ki:

    Temizlik class bizde yok nasıl yapacaz onu

  6. ferit dedi ki:

    buna arka plan ve yazı stilini filan nasıl ayarlarız yani biraz güzelleştirmek lazım normal yazı olarak duruyor