Online Kimya Özel Dersi Al

ÜCRET

KONU

TARİH

3.2 Sayfa Şablonları

wordpress tema yapımı

Burada sayfa derken, yönetim panelinde, Sayfalar->Yeni ekle menüsünü kullanarak oluşturduğumuz içerikler akla gelmelidir. Sayfa şablonları, bir sayfaya veya bir sayfa grubuna uygulanabilecek şablon dosyalarıdır.

WordPress, 4.7 sürümü ile birlikte, tıpkı sayfa şablonu hazırlar gibi, bütün yazı tipleri için şablon hazırlayabilme imkanı sunmuştur. Detaylı bilgi, aşağıda verilecektir.


Sayfa Şablonlarının Genel Kullanımı

Sayfa şablonları, tek bir sayfada, bir çok içeriği harmanlama olanağı tanır. Mesela, sayfanın bir kısmında en son yazılarınızdan bir örnek verebilir, başka bir kısmında bir etkinlik takvimi yayınlayabilir, başka bir kısmında da bir resim galerisi oluşturabilirsiniz. Veya, resim kaydırıcılar, firma tanıtım yazıları, ekip arkadaşlarınızın tanıtımı gibi içerikler ile şık bir ana sayfa şablonu tasarlayabilirsiniz. Dilerseniz, belli bir sayfaya özel olarak menü hazırlayabilir, öne çıkan görsellerinize linkler verebilirsiniz…

Sitenize, yeni bir sayfa eklerken, aşağıdaki gibi, seçebileceğiniz sayfa şablonları da oluşturabilirsiniz. Bu şablonlara “genel şablon” denir.

Aşağıda, yaygın olarak kullanılan özel şablon isimleri verilmiştir:

  • Tam genişlik, tek kolan
  • İki kolon, sağ kenarda sayfa yanı
  • İki kolon, sol kenarda sayfa yanı
  • Üç kolon

Bu isimlerden de anlaşılacağı gibi, özel şablonlar yardımı ile, farklı sayfa düzenleri oluşturabilirsiniz.

Şablon Hiyerarşisinde Sayfa Şablonları

Bir ziyaretçiniz, bir sayfanıza girmek istediğinde, WordPress, Şablon Hiyerarşisi kurallarına göre, bu sayfa için hangi şablonu kullanacağına karar verir ve sayfayı o şablona göre açar. WordPress’in sayfalar için uyguladığı hiyerarşi şöyledir:

  1. Genel şablon: Adını, istediğiniz gibi koyarak bir sayfa şablonu oluşturabilirsiniz. Daha sonra bu şablonu, yeni bir sayfa eklerken, Belge->Sayfa özellikleri->Şablon menüsünü takip ederek, istediğiniz her sayfa için kullanabilirsiniz. Ya da, temanızın herhangi bir yerinde, bu şablonu çağırmak isterseniz, get_page_template() fonksiyonunu kullanarak çağırabilirsiniz.
  2. page-{sayfa-link-adi}.php: Eğer, link adı, “en-son-haberler” olan bir sayfanız varsa, Wodpress bu sayfayı göstermek için tema dosyalarınızın arasında, page-en-son-haberler.php dosyasını kullanacaktır.
  3. page-{id}.php: Eğer sayfanızın id değeri 6 ise WordPress, bu sayfa için page-6.php şablonunu kullanacaktır.
  4. page.php: Eğer sayfanıza ait yukarıdaki şablonlardan hiç biri yoksa, bu şablon kullanılır.
  5. singular.php: Eğer page.php dosyanız yoksa, onun yerine bu dosya kullanılır.
  6. index.php: Hiç biri yoksa, yine can simidi bu dosyadır.

Bu şablonlara ek olarak, WordPress’in, bir de paged.php şablonu vardır. Bu dosya, sayfalar için değil de, çok sayfalı (sayfalanmış) arşivler için kullanılır.

Sayfa Şablonlarının Amacı ve Kullanıcı Tercihleri

Temanız için bir genel şablon yapmayı planlıyorsanız, bunu yapamadan önce karar vermeniz gereken bazı şeyler vardır. Bunlar:

  • Şablon, sadece bir sayfaya özel olarak mı tasarlanacak, yoksa istenilen her sayfaya uygulanabilecek mi?
  • Şablonunuz, hangi tür kontrolleri mümkün hale getirecek?

