• Şuradasınız
  • Anasayfa
  • Wordpress
  • WordPress Tema Yapımı : Temayı Küçük Parçalara Ayırma

WordPress Tema Yapımı : Temayı Küçük Parçalara Ayırma

WordPress tema yapımı yazılarında şu ana kadar 3 dosya kullandık. Bunlardan ikisi olmazsa olmaz 2 dosya, index.php ve style.css dosyalarıydı. Ayrıca fonksiyonlarımızı barındırmak için de functions.php dosyasını kullandık.

Şu an temamız index dosyasını kullanarak çalışacak. Bir kategoriye girdiğimizde bile index şablonu görünecek, yani sitenin neresinde olursanız olun size index şablonu görünecektir.

Ana sayfadan farklı bir yere gittiğinizde, mesela bir arama sonucuna gittiğinizde farklı bir şablon göstermek istiyorsanız, tema klasörüne arama ile ilgili dosyayı oluşturmanız gerekiyor. Ya da arşivleri görüntülemek istiyorsanız, arşivle ilgili dosyayı oluşturmanız gerekiyor.

Sitenin farklı yerlerinde farklı dosyalar çalıştırılırken, görünümde hep aynı olan yerleri belirlemek şu an atacağımız adım olacak. Mesela bizim temamızda en üst (header), en alt (footer), sol yan menü ve sağ yan menü hep aynı olacak. Değişecek olan kısım genellikle yazıların olduğu yer olacak.

Aynı olacak bölümleri belirlememizin sebebini şu şekilde açıklayabilirim ; index.php dosyasında ve sonradan oluşturacağınız search.php, category.php, archive.php gibi dosyalarda aynı olacağını belirttiğim yerlerden birini değiştirmek istediğinizi, mesela sloganın yanına logo eklemek istediğinizi varsayın ; bu durumda index, search, category ve archive dosyalarına tek tek gidip ilgili kodu eklemeniz gerekir.

Fakat biz aynı olacak bölümlerin her birini, mesela en üst bölümü ele alalım (header), bir dosyada toplarsak ve bu dosyayı tüm sayfalara entegre edersek (index, search, category, archive, …), yapacağımız herhangi bir değişiklikte sonradan oluşturduğumuz dosyayı (header) değiştirmek yetecektir.

Index dosyasının parçalara ayrılması

Site başlığını, sloganı, menüyü ve arama bölümünü header.php adlı bir dosyada toplayalım,

Soldaki dinamik yan menüyü, sidebar-left.php adlı bir dosyaya yerleştirelim,

Sağdaki dinamik yan menüyü, sidebar-right.php adlı bir dosyaya yerleştirelim,

En altta bulunan bilgileri de footer.php adında bir dosyaya koyalım.

Herbir dosyayı oluşturduktan sonra, index.php dosyasındaki ilgili kodları alıp, ilgili dosyaya yerleştirelim. En alttan temanın son halini indirerek nasıl yapıldığını görebilirsiniz.

Şu an elimizde bulunan dosyalara bir bakalım;

  • index.php
  • style.css
  • functions.php
  • header.php
  • sidebar-left.php
  • sidebar-right.php
  • footer.php

İyi, güzel parçalara ayrıma işlemini yaptık fakat o dosyaları index dosyasına entegre etmedik. Şimdi bu işlemi nasıl yapacağımız bakalım.

Küçük parçaların index dosyasına entegre edilmesi

WordPress, oluşturduğunuz header ve footer dosyaları için özel oluşturulmuş bir entegre fonksiyonu yaratmış, biz de bu fonksiyonu kullanacağız.

header.php’yi, index.php’ye entegre etmek için index.php dosyasına şu kod satırını ekleyin ;

<?php get_header(); ?>

Bu şekilde header.php içindeki kodlar, index.php içine yerleştirilmiş gibi olacak. Herhangi bir kod ekleme/çıkarma işlemi için header.php’yi değiştirmeniz yeterli olacaktır.

Aynı şekilde footer.php dosyasını da index.php’ye yerleştirelim ;

<?php get_footer(); ?>

Sırada oluşturduğumuz yan menüleri index’e yerleştirmek var. Eğer bizim sadece bir adet yan menümüz olsaydı, onu sidebar.php olarak ayrı bir dosyaya koyabilirdik ve yukarıdaki gibi get_sidebar(); fonksiyonunu kullanarak index’e ekleyebilirdik. Fakat 2 farklı sidebar’ımız olduğu için farklı bir yol izlememiz gerekiyor.

Yazmamız gereken kodlar şu şekilde ;

<?php include(TEMPLATEPATH."/sidebar-left.php"); ?>
<?php include(TEMPLATEPATH."/sidebar-right.php"); ?>

Sizin de fark edebildiğiniz üzere farklı şekillerde ekleme/entegre etme işlemi gerçekleştirilebiliyor. Burada bilinmesi gereken nokta, wordpress’in temalarda otomatik olarak tanıdığı dosyaları, mesela header.php, footer.php, sidebar.php gibi dosyaları daha kısa bir kodla ekleyebildiğimizdir. WordPress’in otomatik tanımadığı dosyaları ise yukarıdaki gibi include fonksiyonu ile istediğiniz yere ekleyebilirsiniz.

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