Merhana arkadaşlar.. Bazen üstün performansta özelliğe sahip sitelerin coderleri /webmaster dahi wordpress bloguna dışarıdan bulduğu ücretli ya da ücretsiz template / temaları kullanmaktadır. İnternetimizin tuvaletimize kadar girdiği bu dönemde; blog, günlük, /hit kazanmak amaçlı site, vb kullanımlarımızda en çok kullanılan CMS sistemlerinden biri WordPress’tir. WordPress, artık hayatımızda okadar yer edinmiştir ki tema denince akla wordpress gelmesi, internet üzerinde en çok satış yapan ve ticareti yapılan temaların wordpress tema olması, wordpress tema değiştirmek, kullanılan siteyi başka bir havaya sokması, tek bir tema ile sitenin amacını değiştirmesi gibi bir çok olanağıyla wordpress temaların önemli / cidden önemli bir yer edindiğini ben şahsımca kavramış durumdayım.. Peki neden çoğu webmaster ya da coder lar kendi temalarını yapmak yerine başka tema kullanırlar diye soracak olursak, bunun birçok yanıtı olabilir ki mükemmel bir tema ortaya koymak için çok çalışmak gerektiğini düşünmekteyim..

Her neyse. Bu konumuzda en baştan alarak wordpress tema nasıl yapılır, nereden başlanır hangi pethodlar kullanılır bundan bahsedeceğim.. Benim anlatacağım tarz ile, wordpress tema yapabilmek için aşırı bir PHP bilgisine sahip olmanız gerekmiyor.. Biraz photoshop ve CSS mantığı ile bu işi çözmeyi amaçlamaktayım.. Hadi kolay gelsin..

Anlatımlarımı Part part yapmaktan yana buldum.. Hem daha anlaşılır hem de güzel bir ders olsun istedim.

1. Blog’a ön bakış

Başlamadan önce WordPress Default temasını incelemenizi öneriyorum. WordPress Default temasına bakın nasıl yapılandırışmış. Akılda kalmasını ve terimlere aşina kalmak istiyorsanız not alabilirsiniz.(eader, post title, search form, navigation, footer, vb..)

Default Frontpage (index.php)

Default Single (single.php)

2.Photoshop Örnekler

Yapacağımız temada, photoshop kullanarak Photoshop tabanlı örnek blog tasarımı oluşturacağız. Default ayarlamalarılyla uğraşmak yerine ben, glossyblue adlı temayı kullanacağım. (temayı indirmek için tıkla). Glossyblue temasını kullanmamın amacı, elimde tema arayüzünün psd dosyası bulunduğundan dolayıdır. Sizde isterseniz demo.zip dosyasını indirerek psd dosyasına ulaşabilirsiniz.Artık psd dosyamıza da ulaştığımıza göre temamızı resim çizer gibi Photoshop programı ile oluşturabiliriz. Tabiki, layer ayarlarını ve çizgisel hizalamayı bozmayarak..

3. HTML + CSS

PSD tasarımını tamamladıktan sonra temanın her sayfası için statik HTML + CSS  oluşturacağız. GlossyBlue Temasın içerisinde az önce verdiğim demo.zip de bulunan HTML sayfalarını kullanabilirsiniz. Zip dosyasından index.html, single.html, ve  page.html dosyalarını çıkarın. Örnek çalışmamda bu HTML sayfalarını kullanarak yeni bir tema oluşturacağım.

Neden static HTML + CSS Dosyası oluşturuyoruz?

Çünkü Temamızın geliştirme sürecinde bize oldukça yardımcı olacaktır.Ben her temamda HTML dosyasını kullanırım, çünkü test edebilmek, CSS ve HTML yi tam olarak kullanabilmek ayrıca zaman ve emek kaybını engellemek açısından HTML + CSS dosyası oluşturmayı yararlı bulmaktayım.

4. WordPress Temaları Nasıl Çalışır?

WordPress’in default temasına bakarsanız (wp-content/themes/defeault) birçok php dosyası ve bir tane de style.css dosyası göreceksiniz. Browserınızda WordPress Anasayfanızı götüntülediğiniz zaman kullandığınız tema size aslnda index.php yi gösterirmiş gibi gelsede aslında index.php dosyasının içerdiği kodlara bakılacak olursa header.php, sidebar.php, ve  footer.php dosyalarından oluşan bir kalıp görmekteyiz.

Daha fazla kod bilgisi için wordpress’in Site Architecture ve  Template Hierarchy sayfalarını ziyaret ediniz.

5.Tema Dosyamızı Yeniliyoruz

wp-content/themes klasörüne GlossyBlue HTML dosyalarını kopyalayın.Daha sonra, wordpress default temasında bulunan comments.php ve searchform.php dosyalarını glossyblue tema klasörüne atın.

6. Style.css

WordPress Default temasındaki style.css dosyasını açınız. Style sayfamızın ilk başındaki kodları ve temanın bize ait olduğunu vurgulamak için bir tanım metni yerleştiriyoruz. Glossyblue temasındaki style.css sayfasını not defteriyle açarsak oradaki bağlantıları kendimize uygun olarak değiştiriyoruz.

7. Dosya Bölme

