WordPress Teması Yapıyoruz: header.php – footer.php – sidebar.php

Merhaba Arkadaşlar,

Eğitim serisinin 2. Makalesinde sitemizin ana görünümünü elde etmek için kullandığımız değişmez alanlarımızı nasıl farklı sayfalar içerisine parçalar halinde ekleyeceğimizi göreceğiz. Parçalayarak ayrı sayfalar halinde kaydedeceğimiz bu bölümleri bir sonra ki makale de index.php sayfası içerisinde birleştireceğiz.

Yazının başlığından da görebileceğiniz üzere 3 sayfa ile çalışacağız. ” Header.php ” sayfası içerisinde sitenin üst kısmını, ” Footer.php ” içerisinde sitenin alt kısmını ve ” Sidebar.php ” içerisinde de sitenin sağ alanını kullanacağız. ” index.html ” sayfamızı kontrol ettiğimizde geriye bir tek yazıların listelendiği alanın kalacağını göreceğiz. Bu alanı da bir sonra ki makale de işleyerek sitenin giriş sayfasını hazırlamış olacağız.

index.html sayfamızı bir metin editörü ile açıyoruz ve ilk olarak header.php ile başlıyoruz.

Sayfa içerisinde en üst satırdan başlayarak ” ” yazılı yere kadar olan bölümü kopyalayarak Header.php içerisine yapıştırıyoruz. Bu sayfa içerisinde ilk olarak dışarıdan çağırdığımız css ve javascript dosyalarımız ile birlikte resimler için tam yol vereceğiz. Bunun sebebi ise html yapısında oluşturarak çalıştırdığımız sayfalar, WordPress tema yapısı içerisine entegre edildiğinde ” wp-content/themes ” klasörü altında yer alacaktır. Her seferinde site adresi + temanın bulunduğu klasöre kadar yazmak yerine WordPress’in tüm bunları içeren kodunu kullanacağız.

Html yapısı içerisinden aldığımız bir css satırı şu şekildedir :

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">

Header.php sayfası içerisinde bu satırı şu şekilde değiştirerek kullanacağız :

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/assets/css/bootstrap.css">

Gördüğünüz üzere kısa bir php kodu ve ardından ” / ” işareti ekleyerek bu css satırının her zaman bulunduğu klasöre göre yazılmasını sağlamış olduk. Dışarıdan çağırdığımız tüm css, javascript sayfalarına ait satırları ve resim satırlarını aynı mantık ile güncelliyoruz. Bir tek daha önce olmazsa olmaz dediğimiz ve sitenin ana stil sayfası olarak kabul edilen ” style.css ” sayfasını farklı bir şekilde çağırıyoruz. Html içerisinden aldığımızda şu şekilde olan sayfayı :

<link rel="stylesheet" type="text/css" href="style.css">

aşağıdaki gibi güncelliyoruz.

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">

Bu şekilde güncellediğimiz satır sayesinde style.css sayfasını, direkt olarak WordPress Admin Paneli içerisinden düzenleyebileceğiz. Bu düzenlemeleri eksiksiz bir biçimde yaptıysak aynı sayfa içerisinde bir başka güncellemeye geçebiliriz.

Header alanı sol ve sağ olarak ikiye ayırmıştık. İlk olarak soldaki logo alanından başlayalım. İnsanların alışkın olduğu bir özellik olarak logoya tıklandığında sitenin Ana Sayfasının açılması istenir. Bizde bu isteği karşılamak için WordPress’in bize sunduğu bir özellikten yararlanacağız.
Şu anda alttaki gibi görüntülenen kodu

<article id="logo" class="col-lg-4 col-md-4 col-sm-12 col-xs-12 text-center">
	<a href="#">
		<img src="<?php echo get_template_directory_uri(); ?>/assets/img/logo.png" />
	</a>
</article>

şu şekilde güncellemeniz gerekmektedir :

<article id="logo" class="col-lg-4 col-md-4 col-sm-12 col-xs-12 text-center">
	<a href="<?php bloginfo('home'); ?>">
		<img src="<?php echo get_template_directory_uri(); ?>/assets/img/logo.png" />
	</a>
</article>

Yalnızca link alanını güncellediğimiz kod sayesinde logoya tıklandığında sitenin ana sayfası açılacaktır.

Header alanının sağ tarafında bulunan ve sayfaların isimlerini görüntülemek için oluşturduğumuz liste alanında ise klasik listeleme mantığını kullanmıştım(ul li). Bu alan için de ekstra bir fonksiyon yazmadan WordPress’in kendi özelliğini kullanacağız.

Aşağıdaki gibi gördüğümüz kodu