Genel şablonların, birer adı vardır ve istenilen her sayfada kullanılabilirler. Bir sayfa eklerken, sağ kenardaki, Belge->Sayfa özellikleri->Şablon kısmında yer alırlar ve buradan seçilebilirler. Bu temanız için bir esneklik olarak düşünülebilir, fakat, kullanıcılarınız, bu temaları, amaçlamadığınız sayfalar için tercih edebileceklerini de göz ardı etmemelisiniz.

Örneğin, “Hakkımızda” sayfasına için bir şablon hazırlamak istiyorsunuz. Bunun için genel bir şablon hazırlamak, ve bu şablonu bütün sayfalar için kullanılabilecek şekilde sunmak yerine, page-hakkimizda.php gibi, sadece o sayfaya özgü olarak hazırlamayı seçebilirsiniz. Böylece, kullanıcınız “Hakkımızda” adıyla bir sayfa oluşturduğunda, WordPress bu sayfa için, page-hakkimizda.php şablonunu kullanacaktır.

Yukarıdaki gibi, belli sayfalara özgü şablonlar tasarlarken, kullanıcılarınızın, aynı isim veya ID değeri ile sayfalar oluşturmayabileceğini de düşünmek gerekir.

Sayfa Şablonlarının Tema Dizindeki Yeri

Daha önce, Tema Dosyalarının Düzeni adıyla yazdığımız derste de bahsettiğimiz gibi, WordPress, temanızın ana dizininde, page-templates adıyla açtığınız klasörü tanır. Tek bir sayfa özel olarak hazırlanan şablonların ana dizinde, genel şablonların bu klasörde toplanması iyi bir fikirdir.

Genel Şablonlar Hazırlama

Genel bir şablon hazırlamanın tek farkı sayfanın en tepesine şu şekilde bir kod eklemektir:

<?php /* Template Name: Blank with Container */ ?>

Bu kodlardan sonra, şablonunuz, yeni bir sayfa eklerken, “Sayfa özellikleri” bölümünde, verdiğiniz isim (Template Name için atanan değer) ile listelenecektir.

Genel şablon isimlerini sıralayan bu liste, maksimum 250 px genişliğindedir. Şablonunuza isim verirken bunu hatırlamanızda yarar vardır.

Tabi, zorunlu olmasa da, şablon hakkında, bir takım yardımcı ve hatırlatıcı bilgiler vermek iyi bir alışkanlıktır:

<?php
/**
* Template Name: Blank with Container
*
* @package WordPress
* @subpackage İlk_Temam
* @since İlk Temam 1.0
*/

Şablonunuza bir isim verirken, şablonu kısaca tanıtacak bir isim seçmek, iyi bir tercih olacaktır. Mesala, “İki kolonlu sayfa” şeklinde bir isim vererek, iki kolonlu bir sayfa şablonu hazırlamak, tamanızı, daha kullanıcı dostu yapacaktır.

Dikkat! Tema dosyanıza verdiğiniz isim, page-_____.php formatında olmamalıdır ( ___ yerinde ne yazdığı önemli değil). Çünkü bu format, bir sayfaya özgü şablon dosyalarına ait isim formatıdır.

Yeni bir şablon hazırlarken, page.php dosyasını kopyalayıp, bu şablona yapıştırmak, hızlı ve doğru bir başlangıç yapmanızı sağlar.

Bir Sayfa İçin Özel Bir Şablon Hazırlamak

Şablon Hiyerarşisi dersimizde bahsettiğimiz gibi, sadece bir sayfaya özel bir şablon da hazırlayabilirsiniz. Özel bir şablon oluşturmaya başlarken, page.php dosyanızı, adını aşağıdakilerden biri gibi değiştirerek çoğaltabilirsiniz:

  1. page-{sayfanin-link-adi}.php: Bir sayfanın bağlantı adını kullanarak oluşturulan şablon
  2. page-{ID}.php: Bir sayfanın ID değerini kullanarak oluşturulan şablon

Bu tarzdaki şablonlar, temanızın ana dizininde oluşturulmalıdır.


Yazı Tipleri İçin Şablonlar Hazırlamak

WordPress’in 4.7 sürümünden bu yana, sayfalar gibi, yazılar için de sayfa şablonları hazırlanabilmektedir. Bunun için yapmanız gereken, sayfanın en tepesine şu kodları yerleştirmketir.

<?php
/*
Template Name: Tam Sayfa Şablonu
Template Post Type: post, page, kitap
*/
// Sayfa kodu buraya...

Geriye Uyumluluk

