WordPress Tema Nasıl Yapılır?

Bu yazımızda en kolay şekilde nasıl WordPress teması yapılır öğrenip hemen uygulayabilirsiniz.

Tema için Klasör Oluşturmak

İlk olarak WordPress klasöründeki wp-content / themes dizinine bir alt klasör oluşturarak başlayın. Test için, biz klasörü “demo_tema” olarak adlandırdık. Klasörün adı oluşturmak istediğiniz tema ile uyumlu olmalıdır. Bunu yapmak için Cpanel veya FTP istemcisi kullanabilirsiniz.

Tema oluşturmaya başlamadan önce, web sitenizin nasıl görüneceğine karar vermelisiniz. Bu yazıda, bir başlık, kenar çubuğu, içerik alanı ve alt bilgiden  oluşan bir WordPress teması oluşturuluyoruz.

Bunu yapmak için demo_tema dizininee aşağıdaki dosyaları oluşturmanız gerekir:

  • header.php – Bu dosya başlık bölümünün kodunu içerecektir;
  • index.php – Bu dosya tema için ana dosyadır. Main Bölgesi için kod içerecek ve diğer dosyaları dahil edip nerede olduğunu belirtecektir;
  • sidebar.php – Bu dosya kenar çubuğu hakkında bilgi içerir;
  • footer.php – Alt bilgileri yerleştireceğimiz dosyadır;
  • style.css – Bu dosya yeni bir tema düzeni sağlar;

Bu dosyaları metin editörü veya Cpanel içerisindeki dosya yöneticisi ile oluşturabilirsiniz.

header.php Dosyası

Aşağıdaki kodları içermesi gerekir:

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

Temel olarak, bu bir php kodu ve standart WordPress işlevi içeren basit HTML kodudur. Bu dosyada web sitenizin başlığı, meta açıklama ve sayfanız için anahtar kelime olarak meta etiketlerini belirtebilirsiniz.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

Yukarıdaki kod stil dosyasını çağırır.

index.php Dosyası

<?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>Makale tarihi: <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Üzgünüm, aradığınız yazı bulunamadı.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>

Bu dosya mutlaka aşağıdaki satır ile başlaması gerekir:

<?php get_header(); ?>

Az önce düzenlediğimiz header dosyasını çağırmak için eklenmelidir. Aynı şekilde yukarıdaki kodları incelediğinizde sidebar ve footer da bu şekilde eklenmiştir. Bunlar WordPress fonksiyonlarıdır.

sidebar.php Dosyası

Sitenizin yan bölümünde kategori ve arşivleri listeyecek olan sidebar.php dosyası en basit şekli ile şöyle olmalıdır:

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

Dosyada yazıların Kategorileri ve Arşivlerini görüntülemek için iç WordPress işlevlerini kullandık. Bu WordPress fonksiyonları <ul> etiketli liste döndürür.

footer.php Dosyası

Alt bölümü oluşturan dosyaya ise şu satırları eklemek gerekir:

<div id = "footer">
<h1> FOOTER </ h1>
</ div>
</ div>
</ body>
</ html>

Bunlarla beraber alt bölümde olmasını istediğiniz tüm kod ve bilgiler burada olacaktır.

style.css Dosyası

Aşağıda basit temamız için en sade haliyle stil dosyamızı inceleyebilirsiniz. Siz isteğinize göre stil dosyanızı düzenleyip daha farklı görünümler sunabilirsiniz.

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; }

Kodların içerisindeki WordPress fonksyonların tam listesini WordPress web sitesinde bulunan  Function Reference de bulabilirsiniz.

Bu yazıyı paylaşabilirsiniz:

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir