WordPress

WordPress Tema Yapımı (WTY Projesi)

Wordpress Tema yapımı konusunda alternatif olarak fazla makale bulunmadığından dolayı birkaç makale hazırlamak istedim.. Öncelikle wordpress tema yapımı konusunda temel bilgilerimi paylaşarak sırayla eğlenceli biçimde anlatmaya çalışacağım.. Bu makaleden sonra WordPress ‘e geçesim var :)

WordPress Tema yapımı konusunda alternatif olarak fazla makale bulunmadığından dolayı birkaç makale hazırlamak istedim. Öncelikle wordpress tema yapımı konusunda temel bilgilerimi paylaşarak sırayla eğlenceli biçimde anlatmaya çalışacağım..

Nasıl Bir Tema Yapmak İstiyoruz?

Öncelikle karar vermemiz gereken noktaların başında geliyor..Nasıl bir tema yapmak istiyoruz sorusuna aklımıza geçenleri yazarak başlıyalım..

  • Temada üst kısımda menü,sağ kısımda “son yazılar vs“,sol kısımda son konular ve alt kısımda da siteyle ilgili bilgiler bulunacaktır.
  • Arkaplan olarak açık gri üzerine üst kısımdan aşağı doğru azalan Gri renk Gradient kullanılacaktır.Arkaplan Renk Kodu (#E5E5E5)
  • Sol kısım ve sağ kısım birbirinde ayrı kutucuklarda 1′er pixel kenarlıklarla kutucuk şeklinde olacaktır..
  • Konu başlıkları 18 Pixel Boyutunda Verdana-Bold olacaktır..
  • Konu içeriği ise 12 pixel boyutunda koyu gri renkte olacaktır..
  • Sitenin toplam genişliği 910 pixel olup sol kısım 600 pixel sağ kısım ise 300 pixel olacaktır..10 Pixel ile de sağ ve sol kısımlar birbirinden ayrılacaktır.
  • Yazıların altında yazar adı-tarih ve yorum sayısı kutucukları bulunacaktır.
  • Temada yazılar için özel resim alanı bulunacaktır.Bunu istersen wordpress özel thumbnail fonksiyonuyla istersen de özel alan bölümüyle ekleyebilirsin.
  • Siteye video ekleme vs gibi modülleri de alternatif olarak eklenecektir.
  • Menü altında sol kısımda logo,sağ kısımda ise arama yada twitter tarzı bilgilendirme kutucuğu konulacaktır..
  • Logonun altında ise kategorileri belirten bir menü daha konulacaktır.
İlginizi çekebilir;  Mailchimp Nedir? Mailchimp Nasıl Kullanılır?

Şimdi yukarıda kafamızdaki temayı hafif hafif oluşturduk..Sıra geldi detaylarına ve kodlamasına..

Kodlama olarak CSS-XHTML bilginizin iyi derecede olması sizin işinizi kolaylaştıracaktır.Eğer elinizde hazır olarak bir şablon varsa bu aşamaları geçebilirsiniz..

Öncelikle şablonları yaparken tabloların içine mümkün olduğu kadarıyla doldurup tekrar gözden geçirin..Yani boş tablolar yerine yazı girilmiş tablolar yapın..Bunun için “lorem ipsum” olarak bilinen lipsum.com üzerindeki hazır metin kalıplarını kullanabilirsiniz.

Kafamızdakini çok basit olarak kağıda yada photoshopa çizin. Kafamızdaki şablonun tam olarak genel hatlarını CSS-XHTML ile yazdıktan sonra sırasıyla temayı parçalama ve farklı farklı bölümlere uygulama aşamasına geçeceğiz..

Öncelikle kullanacağımız programları yazarak temel bilgileri ve ihtiyaçları yazalım..

WordPress Tema Yapımı için Gerekli Malzemeler

-Bir adet localhost programı (CSS-XHTML bittikten sonra dosyaları entegre etmek için) (Xampp Tavsiyemdir)

-Photoshop veya alternatif resim programı..(Görsel obje kullanmasak bile bazı basit görseller için lazım olabilir)

-Wordpad benzeri bir program..Bunun için tavsiyem Notepad++ olacaktır..Ücretsiz ve UTF8 konusunda sorun yaşamazsınız..

XHTML-CSS tasarım konusunda ise isterseniz notepad++ üzerinde yazın isterseniz de SharePoint (Expression Web) gibi yada DreamViewer gibi programlarla tasarımınızı hazırlayın.

Ben Expression Web kullanıyorum genellikle kodların düzeni açısından ve kolay olduğu için :)

