İPUCU

Seçenekler

Wordpress Tema Düzenleme Ve Kullanma Rehberi

DeneyimsizDenek - ait Kullanıcı Resmi (Avatar)
İstihbarat Ekibi Co-Admin
Üyelik tarihi:
02/2011
Nereden:
Gökyüzü
Yaş:
29
Mesajlar:
12.127
Konular:
2306
Teşekkür (Etti):
2190
Teşekkür (Aldı):
8460
Ticaret:
(0) %
21-07-2014 23:52
#1
Wordpress Tema Düzenleme Ve Kullanma Rehberi
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:

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

<div id="header" role="banner"> 
    <div id="headerimg"> 
        <h1><a rel="nofollow" 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.

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

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.

Kod:
#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

Kod:
<h1><a rel="nofollow" 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..


Kod:
<h1><a rel="nofollow" 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.

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.

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:
Kod:
<?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.
---------------------

ATATÜRK'LE KALIN...

CUMHURİYETLE KALIN...
SAĞLICAKLA KALIN...



BLOGUMA GİTMEK İÇİN TIKLA!
info@caglar-celik.com
Twitter : @ddenekk


oktayparlak12 Teşekkür etti.

Bookmarks


« Önceki Konu | Sonraki Konu »
Seçenekler

Yetkileriniz
Sizin Yeni Konu Acma Yetkiniz var yok
You may not post replies
Sizin eklenti yükleme yetkiniz yok
You may not edit your posts

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodları Kapalı
Trackbacks are Kapalı
Pingbacks are Kapalı
Refbacks are Kapalı