WP Tema Yapımı Ders 4 {Header’ı Oluşturmak}

tema yapmak Ders 4


Merhaba arkadaşlar daha önceki derslerimizde, tema şablonunu ve HTML yapısını oluşturmuştuk. Daha önceki dersleri kaçırdıysanız;

WP Tema Yapımı Ders 1 {Giriş}

Wp Tema Yapımı Ders 2 {Tema Dosyaları ve Şablon}

Wp Tema Yapımı Ders 3 {HTML Yapısını Oluşturma}

 

. Bu dersimizde Header.php’yi oluşturmaya başlayacağız. Daha önceleri dersleri 3. dersin içeriğine göre oluşturmayı planlamıştım. Ancak karar değiştirdim ve farklı bir HTML yapısı kullanacağım. 3. dersteki HTML yapısını hala kullanabilirsiniz. Ancak bundan böyle o yapıyı anlatmayacağım.

Yavaş yavaş Header.php dosyamızı oluşturmaya başlayabiliriz. Bunu yapabilmek için öncelikle tema dosyamızın içerisine header.php isimli bir dosya yerleştiriyoruz. Ardından kodlarımızı yazmaya başlıyoruz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">

İlk yazacağımız kodlar bunlar olacak arkadaşlar. Burada yaptığımız şey belge şeklini belirlemek ve “HEAD” tagını açmak oldu. Ardından “HEAD” tagının içerisine “META”larımızı ekliyoruz. Her kodun yanına ne için eklediğimizi yazacağım.

<title><?php wp_title(); ?><?php bloginfo('name'); ?></title><!-- Site başlığını yazdırdık -->

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /><!-- Sitemizin charsetini yani karakter setini seçtik -->

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" id="stil" type="text/css" media="screen" /><!-- Sitemizin css dosyasını gösterdik. -->

<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /><!-- Sitemizin rss sayfasını gösterdik. -->

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.10.2.js"></script><!-- Sitemizin java dosyasını gösterdik -->

Şimdi yazdığımız kodları açıklayalım. Bu dosyada ilk olarak bilmeniz gereken şey site başlığı yani title nasıl oluşturulur. Bir wordpress sitenin title’ını header.php de yazdırabilmek için kullandığımız kod:


<?php wp_title(); ?><?php bloginfo('name'); ?>

Bu kodun ilk başında bulunan ‘wp_title’ sitemizin başlığını çekiyor. Bunun hemen ardından gelen ‘bloginfo(‘name’)’ kodu ise sitemizin adını yazdırıyor. Bu kodu kullanırken alacağımız sonuç şu şekilde olacaktır.

"Site Başlığı Site Adı"

Eğer anasayfada isek site başlığı sadece sitenin adından oluşacaktır. Postların herhangi birinde ise önce postun adı ardından sitenin adı gelecektir.

İkinci önemli kodumuz ise tema adresimizi yazdıran kodumuz.

<?php bloginfo('stylesheet_directory'); ?>

Bu kodu tema klasörümüzün içerisinde bulunan herhangi bir dosyaya ulaşabilmek için kullanıyoruz. Biz yukarıda bu kodu style.css dosyamıza ulaşabilmek için kullandık.

Eğer sitenizde herhangi bir javascript kullanacaksanız bu javascriptleri header.php sayfasında head tagının içerisine yazmanız gerekmekte. Bunun için de aşağıdaki kodu kullandık.

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.10.2.js"></script>

Burada yine öncelikle tema dosyamızın adresini yazdırdık, ardından da tema dosyamızın içerisindeki java dosyasını gösterdik.

Head tagının içerisine ekleyeceğimiz en son ve en önemli kodlardan biri de aşağıdaki kod.

<?php wp_head(); ?>

wp_head kodu wordpressin önemli hook’larından birisidir. Her temada bulunmayabilir ancak eklenmesi şiddetle önerilir. Bu hook yani kanca sitemize eklediğimiz eklentilerin işlevlerini gerçekleştirebilmesi için önemlidir. Örneğin All in One Seo gibi bir eklenti kullandığımızda bu kanca temamızda bulunmuyorsa eklentiyle ayarladığımız title, metatag gibi etiketler sitemizde gözükmeyecektir.

Bütün kodlarımızı head tagının içerisine yazdıktan sonra artık head tagımızı şeklinde kapatabiliriz.

Buraya kadar head tagının içersine neyi nasıl yazadağımızı öğrendik. Bundan sonra header.php de olmasını istediğimiz kodları yazacağız. Header.php’ye yazacağımız kodlar bu dosyayı içerisine çekeceğimiz bütün sayfalarda gözükecektir, yani sitemizin her sayfasında. Buraya yazacağımız kodların her sayfada gözükmesini isteyeceğimiz kodlar olmasına dikkat etmeliyiz, mesela logo, menü, arama barı gibi bölümler headerda olmalı. Bu kodları da bir sonraki dersimizde göreceğiz. İyi çalışmalar…

 

Dersin Devamı için Buraya tıklayınız

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


Facebook Profile photo

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

Facebook Profile photo

Author: Guest

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

2 thoughts on “WP Tema Yapımı Ders 4 {Header’ı Oluşturmak}

Bir cevap yazın

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