Hazırlık Aşamaları
- Tema Kalıbının Tasarlanması
- HTML olarak temanın hazırlanması
- Tema üst kısmının hazırlanması
- Tema içerik kısmının hazırlanması
- Tema için sağ blok (sidebar) hazırlanması
- Temaya alt kısım hazırlanması
- Tema stil dosyasının hazırlanması
- HTML dosyaların WP’ye uyarlanması
- Üst kısım html’nin header.php’ye çevrilmesi
- İçerik kısmının index.php olarak düzenlenmesi
- Sağ blok sidebar.php entegresi
- Alt kısmın Footer.php olarak düzenlenmesi
- Son değişikliklerin yapılması
- Mutlu / Mutsuz Son
Aslında işin sizi en çok düşündürecek kısmı burası. Siteye baktığınızda ne görüyorsunuz?
Sormanız gereken sorular şunlar:
Bu tema nasıl yapılmış olabilir?
Aynısını nasıl bir kalıba oturtabilirim?
Bu soruları düşündükten belli bir kalıp oluşacaktır zaten zihninizde
Yine de ben hazırlamış olduğum kalıbı buradan vereyim
Şu an zihnimde canlanan kalıp buydu
Yani şunları düşündüm:
Temayı kapsayan genel bir katman (div) var. Bu katman siteyi sayfaya ortalıyor ve arkaplanı beyaz.
Üstte bir header var. Headerın altında en az 5 piksel kırmızı bir çizgi var
Header, logo, site ismi, site açıklaması ve sayfa listesinden oluşuyor.
Headerın bir üst bir de alt kısmı var.
Üst kısımda: Logo sola dayalı, site ismi hemen yanında, açıklama ise bu ismin altında.
Alt kısımda: Sadece sayfa listelemesi yapılıyor.
Daha sonra içeriğe geçiyor.
İçerik sol ve sağ olarak iki kısımdan oluşuyor.
Sol kısımda: Yazılar listeleniyor.
Sağ kısımda: Sidebar var.
Daha sonra sitenin alt kısmı geliyor, yani footer.
Footer yine aynı katmanın içerisinde, ortalanmış duruyor. Herhangi ekstra bir değişiklik yok.
O zaman yavaş yavaş başlıyoruz.
2) Tema üst kısmının hazırlanması
HTML Dosyasını Oluşturalım
Öncelikle ilk yapmamız gereken bir HTML dosyası oluşturmak.
01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<html xmlns="http://www.w3.org/1999/xhtml">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.<title>BTA Tema Çalışması</title>
06.<link rel="stylesheet" type="text/css" href="style.css" />
07.</head>
08.<body>
09.<div id="wrapper"><!-- sayfa ortalaması yapacak -->
10.<div id="header">
11.<div class="top"><img src="logo.jpg" class="logo" />
12.<h1><a href="#">Award Winning Hosts</a></h1>
13.Customer Rated & Reviewed Web Hosts</div>
14.<div class="menu">
15.<ul>
16.<li><a href="#">Anasayfa</a></li>
17.<li><a href="#">Sayfa 1</a></li>
18.<li><a href="#">Sayfa 2</a></li>
19.<li><a href="#">Sayfa 3</a></li>
20.</ul>
21.</div>
22.</div>
23.<!-- header bitti --></div>
24.</body>
25.</html>
Yukarıda yaptıklarımızı açıklayalım:
1.<link rel="stylesheet" type="text/css" href="style.css" />
kodu ile daha sonra hazırlayacağımız stil dosyasını saymıza entegre ettik.
1.<div id="wrapper">
kodu ile önceki konuda bahsettiğim gibi, bütün her şeyi kapsayacak olan genel bir katman oluşturduk. Bu katman diğer nesneleri sayfaya ortalayacak ve arkaplanı beyaz renkte olacak.
1.<div id="header">
kodu ile üst kısmın başlangıcını yaptık.
1.<img src="logo.jpg" class="logo" />
kodu ile logomuzu üst kısma ekledik ve css sınıfı olarak logo ismini verdik.
1.<h1><a href="#">Award Winning Hosts</a></h1>
2.Customer Rated & Reviewed Web Hosts
kodu ile sayfamızın ismini ve açıklamasını yazdık. Diğer siteye benzemesi açısından o sitenin açıklamalarını aldım
1.<div class="menu">
2.<ul>
3.<li><a href="#">Anasayfa</a></li>
4.<li><a href="#">Sayfa 1</a></li>
5.<li><a href="#">Sayfa 2</a></li>
6.<li><a href="#">Sayfa 3</a></li>
7.</ul>
8.</div>
kodu ile sayfaları listeledik.
Daha sonra oluşturduğumuz katmanları kapattık. (</div>)
Şu ana kadar yaptıklarınızı kaydettiğinizde şöyle bir ekran ile karşılacaksınız:
Şimdilik bu kadar. Diğer dersler güncellenecektir.
Kaynak
