Emre Çolak | Web Tasarım - Seo - Wordpress » wordpress tema edit http://www.emrecolak.net Emre Çolak'ın, ilgilendikleri ve günlük olaylar hakkında yazdığı günlük. Wed, 08 Sep 2010 15:38:52 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 WordPress Tema Düzenleme Ve Kullanma Rehberi http://www.emrecolak.net/wordpress-tema-duzenleme-ve-kullanma-rehberi http://www.emrecolak.net/wordpress-tema-duzenleme-ve-kullanma-rehberi#comments Tue, 13 Jul 2010 20:18:03 +0000 Emre Çolak http://www.emrecolak.net/?p=153 Okumaya devam et →]]> emre çolak-wordpress

.

Merhaba arkadaşlar bu yazımda bir temayı nasıl düzenleyeceğimiz (editleyeceğimiz) konusunda bir arşiv dökümanı olarak hazırlıyorum..Günümüzde bir çok wordpress temasının çıkması ve kullanımıyla ilgili eksiklerimizi veya temada hoşumuza gitmeyen yerlerin düzeltimiyle ilgili düzenlemeler yapacağız..

1.Temayı tanımak:
Öncelikle kullandığımız temanın dosyalarının ne işe yaradığını ve hangi dosyalarında düzenleme yapacağımıza karar vermemiz gerekmektedir..Son günlerde yeni çıkan temalarda bir çok yeni özellik eklendiğinden dolayı standart header,footer,index gibi templateler yerine bir çok artı bölümler eklendi..

Kısacası bir temayı açtığımızda bir çok “include” fonksiyonu sayesinde başka dosyalar çekilip o dosyalar entegre edildi..Bu nedenle düzenleyeceğimiz yeri sadece header,footer gibi dosyalar yerine temanızdaki diğer klasörlerde arayabilirsiniz..

Görsel Düzenleme:
Öncelikle default tema üzerinde bir tema editleme rehberi hazırlamak istedim.Yalnız biraz CSS-XHTML bilginizin olması gereklidir..Aksi takdirde style.css’de hangi kodun nereyi,nasıl değiştirdiğini bulmanız oldukça zor olur..

2.Header.Php’de düzenleme:

<body <?php body_class(); ?>>
<div id="page">

<div id=”header” role=”banner”>
<div id=”headerimg”>
<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<div class=”description”><?php bloginfo(‘description’); ?></div>
</div>
</div>
<hr />

(head tagından öncesi görsel olarak birşey ifade etmediği için body tagından sonrasını incelemek istedim)

Öncelikle kısa bir bilgi veriyim;
-Css kodları div id veya div class fonksiyonları içerisinde “tırnak işareti” içinde olan kodlardır..<div id=”page”> yazan yerde “page” kelimesi css’nizde tanımlı bir kelime olup düzenlemeleri style.css üzerinden #page tablosunda yapmanız gerekmektedir..
-Css tabloları içi içe yapılmaktadır..Bir genel tablo altında “page” örneğini görüyorsunuz,onun içerisinde farklı class ların eklenmesiyle oluşturulur..

Yani tüm sitenin genel sayfa yapısıyla ilgili bir düzenleme yapıcaksak #page classında düzenleme yapmamız gerekir.

#page {
background-color: white;
border: 1px solid #959596;
text-align: left;
}

Style.css deki bu kod div id=”page” deki değişmeleri yapar..Örneğin yazıları basit bir şekilde ortalamak için “text-align: left;” kodunu “text-align: center;” olarak değiştirebilirsiniz..

Fakat üst kısım #header tablosu altındadır..Page tüm sayfaları işgale alır..Ama header class’ı sadece üst kısmı ilgilendirir.Çünkü dikkat ettiyseniz div header lar en altta </div> sonlandırma koduyla sona erdirilmiş fakat page class’ı tüm siteyi kapsadıktan sonra sitenin en altında footer.php de sonra erdirilmektedir.

#header {
background: #73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center;
}

#headerimg     {
margin: 7px 9px 0;
height: 192px;
width: 740px;
}

#header kodunda gördüğünüz gibi bir background ve bir background rengi atanmış..Eğer biz oradan o kodu silersek header.php’mizin arkaplanı gidip sadece kod olarak eklenen

<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>

Kısmı kalacaktır..

Neyse fazla uzatmadan misal biz oraya yazı değil logo eklemek istiyoruz.Diyorsanız..

<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>

Bu kodu kaldırmamız gereklidir..Yani header.php den o kodları silmemiz gerekir..

#Headerimg class’ında gördüğünüz gibi hazırlayacağınız logo için bir boy ve bir en belirtilmiştir.740px Boyunda 192px yüksekliğinde bir resim hazırlayıp oraya koyabilirsiniz..Tabi boyutu isterseniz cssden düzeltip keyfinize göre resim atabilirsiniz..

