WordPress bize etiket bulutu eklem imkanı sağlıyordu ancak bazı eklentiler yardımı ile, ancak önemine binaen WordPress 2.3 sürümünden itibaren etiket sistemini normal paketin içine ekledi. Benim de sitemi 2.3.3 sürümüne yükseltmemim sebeplerinden biriside Ultimate Tag Warrior eklentisi ile yaşadığım sorunlardı.

WordPress 2.3.3 sürümünü kurdum ancak birçok sorunuda beraberinde getirdi. Bir süre bu sorunlarla uğraştım halada uğraşmaktayım. Sorunlarla uğraşmaktan yeni sürümün yeniliklerinden yararlanmaya fırsat olmadı.

Bu hafta sonu etiket bulutu ve etiket ekleme işlemini gerçekleştirdim. Yaptığım işlemleri sizlerle paylaşmak istedim.
İlk olarak yeni sürüm ile eklediğim tabloların(wp_terms, wp_term_taxonomy) içerik alanlarının karşılaştırma alanı kısmını “utf8_general_ci” çevirmem oldu.

Daha sonra WordPress 2.3.3’ün ilk defa güzel bir yönün gördüm. Yönet -> İçe aktar kısmında “Ultimate Tag Warrior etiketlerini yeni etiketleme yapısına aktar.” Seçeneğini gördüm. Bu kısım 4 aşamadan oluşuyor ve bize kolayca eski etiketlerimiz yeni sisteme adapte etmemizi sağlıyor.

Daha sonra etiketleri her yazının sonuna eklemek için Görünüm -> Tema Editörü kısmından Tekil Yazı kısmını tıklayarak yazının sonuna

<p class="etiketler"><?php  the_tags('<strong>Etiketler :</strong>', ', ', ' ');  ?></p>

Kodunu ekledim. Ben sonuna ekledim ama siz bu kodu istediğiniz yere koya bilirisiniz.

Daha sonra Ana sayfa’nın sağ tarafına

<div id="etiketBulutu"><?php  wp_tag_cloud('smallest=8&amp;largest=16&amp;number=50&amp;unit=pt');  ?></div>

Kodunu ekledim ve ilgili CSS kodlarını ana stil dosyama ekledim.İkonlarımıda http://www.iconlet.com/ den aldım.

Sonuçta etiket bulutu ve etiketlerime kavuştum. Hemde Türkçe karakter sorunumda yok.

Daha sonra “Ultimate Tag Warrior”dan alışık olduğum daha önce kullandığım etiketlerin listesini görmek için “Advanced Tag Entry” eklentisini kurdum. Ben çok fazla eklenti kurma taraftarı değilim ama etiket tutarlılığı için bunu eklemek zorundaydım.

Herkese bulutlu ve yağmurlu günler diliyorum. Malum susuz kaldık.

Kaynak

• http://alexbrie.net/1836/how-to-import-ultimate-warrior-tags-into-wordpress-23-and-how-to-easily-backup-your-wordpress-database/
• http://codex.wordpress.org/Template_Tags/wp_tag_cloud#Cloud_displayed_under_Popular_Tags_title
• http://poplarware.com/tagplugin.html

• W3C yeni CSS validator’un unu Aralık ortalarında duyurdu Fuji kod adlı bu doğrulayıcıya bir göz atın linki
• Türkiye’nin ilk sanal bilişim dergisi yayında link
• Bilgisayarla ve web ile uğraşanların en büyük baş belalarında biridir karakter encoding sorunu. Karakter encoding ile ilgili bir makale link
• javascript ve CSS ile resimlere gölge eklemek için Dynamic Drive sitesinden hazır kod link
• CSS ile sayfa planlaması yapmak için hazırlanmış hazır planlar ve şablonların bir listesini link
• Bir genelleme yapmak belki yanlış olur ancak bir çok site zemin rengi olarak beyaz rengi kullanır. Bu cümleden sonra size siyah ağırlıklı güzel sitelerin listesini verelim Link
• Özel karakterlerin Alt değeri ile karşılıklarının sunulduğu bir site favorilerinize eklemeniz tavsiye edilir. Link
• Firefox’un yeni nesi sürümü Firefox 3 Alfa 1 sürümü çıktı bir çok yeni özellikleri ile test etmek isteyenleri bekliyor. Link
• 2006′nın en çok tutulan 20 alan adı Link
• Yakında çıkacak olan Windows Vista ile birlikte gelecek olan ISS 7 üzerine bir araştırma Link
• Hamdi Yaman’dan Web2.0 ile yükselişe geçen etiketler(tag) hakkında makale Link

• Tüm makalelerin pdf hali eklendi
• Tüm site çıktı almaya uygun hale getirildi.
• Etiketler tüm makalelere eklendi
• İlişkili Linkler bölüm tüm makalelerin sonu eklendi
• ve diğer değişiklikler(saat dilimindeki hata, saat gösterim şekli vb.)

Sizinde eksik gördüğünüz ve eklememi istediğiniz konular varsa lütfen bana yaznız.

CSS’in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block). Bildirim Bloğuda iki ye ayrılır. Özellik(Property) ve Değer(Value).

Tüm HTML elementleri potansiyel Seçicilerdir. Seçiciler ismini de buradan alır, HTML seçilen element anlamındadır.

Bildirim bloğu süslü parantezle açılır ve kapanır. Bildirimler arasında ” ; ” noktalı virgül kullanılır. özellik ve değerler birbirinden
” : ” iki nokta üstüste ile ayrılır.

