Hakan Demirel – Graphic and User Interface Designer

WordPress’e Tema Yapmak

24.03.2010, Çarşamba

Uzun zamandır planladığım fakat bir türlü zaman bulup yapamadığım wordpress teması hakkında araştırma yaparken internette Muhammet Sevim arkadaşımızın yazdığı dökümanı buldum. Bu kadar temiz ve güzel anlatım sanırım başka sitede yoktur.

http://muhammetsevim.com/tutorials/wordpress-tasarim-entegrasyonu/ ‘den alıntı yapıyorum.

ipuçları & giriş
gerekli klasörler & stil dosyası
üst & alt bölüm
anasayfa
içerik sayfası
yorum sayfası
üst menü ve kenar menüsü & widgetlar
eklentiler
diğer bilgiler
son

Adım 1 · İpuçları & Giriş

Bu adım size, tasarımlarınıza WordPress’i nasıl entegre edebileceğinize dair genel bilgi verecektir.

Tebrikler! Artık siz de yazılarınızı okurlarınıza özenle hazırladığınız, size ait olan tasarımlar üzerinden okutmanın verdiği zevki yaşayacaksınız! Belki korkup cesaret edemediniz, belki tasarımınızı hazırlayacak zamanı bulamadınız, belki ihtiyacınız olan ilhamı alamadınız. Ama şimdi buradasınız, ve 20 dakika içinde yeni blogunuza ilk yazınızı gireceksiniz.

Adım 2 · Gerekli Klasörler & Stil dosyası

Bu adım size WordPress’teki tema sistemi hakkında genel bilgi sunacak olup, css dosyasında yapılacak değişikliklere dair bilgi verecektir.

Dikkat: Bu makaleyi uygulayabilmek için, CSS/XHTML ile hazırlanmış uygun bir tasarıma ihtiyacınız vardır. Henüz bir tasarım hazırlamadıysanız, temel görünüm şeklini herhangi bir WordPress temasını örnek alarak hazırlayabilirsiniz.

WordPress temaları /yol/wp-content/themes/temaadi adresine yüklenir. Temanın stil dosyası da, style.css adı altında bu klasöre yüklenmelidir.

Öncelikle, temalanızın stil dosyasının en üst bölümüne yorum kodlarının yardımıyla tema hakkında genel bilgi verin;

/*
 Theme Name: Tema Adı
 Theme URI: Tema Adresi
 Description: Tema hakkında genel bilgi
 Version: Versiyon
 Author: Tasarımcı
 Author URI: Tasarımcı Adresi
 */

Adım 3 · Üst & Alt Bölüm

Her sayfaya entegre edilecek olan üst ve alt bölümlere ait sayfaları bu adımda oluşturuyoruz.

Temel web programlama bilginiz varsa -include- komutuna aşinasınızdır. Bu komut istediğiniz bir sayfayı aktif sayfaya ekleyerek, aktif sayfanın eklenen sayfayı içermesini sağlar. Böylece eklenen sayfa sanki aktif sayfanın bir parçasıymış gibi görünür. Büyük çaplı sitelerde, belirli bölümleri tek sayfa üzerinden yönetebilmek için kullanılan bu özellik WordPress’te de karşımıza çıkıyor. Bir menünüz olduğunu, ve bu menüyü yüzden fazla sayfada kullanacağınızı düşünün, -include- özelliği ile menüyü sayfalarınıza eklemiş olursanız, menüde herhangi bir değişiklik yapılması gerektiği zaman zorlanmadan tek sayfa üzerinden değişiklik yapabilirsiniz.

WordPress’in önceden yüklenmiş temalarına göz attığınızda görebileceğiniz header.php ve footer.php dosyaları, sitenin tüm sayfalarına eklenmiştir. Böylece üst bölümde herhangi bir değişikliğe gitmeniz gerektiğinde header.php üzerinde, alt bölümde herhangi bir değişikliğe gitmeniz gerektiğinden footer.php dosyaları üzerinde kolayca değişikliğinizi yapabilirsiniz.

