Wordpress Tema Düzenleme Ve Kullanma Rehberi
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:
>
(head tagından öncesi görsel olarak birşey ifade etmediği için body tagından sonrasını incelemek istedim)
Öncelikle kısa bilgi vereyim;
-Css kodları div id veya div class fonksiyonları içerisinde "tırnak işareti" içinde olan kodlardır.. 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.
#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
Kısmı kalacaktır..
Neyse fazla uzatmadan misal biz oraya yazı değil logo eklemek istiyoruz.Diyorsanız..
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.
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:
Bu kod varsayılan css-xhtml şemalarında - Kategori 1
- kategori 2
ş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 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.
Konuya sorular geldikçe ekleme yapıp her gün benzeri açılan konulardan bir nebze olsun kurtulmuş olacağız..Ve bilmeyen arkadaşlarımıza kısa ve hızlı çözüm sağlamış olacağız..
Saygılarımla.. //Alıntıdır, güncelleme yapılacaktır. 
