• Şuradasınız
  • Anasayfa
  • Wordpress
  • WordPress Tema Yapımı : Tekil Yazı ve Sayfa Şablonları

WordPress Tema Yapımı : Tekil Yazı ve Sayfa Şablonları

Ziyaretçileriniz, sizin WordPress admin panelinden oluşturduğunuz sayfaların herhangi birinde gezerken, page.php dosyası çalıştırılır. Ya da o dosyayı oluşturmadıysanız index.php dosyası çalıştırılır.

Yine aynı şekilde, ziyaretçileriniz herhangi bir yazının içine girdiğinde ise single.php dosyası çalıştırılır.

WordPress tema yapımı yazılarımın bu kısmında Sayfa şablonu ve Tekil yazı şablonlarından bahsedeceğim ve Lorem Ipsum adlı temamızı biraz daha geliştireceğiz, özelleştireceğiz.

page.php ve single.php Dosyalarında Ne Olmalı ?

Öncelikle kendimize bir sayfa şablonunda ya da tekil yazı şablonunda, index şablonundan farklı olarak ne bulunması gerekir, ne bulunmaması gerekir diye sormalıyız. Ben aşağıda birkaç şey sıraladım fakat siz isterseniz çok daha farklı özellikler ekleyip, çıkarabilirsiniz.

Index’de olduğu gibi birden fazla yazı göstermek yerine, sadece bir yazı göstereceğiz.

Nerede olduğumuzu belirten, bilgilendirici bir bölüm ekleyeceğiz.

Her iki şablona da yorum bölümleri ekleyeceğiz. Fakat bunu, bu yazıda değil de bir sonraki yazıda daha detaylı anlatmaya çalışacağım.

Bir sayfanın kategorisi olamayacağı için, yazı bilgileri kısmından kategori bilgisini çıkaracağız. Tekil yazı da bunu değiştirmeyeceğiz.

Tekil yazı şablonunda, yazıya atanmış etiketleri göstereceğiz.

Aynı şekilde yine tekil yazı şablonunda, yazar hakkında bölümü oluşturacağız.

Şimndilik yapacaklarımızı bunlarla sınırlayıp, yazıya devam ediyorum.

Sayfa Şablonunun Oluşturulması – page.php

Öncelikle index.php dosyasından faydalanarak bir kopya oluşturun ve adını page.php olarak değiştirin. Çünkü birçok yönden index.php ve page.php birbirine benzeyecek, çok küçük farklılıklar olacak. Biz de zaten bu farklılıkara göz atacağız.

Bir sayfanın içindeyken, page.php dosyasının çalıştırıldığını kanıtlamak için aşağıdaki gibi bir bölüm oluşturalım ;

<div class="where-am-I">
   <p>Burası page.php şablonu</p>
</div>

Sayfamızın başlığını, içeriğini veya bilgilerini göstermek için, index.php’de olduğu gibi yine döngü kullanmamız gerekiyor. Fakat biz zaten page.php’yi, index.php dosyasından yararlanarak(kopyalayarak) oluşturduğumuz için, tekrar kod yazmamıza gerek yok. Sadece yazı bilgilerinde ufak bir düzeltme yapacağız. Yukarıda da dediğim gibi bir sayfanın kategorisi olmaz, yazı bilgileri kısmını şu şekilde değiştirebiliriz.

<!-- Yazı bilgileri -->
<ul>
   <li>Tarih : <?php the_time('j F Y'); ?></li>
   <li><?php comments_number('Yorum Yok', '1 Yorum ', '% Yorum' );?></li>
</ul>

Sayfalar da da küçük resim özelliğini kullanabilirsiniz. Fakat ben bu bölümü page.php şablonundan çıkardım, eğer isterseniz tekrar ekleyebilirsiniz.

page.php’yi index.php’den yararlanarak oluşturduğumuz için, devamını oku bölümü de beraberinde geldi. Fakat bu bölüm sayfa şablonu için gereksiz, bu yüzden o kısmı da çıkardım.

Son olarak yorumların gösterileceği bir bölüm oluşturacağım, fakat içeriğini bir sonraki yazıda dolduracağım ;

<div class="comments">
   <p>Yorum bölümü daha sonra eklenecek...</p>
</div>

page.php dosyamız hazır, artık bir sayfaya girildiğinde page.php dosyası çalıştırılacak.

Tekil Yazı Şablonunun Oluşturulması – single.php

single.php dosyasını, page.php dosyasından kopyalayarak oluşturabilirsiniz, yine birçok kısım aynı olacak.

Bilgilendirici mesajı oluşturalım ;

<div class="where-am-I">
   <p>Burası single.php şablonu</p>
</div>

Daha sonra page.php’de sildiğimiz kategori bilgisini ekleyelim ;

<!-- Yazı bilgileri -->
<ul>
   <li>Tarih : <?php the_time('j F Y'); ?></li>
   <li>Kategori : <?php the_category(', ') ?></li>
   <li><?php comments_number('Yorum Yok', '1 Yorum ', '% Yorum' );?></li>
</ul>

Daha sonra yazıya atanmış küçük resim özelliğini ekleyelim ;

<div class="article-thumbnail">
   <!-- Yazının küçük resmi -->
   <?php if ( has_post_thumbnail()) { ?>
      <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('index-thumbnail'); ?></a>
   <?php } ?>
</div>

Yazıya atanmış etiketleri gösterelim ;

<div class="tags">
   <p><span>Etiketler</span> : <?php the_tags('',', ','') ?></p>
</div>

the_tags fonksiyonu, gördüğünüz üzere, veri tabanından etiketleri çekiyor ve yazdırıyor.

Yazar hakkında bölümünü oluşturalım, yazar hakkında bölümünü oluşturmak için birkaç adet fonksiyon kullanacağız.

<div class="author">
   <?php echo get_avatar( get_the_author_id() , 64 ); ?>
   <p>Yazar Hakkında : <?php the_author_posts_link(); ?></span>
   <p><?php the_author_description(); ?></p>
</div>

get_avatar fonksiyonundan bahsetmeden önce gravatar adlı siteden bahsetmeliyim.

Gravatar, wordpress’in desteklediği bir sitedir. Bu siteye bir mail adresi ile üye olursunuz ve kendinize bir avatar belirlersiniz. Bu avatar sizin mail adresinize atanır. Bundan sonra herhangi bir wordpress tabanlı siteye, o mail adresi ile yorum yaptığınızda belirlediğiniz avatar görünür. Yani mail adresinizden, avatarınız çekilir.

İşte get_avatar fonksiyonu da tam olarak bunu yapmaktadır. İçine birkaç parametre alır, ben 64 yazarak avatarın 64px genişlik ve 64px yükseklikte olmasını istediğimi belirtiyorum. Siz bu kısmı istediğiniz şekilde değiştirebilirsiniz.

the_author_posts_link fonksiyonu, yazıyı yazan yazarın ismini bir link olarak yazar. Linke basıldığında yazarın yazdığı yazılar listelenir.

Bildiğiniz üzere wordpress admin panelinin kullanıcılar sekmesinde tüm kullanıcılar listelenmektedir. Bu bölümdeki her kullanıcıya ait biyografik bilgiyi çekmek için the_author_description fonksiyonu kullanılır.

Son olarak yorum bölümünü oluşturalım ;

<div class="comments">
   <p>Yorum bölümü daha sonra eklenecek...</p>
</div>

Artık single.php dosyamızı da oluşturduk. Bir yazıya girildiğinde single.php dosyası çalıştırılacak.

Temanın son halini indirmek için tıklayınız.

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