<nav id="menu" class="text-right col-lg-8 col-md-8 col-sm-12 col-xs-12">
	<ul>
		<li><a href="#">Menü 1</a></li>
		<li><a href="#">Menü 2</a></li>
		<li><a href="#">Menü 3</a></li>
	</ul>
</nav>

Şu şekilde değiştirdiğinizde Admin Paneli içerisinden eklenen her sayfa bu alanda görüntülenecektir.

<nav id="menu" class="text-right col-lg-8 col-md-8 col-sm-12 col-xs-12">
	<ul>
		<?php wp_list_pages('title_li=');?>
	</ul>
</nav>

Header.php sayfasında yapacağımız başka bir işlem kalmadığı için bu sayfayı kaydederek kapatıyoruz ve Footer.php sayfasına geçiyoruz.

Footer sayfamız çok kısa bir işlem sonucunda tamamlanacaktır. Çünkü içeriğinde herhangi bir fonksiyon, navigasyon, form gibi elementler bulunmuyor. Bu alana sadece statik bir yazı yazılmıştı. Footer.php sayfası içerisine index.html sayfamızdan aşağıda ki kodu alarak yerleştiriyoruz ve kaydederek kapatıyoruz.

	<footer id="footer">
		<section class="container">
			Bu blog teması BilgiSayaci.org dersleri için hazırlanmıştır.
		</section>
	</footer>
</body>
</html>

Bu makale için son sayfamız olan sidebar.php sayfasına geçelim. Bu sayfada alt alta ” Kategoriler, En Son Eklenen Yazılar, En Çok Okunan Yazılar ” başlıklarının içerik alanlarını dinamik olarak düzenlenebilir bir hale getireceğiz. İlk olarak aşağıda verdiğim iki satır arasında kalan kodları kopyalayarak sidebar.php sayfası içerisine yapıştıralım(Belirtilen iki satırı kopyalamıyoruz).

<aside id="sidebar" class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
//Kopyalanacak Satırlar
</aside><!-- sidebar end -->

Bu işlemi yaptıktan sonra sidebar.php sayfası içerisinde sırasıyla liste alanlarını dinamik hale getirelim.

<article class="box">
	<h2>Kategoriler</h2>
	<ul>
		<li><a href="#">Link 1</a></li>
		<li><a href="#">Link 2</a></li>
		<li><a href="#">Link 3</a></li>
		<li><a href="#">Link 4</a></li>
		<li><a href="#">Link 5</a></li>
	</ul>
</article>

Yukarıda bulunan kategoriler alanını şu şekilde güncelleyelim :

<article class="box">
	<h2>Kategoriler</h2>
	<ul>
		<?php wp_list_cats(); ?>
	</ul>
</article>

Daha sonra En Son Eklenen Yazılar için yazılmış html kod yapısını

<article class="box">
	<h2>En Son Eklenen Yazılar</h2>
	<ul>
		<li><a href="#">Link 1</a></li>
		<li><a href="#">Link 2</a></li>
		<li><a href="#">Link 3</a></li>
		<li><a href="#">Link 4</a></li>
		<li><a href="#">Link 5</a></li>
	</ul>
</article>

şu şekilde güncelleyelim :

<article class="box">
	<h2>En Son Eklenen Yazılar</h2>
	<ul>
		<?php
          global $post;
          $myposts = get_posts('numberposts=5');
          foreach($myposts as $post) :
          setup_postdata($post);
      	?>
      	<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
      	<?php endforeach; ?>	</ul>
</article>

Bu makale için son işlem olarak En Çok Okunan Yazılar alanını düzenleyeceğiz.

<article class="box">
	<h2>En Çok Okunan Yazılar</h2>
	<ul>
		<li><a href="#">Link 1</a></li>
		<li><a href="#">Link 2</a></li>
		<li><a href="#">Link 3</a></li>
		<li><a href="#">Link 4</a></li>
		<li><a href="#">Link 5</a></li>
	</ul>
</article>

Yukarıda ki kodları şu şekilde değiştirelim :

<article class="box">
	<h2>En Çok Okunan Yazılar</h2>
	<ul>
      <?php $bilgisayaci = new WP_Query("showposts=5&orderby=comment_count"); while($bilgisayaci->have_posts()) : $bilgisayaci->the_post();?>
      <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
      <?php endwhile; ?>
	</ul>
</article>

Küçük bir not olarak belirtmek gerekirse ” En Son Eklenen Yazılar ” için yazdığımız kodlardan ” numberposts=5 ” alanını ve ” En Çok Okunan Yazılar ” için yazdığımız kodlardan ” showposts=5 ” alanlarındaki değerleri değiştirerek daha çok veya daha az bilgi çekebilirsiniz.

Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 49 No ‘lu Maddeden İndirebilirsiniz..