Tabi iyi derecede css öğrenirseniz bunları ezbere kullanabilirsiniz.

Header.Php yi örnek olarak verdim ki diğer dosyalarınızda düzenleme yaparken bu mantık üzerinden kullanın..

Mesala yazı rengini değiştirecekseniz değiştirmek istediğiniz tablonun adını bulup style.css de aratın..Ardından “color”değişkenini kafanıza göre ayarlayın..Yoksa da kendiniz ekleyin..

Size alt kısımda lazım olacak bir bilgi açısından kısaca css kodlarının ne işe yaradığına dair bilgi veriyim..Aslında bu kodları ezbere bilseniz tema editlemek yerine sıfırdan tema yazmak size daha kolay gelecektir.

LİNK ÖZELLİKLERİ
a :Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur.
a:hover :Linkin imleç üzerine getirildiğindeki durumudur.
a:active :Linkin tıklandığı andaki durumudur.
a:visited :Linkin tıklandıktan sonraki durumudur.

BİÇİMLENDİRME:
color:Linkin rengini belirler.
background-color:Linkin zemin rengini belirler.
background-image:Linkin zeminine resim ekler(Bu animated-gif de olabilir.)
text-decoration:Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.
font-weight:Yazının kalınlık veya inceliğini belirler.
border:Linkin etrafına kenarlık ekler.
display:Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.

LİSTE ÖZELLİKLERİ
disk:Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
circle : Liste biçiminin çember şeklinde olmasını sağlar.
square : Liste biçiminin kare olmasını sağlar.
decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.
upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.
lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.
upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.
none : Listenin simgesiz olmasını sağlar.
inside : Listenin ikinci satırının en soldan başlamasını sağlar.
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlar.

KATMAN ÖZELLİKLERİ
position:Katmanın yerinin belirlenmesini sağlar.
absolute:Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
relative: Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.
static:Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.
top:Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.
left:Katmanın soldan ne kadar içeride olması gerektiğini belirler.
width:Katmanın genişliğinin ne kadar olacağını belirler.
height:Katmanın yüksekliğinin ne kadar olacağını belirler.
overflow:Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
auto:Otomatik olarak belirlenir.
scroll:Kaydırma çubuğu ekleyerek görünmesini sağlar.
visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar.
hidden:Sığmayan yerleri gizler.
visibility:Katmanın görünebilirlik ayarını yapar.
visible : Katmanın görünür olmasını sağlar.
hidden:Katmanı gizler.
z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.

FONT ÖZELLİKLERİ
font-family:Yazı türünü belirler.(Arial , Verdana gibi.)
font-style:Yazının normal veya sağa eğik olmasını sağlar.
font-variant:Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
font-weight:Yazının kalınlık-inceliğini belirler.
font-size:Yazının büyüklüğünü belirler.

TEXT ÖZELLİKLERİ
word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.
underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
line-through : Kelimenin ortasından çizili olmasını sağlar.
blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
none : Kelimelerin orjinal metindeki gibi olmasını sağlar.
text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
left : Metni sola yaslar.
right : Metni sağa yaslar.
center : Metni ortalar.
justify : Metni iki yana yaslar.
text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)
first-line : Metnin ilk satırının biçimlendirilmesini sağlar.
first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.

İMLEÇ ÖZELLİKLERİ
crosshair:İmlecin artı işareti şeklinde olmasını sağlar.
auto:İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar.
default:İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar.
hand:İmlecin linkte olduğu gibi el şeklinde olmasını sağlar.
move:İmlecin taşıma işareti şeklinde olmasını sağlar.
ne-resize:İmlecin sağa yatık normal ok olmasını sağlar.
nw-resize:İmlecin sola yatık normal ok olmasını sağlar.
se-resize:İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar.
sw-resize:İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar.
n-resize:İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar.
s-resize:İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar.
w-resize:İmlecin sola doğru ince ok şeklinde olmasını sağlar.
e-resize:İmlecin sağa doğru ince ok şeklinde olmasını sağlar.
text:İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar.
wait:İmlecin meşgul animasyonuna dönüşmesini sağlar.
help:İmlecin yardım-soru işaretine dönüşmesini sağlar

ZEMİN ÖZELLİKLERİ
background-color: Zeminin rengini belirler.
#color : Renk adı.
transparent: Zeminin saydam olmasını sağlar.
background-image: Zemine resim yerleştirilmesini sağlar.
url : Zemine yerleştirilen resmin adresi.
background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler.
repeat : Resmin bütün zemine yayılmasını sağlar.
repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.
repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.
no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.
background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler.
scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.
fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar
background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.
top : Resmi yukarı yerleştirir.
center : Resmi ortalar.
bottom : Resmi aşağı yerleştirir.
left : Resmi sola yerleştirir.
right: Resmi sağa yerleştirir.
…px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.

