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.

Etiket Bulutu Örneği
Etiket Bulutu Örneği

Hadi afiyet olsun…

14 Comments

  1. Paylaşım için teşekkürler. Bloguma eklemeyi düşünüyordum, tam oldu 🙂

    • Oktay

      Rica ederim, faydalı olabildiysem ne mutlu bana. 🙂

    • Oktay

      Eskisi dediğin? WordPress’in kendisiyle gelen görünüm diyorsan zevk meselesi derim 🙂 Bir önceki kullandığımı diyorsan sadece kutu kenarlarına css ile yuvarlaklık vermek yeterli. 🙂

        • Oktay

          O önceki temaya has bir özelliktir. Şuan onu yapmaya çalışıyorum, yaparsam paylaşacağım yine 🙂

          • Aslında CSS kodu var ama wordpress için uygun olabilir mi bilemiyorum. İsterseniz size İletişim bölümünden göndereyim.

          • Oktay

            Çok makbule geçer, eğer uydurursam wordpress’e buradan paylaşırım.

  2. mert

    Bilgilendirici bir yazı… 🙂

  3. Paylaşım için teşekkürler 😉 Benim kullandığım tema buna benzer bir biçimde gösteriyor bulutu. Hem bu yüzden hemde kod işlerinden hiç anlamadığımdan bulaşmasam daha iyi olacak sanki 😕

    • Oktay

      Tam aksine benim kullandığı tema çok kaba ve karışık gösteriyordu, bende böyle bir çözüm buldum. Yorumun için teşekkürler 🙂

  4. emre

    Eyvallah. Parmaklarına sağlık.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.