Kapat
Webmaster 4.250 views 0

Sıfırdan WordPress Tema Nasıl Yapılır? Tüm Fonksiyonlar

Bu yazımızda sizlere;

WordPress tema nasıl yapılır?, WordPress tema tasarımı, Sıfırdan WordPress tema yapımı, WordPress nasıl kodlanır?, WordPress tema dersleri, WordPress tema nasıl yaparım?, WordPress kendi temamı oluşturmak istiyorum, WordPress css ve php nasıl kodlanır?

gibi soruların yanıtlarını detaylıca anlatmak istiyoruz.

WordPress günümüzde internet sitelerinin büyük bir çogunlugunda kullanılıyor ve her geçen günde bu kullanım artmaya devam ediyor. Nedeni ise WordPress yazılımının sürekli güncellenen bir yazılım olmasıdır, kolay kullanımını da atlamamak gerekiyor tabiki. Birçok ücretsiz eklentisinin bulunması ve internet ortamında binlerce wordpress teması bulunması en önemli etken. WordPress bu kadar çok kullanılıyor ve artık insanların kafasında bende siteme tema yapmak istiyorum, WordPress teması yapabilmek için ne bilmem gerekiyor, nereden başlamam gerekiyor? bu gibi sorular oluşmaya başladı. Malesef bu konuda türkçe bir makale bulmak zor gibi gözükse de biz sizler için WordPress tema yapımını anlatıcaz. Öncelikle belirteyim css hakkında hiçbir bilginiz yoksa Css hakkında biraz bilgi toplamanız gerekiyor. Şimdi azçok bir css bilginiz bulundugunu varsayıyorum ve anlatımıma başlıyorum. Ögrenme aşamasında basit bir tema yapıcaz kaba taslak gibi diyebiliriz daha sonra siz edindiginiz bilgiler ile bu temayı görsellik açısından geliştirebilirsiniz. Öncelikle aşagıda bulunan resmi bir incelemenizi istiyorum şöyle detaylıca bir bakın, bu resimde bir wordpress temasının anotomisini görüceksiniz.

Evet yukarıda incelediginiz resim bir wordpress temasını oluşturan anotomidir. Şimdide aşagıda bulunan resimi bir incelemenizi istiyorum aşagıda bulunan resimde tema yapımındaki ilk adımımız olan css yani tema şablonumuz ile ilgili bilgi verecektir.

Yukarıda gördügünüz resim yapacagınız WordPress temasının stil şablonu, her biri ayrı ayrı olacak yani css dosyamızı kodlarken header şeçicilerini, footer seçicilerini, sidebar seçicilerini düzenleyecegiz hepsini teker teker uygulayacagız yapacagız ki karışıklık olmasın örnegin header bölümünde resim ekleyebilirsiniz yada tema görünümüne başka bir özellik katmak isterseniz bunların hepsini css dosyamızdan yapıcagız. Css bu yüzden önemlidir. Artık CSS dosyamızı oluşturmaya ve düzenlemeye başlayalım. CSS dosyasında yapacagımız degişiklikler sayfa yapısını ayarlama link baglantı özelliklerini düzenleme menuleri düzenleme gibi tüm tasarım ve şablon ile ilgili degişikliklerin yapılacagı bölüm CSS dir. Şimdi bir CSS dosyası nasıl oluşturulur ve nasıl düzenlenir onu görecegiz. Öncelikle altta verdigim kodları css dosyanızın en başına ekleyin, bu kodlar fazla önem taşımaz sadece tanıtım amaçlıdır.

/*

Theme Name: Dolap Adam

Theme URI: https://www.dolapadam.com

Description: Teknoloji ve aradığın herşey

Author: admin

Author URI: www.dolapadam.com

Version: 1.0

*/

Şimdiki aşamamızda body kısmında bir düzenleme yapıcaz. Temada içerigimiz body kısmına gelir burada yapıcagımız işlemler yazı boyutu fontları gibi şeyleri düzenlemek amaçlıdır. Örnegin <h1> ile yazılan yazıların boyutu vs. gibi şeyler.

