Wordpress Tema Düzenleme Ve Kullanma Rehberi
Ö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..
Ö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..
(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.
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 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
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.
örsel kısım'ı bir tarafa bırakıp asıl baba kısım olan kodlama kısmına gelelim...
Yukarıda değindiğim header,footer,index,home gibi templatelerde wordpress'e özgü bir çok kod bulunmaktadır..Bunları help sheet halinde bulabilirsiniz.
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 <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.