Bu işlemi yaparken Wordpress’te öncelikle bir sayfa şablonu oluşturalım. Sayfa şablonumuz etiketlerimizi göstereceğinden Wordpress’in wp tag cloud fonksiyonundan yararlanacağız. Şimdi sayfa şablonumuzu oluşturacak olan kodları yazalım.

< ?php
/*
Template Name: etiket_bulutu
*/
?>

< ?php
get_header();
?>

<div id="content">
  < ?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  <div class="entry <?php if(is_home() && $post==$posts[0] && !is_paged());?>">
    <h3 class="entrytitle" id="post-<?php the_ID(); ?>"> <a href="<?php the_permalink() ?>" rel="bookmark">
      < ?php the_title(); ?>
      </a>
	  </h3>

<div class="etiketsayfa">< ?php wp_tag_cloud('smallest=8&largest=18&number=999&order=RAND'); ?></div>
</div>

    <!--
	<?php trackback_rdf(); ?>
	-->
  </div>
  < ?php comments_template(); // Get wp-comments.php template ?>
  < ?php endwhile; else: ?>
  <p>
    < ?php _e('Sorry, no posts matched your criteria.'); ?>
  </p>
  < ?php endif; ?>
  <p><span class="page">
    < ?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?></span>
  </p>

< ?php get_sidebar(); ?>
< ?php get_footer(); ?>

Yukarıdaki kodlar benim t’infection.com’da Etiket bulutu sayfası yapmak için kullandığım kodlardır. Burada yaptığım şey ise sitemin index.php dosyasını alarak wp tag cloud() fonksiyonunu eklemek. Etiket bulutunu elde edecek kodu tekrar görelim;

<div class="etiketsayfa">
< ?php wp_tag_cloud('smallest=8&largest=18&number=999&order=RAND'); ?>
</div>

Gördüğünüz gibi wp_tag_cloud() fonksiyonunda biraz argüman eklemesi yaptım. En küçük etiket görünüm değerini 8pt en büyük değeri ise 18pt olarak belirledim. Etiketlerin sayısını 999 olarak yazdım ki tüm eklemiş olduğum etiketleri içerebilsin. (Tabi sizin 1000 üzeri etiketiniz varsa bu değeri büyütebilirsiniz) Son olarakta etiket dizilimi Rand değeriyle rastgele hale getirdim. Etiket bulutunu ise stil dosyama eklediğim Etiketsayfa Css sınıfı içerisine aldım.

Şimdi sıra geldi sayfamızı oluşturmaya. Yukarıda vermiş olduğum kodu boş bir metin editöründe etiket_bulutu.php olarak kaydedip tema dizininiz içine atın. Daha sonra sitenizin yönetim paneline giriş yapın. Burada Yeni sayfa ekleme alanına gelerek yeni sayfanıza Etiket Bulutu ismini verin. Yan alanda tema dizinine attığımız etiket_bulutu.php isimli dosya Sayfa Şablonu olarak görünecektir. Sayfamıza sadece isim verip bu şablonu seçerek kaydedebiliriz.

Gördüğünüz gibi önce etiket_bulutu.php şablonumuzu oluşturduk. Bunu kullandığımız temanın dizinine attık. Yönetim panelinden yeni sayfa ekleme alanına gelerek attığımız şablonu seçtik ve sayfamıza isim vererek oluşturduk. Hepsi bu :) Yukarıda size şablon olarak verdiğim kodları siz kendi temanızın herhangi bir .php dosyasını düzenleyerekte elde edebilirsiniz.

Benim oluşturduğum etiket bulutu sayfasını görmek için buraya tıklayabilirsiniz. Umarım faydalı olur.