Diylim ki temanızda, yazı tipi şablonları da kullandınız. Eğer temanız, WordPress’in 4.7 versiyonundan önceki bir versiyonda açılırsa, bu şablonlar, yazı tipi şablonu olarak tanınmayacak ve sayfa şablonları listesinde gösterilecektir. Bunu engellemek için aşağıdaki kodu kullanabiliriz:

/**
* Yazı şablonun WordPress 4.6 ve öncesinden sakalr
*
* @param array $post_templates Sayfa şablonları listesidir. Anahtarlar dosya isimlier, değerler tercüme edilmiş isimlerdir.
* @return array Filtrelenmiş sayfa şablonları dizisi
*/
function ilktemam_yazi_sablonlarini_cikar( $post_templates ) {
if ( version_compare( $GLOBALS['wp_version'], '4.7', '<' ) ) {
unset( $post_templates['templates/tam-sayfa-yazi-sablonum.php'] );
}
return $post_templates;
}
add_filter('theme_page_templates', 'ilktemam_yazi_sablonlarini_cikar');

Aslında, theme_{yazi_tipi}_temaplate filtresi, dinamik bir filtredir. {yazi_tipi} kısmında belittiğiniz yazı tipine ait şablonları filtreleyebilirsiniz. Mesela, “kitap” tipindeki yazı şablonlarına müdahele etmek için theme_kitap_template kancasını kullanabilirsiniz.

Sayfa Şablonlarında Koşullu İfadeler

Temanızın page.php şablonunda, Koşullu İfadeler kullanarak, sayfalara özel değişiklikler yapabilirisiniz. Aşağıda bu duruma bir örnek verilmiştir:

if ( is_front_page() ) :
get_header( 'home' );
elseif ( is_page( 'Hakkimizda' ) ) :
get_header( 'hakkkimizda' );
else:
get_header();
endif;

Bu kod, ana sayfada header-home.php sayfasını, “Hakkımızda” sayfasında, header-hakkimizda.php dosyasını, bunların dışındaki sayfalarda ise header.php sayfasını yükler.

Bir Sayfa Şablonunu Etiketlemek

<body <?php body_class(); ?>

Eğer temanız, yukarıdaki gibi, body_class() fonksiyonunu kullanıyor ise, bu fonksiyon, sayfalarınıza, o sayfanın özelliği ile ilgli olarak, CSS sınıfları üretir ve ekler. Mesala, yazı tipi “sayfa” olan bir içerik görüntüleniyor ise “page” sınıfı, bu sayfanın id değeri 6 ise “page-id-6” sınıfı, bir sayfa şablonu görüntüleniyor ise "page-temaplate-{şablonun-adı}" sınıfı oluşturur. Eğer sayfanın bir şablonu yoksa bu fonksiyon "page-template-default" sınıfını ekler. Aşağıda, bunun bir örneği verilmiştir:

<body class="page page-id-6 page-template-default">

Genel sayfa şablonu kullanıyorsanız ve şablon adınız şöyle ise;

<?php
/* Template Name: Benim Güzel Şablonum */
?gt;

şeklinde ise, WordPress, bu şablon için temaplate-benim-guzel-sablonum-php sınıfını oluşturacaktır:

<body class="page page-id-6 page-template page-template-benim-guzel-sablonum-php">

Sayfa Şablonu İçin Fonksiyonlar

Aşağıdaki WordPress fonksiyonları, sayfa şablonları ile çalışırken size yardımcı olabilir:

  • get_page_template(): Ekrandaki sayfanın kullandığı şablon dosyasının yolunu (path) döndürür.
  • wp_get_theme()->get_page_templates(): Aktif olan temadaki bütün sayfa şablonlarını döndürür.
  • is_page_template(): Sayfa için bir şablon kullanılıyor ise true kullanılmıyor ise false değerini döndürür.
  • get_page_template_slug(): Sayfa şablonunun, doysa adını döndürür. WordPress, bir sayfada bir şablon kullanıyor ise, bu şablonun dosya adını, sayfanın altındaki özel alanlara _wp_page_template ismi ile ekler.

WordPress, ismi alt tire ( _ ) ile başlayan bir özel alanları gizli (hidden) olarak oluşturur. Bu yüzden böyle özel alanları, sayfayı düzenlerken göremeyiz.


DERSİN SONU

Kimya Özel Dersi Al

Yorum yaparak bize destek olabilirsiniz.

1 yorum: “3.2 Sayfa Şablonları”

Bir cevap yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Şu kadar HTML serbest:

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