Header.php · Üst Bölüm

<?php if (is_404()) { header("HTTP/1.1 404 Not Found"); } ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php bloginfo('description'); ?> <?php if ( is_single() ) { ?> <?php } ?> <?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
</head>

‘/yol/wp-content/themes/temaadi ‘ klasörünün içinde oluşturacağınız ‘header.php’ dosyasına yukarıdaki kod demetini kopyalayıp yapıştırın. Gördüğünüz gibi, çok klasik html tagleri’nin içerisinde bulunan WordPress’e ait kodlar, sayfanızda stil dosyasını, rss dosyasını çağırmakla, kısacası temel işleri yapmakla yükümlüler.

‘header.php’ sayfasını oluşturup yukarıdaki kodları sayfaya ekledikten sonra, tasarımınızı yavaş yavaş ekleme zamanının geldiğini bildirmek isterim. Heyecana gerek yok, şimdiye kadar ne kadar kolay olduysa, böyle de devam edecek ;)

Tasarımınızın hazırda olan içerik sayfasını açtıktan sonra, üst bölüm kodlarınızı kopyalayıp, oluşturmuş olduğunuz ‘header.php’ dosyasına yapıştırın.

Aşağıda, şu an kullandığım tasarımda bulunan ‘header.php’ sayfasının ikinci bölümünün kodları bulunmaktadır.

Örnek

<body id="top">

<div id="container_main">
<div id="container_top">
<div id="topSunLogo"><a href="/"></a><!-- topSunLogo --></div>

<ul id="mainmenu">
	<li id="me1"><a href="/">Anasayfa</a></li>
	<li id="me2"><a href="http://www.muhammetsevim.com/index.php/hakkinda/">Hakkında</a></li>
	<li id="me3"><a href="http://www.muhammetsevim.com/index.php/arama/">Arşiv</a></li>
	<li id="me4"><a href="http://www.muhammetsevim.com/index.php/iletisim/">İletişim</a></li>
</ul>

<!-- container_top -->

<div id="LogoSea"></div>
<div id="NoSix"></div>
</div>
<div style="margin-top:65px; padding-bottom:50px;">

dikkat: yukarıdaki kodlar muhammetsevim.com’da gördüğünüz tasarımın örnek amaçlı yayınlanmış kodlarıdır, lütfen yukarıdaki bölüme tasarımınızın <body> tag’inden sonraki sadece üst bölüme ait kodları girin.

Footer.php ·Alt bölüm

Ayni az önce hazırlamış olduğumuz üst bölüm gibi, şu an oluşturacağımız alt bölüme ait sayfa da diğer tüm sayfalarda gösterilecek. WordPress’e ait herhangi bir kod içermedigi için hazırlanması kolay olan sayfayı ‘/yol/wp-content/themes/temaadi ‘ klasörüne ‘footer.php’ adı altında kaydetmeniz gerekiyor.

Sayfayı oluşturduktan sonra, tasarımınızın her sayfada görünmesini istediğiniz alt bölüm kodunu bu sayfaya yapıştırın.

Örnek

<div id="footer">Tüm hakları saklıdır. 2006, İsim</div>

Adım 4 · Anasayfa

Sitenizin bel kemiği olan anasayfanızı hazırlıyoruz.

İlk bölümleri tamamladık. Şimdi hazırladığınız sayfalara, yazdığınız kodlara dönüp bir bakın. Gerçekten iyi iş başardığınızın farkındaysanız, oyunun ateşini düşürmeden hızlıca devam edelim.

En önemli sayfalardan birini hazırlamak üzere olduğumuzu biliyorsunuz, bu yüzden sayfanın biraz daha karışık olabileceğinin de farkındasınız.

‘index.php’ adı altında kaydedeceğimiz anasayfamızda, oluşturduğumuz sayfaları çağırdıktan sonra ‘the loop’ ile yazıları listeleyeceğiz. Bu sayfanın düzenli olmasına izin verin, zira siteniz için alacağınız yorumların çoğu bu sayfanın güzelliğine bağlıdır.

