Tema Yapımı header.php

Tema Yapımı index.php(2) yazımızla birlikte kaba inşaatımızı bitirdik. Artık header.php ile birlikte , iç bölümlere PHP yardımıyla wordpress database’den gerekli bilgileri çekmeye başlayabiliriz. Önce herzamanki gibi hatırlatmalar.

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

Text editörümüzle yeni bir dosya açalım ve header.php olarak kaydedelim. header.php adıyla oluşturduğumuz bu dosyayı kapatmadan, index.php’yi de açalım. index dosyamızın içinden header bölümü olarak tanımladığımız kısmı keselim (ctrl+x) ve header.php dosyamıza yapıştıralım (ctrl+v).

Her 2 dosyayıda (index ve header) kaydedip, refresh ettiğimizde “header bölümünün” kaybolduğunu göreceğiz. Çünkü; henüz index sayfası header bölümündeki bilgileri nasıl çekeceğini bilmiyor. Hemen ona doğru yolu gösteriyoruz. index.php dosyamıza dönelim ve az önce kestiğimiz alana “<?php get_header();?>” satırını ekleyelim. Bu komutla index sayfamız header.php’yi çağırması gerektiğini öğrenecek.

Kaydedip, refresh edelim. Sayfamız ilk haline geri döndü, herhangi bir değişiklik olmadı. Biz ise header.php ile tanıştık. Artık sayfamızın header bölümünü ilgilendiren tüm kodlamaları header.php ve style.css üzerinde yapacağız.

Header bölümümüzde neler olabilir ? İlk akla gelenler… WordPress Blog ismi , Slogan, WordPress Blog tanımı, güzel bir image, menüler. Ne duruyoruz eklemeye başlayalım.

WordPress Tema Yapımı Blog ismi  ve Slogan

header.php dosyamızı açıyoruz. Kendisine teşekkür ederek “header bölümü” yazısını siliyoruz. Blog ismi ve slogan için 2 tane ayrı div oluşturuyoruz. Kırmızı ile belirtilen satırları header.php dosyamıza ekleyelim.

<div id=”header”>
<div id=”blogname”>

</div><!– #blogname –>
<div id=”slogan”>

</div><!– #slogan –>
</div> <!– #header –>

• Blog ismimizi “<?php bloginfo(‘name’); ?>” komutuyla alıyoruz. blogname div taglarının arasına bu komutu ekleyelim.
• Slogan (decription) için gerekli kod ise “<?php bloginfo(‘description’); ?>“. Bu kodlarıda slogan div taglarının arasına ekliyoruz.

<div id=”blogname”>
<?php bloginfo(‘name’); ?>
</div><!– #blogname –>
<div id=”slogan”>
<?php bloginfo(‘description’); ?>
</div><!– #slogan –>

Kayıt ve refresh işlemlerinden sonra; header bölümünde wordpress dosyamıza ait, Blogname(Site başlığı)  ve slogan(Description) artık ekranda gözükmeye başladı. Bu yazıları “http://localhost/wordpress/wp-admin” paneli içinde  Ayarlar/Genel sekmesi altından değiştirebilirsiniz. Yazılar üzerinde biraz düzenleme gerekiyor tabiki.  Bunun için style.css dosyamıza aşağıdaki kodları ekliyoruz. Aşağıdaki kodları ekledikten sonra bu 2 yazıya daha farklı istediğimiz görünümü verebiliriz.

Kayıt ve refresh işlemlerimizi yapıp, temamıza şöyle bir bakalım. Tabi görsellik ve işlev anlamında şu anda çok zayıf bir görüntü. Sitebaşlığına link ekledikten sonra birde arka plana resim attığımızda daha doyurucu sonuçlar almaya başlayacağız.

WordPress Tema Yapımı image ve link

WordPress temalarında sayfanın en üstünde bulunan site başlığına tıkladığınızda anasayfaya geri dönersiniz. Bu linki header.php içinden ekleyeceğiz. HTML sayfalarda link verilirken aşağıdaki kalıp kullanılır. “gösterilecek metin” tıklamanın yapılacağı yazıdır. “sayfa ismi” kısmı ise tıklama yapıldığında yönlendirilecek sayfadır.

“<a href=”sayfaismi”> gösterilecek metin</a>”

• blog ismine link vermek; header.php’yi açalım v”<?php bloginfo(‘name’); ?>” kodunu aşağıdaki hale getirelim.

<a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a>

sayfa ismi kısmında kullandığımız “<?php bloginfo(‘url’); ?>” ifadesi, blog url’sini verir ve hedef sayfayı temsil eder. Gösterilecek metin olarak blog name verdik.

Kayıt ve Refresh işlemlerinden sonra üst  kısımda yer alan site başlığımızın artık bir link aldığını görebilirsiniz. Altı çizili olarak gösterilmesi sayfa başlığı için hoş olmayacağından style.css ile bu çizgiyi kaldırıyoruz ve rengini değiştiriyoruz.

• Link işleminden sonra arka plana resim eklediğimizde header bölümü biraz daha şekillennmiş olacak. Arka plana resim eklemek için birkaç yöntem var, en basitinden yola çıkalım ve style.css dosyamızdaki “header{……} aralığına birkaç ekleme yapalım.

ben photoshop’ta genişliği 960px, yüksekliği 150 px olan bir resim(header.png)  oluşturdum. Sizde beğendiğiniz herhangi bir resmi bu boyutlara getirerek kullanabilirsiniz. Ancak olşturduğunuz bu resmi “C:\xampp\htdocs\wordpress\wp-content\themes\WP_ilk_tema\images” klasörü altına atmanız gerekmektedir. (image klasörünü kendiniz oluşturmalısınız) ya da benim kullandığım bu basit resmi burdan “farklı kaydet” diyerek indirebilirsiniz.

Bugünlük bukadar wordpress tema yapımında bugün ne yaptık ?

• header.php dosyamızı oluşturduk
• index.php sayfasındaki header bölümünü header.php içine attık
• index.php sayfasına “<?php get_header();?>” kodunu ekledik
• blogname ve slogan adında 2 yeni div oluşturduk
• blog ismimizi çekmek için “<?php bloginfo(‘name’); ?>” kodunu kullandık
• sloganı çekmek için “<?php bloginfo(‘description’); ?>”kodunu kullandık
• blogname ve slogan divlerine style.css’ten görünüm verdik
• blogname üzerine blogurl’sini “<?php bloginfo(‘url’); ?> “komutu ile link verdik
• style.css ile header div bölümüne image ekledik.

Aşağıda wordpress tema yapımı için hazırladığım ve şu ana kadar beraber yaptığımız temanın son halini, index.php,header.php ve style.css dosyalarını görebilirsiniz. Sadece karşılaştırma için kullanın lütfen, kopyalayıp yapıştırmak size bir fayda sağlanamaycaktır.

• Tema Yapımı – index.php(2)
• PHP karşılaştırma operatörleri (işlemciler)
• WordPress tema yapısı
• XAMPP (localhost)