tarihinde yayınlandı 6 Yorum

wordpress teması nasıl yapılır 2.Ders


WordPress’te Nasıl Tema Yapılır? (2)

WordPress için nasıl eklenti yazılır makalemin ikincisi olan bu yazımda artık temayı tamamlıyoruz 🙂 Tabi bu yazıyı okumadan önce nasıl eklenti yazılır 1 makalesini okumanızı şiddetle öneririm. Hadi artık işe başlayalım.

 

Bir temanın dosyaları temel olarak şunlardır :

index.php :Sitemizin ana dosyasıdır. Bu olmadan tema olmaz 🙂 Kısacası anasayfadır.
header.php : Sitenin üst kısmıdır.
footer.php : Sitenin alt kısmıdır.
sidebar.php : Sitenin sütununun bulunduğu dosyadır.
comments.php : Herhangi bir yazıdan sonra görünün yorumların çağırıldığı dosyadır.
screenshot.png : Sitenin önizleme dosyasıdır.
style.css : Stil dosyasıdır. Tasarım işinizin merkezidir.

single.php : Bir yazının tam halinin görünmesi için çağırılan dosyadır.
page.php : Bir sayfa açıldığında kullanılan dosyadır.
archive.php : Arşivdeki yazılara bakmak için kullanılan dosyadır.
search.php : Arama yapıldığı zaman görünen sayfadır.
404.php : Bulunmayan bir sayfa sonucunda ekrana gelen dosyadır.

Yukarıda style.css dosyasından sonra boşluk bıraktığımı farketmişsinizdir. Bunun sebebi sizin için gereken minimum dosyaları göstermektir ve üsttekilerdir. Nitekim wordpress ile birlikte gelen classic temasında sadece üst tarafta belirttiğim dosyaları görürsünüz(page.php, single.php falan yoktur).

Buraya dikkat edin. İşin en önemli noktalarından birisi. WordPress’te örneğin bir sayfayı(page) açmak istediniz diyelim. WordPress ilk önce page.php dosyasını arar. Eğer bulamazsa index.php dosyasını çağırır. Ekrana sonucu index.php dosyası gösterir. Böylece hem az dosya kullanırsınız, hem de bütün sayfalarınız, arama sonuçlarınız, arşiv yazılarınız (yani yukarıda single.php’den 404.php dosyasına kadar yazmış olduğum dosyalar) index.php dosyasından gösterileceği için tek tip olur. Yani site tam bir bütünlük arzeder.

Eğer bütün site aynı şekilde görünsün diyorsanız sadece üstteki dosyaları kullanın. Gereğinden fazla dosya kullanmanıza gerek yok. Ama eğer diyorsanız ki hayır, hepsi (arama sonuçları, sayfalar, gönderiler vb.) farklı görünsün diyorsanız, bütün dosyaları kullanın. Benim hazılardığım yakuter tema 1.0 da minimum seviyede dosya kullandım. Arzu ederseniz onu inceleyebilirsiniz.

Şimdiiii işin en önemli ikinci kısmını söylüyorum. Bir temayı baştan yaratmak için boşuna kasmayın. Çünkü yazacağınız kodlar bütün temalarda hemen hemen aynıdır. Ayrıca internetteki bir çok tema yapımcısı da kendileri bu yöntemi kullandıklarını söylüyorlar. Sizin yapmanız gereken hazır bir temanın css dosyasıyla ve grafikleriyle oynamaktır. header‘da yani sitenizin üst kısmında görünecek resimden tutun da sidebar‘daki yani sitenizdeki sütunun görünümüne kadar her şeyi böylelikle değiştirebilirsiniz. Aklınıza hemen “olur mu öyle şey hiç!” gibi sorular gelebilir. Mantık şu: veritabanından kayıtlar hep aynı kodlarla alınır sadece görüntülenme de fark eder.