Örnek

<!--Ust bolum alimi-->
<?php get_header(); ?>
<!--Anasayfada bulunan herhangi bir yazinin listelenmesi-->
<div>
	<h3>Örnek Başlık/h3>
	<h3>8 Haziran 2006 | Kategori: Genel | 5 yorum</h3>
	<p>İçerik/p>
</div>
<!--Alt bolum alimi-->
<?php get_footer(); ?>

WordPress template tag’lerinin yardımıyla yukarıdaki örnek bölümü WordPress’in anlayacağı şekle çeviriyoruz.

İpucu

WordPress Template Tag’leri ile, istediginiz anda istediginiz bir bilgiyi çagirma gücüne sahipsiniz. Örnegin, yazinizin hemen altina

<?php the_date(); ?>

kodunu girdiğiniz halde, o alanda yazının girildiği tarih görünecektir. WordPress Template Tag’leri hakkında detaylı bilgi ve tüm liste için resmi WordPress sitesini ziyaret ediniz.

Son düzenlemelerin yardımıyla ‘index.php’ sayfasının kodu aşağıdaki hali alıyor;

<!--Ust bolum alimi-->
<?php get_header(); ?>
<!--Birden fazla yaziyi listeleme-->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!--Anasayfada bulunan herhangi bir yazinin listelenmesi-->
<div>
	<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
	<h3><?php the_time('F j, Y'); ?> | Kategori: <?php the_category(', '); ?> | <?php comments_number(Yorum yok', '1 yorum', '% yorum); ?></h3>
	<p><?php the_content('Devam&#305; &raquo;'); ?></p>
</div>
<!--Yazi bulunamadigi durumlarda-->

<?php endwhile; else: ?>

<div>
<h3>Hi&ccedil;bir ili&#351;kili yaz&#305; bulunamad&#305;.</h3>
<h3>L&uuml;tfen tekrar deneyiniz. </h3>
</div>
<?php endif; ?>
<!--Alt bolum alimi-->
<?php get_footer(); ?>

İpucu

Burada kullandığımız WordPress template tag’leri;

<?php the_permalink() ?> Herhangi bir yazıya olan bağlantının çıktısını verir.
<?php the_title(); ?> Herhangi bir yazının başlığının çıktısını verir.
<?php the_time(‘F j, Y’); ?> Herhangi bir yazının yazıldığı tarihi yazdırır (Format: Gün Ay Yıl, Bilgi: WordPress Template Tags )
<?php comments_number(Yorum yok’, ’1 yorum’, ‘% yorum); ?> Herhangi bir yazıya ait yorum sayısını yazdırır, yazıya ait bir adet yorum varsa yazılacak metni ’1 yorum’ bölümünden değiştirebiliriz, yazıya ait kayıtlı yorum yoksa yazılacak metni Yorum yok’ bölümünden değiştirebiliriz.
<?php the_content(‘Devamı »’); ?> Anasayfadaki yazı kontrol panelinde belirli bir noktadan sonra kesilmiş ve oraya yazının devamı için bir link eklenmişse, bu kod işlemin gerçekleşmesine yardımcı olacak ve o bölüme ‘Devamı’ başlığı altında yazının devamına giden bağlantıyı ekleyecektir.

Kullanabileceğiniz diğer tüm WordPress template tag’lerine WordPress resmi sitesi üzerinden ulaşabilirsiniz.

Tebrikler! WordPress’inizin anasayfanızı tamamladınız. Tarayıcınızdan WordPress’inizi çalıştırıp nasıl göründüğüne bakabilirsiniz!

Adım 5 · İçerik sayfası

Yazılarınızın tamamının, yorumların ve ek bilgilerin gösterileceği sayfayı hazırlıyoruz.

