WordPress Etiket Bulutu Düzenleme

WordPress, bize sitede en çok kullanılan etiketleri göstermemiz için etiket bulutu gibi güzel bir bileşen sunuyor. Fakat sıkıntı şu, etiket bulutu bileşenine müdahele etmemiz pek mümkün gözükmüyor. Etiket bulutunda yer alan etiket sayısına ve neye göre sıralanacağını aslında kendimiz ayarlayabiliyoruz, hatta yazacağımız CSS kodu ile daha güzel bir görüntü elde edebiliyoruz. İnternette pek Türkçe paylaşım olmasa da yabancı kaynaklardan sabaha kadar arayarak nasıl yapabileceğimi buldum, hemde eklentisiz. Sizinle de paylaşmasam olmazdı…

Etiket Bulutu Kod Yapısı

İlk önce etiket bulutunun kod yapısını bilmemiz gerekiyor. Ben kendi kodumu paylaşacağım fakat WordPress Codex üzerinde yer alan wp_tag_cloud sayfasına göz atmanızda yarar var. Hazırlayacağınız etiket bulutunun kontrolünü sağlayan yol codex sayfasından geçiyor.

Kullandığımız temanın functions.php dosyasını açalım ve en altına aşağıdaki kodları yapıştıralım.

function benmeselaucarimmesela () {
if (function_exists('wp_tag_cloud')) {
$tags = wp_tag_cloud( array('smallest'=>8, 'largest'=>12, 'number'=>11, 'format' => 'array') );
foreach($tags as $tag) {
echo '<li>'.$tag.'</li>';
} }}

Gördüğünüz üzere yukarıda yer alan kodda benmeselaucarimmesela adında bir fonksiyon oluşturduk ve içine etiket bulutunu çağıran wp_tag_cloud fonksiyonunu ve dizi değişkenlerinden bir kaçını tanımladık. Fonksiyonun çıktısını almak istediğimizde ise bunu liste biçiminde yazdırmasını istedik. Bu dizi değişkenlerinin değerini istediğinize göre değiştirebilirsiniz.

• smallest: içeriği az olan etikete verilecek yazı büyüklüğünü belirler.
• largets: içeriği fazla olan etikete verilecek yazı büyüklüğünü belirler.
• number: gösterilecek etiket sayısını belirler.

Yukarıda yer alan kodu ekleme işlemimiz bittiyse aşağıdaki kodu hangi sayfaya eklerseniz o sayfada etiketleri gösterirsiniz.

<?php benmeselaucarimmesela(); ?>

Bileşenlerde sadece html kodu gösterildiği için yukarıdaki kodu sidebar yada footer kısmına bileşenle eklemek istiyorsanız PHP Code Widget eklentisini kullanabilirsiniz. Bu kodu böyle eklediğiniz düz liste olarak gözükecektir.

Etiket Bulutunu Düzenlemek

Şimdi sıra geldi etiket bulutu görüntüsünü değiştirmeye. Yukarıdaki kodu eklediğinizde etiket bulutu düz bir liste görünümünde gelecektir. Onun için kendi kullandığım HTML ve CSS kodlarını sizlerle paylaşacağım.

CSS Kodları:

.etiketler {
font-family: 'Open Sans', sans-serif;
background: #3b97d3;
font-size: 14px;
border: 0;
margin: 0px;
padding: 0px;
list-style: none;
}
.etiketler li {
float: left;
padding: 3px 10px;
margin: 0 5px 5px 0;
background: #3b97d3;
border: 0px;
text-decoration: none;
-webkit-transition: .2s ease;
-moz-transition: .2s ease;
-ms-transition: .2s ease;
o-transition: .2s ease;
transition: .2s ease; 
}
.etiketler li a {
display: block;
color: #fff;
text-decoration: none;
}
.etiketler li:hover {
background: #266188;
color: #fff;
text-decoration: none;
-webkit-transition: .2s ease;
-moz-transition: .2s ease;
-ms-transition: .2s ease;
o-transition: .2s ease;
transition: .2s ease; 
}

HTML Kodu:

<ul class="etiketler"> 
 <li><i class="fa fa-tags" aria-hidden="true"></i></li> 
 <?php benmeselaucarimmesela(); ?> </ul>

Yukarıdaki kodları uyguladığınızda resimde yer alan görüntüye sahip olacaksınız.

Hadi afiyet olsun…