Sayfa şablonları, web sitesi oluşturmak için en önemli araçlardan biridir. Belirli bir sayfanın tasarımını ve hatta işlevselliğini değiştirmemize izin veriyorlar. Bir WordPress özel sayfa şablonuyla, ek kenar çubukları ekleyebilir, pencere öğesi alanlarını sayfa içeriğinin üstüne veya altına yerleştirebilir, sayfalarınızdaki portföyler gibi özel gönderi türleri için bölümlere sahip olabilir ve daha fazlasını yapabilirsiniz. Tek kelimeyle, boş bir tuval şablonu oluşturabilir ve sayfanızın tüm bölümlerini sıfırdan tasarlayabilirsiniz.
Fakat WordPress’te özel sayfa şablonları oluşturmak, bazı programlama becerileri gerektirir. Bu sebeple birçoğu bundan vazgeçiyor ve sayfa oluşturmak için üçüncü taraf sayfa oluşturucu eklentilerini kullanmayı seçiyor. Fakat WordPress özel sayfa şablonlarını oluşturmanın o kadar da zor olmadığına inanıyoruz ve bu makaleyi okuduktan sonra sizin de aynı şeyi düşüneceğinizi umuyoruz. Ayrıca özel bir sayfa şablonu oluşturma bilgisi, sayfa oluşturucuların istenen sayfa düzenini elde etmek için yeterli olmadığı durumlarda kullanışlı olabilir, bu da tüm sitenizi özelleştirmek için ek alan açar.
WordPress’te özel bir sayfa şablonu nasıl oluşturulur?
Özel sayfa şablonlarının neden yararlı olduğunu anladıktan sonra, özel kod kullanarak bunları nasıl oluşturacağımıza geçebiliriz. Bu şablonların yapısı hakkında daha fazla açıklama yapacağız, bazı potansiyel kullanımlardan bahsedeceğiz ve ayrıca belirttiğimiz noktaları göstermek için birkaç örnek göstereceğiz.
Sayfa şablonlarını anlama
Genel olarak sayfa şablonları, web sitenizin sayfasında çeşitli dinamik içerik türlerini görüntülemeye yarar. Fakat söz konusu içeriği tek bir sayfada görüntüleme söz konusu olduğunda, özel sayfa şablonları Şablon Hiyerarşisinin en üstünde yer alır. Yani WordPress, belirli bir sayfada özel bir sayfa şablonunun seçilip seçilmediğini kontrol edecek ve temanızın sahip olabileceği mevcut herhangi bir sayfa şablonu dosyası üzerinde kullanacaktır. WordPress’teki tek sayfalar için hiyerarşi şu şekildedir:
-
özel şablon dosyası
-
sayfa-{slug}.php
-
sayfa-{id}.php
-
sayfa.php
-
singular.php
-
index.php
Yukarıda görebileceğiniz gibi, özel şablonlar, şablon dosyaları olarak kabul edilmek için belirli bir adlandırma kuralına uyması gerekmeyen tek dosyalardır. Bunun neden böyle olduğunu tartışalım.
Özel bir sayfa şablonunun iki ayrı bölümü vardır: şablonu kaydeden bir şablon başlığı ve o sayfa şablonu seçildiğinde görüntülenen sayfanın içeriğini oluşturan kod. Şablon başlığı, şablon adını belirten basit bir yorumdur. Bunun dışında, örneğin tema adı veya açıklaması gibi ek bilgilere sahip olabilir.
Yorum, Şablon Adı: etiketiyle başlar ve ardından şablonun adı yazılır. Ek olarak özel şablon açılış PHP etiketi
Örnek:
<?php /* Template Name: My Custom Template */ ?>
Yukarıda bahsedilen şablon başlığını kullanarak, Özel Şablonum adıyla özel bir sayfa şablonu kaydedebilirsiniz. Genel olarak, özel bir sayfa şablonunu adlandırırken, adın anlaşılmasını kolaylaştırmaya çalışmalısınız. Bunun nedeni, şablonunuza verdiğiniz adın, tek bir sayfada Sayfa Nitelikleri açılır menüsünde bir seçenek olarak görüntülenecek olan ad olmasıdır. Bu yüzden şablonun adı, onu kullanan herkes için açık ve net olmalıdır.
Ek olarak WordPress 4.7 güncellemesinden bu yana, diğer gönderi türleri için özel şablonlar oluşturabilirsiniz. Bunu yapmak için, şablonun hangi gönderi türleri için oluşturulduğunu belirtmeniz gerekir. Bu durum Şablon Gönderi Türü etiketi eklenerek yapılır: ardından bu şablonun kullanılabilir olmasını istediğiniz gönderi türlerinin bir listesi gelir.
Daha fazla açıklığa kavuşturmak için, burada Tam Genişlik Şablonu için Twenty Twenty temasından alınan bir şablon başlığı örneği verilmiştir. Şablon hem sayfalar hem de gönderiler için yapılmıştır, yani sayfalardaki Sayfa Özellikleri bölümünden ve gönderilerdeki Gönderi Özellikleri bölümünden seçilebilir.
<?php /** * Template Name: Full Width Template * Template Post Type: post, page * * @package WordPress * @subpackage Twenty_Twenty * @since Twenty Twenty 1.0 */
Bu bilgilerle kendi şablon başlıklarınızı oluşturmaya hazır olmalısınız. Dolayısıyla, sonraki bölümlerde sayfa şablonlarının kendilerine odaklanabiliriz.
Şablon başlığının altına inen ve sayfa içeriğini oluşturan kod açısından ekleyebileceğiniz pek çok şey var. Örneğin düzenleyiciye eklenen içerik, kenar çubukları, çeşitli widget alanları, özel bir gönderi türüyle ilgili içerik, karşılanması gereken koşullu bir ifadeye dayalı ek içerik vb.
Farklı özel sayfa şablonları oluşturma olasılıkları neredeyse sonsuzdur ve yalnızca neye ihtiyacınız olduğuna ve programlama becerilerinize bağlıdır. Bu kodu oluşturmaya başlamanın bir yolu, temanızın mevcut sayfa şablonlarını alıp kopyalayıp kodlarını düzenleyebileceğiniz yeni bir dosyaya yapıştırmaktır. Alternatif olarak, bu makale için kullanabileceğiniz birkaç sayfa şablonu örneği oluşturduk. Bunları aşağıdaki bölümde ele alacağız.
Fakat bu örneklere girmeden önce tartışmamız gereken başka şeyler de var. Sonunda, kodu oluşturmayı bitirdiğinizde, son adımlar dosyayı bir .php dosyası olarak kaydetmeyi ve ardından onu temanızda doğru yere yüklemeyi içerir. Daha önce de belirttiğimiz gibi, özel sayfa şablonlarının şablon dosyaları olarak yorumlanması için belirli bir şekilde adlandırılması gerekmez. Bununla birlikte bu aynı zamanda, WordPress bunları yalnızca bir sayfaya yönelik özel şablonlar olarak yorumlayacağından, ayrılmış sözcüklerden herhangi birini (sayfa, tekil, dizin) kullanarak adlandıramayacağınız veya önek sayfasını kullanarak adlandıramayacağınız anlamına da gelir. Bu dosyaları daha kolay takip edebilmeniz için dosyaları şablonlarla aynı şekilde adlandırmanızı öneririz.
Özel sayfa şablonu dosyasını adlandırdıktan sonra FTP yoluyla sunucuya yüklemeniz gerekecektir. WordPress, özel bir şablon dosyası yüklemek için aşağıdaki noktaları geçerli olarak tanır: aktif ana tema dizini, aktif alt tema dizini veya bu iki konumdan herhangi birindeki bir alt dizin.
örnekler
Artık özel sayfa şablonlarının ardındaki ayrıntıları daha iyi anladığınıza göre, bu makale için yaptığımız örnekleri inceleyebiliriz. Bunları sayfa şablonlarınızı oluşturmak için bir kılavuz olarak kullanabilir veya beğeninize göre değiştirebilirsiniz.
Şablona bağlı olarak, sayfa şablonu stilinizi ayarlamak için bazı ek CSS kodları gerekebilir. Eklenmesi gerektiğini düşündüğümüz durumlarda kullandığımız CSS’yi de size göstereceğiz. Fakat bu CSS’nin tüm web sitelerine uygulanmaması gerektiğini unutmamalıyız. Genel olarak, CSS, belirli bir siteye uyması gerektiğinden duruma göre özel olarak hazırlanır. Bu yüzden sayfayı daha da stilize etmeniz gerekiyorsa kendi CSS kodlarınızı oluşturmaya çalışmalısınız. Bunu söyledikten sonra başlayalım.
-
Kenar çubuğu sayfası şablonu yok
Aşağıdaki kod, Kenar Çubuğu Yok Sayfa Şablonu adlı bir şablonu temsil eder. Bu oldukça basit bir şablon. Şu anda kullanmakta olduğunuz temadan var olan üst bilgi ve alt bilgi şablon dosyalarını yükleyen get_header() ve get_footer() işlevini kullanır. Ana sayfa içeriğine gelince, bir WordPress Döngüsü içinde the_content() işlevini kullanarak, düzenleyiciye eklenenlerin sayfada görüntülendiğinden emin olursunuz. Bunun dışında, o sayfada yapılmış mevcut yorumlar olduğu veya o sayfada yorum yapılmasına izin verildiği sürece, sayfanın altında bir yorum bölümü olacaktır. Temel olarak, bu sayfa şablonunu yaygın olarak kullanılanlardan ayıran şey, tüm kenar çubuklarını, dolayısıyla şablon adını kaldırmış olmamızdır.
<?php
/*
Template Name: No Sidebar Page Template
*/
get_header();
?>
<main id="main-content" class="custom-grid">
<div class="custom-grid-inner">
<?php if ( have_posts() ) {
while ( have_posts() ) : the_post();
the_content();
if ( comments_open() || get_comments_number() ) {
comments_template();
}
endwhile; // End of the loop.
} ?>
</div>
</main>
<?php
get_footer();
Bu çok basit bir şablon olduğu için onu stilize etmek için herhangi bir ek CSS’ye ihtiyacımız olmadı. Temanın üstbilgi ve altbilgi şablonlarında kullanılan CSS sınıfları sayesinde sayfa kendi başına yeterince stilize edildi. Aşağıda, kendisine atanmış bu sayfa şablonuna sahip bir sayfanın nasıl görünebileceğine dair bir örnek görebilirsiniz. Bu durumda, şablon Lekker temasıyla kullanılmıştır ve bu temanın stilini göstermektedir.
-
Boş sayfa şablonu
Bu kod, Boş Sayfa Şablonu adlı bir sayfa şablonunu temsil eder. Makale için oluşturduğumuz diğer sayfa şablonlarından farklı olarak bu, geçerli temanızın üstbilgi ve altbilgi şablonlarını yüklemez. Daha kesin olarak, üstbilgisi veya altbilgisi olmayan bir sayfa için bir şablonu temsil eder. Bu tür sayfalar genellikle açılış veya bakım sayfaları olarak kullanılır.
Bu şablon önceden oluşturulmuş şablon dosyalarının yüklenmesine dayanmadığı için, sayfanın HTML ve PHP kodunun karışımıyla oluşturulmuş tüm HTML yapısını eklemeniz gerekir. Oluşturduğumuz kodun büyük bir kısmı
ve etiketleri içindedir ve etiketi içinde yalnızca language_attributes() kullanılmaktadır. etiketinin içine, bloginfo() işlevini kullanarak sayfalar ve beslemeler için kodlamaya ilişkin meta verileri ekledik. Yanıt verebilirlik için meta verileri de ekledik; site, cihazınızın genişliğine göre uyarlanacaktır; %100’lük bir ilk yakınlaştırmada yüklenir, fakat serbestçe yakınlaştırılabilir ve uzaklaştırılabilir. Bu durum çok sayıda temada bulunan hayır yerine kullanıcı tarafından ölçeklenebilir parametreyi evet olarak ayarlayarak yapılır. Son olarak siteye daha zengin meta veriler ekleyen profili etkinleştirdik. Bundan sonra, pingback’ler ve trackback’lerle ilgili bir bölüm ekledik. Bu öncelikle gönderiler için yararlı olsa da, bu şablonu hem sayfalar hem de gönderiler için kullanılabilir hale getirmeye karar verirseniz kullanışlı olabileceği için eklemeye karar verdik. Son olarak ön uçta kapanış etiketinden önce komut dosyalarını veya verileri yazdıran wp_head() işlevini kullandık. etiketi, body_class() işlevi sayesinde yazdırılan ve daha sonra hedeflenen CSS kodunu oluşturmak için kullanılabilecek sınıfları içerir. Bunun dışında itemscope ve itemtype değişkenlerini ve wp_body_open() fonksiyonunu WordPress 5.2 güncellemesi ile birlikte kullanıcıların doğrudan body etiketinin içine komut dosyası eklemelerini sağlayan fonksiyon ekledik. Ek olarak sayfanın ana içeriği gövde etiketi içinde bulunur. Bu içerik oldukça basittir, yalnızca the_content() işlevinin kullanımı sayesinde doğrudan düzenleyici aracılığıyla eklenenleri içerir. Son olarak ön uçta etiketinin kapanmasından önce komut dosyalarını veya verileri yazdıran wp_footer() işlevini kullandık.<?php
/*
Template Name: Blank Page Template
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php if ( is_singular() && pings_open( get_queried_object() ) ) { ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php } ?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage">
<?php
// Hook to include default WordPress hook after body tag open
if ( function_exists( 'wp_body_open' ) ) {
wp_body_open();
}
?>
<div id="page-wrapper" class="custom-page-wrapper">
<div id="page-wrapper-inner" class="custom-page-wrapper-inner">
<main id="page-content" class="custom-grid">
<div class="custom-grid-inner">
<?php if ( have_posts() ) {
while ( have_posts() ) : the_post();
the_content();
endwhile; // End of the loop.
} ?>
</div>
</main>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>
Bu durumda, sayfanın stilizasyonunu ayarlamak için yalnızca az miktarda CSS’ye ihtiyacımız vardı. Son olarak şunu kullandık:
#page-wrapper {
padding: 50px 0 40px;
}
.custom-page-wrapper-inner {
padding: 0 10px;
}
Aşağıda, yukarıda bahsedilen CSS’yi ekledikten sonra bu şablona sahip bir sayfa örneği verilmiştir.
-
İçerik Alt sayfa şablonu
Bu kod bir sayfayı temsil ediyor…