İçerik sayfası, yazılarınızın tamamının, yorumların ve ek bilgilerin gösterileceği sayfadır. Sayfa yapısı ‘index.php’ye çok benzemesine rağmen bu sayfada sadece istenilen yazı gösterileceği için ‘The loop’ fonksiyonunu çekecek ama yerine yorum bölümünü ekleyeceğiz. Daha önceden hazırlamış olduğunuz iç yazı sayfasının içerik kodlarına öncelikle göz atın. Diğer sayfaların yanına bu sayfayı ‘single.php’ adı altında kaydedin.

Örnek

<!--Ust bolum alimi-->
<?php get_header(); ?>
<!--Yazı içeriğinin listelenmesi-->
<div>
	<h3>Örnek Başlık/h3>
	<h3>8 Haziran 2006 | Kategori: Genel | 5 yorum</h3>
	<p>İçerik/p>
</div>
<!-- Yorum işlemleri -->
<!--Alt bolum alimi-->
<?php get_footer(); ?>

Ve sayfamız yine WordPress template tag’lerinin yardımıyla aşağıdaki hale geliyor;

<!--Ust bolum alimi-->
<?php get_header(); ?>
<!--Yazı içeriğinin listelenmesi-->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div>
	<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
	<h3><?php the_time('F j, Y'); ?> | Kategori: <?php the_category(', '); ?> | <?php comments_number(Yorum yok', '1 yorum', '% yorum); ?></h3>
	<p><?php the_content(); ?></p>
</div>
<!--Yazi bulunamadigi durumlarda-->

<?php comments_template(); ?>

<?php endwhile; else: ?>

<div>
<h3>Hi&ccedil;bir ili&#351;kili yaz&#305; bulunamad&#305;.</h3>
<h3>L&uuml;tfen tekrar deneyiniz. </h3>
</div>
<?php endif; ?>
<!--Alt bolum alimi-->
<?php get_footer(); ?>

İpucu: Neler yeni?

<?php comments_template(); ?> Yazılara yapılmış yorumları ve yorum formunu gösteren yorum template’ini sayfaya ekler.

Yorum sayfası

Hazırlamak üzere olduğumuz yorum sayfası, yazı içeriğini gösteren sayfada yapılan yorumları gösterme ve ziyaretçiye yeni yorum yazabilmesi için yardımcı olma görevini üstleniyor. Bu sayfada ihtiyacımız olan bir yorum gösterim tasarımı ve bir yorum formu. Oluşturacağınız sayfayı ‘comments.php’ adı altında kaydedin.

Örnek

<h3>Yorumlar</h3>
<div><!--Buraya Gravatar gelecek--></div>
<div>
	<p>İnci 10.06.2006 tarihinde demiş ki;</p>
	<p>Yorum içeriği</p>
</div>

<h3>Yorum yazın</h3>

<form>

<p>

<input type="text" name="author" id="author" value="" tabindex="1" />
<label for="author"><small>İsim</small></label></p>
<p><input type="text" name="email" id="email" value="" tabindex="2" />
<label for="email"><small>Mail (Yayınlanmayacaktır)</small></label></p>

<p><input type="text" name="url" id="url" value="" tabindex="3" />
<label   for="url"><small>Websitesi</small></label></p>
<p><textarea name="comment" id="comment" rows="10" tabindex="4"></textarea></p>

<p><input name="submit" type="submit" id="submit" tabindex="5" value="Yorum Gönder" /></p>

</form>

Tasarımınızdaki yorum formunda bulunan form öğelerinin isim (name) ve id’lerini (id) yukarıdakiler ile değiştirin.

Ve şimdi yorum sayfamızı ‘WordPress’in anlayacağı şekle’ getiriyoruz. Bu adım diğer adımlara göre daha karışık olabilir, daha fazla bilgi içi resmi WordPress sitesindeki WordPress Template Tags bölümünü ziyaret edin.

<?php // Do not delete these lines
	if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
	die ('Lütfen bu dosyayi direk olarak yüklemeyin!');

	if (!empty($post->post_password)) { // if there's a password
	if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn't match the cookie
?>

<p>L&uuml;tfen yorumlar&#305; g&ouml;rebilmek i&ccedil;in &#351;ifreyi giriniz.</p>

<?php
return;
}
}
?>