Sitemin Header alanında ve yeni yazıların üzerinde stickerlar görüyorsunuz. Bu stickerları (etiket olarak Türkçe’ye çevriliyor) artık birçok web sitesinde görmeye alıştık. Web 2.0′ın bize sunduğu tasarım yeniliklerinden birisi de bunlar. Yeni haberlerimizi, yeni dosyalarımızı veya çarpıcı olduğunu düşündüğümüz birçok şeyi bu stickerlar sayesinde web sitemizden duyuruyoruz. Ben bu yazımda size sürekli kullandığım yöntem ile bu tarz etiketlerin nasıl yapıldığını anlatacağım. Başka yöntemlerde var ancak, Oval Köşeler yazımda belirttiğim kadar kolay ve zahmetsizce bu işi yapacağız. (Hemen belirtmekte fayda var Photoshop versiyonunuz ne olursa olsun bunu yapabilirsiniz, ben şahsen 7.0 kullanıyorum ve yükseltmeyi de aklımın ucundan geçirmiyorum)Öncelikle Photoshop’ta yeni bir doküman açarak işe başlıyoruz. Ben 400*400px ve 72 resulation değerine sahip bir doküman tercih ettim.

Dokümanımızı açtıktan sonra yeni bir Layer oluşturup Tool menüsünden Custom Shape Tool aracını seçiyoruz. (U) Aşağı resimde görünen “8 Point Star” şeklini seçiyoruz.

Bu şekli seçtikten sonra Shift tuşuna basılı tutarak çokta büyük olmayacak bir 8 köşeli yıldız çiziyoruz. Yıldız şeklimizi çizdikten sonra hemen Ctrl+J tuş kombinasyonunu kullanarak mevcut yıldızın kopyasını oluşturuyoruz. Kopya oluştuktan sonra Ctrl+T tuş kombinasyonu ile yıldızı diğer yıldızın köşelerini ortalayacak şekilde döndürüyoruz. Bu döndürme işini yaparken çalışma alanınızı Ctrl++ tuş kombinasyonu kullanarak büyütebilir ve tam ortalama işlemi bittikten sonra Ctrl+- tuş kombinasyonu ile küçültebilirsiniz.

Döndürme işlemi bittikten sonra Layer 1 copy seçiliyken (yani ikinci yıldızımızın layeri seçiliyken) Layer 1 ile birlikte iki layeri birleştiriyoruz. (Aşağıdaki resimde layerların birbirine kilitlenmiş halini göreceksiniz, sadece layerin yanında bulunan göz işaretinin ötesine tıklamanız yeterli, böylece bir kilit işareti çıkacak ve layerlar beraber hareket edecekler)

Bu işlemi de yaptıktan sonra Ctrl+E tuş kombinasyonunu kullanarak iki shape layeri tamamen birleştirip tek bir layer haline getiriyoruz. Şimdi çalışma alanımızda sadece background ve shape 1 copy layerları kalmış olmalı. Bundan sonra yapacağımız şey yıldızımızın bulunduğu layer üzerine iki kere tıklayarak “Layer Style” penceresini açmak. Burda vereceğimiz özellikler ile stickerımızı şekillendireceğiz.

Layer özellikleri sekmesinde Drop Shadow, Gradient Overlay ve Stroke alanlarını işaretleyin. Şimdi bunları tek tek düzenleyeceğiz.

Drop Shadow sekmesine gelin ve aşağıdaki özellikleri uygulayın.

Gradient Overlay sekmesinde aşağıdaki işlemleri uygulayın.

Stroke sekmesinde de son olarak aşağıdaki işlemleri uygulayın.

Gördüğünüz gibi sitemde kullanılan stickere tıpatıp benzeyen bir sticker elde etmiş olduk. Renk seçimini tamamen size bıraktım, dolayısıyla hiçbir renk tavsiyesinde bulunmadım. Renk olayını kendiniz karar verip bulabilirsiniz. Sticker yapımında önemli olan 8 point star’ın sayısı ve döndürülme açısı. Ondan sonrası sizin zevkinize kalmış bir olay. Vermiş olduğum layer özelliklerinden harici özellikler vererekte stickerınıza daha fazla efekt katabilirsiniz.