Style.css Dosyasından sonra sıra geldi header.php dosyasının oluşumuna.Burada temamız için belirteceğimiz bazı bilgiler ve özellikler var.Bildiğiniz gibi header.php temamızın üst kısmıydı. İçini doldurmaya başlayalım.

Burada temamızın dilini,karakter kodlamasını,style.css dosyası tanımlamasını yapıyoruz.

[html]
<pre><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( ‘charset’ ); ?>" />
<title><?php wp_title(); ?> <?php bloginfo( ‘name’ ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" href="<?php bloginfo( ‘stylesheet_url’ ); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo( ‘pingback_url’ ); ?>" />
<?php if ( is_singular() && get_option( ‘thread_comments’ ) ) wp_enqueue_script( ‘comment-reply’ ); ?>
<?php wp_head(); ?>
</head>
<body>
[/html]

Şimdi ise temamızın üst kısmını ve logoyu oluşturacağız ve ardından style.css dosyasında gerekli tanımlamaları yapacağız.Aşağıdaki kodları biraz önce header.php dosyasına eklediğimiz kodların hemen ardına ekliyoruz.

[html]
<div id="container">
<div id="header">

<div class="logo"><a href="<?php echo esc_url( home_url( ‘/’ ) ); ?>" rel="home"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>" /></a>
<span class="desc"><?php bloginfo(‘description’); ?></span></div>
<div class="menu"><ul>
<li><a href="<?php echo get_option(‘home’); ?>">Ana Sayfa</a></li><?php wp_list_pages(‘sort_order=desc&title_li=’); ?></ul></div>
</div>
[/html]

Evet header.php dosyamıza temamızın üst kısmında bulunacak olan logo ve menü kısmını oluşturduk.Sıra geldi style dosyasında bunları tanımlamaya.

[html]

.logo {
float: left;
width: 220px;
height: 100px;
padding: 0px;
margin: 0px;
}
.desc {
font: 11px tahoma;
color: #666;
padding-left: 20px;
}
.menu {
width: 500px;
margin-left: 280px;
height: 50px;
padding: 25px 0px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li {
color: #111;
display: inline;
margin: 0px 20px 0px 0px;
font: 10px tahoma;
text-transform: uppercase;
}
.menu ul li a:link, .menu ul li a:visited {
color: #111;
}
.menu ul li a:hover {
color: #000;
}

[/html]

Bu işlemleri uyguladıktan sonra temamız şekillenmeye başlıyor ve böylece temamızın header.php dosyası düzenlemesini yapmış oluyoruz.

Bir önceki yazımız olan WordPress Tema Yapımı-Style.css Dosyası başlıklı makalemizde style.css dosyası düzenleme ve style.css nedir hakkında bilgiler verilmektedir.



Etiketler:, ,