body {

font: 62.5%/1.6em “Lucida Grande”, “Lucida Sans Unicode”, verdana, geneva, sans-serif;

color:#666;

margin:0;

border-top:2px solid #FF3366;

}

* {

margin:0;

padding:0;

}

h1 {

font-family:”Times New Roman”, Times, serif;

font-size:3.8em;

font-weight:normal;

color:#333;

letter-spacing:-1px;

margin:20px 0;

}

h1 a {

text-decoration:none;

color:#333;

}

Gördügünüz gibi CSS kodlaması oldukça basit ve ögrenildigince oldukça eglencelidir. Devam edelim şimdide footer ve header kısmında düzenleme yapıcam, arka plan olarak herangi bir resim kullanmayacagım şimdi footer için tek bir seçici oluşturacagım ama header için 3 adet seçici kullanacagım bir tanesi sayfalama, link ve arka plan için, digeri üst kısmın boyutu ve dizaynı için , digeri ise genel boyut ve dizayn için. Aşagıdaki koda da bir bakalım, kendimize göre düzenleyerek yukarıdaki kodun devamı olarak CSS dosyamıza ekliyoruz.

#footer {

padding:20px;

text-align:right;

border-top:1px solid #eee;

margin:0;

color:#fff;

}

#header {

border-top:20px solid #FF3366;

}

#header .description {

float:right;

margin:45px 0 0 0;

color:#FF3366;

}

#header h1 {

margin:15px 0 0 0;

padding:25px 25px 40px 0;

border-bottom:20px solid #fff;

}

Yukarıdaki kodlardada görüldügü gibi headerimizin sırası ile pozisyonunu arka plan rengini yazılarını vs. belirledik. Şimdiden temamızın navigasyon menulerini yani sidebar üzerindeki kategoriler, sayfalar, baglantılar gibi menu tarzında olan herşeyi düzenleyecek css kodumuzu css dosyamıza ekliyoruz. Gene yukarıdaki kodlamalar tarzında olacak, buradaki görevimiz linklerin renkleri, tarzı veya istediginiz ek özellikler varsa bunları ayarlamanız gerekiyor.

#wrapper {

width:760px;

margin:0 auto;

}

#nav {

border-bottom:1px solid #eee;

padding:7px 0;

margin:0;

border-top:1px solid #fff;

height:28px;

}

#nav li {

float:left;

list-style:none;

}

#nav li a {

color:#999;

padding:5px 5px 7px 5px;

background:#fff;

font:1.6em Trebuchet MS;

margin:1px 2px 0 0;

font-weight:bold;

text-decoration:none;

display:block;

}

#nav li a:hover {

background-color:#eee;

color:#444;

text-decoration:none;

}

#nav li a.active {

background-color:#fff;

color:#FFFFFF;

text-decoration:none;

}

.clear {

clear:both;

}

#content {

margin:0 275px 0 0 !important;

margin:0 277px 0 0;

border-right:1px solid #eee;

border-left:1px solid #eee;

padding:10px 25px 30px 25px;

}

#content p {

line-height:25px;

margin:25px 0;

font-size:110%;

word-spacing:2px;

}

#content a {

text-decoration:none;

color:#333;

border-bottom:1px solid #eee;

}

#content a:hover {

color:#000;

}

#content h2 {

font-family:”Times New Roman”, Times, serif;

font-size:2.8em;

font-weight:normal;

margin:15px 0;

border-bottom:1px solid #f6f6f6;

padding:5px 0;

line-height: 30px;

}

#content h2 a {

color:#444;

text-decoration:none;

border:none;

}

Css kodlarını incelediginiz zaman fark edeceksiniz her bir özellik belirtiliyor örnegin <h2> yazı boyutunun rengini tonunu fontunu falan ayarlıyor. Şimdi sıra sidebarımızı yani yan menümüzü ayarlamaya geldi.

#sidebar {

width:250px;

float:right;

padding:10px 10px 30px 10px;

