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 !

Leave a Comment

E-posta hesab─▒n─▒z yay─▒mlanmayacak. Gerekli alanlar * ile i┼čaretlenmi┼člerdir