TABLO ÖZELLİKLERİ
margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.
margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.
margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.
margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.

padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.
padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

border : Tablonun kenarlarının şekillendirilmesini sağlar.

border-top : Tablonun üst kenarının şekillendirilmesini sağlar.
border-left : Tablonun sol kenarının şekillendirilmesini sağlar.
border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar.
border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.

border-width : Tablonun kenarlarının kalınlığını belirler.
border-top-width : Tablonun üst kenarının kalınlığını belirler.
border-right-width : Tablonun sağ kenarının kalınlığını belirler.
border-bottom-width : Tablonun alt kenarının kalınlığını belirler.
border-left-width : Tablonun sol kenarının kalınlığını belirler.

border-style : Tablonun kenarlık türünü belirler.
border-top-style : Tablonun üst kenarlık türünü belirler.
border-right-style : Tablonun sağ kenarlık türünü belirler.
border-bottom-style : Tablonun alt kenarlık türünü belirler.
border-left-style : Tablonun sol kenarlık türünü belirler.

border-color : Tablonun kenarlarının rengini belirler.
border-top-color : Tablonun üst kenarının rengini belirler.
border-right-color : Tablonun sağ kenarının rengini belirler.
border-bottom-color : Tablonun alt kenarının rengini belirler.
border-left-color : Tablonun sol kenarının rengini belirler.

color : Tabloda geçen metnin rengini belirler.
width : Tablonon genişliğini belirler.
height : Tablonun yüksekliğini belirler.

Görsel kısım’ı bir tarafa bırakıp asıl baba kısım olan kodlama kısmına gelelim…

2.Kod Düzeni

Yukarıda değindiğim header,footer,index,home gibi templatelerde wordpress’e özgü bir çok kod bulunmaktadır..Bunları help sheet halinde bulabilirsiniz.Benim kullandığım help sheet kodunuda burada paylaştım..

Bu help sheet de kodların ne işe yaradıkları ve hangi amaçla kullanıldıkları yazmaktadır..Fakat burada kod düzeni açısından birkaç bilgi vermek istiyorum..Genelde çoğunuz takılırsınız..

Örneğin kategorileri listeleme kodu:

<?php wp_list_cats(); ?>

Bu kod varsayılan css-xhtml şemalarında <ul><li>Kategori 1</li><li>kategori 2</li></ul> şeklinde tanır..Ve eğer temanızda ul ve li tanımlı classlar olmazsa default yani orjinal değerleri kullanır..Bunlarda linklerin başında çıkan yuvarlak discler gibi..

Bunlarıda css kodlarımıza ek fonksiyon ekleyip..Örneğin;
#menu fonksiyonumuza #menu ul li ekleyerek düzenleme yapabiliriz.Yukarıdaki css tablosunda verdiğim liste özelliklerini burada kullanabilirsiniz..

Sıkça Karşılaşılan Tema Editleme Ve Kullanma Sorunları:

  • Temada kodu düzenlememe rağmen herhangi bir değişiklik olmuyor?
    Bunun sebebi en başta bahsettiğim div classların içe içe olmasından dolayı birbirine çakışmasıdır..Misal page de color değişkenini değiştirdiğimizde color kodu tanınmamış tüm tabloların renkleri değişecektir..
  • Thumb ekliyorum fakat çıkmıyor?
    Belkide bugüne kadar bana en çok sorulan sorulardan biriside bu Öncelikle doğru thumb kodunu girdiğinize emin olun.Kullandığınız temanın içerisinde readme klasörü filan vardır..Onlarda kodları genellikle yazar.Eğer yazmıyorsa thumb kodunun ekli olduğu dosyadan thumb ismini öğrenin..Ve ona göre ekleyin.

    Diğer bir olmama sebebide cache özelliğidir..Temanızın içinde resimleri otomatik küçültmek için kullanılan timthumb benzeri eklentiler varsa onların klasörlerine yazma izinleri verin..(777) Birde dosyaları başka siteden değil de kendi sitenizden ekleyin..

  • Yan taraftaki menüyü nasıl kullanabilirim?
    Bunun için admin panelinizdeki bileşenler özelliğini kullanabilirsiniz (eğer temanın widget destekliyorsa)
  • Temam sağa sola kayıyor?
    Eğer herhangi bir düzenleme yaptıktan sonra bu sorun yaşandıysa yaptığınız hatayı geri alın..Genellikle ya fazla </div> kapatma kodu kullanmışsınızdır yada eksik.
    Yada bir konuyu direk gelişmiş editör açıkken kopyalayıp yapıştırmışsınızdır.O yüzden sorun olacaktır.

Kaynak: http://www.r10.net/wp-temalari/539350-wordpress-tema-duzenleme-ve-kullanma-rehberi.html

]]> http://www.emrecolak.net/wordpress-tema-duzenleme-ve-kullanma-rehberi/feed 1