Bu makaleyi hazırlamamdaki en büyük neden, iletişimden ve yorumlardan hep aynı sorunun sorulması “Temamı nasıl editlerim?”. Bunun üzerine bir makale hazırlamayı uygun buldum. Yapacağımız işlemleri bir tema üzerinde göstererek anlatmaya çalışacağım.Tema editlemenin dışında diğer sorulan soru da “başka bir temadaki özelliği kendi temama nasıl atarım?”. Bunada makalenin sonlarına doğru yer vermek istiyorum. O zaman hemen başlayalım.
Küçük bir hatırlatma , daha önce yayınladığım “wordpress tema türkçeleştirmek” yazımı okursanız konu daha çok pekişir.

Tema aditleme mantığı tüm sistemler için neredeyse aynıdır. Joomla,smf forum veya diğer sistemler için söylediklerimi uygulayabilirsiniz. Bunun nedeni CSS ile kodlanmış olmalarıdır. Css kodlarıyla oynadıkça bunu daha iyi anlayacaksınız.
Örnek tema olarak cleaker temayı kullanalım.
Evet üst tarafta gördüğünüz gibi temamız dosyalar halinde bir parça olarak görünür. Aslında temanın arkasında çalışan dosyalar parça parçadır. Html biliyorsanız body denilen gövde etiketi bilirsiniz. Bu etiket temamızın en tabandaki biçimlerini içerir. Aslında tüm tema body nin üstünde veya içinde tanımlanır.  Header.php dosyamız sadece üst menü, banner, arama bölümü gibi öğeleri barındıran yerdir. Yan menülerimiz sidebar.php dosyası içinde saklanır. Bazı temalar 3 sütunlu olduğundan sidebarleft.php, sidebarright.php gibi bölümlerede ayrılabilir. Yazdığımız yazıların göründüğü yerse birçok dosya olabilir. Örneğin anasayfayı ilk açtığımızda bizi index.php karşılar. Bir yazıya tıkladığımızda site bizi single.php dosyasına yönlendirir.veya iletişim linkine tıkladığımızda (iletişim linki sayfa olduğundan) bizi page.php ye yönlendirir. Bunların yanı sıra yazdığımız yorumlar comments.php dosyasında saklanır. Biz bir yazıya tıkladığımızda   single.php ye gideriz. comments.php de zaten single.php nin içinde alt tarafta tanımlanmıştır. footer.php sitemizin en altındaki açıklamalar bölümüdür. Genel olarak dosyalar bu şekilde işler. Dosyalar hakkında daha fazla bilgiyi bu yazımdan bakabilirsiniz.

Gelelim en önemli konuya yani style.css dosyamıza.  style.css içinde , temamızın tüm biçimlendirme kodları yatar. Ama temamız içinde sadece style.css dosyası olacak diye bir şart yoktur. Bunun yerine .css uzantılı başka dosyalarda olabilir. Onlarda aynı işe yarayan farklı biçimlendirme dosyalarıdır.  “.css” dosyamız içinde tanımlanan nitelikler diğer dosyalara aktarılır (daha fazla bilgi için bu yazımı okuyabilirsiniz) . Yani “.css” dosyasında renk, biçim, uzunluk, genişlik… tanımlamarı yapılır daha sonra ise “.php” dosyalarına bunlar dahil edilir.
style.css dosyamızın içinde , tanımlamalar şu şekilde belirtilir;
#(diyez) işareti.  #header gibi yada
.(nokta) işareti, .header gibi
# işaretiyle tanımlanmış bir nitelik, “.php” dosyasına aktarılırken şu şekilde işler. <div id=”header”>, <span id=”header”>…. Gördüğünüz gibi “id” koşulu # işaretiyle belirlenen yerleri belirtir.
“.” işaretiyle tanımlanmış bir nitelik ise, <span class=”header”> gibi tanımlanır. Burada class koşulu .header diye  tanımlanmış yeri php dosyasına ekler.
Buradan anlayacağımız şudur. Düzenlemek istediğimiz yerin öncelikle css ten ne tanımlama aldığına bakacaz. Örneğin düzenlemek istediğimiz yerimiz
<div id=”avatar”></div> taglarının arasındaysa, hemen css dosyamıza gidip #avatar tanımını bulup içini değiştirmemiz gerekecek.
Genel mantık budur. Şimdi bir örnekle bunu daha iyi anlayalım.
Yukarıdaki temanın test yazan tema başlığının rengini değiştirmek istiyorum. Burada test yazan yer sitemin başlığıdır. Eğer siz TASARIM BLOGUM diye bir başlık tanımlamışsanız öyle görünecektir. Test yazısını değiştirmek için ilk yapmam gereken, test yazsının hangi dosyada gömülü olduğunu bulmaktır.
Eğer bakarsak header.php içinde olduğunu görürüz.
Bu sitemizin başlığı <?php bloginfo(’name’); ?> fonksiyonu ile tanımlanır. Peki bu başlığı nasıl değiştireceğiz.Hemen bakıyoruz css ile ne tanımlanmış diye.
<h1 class=”title”><?php bloginfo(’name’); ?></h1> kodlara bakınca bu başlığımız <h1> etiketiyle verilmiş.Peki h1 etiketine ne tanımlanmış?
class=”title” . o zaman hemen .css dosyamıza gidip .title tanımı arıyoruz. Daha sonra “color:#fff” tanımında ilgiili değişikliği yapıp(ben color:red dedim) dosyamızı tekrar yazdırıyoruz.
Artık temamızın başlığının rengi değişti.
Peki header daki resmi değiştirmek istiyoruz. Ne yapacaz?
Önce temamızın içindeki images klasörüne bakıp ilgili resmi bulacaz. Daha sonra aynı boyutlarda ve aynı isimde bir resim hazırlayıp , hazırladığımız resmi temamızın images klasörüne tekrar yazdıracaz. Hepsi bu kadar. Artık temamızın üst banner dediğimiz resmide değişmiş oldu. Sıra geldi menülere;

