0 (850) 441 1813 Hafta içi 11:00 - 17:00 info@wpkurs.com
Divi WordPress Theme

Tema Yapımı index.php(2)

WordPress Tema Yapımımıza kaldığımız index.php’den devam ediyoruz.  Bu yazı dizisini bir bütün halinde görmenizi  ve yazıları sırayla okumanızı öneririm. Bu şekilde kavramların ve komutların arasında kaybolmadan takip edebilirsiniz.

Kontroller ve Hatırlatmalar

* XAMPP çalıştırın

* Oluşturacağımız tüm dosyaları aşağıdaki dizine kaydedin
C:\xampp\htdocs\wordpress\wp-content\themes\WP_ilk_tema

* Yaptığımız değişiklikleri kaydettikten sonra localhost
üzerinde  sonucu görmek için adres barına aşağıdaki  adresi yazın.
http://localhost/wordpress/

*Yaptığımız her değişiklikten sonra kayıt edelim ve browserda refresh ederek izleyelim.

*İşlerimiz bittiğinde XAMPP kapatalım

WordPress temaları index.php içinde inşaa edilirler. Bir binaya benzetebiliriz; dış cephe, katlar, daireler ve odalar şeklinde bir yapı düşünelim. index.php binamızın dış cephesini ve iskeletini oluşturuyor. En üst katta header.php ve en alt kattada footer.php oturuyor. Üst kat ve alt katlar arasında ise site içeriği anlamına gelen “content” bölümü bulunmaktadır. content bölümü o anda çağrılan sayfaya göre değişmektedir. sidebar’da yine footer ve header katları arasındadır ve content’e komşudur.  “div” adı verilen html komutları sayesinde bu inşaatı yapabiliriz. Gözünüzü sakın korkutmayın çok eğlenceli ve kolaydır. Bu kutuları <div> ile başlatır </div> ile sonlandırırız.  Şimdi wordpress tema yapımı inşaatına dış cephemiz ile başlıyoruz. Bu ilk kutu ile sayfamızın ne kadarlık bir alanda gösterileceğine karar vereceğiz.

index.php dosyamızı açalım. İçindeki herşeyi silelim (Zaten 1 satır yazı yazmıştık) ve aşağıdaki satırları index.php içine yazıp ( ben her ne kadar yazalım desemde siz yapıştıracaksınız 🙂 ) ya da yapıştırıp kaydedelim.

Bu iki kod diziside aynıdır. Alttakinde kodlar ile ilgili genel açıklamaları yazdım.  Temiz kodlar ise  üsttekinde mevcut. WordPress temamız bittiğinde fazla kalabalık gözükmemesi için bu tür bir yol izliyorum. Bundan sonrada bu şekilde devam edeceğim. Üstteki kodları kullanarak devam edelim. Sonucunda hepimizin kodlarının aynı olması karşılaştırmayı kolaylaştırır.

localhost sayfamızı refresh edelim. Boş bir sayfa geldi. Sadece açtığımız sayfa sekmesinin üzerinde “WP_ilk_tema” yazısını görüyoruz. Şimdi sıra geldi dış cepheye kutuya (div). 960 piksellik bir sayfa genişliği bizim için yeterli olur sayfayıda ortaladığımızda güzel bir görüntü elde edebiliriz. “<body> </body>” arasında aşağıdaki kodları ekleyelim.

<body>
<div id=”wrapper”>
Dış Cephe
</div><!– #wrapper –>
</body>

Not: “<!– #wrapper –>” ifadesi hatırlatma notudur. Div’ler çoğaldıkça hangisi nerde başlıyor, nerde bitiyor belli olsun diye eklenmiştir. İleride kodlar arasında gezinirken kolaylık sağlaması için yazdım. Kullanılması zorunlu değildir.

Kaydet ve refresh işlemlerinden sonra ekranda sadece bir “Dış  Cephe” yazısı görüyoruz. Eee ? kutu nerde? söylemeyi unuttum sanırım. div’ler görünmez kutulardır. varsayılan özellikleri görünmez yapar onları. Hemen style.css dosyası ile olaya müdahale edip onu görünür yapalım. Bir önceki yazıyı hatırlayın “index.php ile sayfamızın genel hatlarını çizer, neyin nerde gözükeceğine karar verir, style.css dosyası ile de nasıl gözükmesi gerektiğini belirleriz.” demiştik.  style.css dosyamızı açıyoruz. Aşağıdaki komutları yazıyoruz ( kopyalıyoruz 🙂 ). Yine ilk kutucuktaki kodları kullanacağız. Onun hemen altındakini açıklama için kullanıyorum.

