WordPress İçin Tema Hazırlamak
Merhaba,
Bildiğiniz üzere uzun zamandır blogumda yeni bir yazı yazamadım. Yoğunluktan dolayı fırsatım olmadı ne yazık ki. Bu da içime dert olmuş olacak ki, arada bulduğum ilk fırsatta bir blog yazısı yazayım dedim. Sanırsam yeni işimin başlangıç aşamasındaki bu aralık benim için iyi bir fırsat gibi duruyor. Yoksa yakın zamanda yazma fırsatım pek olmayacak gibi.
Bugünkü blog yazımda sizlere wordpress için sıfırdan nasıl tema oluşturulur onu anlatacağım. Yazımda buradaki kaynaktan faydalandığımı belirtmek isterim. Üzerine kendi yorumlarımı da ekledim. Bu nedenle bu seferki yazım biraz uzun oldu. Eğer İngilizce sıkıntınız yoksa, dilerseniz buradaki orijinal kaynaktan da faydalanabilirsiniz.
Öncelikli olarak temel bir wordpress temasının nasıl bir şablona sahip olduğuna bakalım. WordPress temalarına genel olarak baktığımız zaman; bir adet header, bir adet sidebar, bir adet content ve bir adet footer bölümü olmak üzere toplamda dört ana bölümden oluşan bir şablon görüyoruz.
Klasik wordpress şablonunda yerleşim şu şekilde yapılıyor: header üstte, içerik sola dayalı, menü ve kategorilerin olduğu sidebar sağa dayalı ve footer en altta. Haliyle aşağıdaki dosyalara ihtiyacımız olacak.
header.php, footer.php, index.php, sidebar.php, footer.php ve style.css
Yukarıdaki ana dosyaları oluşturduktan sonra yeni temamız için bir klasör oluşturuyoruz. Klasörü isimlendirdikten sonra wp-content/themes/ klasörünün altına klasörü yerleştiriyoruz ve oluşturduğumuz tema klasörünün içine yukarıda listelediğim dosyaları taşıyoruz. Şu anda temel bir tema için ihtiyacımız olan tüm dosyalara sahibiz. Şimdi geçelim listelediğimiz dosyaların içeriğine:
header.php içine aşağıdaki kodu yerleştiriyoruz:
<html>
<head>
<title>Tutorial theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER</h1>
</div>
index.php için aşağıdaki kodları kullanacağız:
<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Main Area</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter"></div>
<?php get_footer(); ?>
sidebar.php için gerekli kodlar:
<div id="sidebar">
<h2><?php _e('Categories'); ?></h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2><?php _e('Archives'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
footer.php için gerekli kodlar:
<div id="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
Gördüğünüz gibi footer, header, index ve sidebar ile bir şablonu oluşturmuş olduk. Şimdi bunlara bir tasarım giydirmemiz gerekiyor. Bunun için oluşturduğumuz stlye.css dosyasını açın ve aşağıdaki css kodlarını dosyanın içine yapıştırın.
body {
text-align: center;
}
#wrapper {
display: block;
border: 1px #a2a2a2 solid;
width:90%;
margin:0px auto;
}
#header {
border: 2px #a2a2a2 solid;
}
#content {
width: 75%;
border: 2px #a2a2a2 solid;
float: left;
}
#sidebar {
width: 23%;
border: 2px #a2a2a2 solid;
float: right;
}
#delimiter {
clear: both;
}
#footer {
border: 2px #a2a2a2 solid;
}
.title {
font-size: 11pt;
font-family: verdana;
font-weight: bold;
}
Şu anda temel bir şablon yapısı için gerekli olan her şeyi tamamladık. Bu işlemleri yaptıktan sonra ayarlarınızda sitenin güncel temasını oluşturduğunuz tema olarak seçerseniz, siteniz ilk etapta boş bir site şablonu gibi gözükecektir.
WordPress kurduğunuz sitenizi yukarıdaki gibi gördüyseniz, başarıyla bir tema oluşturmuşsunuz demektir. Şimdi tema oluşturmayla ilgili ufak tefek ipuçlarına geçelim:
- WordPress bir temanın temel tasarım kodlarını hiçbir ayar yapmazsanız style.css dosyası içerisinde arar. Oluşturduğunuz tema için tüm tasarımlarınızı style.css içine yazmanız gerekiyor. Eğer css dosyanızın adı style.css değilse, bunu ayrıca belirtmeniz gerekecektir.
- Eğer sitenizde değiştirmeniz gereken temel wordpress ayarları varsa (path vs.); bunları belirtmek için kullanacağınız bir functions.php dosyası oluşturmanız gerekecek.
- Tüm şablonlarınızda illa ki yukarıda belirtmiş olduğum temel bölümleri eklemek zorunda değilsiniz. Örnek olarak; tek bir içerik bölümü oluşturup bir sidebar.php dosyası oluşturmadan sidebar’ı index içerisinde tanımlayabilirsiniz. Bu durumda temel css ayarlarında değişiklik yapmanız gerekir. Yine de esneklik açısından temel bölümleri yukarıdaki gibi ayrı php dosyalarında oluşturmanızı tavsiye ediyorum.
Şimdilik bu kadar. Aklıma geldikçe bu yazıya yeni bilgiler eklemeye devam edeceğim. Umarım yazım faydalı olur. İyi çalışmalar dilerim.