h1 {font: medium Arial;}

şeklinde arada boşluk verilerekde bildirm yapılabilir. Burada ilki font’un boyutunu ikincisi ise font ismini gösterir. İleride bu konuya daha ayrıntılı gireceğiz. Ayrıca sadece font etiketine özel ” / ” kullanımı vardır örnek aşağıda:

h1 {font: medium/120% Arial;}

Burada ” / ” Seçicinin font boyutunu ve satır yüksekliğini gösterir.(font_boyutu/satir_yuksekliği)

Gruplama

Yukarıda hep bir Seçici’yi sadece bir HTML elementine atamayı gördük, Birden fazla HTML elementine de atama yapabilirz, buna gruplama denir. Gruplama Seçicilerde yapıldığı gibi Bildirmlerde de yapılabilir.

p, h3 {font-family: Arial;}

Burada düküman içindeki paragraflarda(p) ve başlıklarda(h3) fontların Arial olacağını tek bildirim ile belirttik. Gruplama yapılan Seçicileri ayırmak için ” , ” virgül kullanılır. Sınırsız sayıda Seçici gruplanabilir. Gruplama tasarımcılara büyük kolaylıklar sağlar.

Bildirim’lerimizi de gruplayabiliriz, bununla ilgili yukarıda örnekler mevcut. Bir veya daha fazla Seçiciye bir den fazla bildirim ekleye biliriz.

p, h3
{
font-family: Arial;
font-size:2;
font-weight: bold;
}

Seçiciler ikiye ayrılır. Sınıf Seçicisi ve Id Seçicisi. CSS ile işlenmemiş bir dökümanda başlangıçta bir plan yaparak hangi içeriğin Sınıf Seçicisi hangi Seçicicinin Id Seçicisi olacağını planlamalıyız.

Sınıf Seçicisi(Class Selector)

Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız. Bir örnek verecek olursak; hazırlayacağımız dökümanda iki adet paragraf tanımlaması yapacağımızı planlıyoruz. Bunlardan biri sağa dayalı, diğeri ise ortalı olmasını istiyoruz

p.sagadaya {text-align: right}
p.ortala {text-align: center}

Bu Seçicileri sayfamızda uygulamak için;

<p class="sagadaya">Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız.</p>
<p class="ortala">Yukarıdaki bilgiyi dikkatlice okumalısınız</p>

Birde önemli bir tanımlama yapacağınızı düşünün, ancak sadece bir HTML elementine değilde istediğiniz sayıda HTML elementinde bunu kullanmak isterseniz;

.ortala {
text-align: center
}

Bu tanımlamayı yaptıktan sonra istedğimiz her HTML elementine bu sınıfı uygulayabiliriz.

<span class="ortala"> Burada birşeyler yazar </span>
<p class="ortala">Burada da başka bişeyler yazar</p>

Çoklu sınıflar, birden fazla sınıfı bir HTML elementine uygulamak için kullanılır.

<p class="onemli uyari">Ülkemizde meydana gelen trafik kazalarının yaklaşık % 90'ı insanların hataları sonucu eydana gelmektedir.</p>

Yukarıdaki örnekte görüldüğü gibi bir uyari Sınıfımız birde onemli Sınıfımız mevcut. Bazı metinlerin önemli uyarı olacağı düşüncesi ile böyle bir atama yapılabilir. Bunun için kullanıcığımız kod;

.onemli {
font-weight: bold;
}
.uyari {
font-style: italic;
}
.onemli.uyari {
background: silver;
}

Önemli metinler için kalın, uyari için italiktik atmalar yapıyoruz. Birde her ikisine birden de atama yapabiliyoruz. Dikkat ederseniz class=”onemli uyari” olarak atama yaparken CSS Seçicisinde .onemli.uyari şeklinde yazıyoruz.

Id Seçecileri

Id Seçicisi Sınıf Seçicisinden farklıdır. Sınıf Seçicisi sayfada birden fazla elemente atanırken Id Seçicisi sadece bir tane elemente atanır. Seçicisi adının başında # işareti olan Seçiciler Id Seçicisidir.

...
#mavi
{
background:blue;
}
#kirmizi
{
background:red;
}

<p id="mavi">Bu yazının arkafon rengi mavi</p>
<p id="kirmizi">Bu yazının arkafon rengi kırmızı</p>

Sınıf mı? Id mi?

Yukarıda Id Seçicisi için her nekadar da bir sayfada sadece bir defa kullanılır desekte tasarımcının sayfada bir çok yerde kullanmasına tarayıcılar ses çıkarmaz, yani hata mesajı vermez. Ancak Bu elementleri DOM scriptlerinde kullanırken Id atamasını bir kaç yerde yaptığımızda hata alacağızdır. Bu nedenle her nekadar tarayıcılar izin versede Id Seçicisini bir kez kullanmalıyız. Birden fazla kullanacağımız elementler için Sınıf Seçicisini kullanmalıyız.

Bu kodumuzu daha kullanışlı ve temiz yapacaktır.

Sınıf ve Id Seçicileri küçük-büyük harfe karşı duyarlıdır;

p.onemliBilgi {
font-weight: bold;
}

ve kullanımıda;

<p class="onemlibilgi">Uygulama olmaz .</p>

Yukarıdaki kod uygulanmayacaktır çünkü ” B ” bir yerde büyük birde küçük kullanılmıştır. Bazı eski tarayıcılar bu kuralın dışında kalabilir.