WordPress Tema Yapımı : Başlangıç

WordPress temalarının nasıl yapıldığını anlatırken, örnek bir tema üzerinden gitmek oldukça mantıklı olacaktır diye düşünüyorum. Bu sebeple oturdum basit bir tema tasarladım. Her yazımda temanın belli bölümlerini kodlayacağım. Temanın adını da Lorem Ipsum koydum.

Temanın ön izlemesine buradan bakabilirsiniz, isterseniz indirebilirsiniz.

Temayı tasarlarken, temada bulunması gereken bazı özelliklere dikkat etmeye çalıştım. Bunları sıralamak istiyorum;

  • Temanın en üstünde sitenin başlığını ve sloganını göstereceğiz.
  • Menüde, admin panelinden oluşturduğunuz sayfaları ya da kategorileri listeleyeceğiz.
  • 2 farklı sidebar oluşturacağız, bunun sebebi ise artık sürekli aynı şablonda temaları görmekten sıkılmam. Ayrıca 2 adet sidebar’ın nasıl oluşturulacağını merak edenler vardır diye düşünüyorum.
  • Yazılarda öne çıkarılmış görsel kullanacağız.

Artık herşeyinizi hazır ettiyseniz, bu yazıda sitenin en üst kısmını kodlayacağız, başlayalım.

Stil Dosyasının Oluşturulması (style.css)

Stil dosyasına, temanızın bilgilerini yazarak başlayabilirsiniz.

/*
Theme Name: Lorem Ipsum
Theme URI: http://www.cemdemir.net/theme/lorem-ipsum
Description: WordPress teması yapımını öğretmek için tasarlanmıştır, hiçbir iddiası yoktur.
Version: 1.0
Author: Cem Demir
Author URI: http://www.cemdemir.net/
Tags: Buraya istediğiniz etiketleri virgülle ayırarak yazabilirsiniz.
*/

Aslında buraya css kodlarını yazmak istemiyorum, sonuçta css bilgisi vermiyorum, wp tema yapımını göstermeye çalışıyorum. Fakat yukarıdaki gibi gerekli olduğunu gördüğüm yerleri yazmaya çalışacağım. Zaten her yazının sonunda gerekli css dosyasını indirebileceğiniz bir link vereceğim.

Anasayfanın Kodlanması (index.php)

Daha önce de bahsettiğim gibi bir temanın çalışması için index.php ve style.css dosyaları yeterlidir. Bu sebeple temamızı hazırlarken öncelikle index dosyasını bitirmeye çalışacağız. Index’i bitirdikten sonra, yazdığımız kodları küçük parçalara ayıracağız. Yani header, footer ve sidebar gibi dosyalarda, oluşturduğumuz küçük bölümleri toplayacağız.

Öncelikle sitenin <head> tagları arasında bulunması gereken kodlara bakalım.

Aşağıya yazacağım kodlar sitenin title değeri ile ilgili kodlardır ve genellikle birçok temada aynıdır. SEO açısından da en iyi şekilde ayarlanmıştır.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php
   global $page, $paged;
   wp_title( '|', true, 'right' );
   bloginfo( 'name' );
   $site_description = get_bloginfo( 'description', 'display' );
   if ( $site_description && ( is_home() || is_front_page() ) )
      echo " | $site_description";
   if ( $paged >= 2 || $page >= 2 )
      echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
?></title>

Stil Dosyasının Sayfaya Eklenmesi

Title değerini ayarladıktan sonra, oluşturduğumuz css dosyasını anasayfaya eklememiz gerekiyor ;

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

Son olarak “head” taglarının arasına şunu da ekleyebilirsiniz ;

<?php wp_head(); ?>
</head>

wp_head() fonksiyonunu, sitenizin en üstünde sadece size görünecek bir menü çubuğu oluşturur. Fakat, wp_head() fonksiyonunu kullanıyorsanız, wp_footer() fonksiyonu ile beraber kullanmalısınız, yani wp_head() fonksiyonunu “head” tagları arasına, wp_footer() fonksiyonunu da “body” tagının kapanışına yerleştirebilirsiniz.

Site Başlığı ve Sloganı

Şimdi de site başlığı ve sloganımızı gösterelim ;

<body>
<div class="header">
   <h1><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
   <h2><?php bloginfo( 'description' ); ?></h2>
</div>

Burada 2 adet önemli fonksiyon bulunmaktadır.

bloginfo( ‘name’ ) : Sitenizin başlığını getirir.
bloginfo( ‘description’ ) : Sitenizin sloganını getirir.

Sayfaların ya da Kategorilerin Listelenmesi

<div class="menu">
   <ul>
      <li><a href="<?php bloginfo('home'); ?>">Anasayfa</a></li>
      <?php wp_list_pages('title_li='); ?>
      <!--Bu fonksiyon sayfaları listelemektedir. -->
      <!--Eğer isterseniz kategorileri de listeleyebilirsiniz <?php wp_list_categories('title_li='); ?>-->
   </ul>
   <div class="clear"></div>
</div>

Burayı biraz açıklamak gerekirse, wp_list_pages(‘title_li=’) fonksiyonu sizin admin panelinden oluşturduğunuz sayfaları listelemektedir. Fakat bazı arkadaşlar kategorileri listelemek de isteyebilirler. Bunun için wp_list_categories(‘title_li=’) fonksiyonunu kullanabilirsiniz.

Arama Bölümü

<div class="search">
   <form id="searchform" method="get" action="<?php bloginfo('url'); ?>">
      <fieldset><input class="search-text" type="text" name="s" id="s" value="Arama" /></fieldset>
   </form>
</div>

Arama bölümü için açıklanması gereken fazla birşey yok. Alın kopyalın ve yapıştırın.

Şimdiye Kadar

Şu ana kadar yaptıklarımızı bir listelemek gerekirse;

  • Sitenin title değeri için gerekli kodları yazdık,
  • Stil dosyasını anasayfaya entegre ettik,
  • Site başlığı ve sloganını en üstte gösterdik,
  • Sayfaları ya da kategorileri listeleyen fonksiyonlara baktık,
  • Arama bölümü oluşturduk

Şu ana kadar yazılan tüm kodları ve dosyaları indirmek için tıklayınız.

Bu yazıyı burada kesiyorum, bir sonraki yazıda görüşmek üzere.

Benzer Yazılar

Yorumlar

Yorum Yazın

Su elementleri kullanabilirsiniz : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Arama
RSS
Beni yukari isinla