border-left:1px solid #eee;

border-right:1px solid #eee;

border-bottom:1px solid #eee;

}

#sidebar h2 {

letter-spacing:2px;

font-size:1.4em;

color:#333;

border-bottom:1px solid #CC0066;

padding:0 0 3px 0;

}

#sidebar ul {

list-style:none;

margin:0 0 20px 0;

}

#sidebar li {

padding:3px;

border-bottom:1px solid #f6f6f6;

}

#sidebar li a {

color:#333;

text-decoration:none;

}

#sidebar input {

width:240px;

padding:5px;

background:#fdfdfd;

color:#444;

border:1px solid #f6f6f6;

font:11px Verdana;

}

#sidebar input:focus {

background:#fff;

border:1px solid #CC0066;

}

#sidebar li a:hover {

color:#CC0066;

}

p.news {

padding:10px;

background:#D7F0B2;

margin:10px 0;

color:#537B17;

border-bottom:2px solid #BCE67D;

border-top:2px solid #BCE67D;

}

blockquote {

padding:5px 15px;

background:#f6f6f6;

margin:10px 0;

border:1px solid #eee;

}

#content ul, ol {

margin:10px 10px 10px 25px;

border-top:1px solid #eee;

}

#content li {

padding:10px;

border-bottom:1px solid #eee;

}

img {

background:#ccc;

padding:1px;

border:5px solid #eee;

}

#content h3 {

margin:10px 0;

font:160% Trebuchet MS;

color:#222;

}

a.more {

display:block;

text-align:right;

color:#2F460D;

text-decoration:none;

margin:10px 0 0 0 ;

}

a.more:hover {

text-decoration:underline;

}

textarea#comment { width: 400px; padding: 5px; }

.commentmetadata { font-size: 10px; }

Evet yukarıda gördügünüz gibi sidebarımızın yerini, genişligini, baglantıların boyutunu, rengini, arka plan rengini vs. ayarladık. Evet Css dosyamızın düzenlemesini yaptık ve oluşturduk, şimdi PHP kodlama kısmına geçicez. CSS dosyamız hazır şimdi temamızı oluşturmak için PHP dosyalarını ayarlıcaz. Öncelikle yazımızın en başında gösterdigimiz WordPress temasının hangi dosyalardan olustugunu gosteren grafigi tekrar bir gostermek istiyorum.

Evet arkadaşlar tekrar gördügümüz gibi WordPress in sayfaları bu şekildedir. İndex.php bizim ana sayfamızdır ve diger sayfalarımız buraya include edilir. Header.php sitemizin üst kısmını oluşturur. CSS ile yaptıgımız şablonu birde görsel olarak gösterelim.

Evet şekildeki gibi bir şablon oluşturmak için tek ihtiyacımız folat ve margin degerlerini belirlemek daha sonra css de seçiciler ile ek özellikler belirleyebilirsiniz. Örnegin Header kısmını ele alalım

*yüksekliği 300 genişliği 930 olarak header kısmın kodlarını yazıyoruz*/
#header {
border: 1px solid #00ff00;
width: 930px;
height: 300px;
}

Şimdide konumunu belirlemek için float uygulamasına bir örnek olarak sidebar kısmımızı gösterelim.

/*Float etiketi ile sağ ve sol siderbarı diğer kolondan ayırıyoruz.*/
#sidebarLT {
margin:0;
width:200px;
border: 1px solid #ff9900;
float:right;
}

Evet arkadaşlar verdigimiz birkaç örnekten sonra konumuza dönelim. Css dosyamızda işlemlerde hatırlarsanız herbir conteiner ayrı seçiciler kullandık, şimdi ilk seçicilerimiz olan header.php ile devam edelim. Daha öncede bahsettigim gibi header.php bizim neredeyse bütün baglantılarımızın ve css dosyaları gibi birçok baglantılarımızın oldugu kısımdır. Evet yukarıdaki yazılarımızda da bahsettigimiz gibi yapacagımız bütün sayfalar index.php ye gelecek. Header.php yi hazırlarken bir bakıma şu şekildede düşünebiliriz, index.php yi düzenliyormuş gibi.