header’daki anasayfa menülerinin rengini, boyutunu değiştirmek istiyoruz. Artık ne yapacağımızı öğrendik. Önce ilgili .php dosyamızı açıyoruz. Daha sonra menülerin nerede tanımlandığını buluyoruz. Wordpress temalarında bu menüler genelde;
<ul id=”Nav”>
<?php wp_list_pages(’sort_column=menu_order&depth=1&title_li=’); ?>
<li><a <?php if (is_page(’home’)) echo(’class=”current” ‘); ?>href=”<?php bloginfo(’url’); ?>/”>Home</a></li>
</ul>
kodlarıyla tanımlanır. Hemen kodlara bakıyoruz. CSS tanımlanması nasıl yapılmış. Göreceğiniz gibi bir listeleme tanımı yapılmış. <ul> taglarınada id=”nav” tanımlaması yapılmış. O zaman biz bundan şöyle bir sonuç çıkarmalıyız.Buradaki biçimlendirme  .css dosyasında #nav ile tanımlanmıştır. Hemen .css dosyamıza gidip #nav tanımlamasını buluyoruz ve istediğimiz değişikliği yapıyoruz.  Evet header.php de değişiklikleri yaptık, bende böyle bir görüntü oldu.

Sanırım kafamızda birşeyler oluştu. Diğer bütün yerleri aynı mantıkla değiştirebiliriz. Bir örnek daha vermek istiyorum. Örneğin sidebar.php dosyamıza bir menü daha eklemek istiyoruz. menümüz Örneğin  “en çok okunan yazılar” olsun. Hemen sidebar.php (veya sidebarright,sidebarleft) açıyoruz. Bu dosyaları açmak için size notepad++ programını öneririm.sidebar.php dosyamızı açtıktan sonra, menülerin birisinin nasıl tanımlandığına bakmamız lazım. Örneğin;
<h2>kategoriler</h2>
<ul>
<?php wp_list_cats(’sort_column=name&hierarchical=0′); ?>
</ul>
Kategoriler menüsü bu şekilde tanımlanmış.Bu tanımlamanın aynısı alıp kopyalıyoruz. Daha sonra yeni menümüzün nerede görünmesini istiyorsak orada boş bir yere yapıştırıyoruz. Yeni menümüzün ismi “en çok okunan yazılar” , kategoriler yazısıyla menümüzün ismini değiştiriyoruz. Sıra geldi menümüzün içeriğine. Gördüğünüz gibi kategoriler menüsü <?php wp_list_cats(’sort_column=name&hierarchical=0′); ?> fonksiyonuyla tanımlanmış. Bu fonksiyonu bizim fonksiyonumuzla değiştiriyoruz. Fonksiyonumuz zaten eklentiyle beraber verilir. Evet artık yeni bir menümüzde oldu….

Peki başka bir temadaki özelliği çok beğendik. Bu özelliği kendi temamıza nasıl uygulucaz. Bu işin en zor kısımlarından birisidir. Çünkü ekliceğimiz fonksiyonlara tanımlanmış css niteliklerinide almamız gerekecek. Yani ekleyeceğimiz özelliğe bir biçimlendirme yapılmıştır. Bu biçimlendirmeyi göz önüne almadan direk fonksiyonları kendi temamıza atarsak sitemiz kayacaktır. Çünkü eklediğimiz özellikle beraber, içinde tanımlanmış css nitelikleride mevcuttur.
O zaman özelliğini beğendiğimiz temanın .css dosyasınada bakmak gerekir. Biraz karışık oldu ama, sonuç olarak bir özelliği atarken içinde tanımlanmış css niteliklerinide almamız gerekir….

Bilemiyorum ne kadar anlatabildim ama en azından kafanızda birşeyler oluşmasına yardımcı olmuştur. Daha çok düzenleme yapabilmek için CSS öğrenmenizde büyük yarar var. Umarım işinize yarar, kolay gelsin