Osman S Börütecene

alemlerin aslı hayaldir

Güncel: Ana Sayfa
Önceki yazı: WordPress İçin Nasıl Template Yapılır - 1
Sonraki Yazı: Aylak Abaküs

WordPress İçin Nasıl Template Yapılır - 2

21 Şubat 2007 Çarşamba 11:53, Osman Seyit Börütecene

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(’&laquo; Önceki Yazılar’) ?></div>
            <div class=”alignright”><?php previous_posts_link(’Sonraki Yazılar &raquo;’) ?></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.

'WordPress İçin Nasıl Template Yapılır - 2' başlıklı yazıya 10 yorum yapılmış.

  1. Oythun diyor ki:
    25 Şubat 2007 02:37

    Çok güzel yazı yazmışsınız elinize sağlık.Bilgilendirici…

  2. Web Donanim » Blog Archive » Wordpress’te tema yaparken kullanabileceğiniz kaynaklar diyor ki:
    19 Nisan 2007 12:31

    […] Boş şablonlar: http://tomorrows-laundry.com/2007/02/23/four-blank-wordpress-themes/ Eklenti sayfası: http://wordpress.org/extend/plugins/ Adım adım tema yapımı: http://muhammetsevim.com/tutorials/wordpress-tasarim-entegrasyonu/ Wordpress tema nasıl yapılır: http://www.yakuter.com/wordpress-nasil-tema-yapilir Wordpress tema nasıl yapılır 2: http://www.yakuter.com/wordpresste-nasil-tema-yapilir-2 Wordpress tema nasıl düzenlenir: http://www.acemiblogcu.com/wordpress-temasi-nasil-duzenlenir/Wordpress için tema nasıl yapılır 1: http://osman.borutecene.com/wordpress-icin-nasil-template-yapilir-1/ Wordpress için tema nasıl yapılır 2: http://osman.borutecene.com/wordpress-icin-nasil-template-yapilir-2/ Wordpress için tema nasıl dizayn edilir: http://ahmetzehir.com/blog/2006/11/22/wordpress-icin-nasil-tema-dizayn-edebilirim-1/ Kaynaklara eklemeler yapılcaktır. […]

  3. aytac diyor ki:
    29 Temmuz 2007 00:06

    cok guzel bir dokuman tesekkurler…

  4. Uğur SAMSA diyor ki:
    2 Eylül 2007 22:32

    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 :(

  5. Uğur SAMSA diyor ki:
    2 Eylül 2007 22:42

    Üçü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/

  6. Uğur SAMSA diyor ki:
    3 Eylül 2007 01:02

    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

  7. Osman Seyit Börütecene diyor ki:
    3 Eylül 2007 09:11

    @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.

  8. leyla seni seviyorum diyor ki:
    3 Aralık 2007 15:59

    ya ben size soruyorum siz bana hayret bişi yaaaa

  9. yoshy diyor ki:
    18 Nisan 2008 18:14

    walla bişi anladıysam yasemin yürük gibi olayım haaaaaaaaaa

  10. yoshy diyor ki:
    18 Nisan 2008 18:15

    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

Siz de fikrinizi belirtin

Merhaba!

osman

Site İçi Arama

Sayfalar

Arşiv

RSS

Site Map

Sosyal Mevzular

Standartlar