WordPress Tema Yapımı Ders 3

Merhaba arkadaşlar bu gün wordpress tema yapma derslerimizin üçüncüsüne geldik bu dersimizde şu anye kadar neler yaptık onlara yegâne yegâne bakacağız neyi niçin yaptık yada yaptığımız şeylerin yapma açısından öbür yöntemleri mevcut mu daha geniş açıdan bakmak gerilaveirse 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 defa daha gösterelim. Bu arada evvelki dersimize buradan ulaşabilirsiniz.

WordPress Tema Yapımı Ders 3WordPress Tema Yapımı Ders 3

Evet arakadaşlar yukarıdaki resimde de gördüğünüz gibi wordpressimizin sayfaları şu şilaveildedir şu an index.php bizim ana sayfamızdır ve öbür sayfalarımızı biz buraya include ederiz header.php bizim sitemizin üst kısmını oluşturur tüm bağlantılarımız ki bunlar arasında css dosyamız ile ya da öbür java ve jquery aplikasyonlarımız ile olan bağlantıların ve hatta wordpress muhteva idaresi ile olan bağlantılarımızın çoğu burada tabi arka kalanları sidebar ve isteğe göre foooter da olabirlir.

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

WordPress Tema Yapımı Ders 3WordPress Tema Yapımı Ders 3
Evet arkadaşlar şilaveildil avei gibi bir şablon oluşturmak için yegâne ihtiyacımız float ve margin değerlerini belirlemilave daha sonra isterseniz css de seçiciler ile ilave bilhassar 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ş örnilavelerle açıklayan bir blog buldum adresine buradan ulaşabilirsiniz yeniden de oldukça kolay bir float kullanımına örnilave vereyim sizlere derhal içimde kalmasın.

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

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

Ve şu an de konumunu belirlemilave adına float aplikasyonsına bir örnilave olarak da sidebar kısmımızı gösterelim

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

Evet arkadaşlar yukarıdaki gibi bir kaç örnilaveten sonra konumuza devam edelim. Css dosyalarımızda geçen derste hatırlarsanız herbir conteiner için ayrı seçiciler kullanmıştık şu an ilk seçicilerimiz olan header.php ile devam edelim daha evvel de dediğim gibi header.php bizim neredeyse tüm wordpress ile bağlantılarımızın ve css dosyası gibi öbür bir çok aplikasyon ile bağlantımızın olduğu kısımdır.
Evet arkadaşlar şu an ilk başta şunu söylemilave istiyorum yukarıda da dedik butun yapacağımız sayfalar index.php ye gelecilave aslında header.php yi düzenlerken bir bakıma şöyle de düşünebilirsiniz index.php yi düzenliyoruz sebep böyle söylüyorum sebebi şu isterseniz header.php ya da footer.php ye gerilavesinim duymadan da yalnızca index.php yi yapabilirsiniz fakat biz karışıklık çıkmasın diye 2sini ayrı ayrı yapacağız ilk başta klasik bir index.html şablonunun üst kısmını ilaveleyeceğim buraya içerisine henüz wordpress ile bağlantımızı sağlayacak php kodlarını ilavelemeyeceğ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 mevcut şu an biz wordpress muhteva idaresi sistemi ile bağlantı kuran kodlarımıızı ilaveleyeceğiz linkler buraya kısmını o yüzden belirledim php kodlarımızın büyük bir kısmı oraya gelecilave.

<!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 gerilaveli bağlantı ayarlarını yaptık aslında php bilenler çok rahat anlayacaklardır fakat bazı kodlfakatların ne işe yaradığını yeniden belirtmilave istiyorum aşağıda yegâne yegâne ayrıca codex wordpress adresinden daha detaylı olarak ta öğrenebilirsiniz.

<html> kimliği içine ilavelediğimiz <?php language_attributes() ?> başaka dil gruplarını desyegânelemesi için gerilaveli olan  kodumuz

<?php bloginfo(‘name’); ?> değişkenimiz site konusunda bilgi verir motto 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 tüm sayfalara uyarlfakatsını sağlar veri tabanından  get_option değerlerini alır.

wp_list_pages ise site sayfalarını dizi lfakatk için kullanılır. WordPressin doğru yerden başlfakatsını sağlar başka bir deyişle ana sayfamızdan

Evet arkadaşlar header.php mizin düzenlemesi bu kadar  şu an dizi da footer.php miz mevcut onuda düzenledikten sonra 2 php dosyamızı index.php ye bağlayacağız evet gördüğünüz gibi olay çok kolay dizi sı ile css dosyası ile sitemizin şablonunu dizaynını ve dizaynını yapıyoruz daha sonra ilave bilhassa ilavelemeyi düşünmediğimiz sürece tüm php dosyalarının kodlfakatsı aynıdır hiç değiştirmenize gerilave yoktur. İkinci olarakta header footer ve sidebar php dosyalarımız oluşturup index php ye bağlıyoruz ondan sonrada arka ye kaldı yorumlar dosyası ve öbür ıvır zıvırlar ne kadar kolay mış değilmi arkadaşlar

2.Adım:Footer.php

<div id=”footer”>

<!– Burası tfakatmen rilavelam site adı urlsi falan –>

<p>wordpress tema dizayn <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 şilaveilde dir siz isterseniz bu kısma son makaleleri yorumları ya da kategorileri php değişkeni atayarak ilaveletebilirsiniz 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ı 2nci ders olarak anlatmayı düşünüyordum fakat her halde karışıklık olabilir diye devam edeceğim umarım sizin içinde çok uzun bir makale olmaz.

derhal ç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 yarar ya işte onu sağlayan php kodumuz Y ya da N evet hayır diye gösterilsin mi gösterimesin mi diye değiştirebilirsiniz.

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

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

< ?php wp_footer(); ?> bu kodumuzuda daha çok kim yaptı site kiie ilişkin başka bir deyişle o tarzda bişiler ilavelemilave isterseniz diye kullana bilrsiniz.

Evet arkadaşlar dizi geldi header ve footer ı index imize ilavelemey oldukça kolay ve sade bir kodla bunu yapacağız ve devamını gelecilave 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 gelecilave 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
loading...

Yorumunuzu Bırakın