Şimdi, index.php dosyamızı ele alarak , hangi dosyayı nasıl böleceğizi anlayalım.index.php dosyamızı; header.php, sidebar.php ve footer.php olarak 3 ayrı dosyaya böleceğiz.Aşağıdaki resimde glossyblue temasındaki index.php dosyasının bir kütüğünü çizdim

8. Header.php

index.html dosyamızı açalım.Sayfanın başından <!–header–> ibaresine kadar keselim. Yeni bir php dosyası oluşturarak kestiğimiz kodu içerisine yapıştırın, adını da header.php olarak kaydedin.

Default temamızın header.php dosyasını açın. PHP kodları gereken yerleri kopyalayın (<title>, <link> stylesheet, <h1>, ve <div>.)

Navigasyon Menü (wp_list_page)

<li> etiketinin yerine <ul id=nav> ve aşağıdaki kodu ekleyin.

<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>

Bilgi:  wp_list_pages.

9. Sidebar.php

index.html dosyamıza dönerek <form id=searchform> den başlayıp <div id=sidebar> etiketine kadar kesiniz. Yeni bir php dosyası oluşturup içine kopyalayın ve adını sidebar.php koyun.

<form id=searchform> yerine

<?php include (TEMPLATEPATH . ‘/searchform.php’); ?>

<li> Katagori etiketinin yerine

<?php wp_list_categories(‘show_count=1&title_li=’); ?>

ve  <li> arşiv etiketinin yerine

<?php wp_get_archives(‘type=monthly’); ?> kodlarını koyarak değiştiriniz.

10. Footer.php

index.html dosyamıza tekrar dönerek <div id=footer> dan alıp </html> koduna kadar kesin. Yeni bir php dosyası oluşturup kestiğiniz kodu yapıştırın, dosyanın adını footer.php olarak kaydedin.

Son Yazılar

Bu kısımda son 5 yazıyı gösterebilmek için query_post kodlarını kullanacağız.

Son Yorumlar

Son yorumlar bölümü yalnız bir eklenti tarafından oluşturabilir.(tema klasörümüzde mevcut)

11. index.php

Artık index.php dosyamızı oluşturabiliriz.index.html dosyamıza baktığımızda elimizde <div id=content> satırından başlayan kod parçacıklarını görmemiz gerekiyor..index.php sayfamıza get_header, get_sidebar, ve get_footer satırlarını sırasını değiştirmeden kopyalıyoruz.

12. Döngüleri anlayalım?

Aşağıdaki resimde döngüler (loop) nasıl çalışıyor görebilirsiniz. Loop  blog yayınlarını nasıl görüntülemek isteğimizi gerçekleştirir. Loop olayı, eğer görüntülenen sayfada bir blog varsa bunu görüntülemeye eğer yoksa da NOT FOUND , yada bizim daha önceden atadığımız 404 hata sayfasını getirmeye yarar.

13. Loop’ u kopyala

Default temamıza giderek index.php dosyamızı açalım. Loop satırını kopyalayalım ve <div id=content>..</div> komutlarının arasına yerleştirelim. Daha sonra static etiketlerin yerine wordpress Tema Etiketlerini kullanalım:post date, title, category, comments, next ve previous link.

14. Tema Önizleme

Tebrikler! Temamızın ön görünümünü yapmayı başardık. Şimdi sitemizin admin paneline girerek Görünüm kısmından temalara giriniz ve grossyblue temasını etkinleştiriniz.

15. Single.php

Şimdi single.php dosyası yapma zamanı geldi.İsterseniz diğer dosyalarımızda yaptığımız gibi default seçeneğindeki single.php dosyasını kullanabiliriz. Fakat;ben default temamızdaki single.php dosyamız ve geride kalan index.php dosyalarımız mıncıklamak istiyorum.Default temadaki single.php dosyamızı açarak şablonumuzu oluşturacağımız etiketleri kopyalıyoruz. comments_template içeriğini ve resimde seçtiğim bölümleri alıyoruz;

16. page.php

page.php dosyamızı zaten single.php dosyamızla birlikte oluşturduk. post date, comment form, next/previous linklerini silerek page.php dosyamızda hazır hale gelecektir. bu kodları sildikten sonrada page.php dosyamız da hazır..

17. HTML dosyalarını silelim

Ve son örneğimiz.. Son aşamada ise size arşiv sayfamızı nasıl oluşturacağımızı göstereceğim.. Sitemap pluginini kullanmadan da arşiv dosyasıyla Arama motorlarının sitemizin herbir linkine ulaşmasını sağlayacağız.Default temamızdaki archive.php dosyanını kopyalıyoruz. Aşağıda verdiğim, istemediğimiz kodları siliyoruz;

Burada query_post u kullanarak  (showposts=-1 bütün sayfaları göstermek) bütün sayfalarımızı gösteren bir sayfa oluşturuyoruz.

Daha sonra admin panelimize girerek yeni bir sayfa oluşturuyoruz ve adını da ARCHİVES  olarak atıyoruz. Ve Temamızın dropdownunda arşiv sayfamızda hazır oluyor.

Bir daha ki dersimizde aynı temamızı kullanarak temaya eklentiler ekleyecek ve jquery kullanarak güzel görünümlü bir tema yapmayı hedefliyorum.. İlginiz için teşekkürler..