Wordpress Temalarınızı Biçimlendirin

Wordpress Temalarınızı Biçimlendirin

Merhaba Arkadaşlar....
Aslında başlıkta tam karar veremesemde en sonunda bunu yazdım.Peki bu yazımızda ne olucak ? Messenger ve mail üzerinden gelen tema konusuyla ilgili gelen soruları cevaplıyamadığım için bir makale yazarak anlatmak istedim neyse girişi uzun tutmuyalım ve başlıyalım smile

Tema Seçimi ?

Tema seçimi konusu tamamen kişinin kendi isteğine ve görüşüne kalıyor.Yapacağınız site kendi günlüğünüzse kendi hayal ettiğiniz temayı yada içeriğe uygun bir tema bulap işe başlıyabilirsiniz.
Birkaç Wordpress Tema Sitesi:

Temanızı Türkçeleştirin

Ben bu yazıda "Wordpress Firebug" temasını seçtim.Tema Türkçeleştirmelerinde en çok karşılaşılan ve en basit sorun olan "Türkçe Karakter" hatasını aşmak çok basit.Yapıcağımız işlemlerde dosyaları düzenlemek açısından kodlamada bize çok yardımca olacak bir program olan "Notepad++" indirin.Şimdi temamızın dosyalarını bu editör ile açarak Türkçeleştirelim.Türkçeleştirme yapılırken dikkat edilmesi gereken sadece ufak bir ayrıntı var.Dosyayı editör ile açtığınızda karakter setini aşağıdaki resimdeki gibi seçerseniz hiç bir sorun olmadan temanızı Türkçeye çevirebilirsiniz.

Temanızı Şekillendirin !

Türkçeleştirmeyide yaptığımıza göre artık temamızı şekillendirmeye geçebiliriz smile Temaları şekillendirmek için birçok şey yapabiliriz.Nedir bunlar ?
  • Temamızın CSS dosyası ile birçok yapısal şekilleri yaratabiliriz.
  • Photoshop ile çizdiğimiz güçlü grafiklerle temamızı dahada hoş bir hale getirebiliriz.
  • Wordpress için yazılmış birçok eklenti (plugin) yardımıyla bir takım görsellik ve fonksiyon katabiliriz.
Benim "CSS" deneyimim yok diyorsanız artık merak etmeyin.Volkan Görgülü'nün WebDeneyimleri adlı blogu sayesinde artık "CSS ve XHTML" konularına uzak kalmıycaksınız smile Volkan Görgülü çektiği videolar sayesinde sizlere bu konularda büyük derecede yardımcı olacak...

CSS ile temada ne gibi değişiklikler yapılabilir ?

Temanızın sitil (style) dosyası ile temanızdaki yazı stilleri, boyutlandırmalar, renkler vb. birçok imajı değiştirebilir yada ekleyebilirsiniz.Çoğu temada sitil düzenlemeleri aynı tanımlamalarla yapılır. (header, sidebar, post, search, main, content, logo, comment, commentform,nav, mainnav, title, byline, time, date, info, postmetadata vs. vs.)
Yukarıdaki resimdede genel olarak tanımlamaların alanlarını çizmeye çalıştım.
Benim seçtiğim Firebug temasının default haline buradan bakabilirsiniz.Ben "post" tanımlamasını (
) düzenliyerek yazıların birazdaha belirgin bir hale getirmeye çalışıcam.

Temanın default halinde "index.php" dosyasında bir "post" tanımlaması yapılmış fakat sitil (style) dosyasında herhangibi değer verilememiş.Sitil (style) dosyamda hemen bir ".post" tanımlaması yaparak değerlerimi veriyorum.
CSS:
  1. .post {
  2. border:2px solid #101010; /*Kenar kalınlığı*/
  3. -moz-border-radius:8px; /*Sadece Mozilla Firefox tarıyıcısında geçerli olan "border" değerindeki kenarlıkları oval şekle getirir*/
  4. background: #333333; /* Zemin Rengi */
  5. padding:5px 6px 0px 6px; /* İçeriğin element sınırlarına olan uzaklık değerleri*/
  6. margin-bottom:0px; /* İçeriğin komşu elemetlere olan uzaklık değerleri*/
  7. }
ve elde ettiğim görünüm:
Yukarıda gördüğünüz resimdeki gibi yazı alanını birazdaha ön plana aldım.Şimdide sade olan temamıza bir eklenti (plugin) ile hoş bir atraksiyon yaratalım smile Daha önce yazdığım "Wordpress Manşet Yazılar Sistemi" konusundaki "Wordpress Featured Content Gallery" eklentisini kullanalım.
Ve Sonuç:

Sonuç:

Evet arkadaşlar arkadaşlar size elimden geldiğince mantığı anlatmaya çalıştım.Sizlerde farklı CSS tanımlamaları yaparak, farklı eklentiler kullanarak ve çizdiğiniz grafik çalışmalarıyla hoş temalar yaratabilirsniz.Saat sabahın 5'ine gelirken bende makaleyi sonlandırayım smile Ben "Firebug" temasıyla biraz daha oynadım.İncelemek isteyen arkadaşlar temayı indirebilirler.
Not: Arkadaşlar Firebug temasının resim dosyaları "PNG" formatında olduğu için Internet Explorer 6 da sorun yaratıyor ben modifiye ettiğim temada resimlere "GIF" formatına çevirdim
Kendinize iyi bakın.....

Share this post!

Bookmark and Share

0 yorum:

Yorum Gönder

Yorum Yazarken Türkçemizi Doğru Kullanalım!