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.

Bu işlemi yaptıktan sonra tema dosyalarını açarak yazıları dilediğiniz gibi değiştirebilirsiniz.

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ı (<div class=”post”>) 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.

1
2
3
4
5
6
7
.post {
border:2px solid #101010; /*Kenar kalınlığı*/
-moz-border-radius:8px; /*Sadece Mozilla Firefox tarıyıcısında geçerli olan "border" değerindeki kenarlıkları oval şekle getirir*/
background: #333333; /* Zemin Rengi */
padding:5px 6px 0px 6px; /* İçeriğin element sınırlarına olan uzaklık değerleri*/
margin-bottom:0px; /* İçeriğin komşu elemetlere olan uzaklık değerleri*/
}

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

Atiberk.Org Firebug Modifiye

Kendinize iyi bakın…..

ATiB3RK // Atiberk.Org

14 Yorum Yapılmış

  1. 1

    Mehmet Selim
    Çarşamba 30 Tem 2008 4:17 am

    Berkan çok güzel bir konuya değinmişsin bu işlere yeni girenler için gerçekten önemli bir konu güzel’de anlatmışsın eline sağlık.

  2. 2

    AraneLWorM
    Çarşamba 30 Tem 2008 11:47 am

    Helal berkanım mükemmel ve ötesi olmuş cidden tebrikler kelimeler yetmez :wink:

  3. 3

    müJdaT
    Çarşamba 30 Tem 2008 12:35 pm

    saolasın kanka iyi mıcıklamışsın temayı :)

  4. 4

    Storm-X
    Çarşamba 30 Tem 2008 5:04 pm

    Tşk Ederim Berkan. Bana Tek Tema Türkçe Yapmak Lazımdı Onuda Sen Yazdın Saol Berk Tşk. :wink: :tongue:

  5. 5

    BLaSTER
    Çarşamba 30 Tem 2008 7:03 pm

    10 numara karde$im :)

  6. 6

    users
    Çarşamba 30 Tem 2008 7:09 pm

    Dostum cok guzel bişeye değinmişsin saol.. Herkes anlatıyor ama senin kadar detaylı anlatan yoktu tekrar tşk.
    Şu bağlantılar kısmındaki resimleri nasıl koyuyoruz link olarak :whistle:
    Bu yazıların devamı gelicek dimi :tongue:

  7. 7

    ATiB3RK
    Çarşamba 30 Tem 2008 7:31 pm

    @users, Teşekkürler dostum :smile: Bağlantıları ben kendim css ve html ile yaptım fakat onunda eklentisi var.Alisko tarafından yazılan eklentiyi kullanabilirsin.

  8. 8

    ÖM3R
    Çarşamba 30 Tem 2008 10:38 pm

    Affınızı diliyorum cahilliğime verin … Hiç bişi anlamadım :blink: :blush: Ama eminim ati çok güzel şeyler anlatmıştır :wink: :cheerful:

  9. 9

    Storm-X
    Çarşamba 30 Tem 2008 10:40 am

    @ÖM3R Emin Ol Ömer ATi Çok Güzel Şeyler Anlattı :biggrin:

  10. 10

    ByDesigner
    Çarşamba 30 Tem 2008 4:55 pm

    ßerkan emek harcamışsın. Uzun bir süre seni bilgisayar başında tutmuştur bu konu :) Arkadaşlarını, aileni, akrabalarını aksatıyorsun bak.

  11. 11

    By_3R4Y
    Çarşamba 30 Tem 2008 5:49 pm

    s.a arkadaşlar benim bu yazılanlarla bi âlâkam yok sadece bişey sorucakdım

    http://wp-life-cover.wordpressthemed.com/
    http://wp-city-vector.wordpressthemed.com/

    bu linklerdeki siteleri farklı kaydedip dreamweaverda düzenleyerek kişisel bir sayfa yapmak istiyorum
    ama farklı kaydettiğimde grafikler silik çıkıyo ve sitenin indexini metn belgesinde açıp içinden grafiklerin urllerini bulup tek tek indrmek uzun zaman alıyo kesinlikle bunu bi yoLu oLmalı ben beceremiyorum ama bu sizin için bi çock oyunğı gibi bişi oLmaLı.
    Şimdden yardım ettiğiniz için teşekkürler…

    Darbzenin sitede 10numara bu arada

  12. 12

    ATiB3RK
    Çarşamba 30 Tem 2008 6:33 pm

    @By_3R4Y, sayfayı template olarak kaydedebilirsin Eray fakat imageleri çekmek dışında çocuk oyuncağı gibi bi yöntem yok.Ancak ben denemedim ama HTMLTemplateleri çalmak için yazılan “HTTrack” yazılımıyla bir dene istersen Türkçe dil desteği mevcut.

  13. 13

    By_3R4Y
    Çarşamba 30 Tem 2008 6:06 pm

    Oldu bu iş saoL aTi bagH bunu yabdıMm

    http://pageineray.googlepages.com/index.html

  14. 14

    eray usta
    Çarşamba 30 Tem 2008 12:12 pm

    çok teşekkürler bomba bu paylaşım bloguda ekledim sık kullanılanlara :D

Yorum Yazın