BU DERSİN BAŞLIKLARI
Şablon Parçası Ne Demektir?
Şablon dosyaları genellikle, web sitenizin bir sayfasını baştan aşağıya tasarlar (Örn: single.php, archive.php, category.php…). Fakat bazı şablon dosyaları ise, tam bir sayfayı değil, sayfanın bir bölümünü tasarlar. Bu şekildeki şablon dosyalarına “Şablon Parçası” denir. Şablon parçaları, comments.php, header.php, footer.php, sidebar.php ve content-{link_adi}.php gibi dosyalardır. Bu dosyalar, diğer şablon dosyaları içerisinde kullanılırlar.
header.php
Bu dosya, sayfamızın baş kısmını, yani üst kısmını tasarlayan şablon parçasıdır. Sayfalarımızın <head>... </head> kısmı, dolayısıyla, sitemiz veya sayfalarımız hakkındaki meta bilgiler, JS veya CSS linkleri gibi veriler, genellikle web sitemizin ana menüsü ve ana menü etrafındaki içerikler, bu dosyada bulunur. Bir şablon dosyasına bu dosyayı çağırmak için, aşağıdaki şablon fonksiyonunu yazmamız yeterlidir.
get_header();Genellikle web siteleri, aynı header.php şablonunu, bütün sayfalarında kullanılır. Ama, bazı sayfalarda, farklı bir sayfa üstü şablon kullanmak ta mümkündür. Bunu yapmanın yollarından biri de koşullu ifadeleri kullanmaktır.
Bu şablon, web sayfalarının en kritik şablonlarından biridir. Genellikle, sitelerin, ana menüleri, markalarını afişe ettikleri kısım, en göze çarpan reklam bölümleri gibi çok ciddi bölümler bu şablonda bulunur.
Aşağıda, Twenty Fifteen temasının header.php şablonu verilmiştir:
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyfifteen' ); ?></a>
<div id="sidebar" class="sidebar">
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
<?php endif; $description = get_bloginfo( 'description', 'display' ); if ( $description || is_customize_preview() ) : ?>
<?php echo $description; ?>
<?php endif; ?>
<button class="secondary-toggle"><?php _e( 'Menu and widgets', 'twentyfifteen' ); ?></button>
</div><!-- .site-branding -->
</header><!-- .site-header -->
<?php get_sidebar(); ?>
</div><!-- .sidebar -->
<div id="content" class="site-content">İlk bakışta, biraz karmaşık gibi gelse de, parça parça incelendiğinde yeterince basit bir kod yapısıdır. Sayfanın <head>...</head> kısmında, bazı meta bilgileri ve link bağlantıları düzenlenmiştir ve bu kısmın sonunda wp_head() fonksiyonu ile, functions.php dosyamız çağırılmıştır. Dolayısıyla functions.php dosyası içerisinde, eklediğimiz bütün CSS ve JavaScript dosyaları da çağırılmıştır.
Daha sonra, sayfamızın <body> kısmı başlamıştır:
<body <?php body_class(); ?>>Burada body_class() fonksiyonuna dikkat edersek, bu fonksiyon, ekrandaki sayfanın türüne göre dinamik olarak CSS sınıfları oluşturur. Böylece, sayfalarımıza hatta teker teker içeriklerimize özel, CSS kodları yazmamızı kolaylaştırır.
body açıldıktan sonra, koşullu bir ifade ile, sayfa türüne göre, marka bilgileri verilmiştir. Daha sonra ana menü çekilmiş ve sitenin ana içeriği için bir <div id="content" class="site-content"> açılmıştır. Açılan bu div, temanın footer.php dosyasında kapatılacaktır.
Tıpkı header.php dosyası gibi footer.php dosyası da bütün temaların genellikle kullandığı dosyalardan biridir. footer.php dosyası, web sayfalarının alt kısmını düzenlerler. Herhangi bir şablon dosyanıza footer.php dosyasını çekmek için yapmanız gereken, aşağıdaki şablon fonksiyonunu yazmaktır:
get_footer();Diğer şablonlrada da yapabildiğimiz gibi, bu dosyada da, koşullu ifadeler kullanarak, çeşitli sayfa altı şablonları oluşturabilirsiniz.
Bir çok tasarımcı, bu şablonu, bileşen eklemek için kullanmaktadır.
Aşağıda, Twenty Fifteen temasına ait footer.php şablonu verilmiştir:
</div><!-- .site-content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info">
<?php /** * Twenty Fifteen temasının alt bölümünü özelleştirebilmek için eklenmiştir. * * @since Twenty Fifteen 1.0 */ do_action( 'twentyfifteen_credits' ); ?>
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' ); ?></a>
</div><!-- .site-info -->
</footer><!-- .site-footer -->
</div><!-- .site -->
<?php wp_footer(); ?>
</body>
</html>404.php
Ziyaretçiniz, sitenizde bulunmayan bir sayfaya gitmek istediğinde, temanız onu, 404.php sayfasına yönlendirir. Eğer, temanızda bir 404.php sayfası yoksa, ziyaretçiniz doğrudan index.php sayfasına yönlendirilir.
Ziyaretçileriniz, genellikle, sıkıcı hata mesajlarından ve anlamsız sayfalardan hoşlanmazlar. Bu yüzden, 404.php şablonunu kullanarak, ziyaretçilerinize, yanlış veya kullanımdan kalkmış bir sayfada olduklarını özgün bir şekilde söyleyebilirsiniz. Hatta, bu sayfaya, bir site içi arama motoru ekleyerek, ekstra menüler koyarak ziyaretçilerinizi kayboldukları yerden çıkarabilirsiniz.
Aşağıda, Twenty Fifteen temasının 404.php sayfası verilmiştir:
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<section class="error-404 not-found">
<header class="page-header">
<h1 class="page-title"><?php _e( 'Oops! Bu sayfa bulunamadı.', 'twentyfifteen' ); ?></h1>
</header>
<!-- .page-header -->
<div class="page-content">
<?php _e( 'Galiba burada birşey yok. Belki bir arama yapmak istersiniz?', 'twentyfifteen' ); ?>
<?php get_search_form(); ?>
</div><!-- .page-content -->
</section><!-- .error-404 -->
</main><!-- .site-main -->
</div><!-- .content-area -->
<?php get_footer(); ?>comments.php
İçeriklerimize, güzel yorumlar almak, oldukça keyifli bir olaydır. Neyse ki, WordPress bize bu keyfi yaşatacak donanıma sahiptir. WordPress’in oldukça gelişmiş bir yorum sistemi vardır.
comments.php, yorumlar için kullanılan bir şablon parçasıdır. Yazılarımıza ya da sayfalarımıza yorum almak istediğimiz zaman bu şablonu kullanırız.
Hangi sınıflandırma türünden olursa olsun, arşiv sayfalarınızda yorum özelliği kullanamazsınız.
Yorumlama sistemi şablonu, bir sonraki dersimizde ayrıntılı olarak ele alınacaktır.
sidebar.php dosyası, “sayfa yanı şablonu” olarak adlandırdığımız bir şablon parçasıdır. Genellikle, sayfalarımıza bileşen eklemek için kullanılır. Bu şablon parçasını, hangi sayfada kullanacağınız tamamen size bağlı olsa da, yaygın olarak, sayfaların, sağ veya sol kenarlarında, footer.php ve header.php içerisinde kullanılmaktadır.
Temanızda, bir sayfa yanı şablonu kullanmak için, önce, register_sidebars() fonksiyonunu kullanarak, en az bir sayfa yanı oluşturmanız gerekmektedir. Bu işlem genellikle, temanızın functions.php sayfasında yapılır.
Aşağıda Twenty Fifteen temasının sidebar.php dosyası verilmiştir:
if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) || is_active_sidebar( 'sidebar-1' ) ) : >
<div id="secondary" class="secondary">
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : >
<div id="widget-area" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); >
</div><!-- .widget-area >
<?php endif; >
</div><!-- .secondary -->
<?php endif; >Yukarıda şablondan anlıyoruz ki, bu tema, functions.php dosyasında, “sidebar-1” adını vererek bir sayfa yanı kaydı yapmıştır. Bu şablonda da, sayfa yanının çağırılması için;
if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) || is_active_sidebar( 'sidebar-1' ) )koşulları ileri sürülmüştür. Burada yine;
is_active_sidebar( 'sidebar-1' )ifadesi ile, “sidebar-1 adındaki sayfa yanına bir bileşen eklenmişse” koşulu getirilmiştir. Yani, bu sayfa yanına, yönetim panelindeki Görünüm->Bileşenler sayfasına giderek, bir bileşen eklemediysek, bu koşul, false değeri alacaktır.
Kodun devamında;
<?php dynamic_sidebar( 'sidebar-1' ); >ifadesi ile, “sidebar-1” adındaki sayfa yanı, functions.php dosyasından çağırılmış ve buraya eklenmiştir.
Artık bir sidebar.php dosyamız olduğuna göre, bu şablon parçasını, dilediğimiz şablonda kullanabiliriz. Bunun için;
get_sidebar();yazmamız yeterlidir. Bu şablon fonksiyonu, sidebar.php dosyamızı alır çağırdığımız yere ekler.
content-{$parca_adi}.php
Bir çok tema, şablon dosyalarını küçük parçalar halinde oluşturmayı tercih etmektedir. Böyle temalar, kullandıkları şablon parçalarını genellikle content-{$parca_adi}.php dosyası şeklinde oluşturmakta ve bu dosyaları da template-parts adında bir klasörün içinde barındırmaktadır. Daha sonra, oluşturulan şablon parçaları, page.php, home.php, comments.php gibi temel şablon dosyalarının, uygun görülen yerlerinde çağırılmaktadır.
Bahsettiğimiz bu şablon parçalarının, en yaygın görülen örnekleri, content-post.php, content-page.php, content-portfolio.php, content-none.php gibi dosyalardır. Sıraladığımız bu dosya isimleri, WordPress’in tanıdığı veya şablon hiyerarşisine dahil olan isimler değildir. Yani, bir şablon parçası hazırlamak isterseniz, oluşturacağınız dosyaya isim verirken, kendinizi özgür hissedebilirsiniz.
Örneğin, single.php şablonunda, yazının yazarı hakkında bilgi vermek isteyelim ve bu amaçla, content-author.php adında bir şablon parçası oluşturalım. Bu dosyayı da temamızın ana dizininde bulunan template-parts klasörüne kayedettiğimizi kabul edelim. content-author.php dosyamızın kodları şöyle olsun (bu kodlar Twenty Nineteen temasından alınmıştır):
/**
* The template for displaying Author info
*
* @package WordPress
* @subpackage Twenty_Nineteen
* @since 1.0.0
*/
if ( (bool) get_the_author_meta( 'description' ) ) : ?>
<div class="author-bio">
<h2 class="author-title">
<span class="author-heading">
<?php
printf(
/* translators: %s: post author */
__( 'Published by %s', 'twentynineteen' ),
esc_html( get_the_author() )
);
?>
</span>
</h2>
<p class="author-description">
<?php the_author_meta( 'description' ); ?>
<a class="author-link" href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
<?php _e( 'View more posts', 'twentynineteen' ); ?>
</a>
</p><!-- .author-description -->
</div><!-- .author-bio -->
<?php endif; ?>Bu şablon parçasını, single.php şablonunda, dilediğimiz yere yerleştirmek için, şablon fonksiyonlarından biri olan get_template_part() fonksiyonunu şu şekilde kullanırız:
get_template_part('template-parts/content', 'author');get_template_part() fonksiyonunun nasıl kullanıldığı ile ilgili ayrıntılı bilgi için tema dosyalarına bağlantı verme dersimizi okuyabilirsiniz.
1 yorum: “3.5 Şablon Parçaları ve Çeşitli Şablon Dosyaları”