-Bir adet tarayıcı ve azimle öğrenmek isteyen bir beyin yeterli olacaktır.

WordPress konusunda gelen maillerden dolayı WordPress Tema Yapımını (WTY) Video olarak anlatmak yerine bu şekilde detaylı olarak anlatmak istedim..

Sırasıyla tüm wordpress kodlarını-alternatif tasarım çizimlerini sizlerle paylaşacağız..

Bundan sonraki Dersleri sırasıyla yazıcak olursak..

  • WTY – CSS-XHTML Şablon Oluşturma ve Şablonu Bölümleme
  • WTY – CSS-XHTML Tasarımla WordPress Tema Kodlarının Entegrasyonu
  • WTY – Header.Php (Site üst kısmı) Özel Olarak kodlanması ve Menüler
  • WTY – Index.Php (Ana Sayfası) Özel olarak Kodlanması ve Fonksiyonları
  • WTY – Sidebar.Php (Yan Menü) Özel olarak Kodlanması ve Fonksiyonlar
  • WTY – Footer.Php (Site Alt Kısım) Özel olarak Kodlanması ve Footer Tavsiyeleri
  • WTY – Single.Php (Yazı Sayfası) Özel olarak Kodlanması ve Fonksiyonlar (Bu makale biraz uzun olacak :) )
  • WTY – Comment.Php (Yorum Sayfası) Özel olarak Kodlanması ve Fonksiyonlar
  • WTY – Archive.Php (Arşiv Sayfaları) Özel olarak Kodlanması ve Fonksiyonlar
  • WTY – Category.Php (Kategori Sayfaları) Özel olarak Kodlanması ve Fonksiyonlar
  • WTY – 404.Php (Hata Sayfaları) Özel olarak Kodlanması ve Fonksiyonlar
  • WTY – Search.Php (Arama  Sayfaları) Özel olarak Kodlanması ve Fonksiyonlar
  • WTY – Author.Php (Yazar  Sayfaları) Özel olarak Kodlanması ve Fonksiyonlar
  • WTY – Functions.Php (Fonksiyonlar) Özel olarak Kodlanması
  • WTY- Alternatif Sayfalar ve Özellikler Ekleme
İlginizi çekebilir;  WordPress 3.0.3 çıktı!

Umarım bu tema tasarım işini kısa sürede bitirip güzel bir kaynak sayfası oluştururuz..

Dersleri hazırlamadan önce varsa alternatif fikirleriniz yorum olarak yapabilirsiniz..

Hem kendi bilgilerimi yenilemek WTY hakkında detaylı bilgileri toplamak istedim..:)

Tüm yazılar bitince de derleyip bir pdf dosyası halinde sunarız tr.wordpress.org’a :)

Emre Allison

Tam bir teknoloji aşığı, yazılım, donanım meraklısı ve sıkı bir web geliştiricisiyim. Tecrübe ve birikimlerini güncel teknolojik gelişmeler ışığında daha geniş kitlelere ulaştırabilmek adına emreallison.com‘da devam ettiriyorum.

3 Yorum

  1. oooo anlatım için gerçekten süper bir konu

    wordpress geçmeyi düşünüyorum geçersem ilk inceleyeceğim konulardan biri :)

     

    Teşekkürler eyildirmaz.com

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu
error: