WordPress İçin Nasıl Template Yapılır – 1 ‘de bazı temel bilgiler vermiştim. Şimdi işin eylem kısmına geçelim. Yapılabilecek en basit WordPress Template’i iki dosyadan oluşabilir; style.css ve index.php. Önce bu basit yapıdan başlayalım.
style.css dosyasının başına şu kısmı eklemeliyiz ki, template klasörümüzü wp-content/themes dizini altına attığımızda Presentation/Görünüm menüsü altında görünsün;
/*
Theme Name: Buraya Temamızın Adını Yazıyoruz
Theme URI: http://osman.borutecene.com/about
Description: Beni Yansıtan, Basit Bir WordPress Teması
Version: 0.1
Author: Osman S Börütecene
Author URI: http://osman.borutecene.com/
*/
Açıklamalar: theme uri: tema için yazdığımız bir blog yazısı, temaya özel bir sayfa vs. varsa onun adresi, description: tanım, version: temanızın sürüm no’su, author: sizin adınız ya da nickiniz, author uri: varsa blogunuz ya da web adresiniz.
Eğer temanızda/template’inizde CSS kullanmayacaksanız style.css dosyasına koymanız gereken minimum bilgi bunlardır. CSS ve XHTML tasarımla ilgili temel pratik bilgilere bir kaç gün önce yazdığım yazıdan ulaşabilirsiniz. Gelelim index.php sayfamıza. Şimdilik header.php, footer.php, sidebar.php, comments.php kullanmayacağımızdan herşeyi index.php içinde yapacağız.
<html>
<head>
<title><?php wp_title(''); ?><!--bu, o andaki blog yazısının başlığını verir. ayrıca blog adımızı da ekleyelim:--><?php bloginfo('name'); ?></title>
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /><!--içerik türü ve karakter kodu-->
<meta name="description" content="<?php bloginfo('description'); ?>" /><!--arama motorlarının kullandığı meta tag; tanım satırı... buraya blog seçeneklerinde girdiğiniz tanım gelir.-->
<link rel="stylesheet" title="tema_stil_dosyasi" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" /><!-- bu satırla sayfaya wordpress template'imizin CSS dosyasının adresini vermiş oluyoruz-->
<link rel="start" href="<?php echo get_settings('home'); ?>/" title="<?php bloginfo('name'); ?>" /><!-- robotlara bu web sitesinin anasayfasını anlatıyoruz. arama motoru optimizasyonu için işe yarayabilir.-->
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS 2.0 Feed" href="<?php bloginfo('rss2_url'); ?>" /><!-- yine robotlara ve browser'lara RSS adresimizi veriyoruz.-->
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> Comments RSS 2.0 Feed" href="<?php bloginfo('comments_rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?><!-- aylık arşivlerin linklerini sıralıyoruz. arama motoru optimizasyonu açısından süper olay-->
<body>
<div id="header">
<h1 id="title"><a href="<?php echo get_settings('home'); ?>/" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1><!--Blog adı-->
<p id="description"><?php bloginfo('description'); ?></p><!--blog tanımı-->
<div id="banner-nav">
<ul id="banner-nav-pages">
<li><a href="<?php echo get_settings('home'); ?>/" title="Home: <?php bloginfo('name'); ?>">Ana Sayfa</a></li>
<?php wp_list_pages('title_li=' ); ?><!--wordpress'in bize sunduğu sayfa listeleme fonksiyonunu kullanarak menu oluşturduk.-->
<li><a href="<?php bloginfo('rss2_url'); ?>" title="Subscribe to the <?php bloginfo('name'); ?> posts RSS feed" rel="alternate" type="application/rss+xml">Feed/RSS</a></li>
</ul>
</div>
<div id="main">
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?><!-- wordpress döngüsü, the_loop burada başlıyor. eğer blogda yazı varsa bize bunları getirecek.-->
<div class="post" id="post-<?php the_ID(); ?>">
<h1><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h1><!-- yazı başlığı -->
<?php the_content(__('(more...)')); ?><!-- yazının kendisi -->
<div class="feedback">
<?php wp_link_pages(); ?>
<?php comments_popup_link(__('Yorum (0)'), __('Yorum (1)'), __('Yorumlar (%)')); ?>
</div>
</div>
<?php comments_template(); // Get wp-comments.php template ?><!-- comments.php'yi çağırıyoruz. eğer bu dosya yoksa wordpress default theme'in comments.php'sini çeker alır ve onu kullanır. -->
<?php trackback_rdf(); ?><!-- arama motorlarına ve diğer web robotlarına yazımızı takip edebilmeleri için RDF bilgisini bırakıyoruz -->
<?php endwhile; else: ?><!-- döngü bitiyor, eğer hiç yazı yoksa; -->
<p><?php _e('Aradığınız şey burda yok!'); ?></p>
<?php endif; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Önceki Yazılar') ?></div>
<div class="alignright"><?php previous_posts_link('Sonraki Yazılar »') ?></div>
</div><!-- önceki yazı/sonraki yazı linki -->
</div>
<div id="sidebar">
</div>
</div>
<div class="clearer"></div>
<div id="footer">
</div>
</body>
</html>
Tek sayfa WordPress template’imiz burada bitti. Bu sayfa aşağı yukarı blogspot (blogger)’daki blogların bir benzerini üretir.
WordPress ile daha karmaşık, daha detaylı template’ler yapabilmemiz için bilmemiz gereken şey WordPress’in kendisinden ibaret değil. Bu sayfada gördüğünüz yazıları getirme döngüsü, bunun nasıl işlediği, nasıl sorguya dönüştüğü bilinmesi gereken bazı temel kavramlar.
Burada kavramlara bu kadar önem vermemin sebebi, konuyu ezberden uzaklaştırmak. Mesela ben örnek olsun diye burada tam ve herşeyiyle hazır bir template de verebilirim ancak o zaman ezber başlar ve tasarımcı bunu öğrenmiş olduğu için tasarımları o template’den çok fazla uzaklaşamaz. Tıpkı WordPress Default Template’de olduğu gibi. Dikkat ederseniz yüzlerce WordPress temasının kafa (header) kısmında resim ya da resim konacak bir boşluk bulunur. İşte bu büyük ölçüde Default template’in etkisinde kalınmasından kaynaklanır. Ayrıca WordPress’in çok önemli, çok işlevsel bazı özelliklerini kullanmamak ya da bazı lüzumsuz özellikleri her tasarıma ısrarla eklemek, öğrenim sırasında ezber yolunu tercih etmekten kaynaklanır. Birşeyi öğrenmek yerine ezberlemek daha kolaydır ve daha kısa zaman alır. İnsanı sorumluluk duygusundan kısmen kurtarır. Ancak bunun karşılığında kişi elindeki bilgiyi ileri götüremez, yeni şeyler ortaya koyamaz.
Birden çok dosyalı WordPress sitesi örnekleri ve blog olmayan bir web sitesi hazırlarken WordPress’ten faydalanma yöntemleri bir sonraki yazıda.
Benzer yazılar:
- WordPress İçin Nasıl Template Yapılır – 1
- WordPress’te Statik Anasayfa Yapmak
- WordPress’e Ne Yazsam Gider Mi?
- CSS ve XHTML ile Temel Sayfa Tasarımı
Çok güzel yazı yazmışsınız elinize sağlık.Bilgilendirici…
cok guzel bir dokuman tesekkurler…
Tam kaptırmıştım. Birinci yazıyı okudum, ikinciyi de. Aradığım şeylerdi.
En son alttaki paragrafı okudum.
“Birden çok dosyalı WordPress sitesi örnekleri ve blog olmayan bir web sitesi hazırlarken WordPress’ten faydalanma yöntemleri bir sonraki yazıda.”
İyice ağzım sulandı fakat devamını bulamadım
Üçüncü yazının tarihi daha eski bir tarih olduğu için bir yanlışlık olmuş. Linkini de ekleyeyim de benim gibi başka bulamayanlar faydalansın
http://osman.borutecene.com/web-sitesi-nedir-nasil-yapilir-3/
Yok ya üçüncü yazı o değilmiş. İçeriği okuyunca fark ettim. Özür dileyerek doğru linki veriyorum.
http://osman.borutecene.com/css-ve-xhtml-ile-temel-sayfa-tasarimi/
Keşke yazıda bulunsaydı bu linkler. Kaç tane gereksiz yorum yazmış oldum :S
@uğur: valla ne desen haklısın. web tasarımı hakkında yazmaya fazla ara verdim. senin uyarılarını işaret olarak alıp devam etme zamanı geldi diye düşünüyorum. en kısa zamanda derleyip toplayan birşeyler yazarım.
ya ben size soruyorum siz bana hayret bişi yaaaa
walla bişi anladıysam yasemin yürük gibi olayım haaaaaaaaaa
ya resimli we nereden yapacağımızı göstererek anlatın
buarada bende hepsiden yaseminin msn si wa alın
yasemin-hepsi-19@hotmail.com
ok
ama cam açmıyolar ısrar etmeyin silerler
Teşekkürler, Başarılar ..
Thanks .
bu yayarlı makaleniz için çok teşekür ederim.