Evet gördüğünüz gibi hiç fark yok. Ama iki temada da ekran çıktısı tamamen farklıdır. Çünkü önemli olan style.css dosyasında header seçicisini nasıl ayarladığınıza bağlıdır.

Css dosyasında nasıl değişiklik yapacağınızı WordPress’te Nasıl Tema Yapılır? (1) adlı makalem de yazmıştım. Eğer Css’i tam anlamıyla öğrenmek istiyorum diyorsanız ki en fazla yarım saat sürer, Mutasyon.net css dersleri’ni inceleyiniz.

Diyelim ki bütün yazıların, arama sonuçlarının vb. index.php’de görünmesini istiyorsunuz. Ama mesela arama sonucu gösterdiğinde normal bir yazı gibi görünsün fakat başında büyük harflarler Arama Sonuçları yazsın. WordPress bunun için size kullanımı çok basit bir kaç fonksiyon sağlıyor( bkz. is_home(),is_page(),is_category()… )

Umarım bu bilgiler kendi temanızı hazırlamak için yeterli olur. İlk denemeniz için wordpress’in classic temasını alıp düzenlemeye başlayabilirsiniz. Eğer ki anlayamadığınız veya benim yazmayı unuttuğum bir şey varsa söyleyin, yazıma ekleyeyim 😉

tarihinde yayınlandı

wordpress teması yapmak 1.Ders

WordPress’te Nasıl Tema Yapılır? (1)

Artık böyle bir makale şart sanırım 🙂 Hazır tema kullanmaktan bıktıysanız, kendi temanızı yapmanın zamanı gelmiş demektir. Bu makaleyi iki parça halinde hazırlamaya karar verdim çünkü temelden anlatmaya başlayacağım. Önce bunu tamamlayın(zaten fazla uzun değil) daha sonra 2ncisini yazacağım. Haydi başlayalım o zaman 🙂

 

WordPress, temalarında table yerine, günümüzde daha çok geçerliliği olan css kullanmaktadır. Ben size tema yapmayı anlatırken css’in size yetecek kadarından bahsedeceğim. Gelelim temamıza. Her temanın içinde mutlaka bir style.css dosyası bulunur ve sitemizi bu dosya şekillendirir.

Yukarıda gördüğünüz gri renkli yazılar (container, content…) sitemizin temel seçicileridir. Bu makale de bunları öğrenmenizi amaçlıyorum. Kendi temanızın bulunduğu klasöre gidip, style.css dosyasını açıp içinde bu seçicileri arayın. Oradan daha iyi takip edebilirsiniz.

container: Bu seçici (yukarıdakilere seçici denir) sitemizin ana şablonudur. Sitenin sayfa içindeki yerini belirlemede(sağdan, soldan ne kadar uzakta olduğu gibi) kullanılır. Örneğin benim kullandığım Blix temasının css dosyasında container seçicisinin olduğu satır şu şekilde:

header: Sitemizin üst kısmıdır. Arkaplan resmini yine style dosyasında header seçicisiyle oynayarak değiştirebilirsiniz.

content: Blogumuzun orta kısmıdır ve yazıların ekranda nasıl görüneceğine bu seçici ile karar veririz.

sidebar: Yan sütundur.

footer: Sitemizin alt kısmıdır. Yine genişlik vb. değişiklikleri style.css dosyasında bu seçiciyi bularak yapabiliriz.

Bu konuda anlamadığınız bir nokta varsa yorumunuzda belirtin.

NOT

  • Size tavsiyem ise css’in ne olduğunu tam anlamıyla öğrenmeniz. Bunun için yarım saatinizi ayırmanız yeterli. Css öğrenmeye başlamak için tıklayınız.
  • Css dosyalarını düzenleyebilmek için normal bir notepad bile kullanabilirsiniz. Ama sıf css için yapılmış ve yaptığınız değişiklikleri önizlemeli olarak gösteren bir program da var : TopStyle Lite

WordPress tema yapımı 2.ders