Eray USTA

Şimdi uğraştıracak olan kısma geçiyoruz J. Öncelikle photoshop veya benzeri bir programla sitemizin resimlerini ayarlayalım. Yaptığımız tasarımı sonucunu parçalara ayırıyoruz. (İlerde Ders olarak anlatılacaktır.) Sonra bu parçaları stil3.css dosyamızı stil2.css dosyasının aynısını kopyalayıp aralara bacground-image etiketlerini ekliyoruz. Birkaç tane daha eklememiz olacak. stil3.css dosyasına stil2.css den farklı olanlarıda yazarak belirteceğim. İsterseniz index4.html dosyası oluşturup ondan stil3 ü çağırırsak aradaki değişikliği daha belirgin olarak görebiliriz. Şimdi stil3 dosyamızın kodlarına bakalım. devamını oku…

Şimdi stil2.css ve index3.html dosyamızı geliştirelim ve genel hatlarıyla sayfa görüntümüzü belirleyelim. İndex3.html dosyamızın kodları aşağıdaki gibi olacaktır.

İndex3.html de eklediğimiz bazı class lar var. Eğer index3.html dosyasındaki classlardan atladığınız olursa sayfada kaymalar olabilir. O yüzden eklediğim etiketlerin yanına index3.html de eklendi yazdım. devamını oku…

Şimdi 2.kısma geçip kodlarımızı geliştirelim. İndex2.html kodlarına bir göz atalım. İkinci html dosyamızda stil1.css ye bağlı olarak çalışacaktır.

devamını oku…

Tema yapmaya başlamadan önce kafamızda temanın ana hatlarının nasıl olacağını oluşturmamız gerekiyor. Ve gerekirse tasarımı kağıt üzerine döküp öyle başlamalıyız. Ben size 3 kolonlu tema yapımından bahsedeceğim. Anlatacağım temanın genel hatları aşağıdaki gibi olacak.

Şimdi öncelikle ilk bölümlerde wordpress e yönelik bir şeyler yapmayacağız. Genel olarak kodlarla wordpress benzeri bir tema geliştireceğiz. Sonra wordpress e uyarlayacağız. Şimdi masaüstüne bir klasör açalım ve içine index1.html ve stil1.css diye iki tane dosya kaydedelim. Şimdi genel olarak temada kullanacağımız ana hatlarını içeren kodlarımız aşağıdaki gibi olacak devamını oku…

Öncelikle bahsetmek gerekirse tema yapımına en baştan başlayacağız. Yani html kodlarından itibaren adım adım ilerleyerek sonunda temamızı elde edeğiz. Yazı dizisi sonunda ise kaynakları ve işe yarayabilecek bir sürü site linki vereceğim. Öncelikle adım adım ilerleyeceğimiz için ilk 4 yazıda html olarak wordpress temamızı tasarlaycağız. Ardından bunları php ile kodlayıp wordpress dosyamıza entegre edeceğiz. Şunuda belirtmekte fayda var. Bazı kısımları çok seri atlayacağız. O kısımları yazı disizi sonunda yeni bir ders olarak anlatacağım. Fakat bu anlattığım şekliyle bile eğer css ve html bilgisine sahipseniz yeterli olacaktır. Nisan ayının ortalarına doğru videolu olarak bedava dağıtılan xhtml ve css ile tasarlanmış temaları wordpress teması olarak yapmayı anlatacağım.

Arkadaşlar anlatımları bitirdim. Bunun yanınnda wordpress kurulumunu anlatan sitelerden oluşan yazımıda ekledim.  Aşağıda tüm serinin linkleri mevcut

• Tema Yapımı 1. yazı
• Tema Yapımı 2. yazı
• Tema Yapımı 3. yazı
• Tema Yapımı 4. yazı
• Tema Yapımı 5. yazı
• Tema Yapımı 6. yazı
• Tema Yapımı 7. yazı
• Tema Yapımı 8. yazı
• Tema Hiyerarşisi
• Wordpress Kurulum (Künye)

Şuanda kendisini kullanmış olduğun temanın türkçesini burdan orjinali indirmek  içinse burdan yararlanabilirsiniz.

Güncelleme: 13.10.2009 Türkçe demo sayfasına göz atabilirsiniz. Tema tab menülü reklam bannerlı ve 3 sütunludur. Tema tamamen türkçeleştirilmiştir. Kendime göre ayarladığım yerleri değiştirmek için sidebar.php dosyasına bakabilirsiniz.

Güncelleme: 10.10.2009 Kendi sitesi tema bağlantısını silmiş link kaldırılmıştır.