<h3>Yorumlar</h3>
<?php if ($comments) : ?>	<?php foreach ($comments as $comment) : ?>
<div id="comment-<?php comment_ID() ?>">
<div><!--Buraya Gravatar gelecek--></div><div>
	<p><?php comment_author_link() ?> <?php comment_date() ?> tarihinde demiş ki;</p>
	<p><?php comment_text() ?>;</p>
</div>
<?php endforeach; ?><?php endif; ?>
</div>

<?php if ( comments_open() ) : ?><!-- Eger yorumlar aciksa -->
<h3>Yorum yazın</h3>
<?php if ( get_option('comment_registration') && !$user_ID ) : ?> <!-- Eger yorum yazmak icin uye olmak gerekiyorsa -->
<p>Yorum yapabilmeniz i&ccedil;in <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">
giri&#351; yapm&#305;&#351; olman&#305;z </a> gerekmektedir. </p>

<?php else : ?>

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post">
<?php if ( $user_ID ) : ?> <!-- Eger kullanici giris yapmissa -->
<p><a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php">
<?php echo $user_identity; ?></a> ismiyle giri&#351; yapt&#305;n&#305;z.
<a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="<?php _e('Log out of this account') ?>">
G&uuml;venli &ccedil;&#305;k&#305;&#351; &raquo;</a></p>

<?php else : ?>

<p>

<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
<label for="author"><small>İsim</small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
<label for="email"><small>Mail (Yayınlanmayacaktır)</small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" tabindex="3" />
<label   for="url"><small>Websitesi</small></label></p>
<p><textarea name="comment" id="comment" rows="10" tabindex="4"></textarea></p>

<p><input name="submit" type="submit" id="submit" tabindex="5" value="Yorum Gönder" />
<input type="hidden" name="comment_post_ID"   value="3" />

</p>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; endif; ?>

Tebrikler! Artık sona doğru yaklaşıyoruz. Tasarımınızın şekline göre, aşağıdaki adımları da uygulamak için işe koyulabilirsiniz.

Adım 6 · Üst menü ve kenar menüsü & Widgetlar

Üst menüyü dinamik hale getirip kenar menünüzü hazırlıyoruz.

Birçok WordPress temasında sürekli görmekte olduğumuz arama, link, son yazılar vs. kutusunun bulunduğu menüyü Widget özelliği ile birlikte kendi tasarımımıza entegre edeceğiz.

Alıntı · Yazı: The Undersigned, çeviri: Muhammet Sevim

Üst menü

Üst bölüme geri dönüyoruz. Tasarımımızda bulunan orjinal html kodunu oluşturduğumuz ‘header.php’ sayfasına koyduk, fakat biz bu butonların otomatik olarak oluşturulmasını istiyoruz. Bu nedenle üst bölüme bir anasayfa sekmesi ve ardından tüm sayfaları listeleyen kodu ekledim. ‘current_page_item’ class’ı sistem tarafından otomatik olarak aktif sekme üzerinde oluşturuldu, ama manuel olarak oluşturduğumuz anasayfa sekmesi üzerine etki etmedi.

<div id="navigation">
<ul>
<li <?php if (   is_home() ) { ?><?php } ?>><a   href="<?php bloginfo('home'); ?>">Home</a></li>
<?php   wp_list_pages('sort_column=menu_order&depth=1&title_li=');   ?>
</ul>
</div>

Kenar menüsü ve Widget’lar

Hazırladığımız kenar menüsü şu an statik durumda, ve biz bu sayfayı düzenleyerek Widget’lar için hazır hale getirmek istiyoruz. En önce karar vermemiz gereken şey, eğer Widget’lar aktif değilse, onların yerine ne gösterileceğine karar vermek. Temel bölümü bitirdiğimize göre, işte ‘sidebar.php’nin temizlenmiş ve WordPress template tag’lerini içeren kodları;

<div id="sidebar">

<div>
<h3>Search</h3>
<form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div id="Search"><input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" /></div>
</form>
<p>&nbsp;</p>
</div>

