WordPress Tema Yapımı Ders 3

Merhaba arkadaşlar bu gün wordpress tema yapma derslerimizin üçüncüsüne geldik bu dersimizde şimdiye kadar neler yaptık onlara tek tek bakacağız neyi niçin yaptık yada yaptığımız şeylerin yapma açısından başka yöntemleri mevcut mu daha geniş açıdan bakmak gerekirse ne yaptık, neyi yapacağız ve niçin yaptık konusunu ele alacağımız bir ders olacak bu gün ki dersimiz elimden geldiğince somutlaştırarak anlatmaya çalışacağım kafanıza takılan sorular olursa sorarsınız.İlk başta klasik bir wordpress temasının hangi dosyalardan oluştuğunu belirtmiştik bunu birinci dersimizde anlatmıştık burada bir kez daha gösterelim. Bu arada önceki dersimize buradan ulaşabilirsiniz.

Evet arakadaşlar yukarıdaki resimde de gördüğünüz gibi wordpressimizin sayfaları şu şekildedir şimdi index.php bizim ana sayfamızdır ve diğer sayfalarımızı biz buraya include ederiz header.php bizim sitemizin üst kısmını oluşturur bütün bağlantılarımız ki bunlar arasında css dosyamız ile veya diğer java ve jquery uygulamalarımız ile olan bağlantıların ve hatta wordpress içerik yönetimi ile olan bağlantılarımızın çoğu burada tabi geri kalanları sidebar ve isteğe göre foooter da olabirlir.

Bir önceki dersimizde css de sitemizin şablonunu oluşturmuştuk bunu bir resimle de gösterelim.

Evet arkadaşlar şekildeki gibi bir şablon oluşturmak için tek ihtiyacımız float ve margin değerlerini belirlemek daha sonra isterseniz css de seçiciler ile ek özellikler belirleyebiliriz açıkçası bu konuyu baştan sona kadar anlatmak istemediğim için internette sizler için biraz araştrıma yaptım ve float kullanımını oldukça geniş örneklerle açıklayan bir blog buldum adresine buradan ulaşabilirsiniz yine de oldukça basit bir float kullanımına örnek vereyim sizlere hemen içimde kalmasın.

Örneğin header kısmını ele alalım

*yüksekliği 300 genişliği 930 olarak header kısmın kodlarını yazıyoruz*/
#header {
border: 1px solid #00ff00;
width: 930px;
height: 300px;
}

Ve şimdi de konumunu belirlemek adına float uygulamasına bir örnek olarak da sidebar kısmımızı gösterelim

/*Float etiketi ile sağ ve sol siderbarı diğer kolondan ayırıyoruz.*/
#sidebarLT {
margin:0;
width:200px;
border: 1px solid #ff9900;
float:right;
}

Evet arkadaşlar yukarıdaki gibi bir kaç örnekten sonra konumuza devam edelim. Css dosyalarımızda geçen derste hatırlarsanız herbir conteiner için ayrı seçiciler kullanmıştık şimdi ilk seçicilerimiz olan header.php ile devam edelim daha önce de dediğim gibi header.php bizim neredeyse bütün wordpress ile bağlantılarımızın ve css dosyası gibi diğer bir çok uygulama ile bağlantımızın olduğu kısımdır.
Evet arkadaşlar şimdi ilk başta şunu söylemek istiyorum yukarıda da dedik butun yapacağımız sayfalar index.php ye gelecek aslında header.php yi düzenlerken bir bakıma şöyle de düşünebilirsiniz index.php yi düzenliyoruz neden böyle söylüyorum sebebi şu isterseniz header.php veya footer.php ye ihtiyaç duymadan da sadece index.php yi yapabilirsiniz ama biz karışıklık çıkmasın diye ikisini ayrı ayrı yapacağız ilk başta klasik bir index.html şablonunun üst kısmını ekleyeceğim buraya içerisine henüz wordpress ile bağlantımızı sağlayacak php kodlarını eklemeyeceğiz ki karışmasın.

1.Adımı:Header.php

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”tr”>
<head>
<title>-</title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” href=”css/1.css” type=”text/css” media=”screen,projection” />
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<p>
Klasik bir sablon.
</p>
<h1><a href=”#”>bu kısım ana sayfamızın gelecegi kısım</a></h1>
<ul id=”nav”>
<li><a href=”#”>linkler buraya</a></li>
<li><a href=”#”>linkler buraya</a></li>
<li><a href=”#”>linkler buraya</a></li>
<li><a href=”#”>linkler buraya</a></li>
<li><a href=”#”>linkler buraya</a></li>
</ul>
</div>

yukarıda da gördüğünüz gibi klasik bir html şablonu var şimdi biz wordpress içerik yönetimi sistemi ile bağlantı kuran kodlarımıızı ekleyeceğiz linkler buraya kısmını o yüzden belirledim php kodlarımızın büyük bir kısmı oraya gelecek.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” <?php language_attributes() ?>>

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

