WordPress Tema Nasıl Yapılır?
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.
Recommended Posts
Web Sitesi Şablonu Nasıl Seçilir?
5 Mart 2018
Centos 7 Uzak Masaüstü Nasıl Kullanılır?
16 Ocak 2018
Sahibinden Tarzı Satış Sitesi Nasıl Yapılır?
5 Ocak 2018