<div>
<h3>Archives</h3>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
<p>&nbsp;</p>
</div>

<div>
<h3>Categories</h3>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<p>&nbsp;</p>
</div>

<div>

<h3>Blogroll</h3>
<ul>
<?php get_links(-1, '<li>', '</li>', '', TRUE, '', FALSE); ?>
</ul>
<p>&nbsp;</p>
</div>

<div>
<h3>Meta</h3>
<ul>
<li><?php wp_loginout(); ?></li>
<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Strict">Valid
<abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
<?php wp_meta(); ?>
</ul>
<p>&nbsp;</p>
</div>
</div>

Kenar menümüzde ne görüntüleneceğine karar verdik, ancak bu bölümü widget’lar için hazır hale getirebilmemiz için yapmamız gereken birkaç şey daha var. Aşağıdaki kod demeti widget’ların aktif olup olmadığını kontrol eden, ve aktif olmadığı durumlarda aşağıdaki kodun ‘endif’ bölümüne kadar olan kısmını ziyaretçiye gösteren yardımcı. Bununla ilgili daha fazla bilgi için bağlantıya tıklayın.

<div id="sidebar">
<?php if (   !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) :   ?>
<div>
<h3>Search</h3>
<form method="get"   id="searchform" action="<?php echo $_SERVER['PHP_SELF'];   ?>">
<div id="Search"><input type="text" value="<?php echo   wp_specialchars($s, 1); ?>" name="s" id="s"   /></div>
</form>
<p  >&nbsp;</p>
</div>

<div>
<h3>Archives</h3>
<ul>
<?php   wp_get_archives('type=monthly'); ?>
</ul>
<p  >&nbsp;</p>
</div>

<div>
<h3>Categories</h3>
<ul>
<?php   wp_list_cats('sort_column=name&optioncount=1&hierarchical=0');   ?>
</ul>
<p  >&nbsp;</p>
</div>

<div>
<h3>Blogroll</h3>
<ul>
<?php   get_links(-1, '<li>', '</li>', '', TRUE, '', FALSE);   ?>
</ul>
<p  >&nbsp;</p>
</div>

<div>
<h3>Meta</h3>
<ul>
<li><?php   wp_loginout(); ?></li>
<li><a   href="http://validator.w3.org/check/referer" title="This page validates as XHTML   1.0 Strict">
Valid <abbr title="eXtensible HyperText Markup   Language">XHTML</abbr></a></li>
<li><a   href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a   href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art
semantic personal publishing   platform.">WordPress</a></li>
<?php wp_meta();   ?>
</ul>
<p  >&nbsp;</p>
</div>
<?php endif;   ?>
</div>

Widget’ların çalışmasını sağlamak için yapmamız gereken birşey daha var ki, o da ‘functions.php’yi oluşturmak. Aşağıdaki php kod demetlerinden ilki, WordPress’e temamızın widget’ları desteklediğini, ve onların aktif oldukları ve olmadıkları durumlarda nasıl görünmeleri gerektiğini bildiriyor. İkinci kod demetimiz yeni bir arama widget’i oluştururken, üçüncü ve dördüncü kod demetlerimiz ise yeni link ve sayfa widgetleri oluşturuyorlar. Beşinci ve sonuncu kod demetimiz ise WordPress’in gerçek arama, link ve blogroll’un oluşturduklarımız ile değiştirildiğine emin olmasını sağlıyor. Lütfen sayfanın başında ve sonunda hiçbir boş satır olmamasına dikkat edin.