1. Adım Header.php

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”tr”>
<head>
<title>-</title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” href=”css/1.css” type=”text/css” media=”screen,projection” />
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<p>
Klasik bir sablon.
</p>
<h1><a href=”#”>bu kısım ana sayfamızın gelecegi kısım</a></h1>
<ul id=”nav”>
<li><a href=”#”>linkler buraya</a></li>
<li><a href=”#”>linkler buraya</a></li>
<li><a href=”#”>linkler buraya</a></li>
<li><a href=”#”>linkler buraya</a></li>
<li><a href=”#”>linkler buraya</a></li>
</ul>
</div>

Yukarıda gördügünüz gibi klasik bir html şablonu var. Şimdi ise WordPress içerik yönetimi sistemi ile baglantı kuran kodlarımızı ekleyecegiz. Linkler buraya kısmı özel olarak eklendi php kodlarının büyük bir çogunlugu buraya gelecek.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” <?php language_attributes() ?>>

<head profile=”http://gmpg.org/xfn/11″>

<title><?php bloginfo(‘name’); ?> <?php wp_title(); ?></title>

<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen,projection” />

<?php wp_head(); ?>

</head>

<body>

<div id=”wrapper”>

<div id=”header”>

<p class=”description”><?php bloginfo(‘description’); ?></p>

<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>

<ul id=”nav”>

<?php wp_list_pages(‘sort_column=menu_order&title_li=’); ?>

</ul>

</div>

Evet arkadaşlar yukardaki kodlar ile gördügünüz gibi WordPress in gerekli baglantı ayarlarını uyguladık, php bilenler çok rahat anlayacaklardır. Evet header.php mizin düzenlemesi bu kadar. Şimdi sıra Footer.php mizi düzenlemeye geldi. Footer.php dosyamızı da düzenledikten sonra sıra 2 php dosyamızı index.php ye baglayacagız.

2. Adım Footer.php

<div id=”footer”>

<!– Burası tamamen reklam site ismi urlsi falan –>

<p>wordpress tema tasarım <a href=”http://www.sorbize.com”>Sorbize</a><br />

<!– burayı sakın silmeyin –>

© <?php the_time(‘Y’); ?> <?php bloginfo(‘name’); ?><br />

<a href=”<?php bloginfo(‘rss2_url’); ?>”>feed adresi</a></p>

</div>

</div>

< ?php wp_footer(); ?>

</body>

</html>

Evet klasik bir footer.php dosyası bu biçimdedir. Evet sıra geldi header ve footeri index.php dosyamıza eklemeye, gayet basit ve sade bir kod ile bu işlemi yapacagız

<?php get_header(); ?>
<?php get_footer(); ?>

Yukarıda gördügünüz php kodları ile footer ile header i indexin içine get fonksiyonu ile getiriyoruz. Sidebar ıda index.php ye nasıl ekleyeceginizi göstermek istiyorum.

<?php get_header(); ?>
 
<?php get_sidebar(); ?>
<div id=”content”>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<p><?php the_time(‘F j, Y’); ?> at <?php the_time(‘g:i a’); ?> | <?php the_category(‘,
‘); ?> | <?php comments_number(‘No comment’, ’1 comment’, ‘% comments’); ?></p>
<?php comments_template(); // Get wp-comments.php template ?>
<?php endwhile; else: ?>
<h2>maalesef</h2>
<p>Aradiginiz dosya burada bulunmuyor.</p>
<?php endif; ?>
<p align=”center”><?php posts_nav_link(); ?></p>
</div>
<?php get_footer(); ?>

evet arkadaşlar yukarıdaki kodumuz ile beraber de 3 sayfayı index.php ye ekledik, bu sayfaların şablonlarının nasıl olacagını css dosyamızda belirtiyoruz. Unutmayın php bir programlama dilidir tasarım dili degil. Aşagıya bakarsanız index.php yi daha iyi anlayabilirsiniz.