Evet artık kırmızı bir şekilde dış cephemizi görmeye başladık. WordPress tema yapımımıza diğer katlarla devam edelim. Header için en üstte bir kat ayıralım. Bu div denen kutucuklara herhangi bir uzunluk değeri vermezsek, içine ne eklersek onun boyutlarını alırlar. Biz sadece genişlik verdiğimiz için (960px) yükseklik konusunda endişe etmeyin. header için bir div ekleyelim. Bunu wraper divinin (dış cephenin) içine ekliyoruz. Bu arada “Dış Cephe “yazısınıda silelim. Ona gerek kalmadı. index.php dosyamızı açıyoruz ve aşağıdaki kırmızı yazılmış satırları ekliyoruz. (header div taglarının wrapper tagları arasında kaldığına dikkat edin.)

<body>
<div id=”wrapper”>
<div id=”header”>
Header bölümü
</div>
<!– #header –>
</div><!– #wrapper –>
</body>

Şimdi sytle.css dosyamızı açıyoruz ve aşağıdaki satırları wrapper’ın altına  “}” işaretinden sonra ekliyoruz.

Kaydet ve refresh işlemlerinden sonra artık, aşağıdaki gibi bir ekran görüntüsü almamız gerekiyor.

Tema Yapımı index.php(2)

Hemen hız kesmeden diğer katlarımızıda inşaa edelim. header’ın altında content ve sidebar kutucukları olacaktı. Onların altında, yani giriş katımızda da footer oturuyor. index.php içine aşağıdaki kırmızı renkli satırları ekleyelim

<body>
<div id=”wrapper”>
<div id=”header”>
Header bölümü
</div><!– #header –>
<div id=”container”>
Content içerik Bölümü
</div>
<!– #container –>
<div id=”sidebar”>

sidebar bölümü
</div>
<!– #sidebar –>

<div id=”clearfloat”>
<!– Bu div bölümü ekranda gözükmeyecek. Düzenleme için kullanıldı.

Açıklama style kodları içinde mevcut–>
</div>
<!– #clearfloat –>
<div id=”footer”>

footer bölümü
</div>
<!– #footer –>
</div><!– #wrapper –>
</body>

Bu haliyle kaydedip, browser da izleyelim. Hepsi alt alta duruyor. WordPress tema yapısına hiç benzemedi. Tamam o zaman style.css ile katlarımızı düzenleyelim. style.css dosyamıza aşağıdaki satırları ekliyoruz.

float komutu
Yukarıdaki kutucukta yeni tanıştığımız ifadelere bir göz atalım. Float komutu ekrandaki nesneleri sağa ya da sola yaslamak için kullanılır. Verdiğimiz komutla container kutusunu sola, sidebar kutusunuda sağa yasladık. Artık  alt alta durmuyorlar.

Clear:both;
Yukarıda verilen float komutunu sonlandırmak için kullanılır. Eğer üstteki alanda sadece
float:right kullanılsaydı. clear:right ile bitirecektik.
float:left kullanılsaydı. clear:left; ile bitirecektik.
Left ve Right herikiside kullanıldığı için Clear:both kullandık.
Peki neden clearfloat kutucuğu (div)  kullandık. wrapper dediğimiz dış cephenin tüm divleri kaplaması gerekiyor ancak kaplamıyordu.Yaptığımız bu temizlik 🙂 (clear:both) işinden sonra istenen sonucu elde ettik.

WordPress Tema yapımında şu ana kadar yaptığımız işlerin ekran görüntüsü, index.php ve style.css dosyalarının son halini aşağıya ekliyorum. Herhangi bir yerde hata alıyorsanız,  karşılaştırma yapabilirsiniz.

Tema Yapımı

Benzer konular:

Parola Sıfırlama
E-posta adresinizi girin. E-posta ile yeni bir şifre alacaksınız.