WP Tema Yapımı Ders 5 {Header’a Devam}

tema yapmak Ders 5

Merhaba arkadaşlar, bir önceki derste Header.php’yi oluşturmaya başlamıştık. Bu derste de header.php’ye devam edeceğiz. Eğer 4.dersi kaçırdıysanız header.php’yi oluşturmayı öğrenmek için bir önceki derse göz atın: WP Tema Yapımı Ders 4 {Header’ı Oluşturmak}

Bir önceki derste header.php’nin ilk kısımlarını tamamlamıştık. Bu dersin sonunda header.php’yi tamamlamış olacağız ve index.php’ye giriş yapacağız. En son header.php’de “head” tagını kapatıp bu kısımı tamamladık artık “body” tagına başlama vakti geldi. “Body” tagı sitenin içerisinde görünecek yerleri koyacağımız bölüm. Bu tagın içerisine eklediğimiz herşey kanlı canlı olarak sitemizde olacak. Kodlarımızı yazmaya başlayalım. Öncelikle “Body” tagını “Head” tagının hemen altına yerleştirip 2 adet “div” açarak işe başlıyoruz.

</head><!-- _________________________ Head tagını kapattık _________________________ -->

<body>

<div id="wrapper"><!-- _________________________ Wrapper isimli bütün siteyi içine alacak bir div açtık _________________________ -->

	<div id="header"><!-- _________________________ Header'ın içerisinde gözükecek bölümleri içine alacak bir div açtık _________________________ -->
	</div><!-- _________________________ Header Divini Kapattık_________________________ -->

Kodları biraz incelerseniz 2 adet div açıp sadece bir adet div kapattık. Bunun sebebi Wrapper isimli divin bütün siteyi içine alacak olması. Bu divi kapatmak için footer.php dosyama gidip aşağıdaki kodu ekliyorum.

	</div><!-- _________________________ Wrapper Divini Kapattık_________________________ -->

Artık wrapper div’i de kapalı. Şimdiye kadar eklediğimiz kodlara bakarsak “head” tagını oluşturduk, bu tag biter bitmez “body” tagını oluşturduk ve içerisine “Wrapper” ve “Header” isimli iki tane div açtık. Şimdi yapacağımız iş bu divlerin içini doldurmak. Öncelikle header’da hangi öğelerin olmasını istediğimize karar vermemiz gerekiyor. Ben headerda arama, logo ve menu olmasını istiyorum. Bunun için öncelikle logoyu ekleyerek işe başlıyorum.

<div class="logo">
<a href="<?php echo get_option('home'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.jpg" alt="<?php wp_title(); ?><?php bloginfo('name'); ?>" /></a>
</div>

Yukarıdaki kodumuzla birlikte sitemize bir logo ekledik. Yazdığımız kodlara bir bakalım. Öncelikle buradaki önemli kodlardan birisi “get_option (‘home’);”. Bu kod bize anasayfanın adresini verir. Biz bu kodu logomuzun href linki olarak kullandık. Ardından tekrar tema klasörümüze gidebilmek için “stylesheet_directory” den yararlandık. Logomuzun alt etiketi olarak da sitemizin başlığında kullandığımız wp_title ve blogname kodlarını birlikte kullandık.

Logoyu eklediğimize göre şimdi menüyü ekleyebiliriz. Menüyü admin panelden kontrollü bir menü yapacağız. Kimse satırlarca kod yazıp da dandik bir menü elde etmek istemez. Kolayca admin panelden yönetilebilen bir menü için aşağıdaki kod yeterli olacak.

<div class="menu">
<?php wp_nav_menu('menu=main_menu'); ?>
</div>

Burada kullandığımız kod wp_nav_menu bize WordPress’in navigasyon menüsünü aktive etme imkanı veriyor. İçerisine yazdığımız “menu=main_menu” hangi menünün bu satırda gözükeceğini belirten bir isim. Bu kodu yazdıktan sonra WordPress ‘in menü ayarlarından ekleyeceğimiz Main Menu isimli bir menü bu satırda gözükecektir.

Menümüzü de ayarladıktan sonra şimdi geriye arama barı kaldı. Arama bölümünü dışarıdan aktaracağız. Bunun için aşağıdaki kodu kullanıyoruz.

<div class="searchbar">
<?php include (TEMPLATEPATH.'/searchform.php'); ?>
</div>

Include koduyla birlikte dosyamızın içerisine herhangi bir başka dosyayı çağırabiliriz. Dosyamızın adresini göstermek için “TEMPLATEPATH” kodunu kullanarak tema dosyamıza ulaşıyoruz ve “/searchform.php” dosyasını içeriye aktarıyoruz. Bundan sonraki adım tabii ki searchform.php adında bir dosya oluşturmak olacaktır. Bu dosyanın içerisine sade bir şekilde arama formumuzu yazıyoruz.

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">

<input type="text"  name="s" class="arama-input" value="Arama Yap"/>

<input type="submit" class="arama-buton" name="submit" value=""/>

</form>

Yukarıda sade bir arama formu oluşturduk. Burada kullandığımız bloginfo kodu aramanın nerede yapılacağını belirtiyor. Formu oluştururken dikkat edilmesi gereken bir husus da formun adını “name=”s”” şeklinde yazmamız gerektiği. WordPress kendi içerisinde search alanının adını “s” olarak belirlemiş bizde bundan yararlanarak bu alanın search yani arama kısmı olduğunu belirtmek için bu harfi kullanıyoruz. 3. satıra yerleştirdiğimiz buton sayesinde arama işini halledeceğiz. Bu butona yazmamız gereken önemli nokta da type=”submit” bölümü. Buradaki submit bu input şeklinin aramayı gerçekleştirecek buton olduğunu anlatmamızı sağlıyor.

Yukarıda yazdığımız arama, menu ve logo kodlarının hepsini Header id’li div’in içerisine yazmamız gerekiyor. Bu kodları yazdıktan sonra artık index.php dosyasını oluşturmaya başlayabiliriz. Bir sonraki derste bu dosyaya geçeceğiz. Umarım şimdiye kadar olan kısımlar işinize yarayacaktır. Yazdığımız kodlarla ilgili daha fazla bilgi edinmek adına WordPress Codex‘i ziyaret edebilirsiniz.

Facebook Profile photo

#r00tadmin #Basit Bir kuL #Allah (c.c) Bir kuLu işte bazen bir adem bazen bir aLem !

Bir cevap yazın

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