Evet yukarıdaki resimdede gördügünüz gibi index.php ye oluşturdugumuz sayfaları get fonksiyonu ile getiriyoruz, özellikle sidebar a dikkat etmeniz gerekiyor, çünkü oraya kategorileri ve onun gibi yan menude bulunması gereken bileşenleri degişkenlerimiz ile sidebar dosyamız ile yönlendirdik. Şimdi sidebar kısmını biraz daha açıyorum.

Sidebar.php

Bazı özellikleri index.php ye ekledigimiz için çok basit bir sidebar oluşturacagız. Aşagıdaki kodu inceleyebilirsiniz.

<div id=”sidebar”>

<?php if ( !function_exists(‘dynamic_sidebar’)

|| !dynamic_sidebar() ) : ?>

<h2>Kimim ben</h2>

<p>Buraya kendiniz hakkinda biraz bilgi verebilirsiniz.</p>

<?php endif; ?>

</div>

Evet dynamic_sidebar foncsiyonunu aynen görüldügü gibi oluşturunuz. Sidebarımızı widgetler eklemek istedigimizde gerekli özellikleri alabilmesini saglamamız gerekiyor. Tabi bunun için ayrı bir fonksiyon dosyası hazırlamamız şart. Fonksiyon dosyasındaki bazı özelliklerin degiştirilebilir olması için kayıtlı giriş özelligi olması gerekiyor, kodlarımız aşagıda.

<?php

if ( function_exists(‘register_sidebar’) )

register_sidebar(array(

‘before_widget’ => ”,

‘after_widget’ => ”,

‘before_title’ => ‘<h2>’,

‘after_title’ => ‘</h2>’,

));

?>

ve sidebar ın index.php ye nasıl yönlenecegini tekrar yazalım.

<?php get_sidebar(); ?>

Sıra şimdi son 2 kısma geldi. Comments yani yorumlar ve arşiv dosyasına.

Comments.php

Birçok içerik yönetim sisteminde yorum kısmı oldukça karışıktır ancak WordPress için aynı şey geçerli degildir.

<?php comments_template(); // Get wp-comments.php template ?>

Simdide css dosyamızda yorumlar kısmının şeklini belirleyelim.

textarea#comment { width: 400px; padding: 5px; } .commentmetadata { font-size: 10px; }

evet arkadaşlar yorumlar kısmının boyutunu ve yazı şeklini basit bir css kodlaması ile degiştirdikten sonra nasıl göründügünün bir görüntüsünü verelim.

Şimdi sıra geldi arşiv dosyamızı oluşturmaya.

Archive.php

Arşiv dosyasıda yorumlar dosyasında oldugu gibi WordPress de standart bir dosya olarak görülür. Burada index.php yi aratmayacak şekilde bir arşiv dosyası oluşturmanız gerekiyor buda şu şekilde olabilir get fonksiyonu ile header.php , sidebar ve footer i yönlendiriyorsunuz.

<?php get_header(); ?>
 
<?php get_sidebar(); ?>
 
<div id=”content”>
<h2 class=”entry-title”><?php the_title() ?></h2>
<?php the_content() ?>
<ul id=”archives-page” class=”xoxo”>
<li id=”category-archives”>
<h3>Kategori arsivi</h3>
<ul>
<?php wp_list_categories(‘optioncount=1&title_li=&show_count=1′) ?>
</ul>
</li>
<li id=”monthly-archives”>
<h3>Genel arsiv</h3>
<ul>
<?php wp_get_archives(‘type=monthly&show_post_count=1′) ?>
</ul>
</li>
</ul>
 
</div>
<?php get_footer(); ?>

Evet gördügünüz gibi çok basit bir yapısı var.

Evet arkadaşlar sizlere sıfırdan bir wordpress teması yapmayı olabildigince sade bir biçimde anlatmaya calıstık. Daha farklı temalar yapmak isterseniz CSS dosyasından ayarlamalar ile oluşturabilirsiniz.

Bir cevap yazın

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