<?php if ( function_exists('register_sidebar') )
 register_sidebar(array(
 'before_widget' => '<div id="%1$s">',
 'after_widget' => '<p>&nbsp;</p></div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 )); ?>
<?php function widget_whitespace_search() { ?>
 <div>
 <h3>Search</h3>
 <form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">

<div id="Search"><input type="text" value="<?php echo
wp_specialchars($s, 1); ?>" name="s" id="s" /></div>
 </form>
 <p>&nbsp;</p>
 </div>
 <?php } ?>

<?php function widget_whitespace_links() { ?>
 <div>
 <h3>Blogroll</h3>
 <ul>
 <?php get_links(-1, '<li>', '</li>', '', TRUE, '', FALSE); ?>
 </ul>
 <p>&nbsp;</p>
 </div>
 <?php } ?>

<?php function widget_whitespace_pages() { ?>
 <div>
 <h3>Pages</h3>
 <ul>
 <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
 </ul>
 <p>&nbsp;</p>
 </div>
 <?php } ?>

<?php if ( function_exists('register_sidebar_widget') ) {
 register_sidebar_widget(__('Search'), 'widget_whitespace_search');
 register_sidebar_widget(__('Links'), 'widget_whitespace_links');
 register_sidebar_widget(__('Pages'), 'widget_whitespace_pages'); }
?>

Adım 7 · Eklentiler

Kendi temanızı hazırlamış olsanız bile blogunuzun henüz çok da farklı olmadığını düşünüyorsanız, eklentilerle rakiplerinizden bir adım öne geçebilirsiniz. Eklentilerle ilgili ayrıntılı bir yazıya bu bağlantı üzerinden ulaşın.

Adım 8 · Son

Tebrikler, artık kendinize ait bir WordPress temanız var! Temanızı kontrollerden geçirdikten sonra bir ekran görüntüsü çıkarıp ‘screenshot.png’ adı altında tema klasörünüze kaydedin. Herkes gibi ben de hata yapmış olabileceğim için, gözünüze çarpan hataları lütfen bana bildirin. Ayrıca yorumlarınızın benim için her zaman olduğu gibi çok önemli olduğunu hatırlatarak, ayırdığınız zaman için teşekkür ederim.

Yazdıklarım | Hakan Demirel

WordPress’e Tema Yapmak

Adım 1 · İpuçları & Giriş

Bu adım size, tasarımlarınıza WordPress’i nasıl entegre edebileceğinize dair genel bilgi verecektir.

Adım 2 · Gerekli Klasörler & Stil dosyası

Bu adım size WordPress’teki tema sistemi hakkında genel bilgi sunacak olup, css dosyasında yapılacak değişikliklere dair bilgi verecektir.

Dikkat: Bu makaleyi uygulayabilmek için, CSS/XHTML ile hazırlanmış uygun bir tasarıma ihtiyacınız vardır. Henüz bir tasarım hazırlamadıysanız, temel görünüm şeklini herhangi bir WordPress temasını örnek alarak hazırlayabilirsiniz.

Adım 3 · Üst & Alt Bölüm

Her sayfaya entegre edilecek olan üst ve alt bölümlere ait sayfaları bu adımda oluşturuyoruz.

Header.php · Üst Bölüm

Örnek

dikkat: yukarıdaki kodlar muhammetsevim.com’da gördüğünüz tasarımın örnek amaçlı yayınlanmış kodlarıdır, lütfen yukarıdaki bölüme tasarımınızın <body> tag’inden sonraki sadece üst bölüme ait kodları girin.

Footer.php ·Alt bölüm

Örnek

Adım 4 · Anasayfa

Sitenizin bel kemiği olan anasayfanızı hazırlıyoruz.

Örnek

İpucu

İpucu

Adım 5 · İçerik sayfası

Yazılarınızın tamamının, yorumların ve ek bilgilerin gösterileceği sayfayı hazırlıyoruz.

Örnek

İpucu: Neler yeni?

Yorum sayfası

Örnek

Adım 6 · Üst menü ve kenar menüsü & Widgetlar

Üst menüyü dinamik hale getirip kenar menünüzü hazırlıyoruz.

Alıntı · Yazı: The Undersigned, çeviri: Muhammet Sevim

Üst menü

Kenar menüsü ve Widget’lar

Adım 7 · Eklentiler

Adım 8 · Son

_4 yorum

_yorum yap

Kategoriler

Son yazılar

Twitter

Etiketler

Kategoriler