<title><?php bloginfo(‘name’); ?> <?php wp_title(); ?></title>

<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen,projection” />

<?php wp_head(); ?>

</head>

<body>

<div id=”wrapper”>

<div id=”header”>

<p class=”description”><?php bloginfo(‘description’); ?></p>

<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>

<ul id=”nav”>

<?php wp_list_pages(‘sort_column=menu_order&title_li=’); ?>

</ul>

</div>

Evet arkadaşlar yukarıda da gördüğünüz gibi wordpressimizin gerekli bağlantı ayarlarını yaptık aslında php bilenler çok rahat anlayacaklardır ama bazı kodlamaların ne işe yaradığını yine belirtmek istiyorum aşağıda tek tek ayrıca codex wordpress adresinden daha detaylı olarak ta öğrenebilirsiniz.

<html> etiketi içine eklediğimiz <?php language_attributes() ?> başaka dil gruplarını desteklemesi için gerekli olan  kodumuz

<?php bloginfo(‘name’); ?> değişkenimiz site hakkında bilgi verir slogan falan gibi

wp_title() sitemizin başlığını belirtir

<?php wp_head(); ?> bu kodumuzda ise bağlantılarımız java script falan tarzı bağlantıların bütün sayfalara uyarlamasını sağlar veri tabanından  get_option değerlerini alır.

wp_list_pages ise site sayfalarını sıralamak için kullanılır. WordPressin doğru yerden başlamasını sağlar yani ana sayfamızdan

Evet arkadaşlar header.php mizin düzenlemesi bu kadar  şimdi sırada footer.php miz var onuda düzenledikten sonra iki php dosyamızı index.php ye bağlayacağız evet gördüğünüz gibi olay çok basit sırası ile css dosyası ile sitemizin şablonunu tasarımını ve dizaynını yapıyoruz daha sonra ek özellikle eklemeyi düşünmediğimiz sürece bütün php dosyalarının kodlaması aynıdır hiç değiştirmenize gerek yoktur. İkinci olarakta header footer ve sidebar php dosyalarımız oluşturup index php ye bağlıyoruz ondan sonrada geriye kaldı yorumlar dosyası ve diğer ıvır zıvırlar ne kadar kolaymış değilmi arkadaşlar

2.Adım:Footer.php

<div id=”footer”>

<!– Burası tamamen reklam site ismi urlsi falan –>

<p>wordpress tema tasarım <a href=”http://www.sorbize.com”>Sorbize</a><br />

<!– burayı sakın silmeyin –>

© <?php the_time(‘Y’); ?> <?php bloginfo(‘name’); ?><br />

<a href=”<?php bloginfo(‘rss2_url’); ?>”>feed adresi</a></p>

</div>

</div>

< ?php wp_footer(); ?>

</body>

</html>

Evet arkadaşlar klasik bir footer.php dosyası bu şekilde dir siz isterseniz bu kısma son yazıları yorumları veya kategorileri php değişkeni atayarak ekletebilirsiniz tabi div taglarının yerini css de belirtirseniz en azından karışmazlar.

Evet arakadaşlar aslında burada bırakmayı düşünüyordum devamını ikinci ders olarak anlatmayı düşünüyordum ama her halde karışıklık olabilir diye devam edeceğim umarım sizin içinde çok uzun bir yazı olmaz.

Hemen çok kısa footer php içinde yerleştirdiğimiz php kodlarının fonksiyonlarını anlatayım

<?php the_time(‘Y’); ?> bu kodumuz copyright © 2010 tarzı sitelerin altında çıkar ya işte onu sağlayan php kodumuz Y veya N evet hayır diye gösterilsin mi gösterimesin mi diye değiştirebilirsiniz.

<?php bloginfo(‘name’); ?> blog ismi ve bilgi

<?php bloginfo(‘rss2_url’); ?> sitenizin takip edilmesi için gerekli bağlantıyı sağlayan rss kodu

< ?php wp_footer(); ?> bu kodumuzuda daha çok kim yaptı site kiie ait yani o tarzda bişiler eklemek isterseniz diye kullanabilrsiniz.

Evet arkadaşlar sıra geldi header ve footer ı index imize eklemey oldukça basit ve sade bir kodla bunu yapacağız ve devamını gelecek derste anlatacağız

<?php get_header(); ?>
<?php get_footer(); ?>
İşte yukarıda gördüğünüz php kodları ile footer ile headerı index in içine get fonksiyonu ile getiriyoruz bugünlük dersimiz bu kadar gelecek dersimizde sidebar ve index.php yi anlatacağız.
Dördüncü ders için burayı tıklayın.
Alıntıdır: www.sorbize.com