WordPress Teması Yapıyoruz: index.php

Merhaba Arkadaşlar,

Bir önceki makalede anlattığım 3 sayfanın devamı niteliğindeki bu makalede sayfaları birleştireceğiz ve sitemizin ana ekranını oluşturacağız. Sitemizin ana şablonunun oturtulacağı index.php şablonunda sayfaların birleştirilmesi dışında son eklenen 5 yazının listelenmesi ve sayfalama yapımını da göreceğiz.

İlk olarak daha önce ki yazı da yaptığımız 3 sayfayı index.php sayfasında birleştirelim. Html şablon içerisinden ” header.php , footer.php , sidebar.php ” sayfaları için aldığımız html alanları silerek ” index.html ” sayfasında kalan kodların tamamını ” index.php ” içerisine ekliyoruz (Silmeniz gereken alanları tekrar kontrol etmek için WordPress Teması Yapıyoruz: header.php – footer.php – sidebar.php makalesini tekrar okuyabilirsiniz).

Header.php içerisine eklediğimiz kodları index.php sayfasında göstermek için sayfanın en üstüne aşağıda bulunan kodları eklemeniz gerekmektedir :

<?php get_header(); ?>

Mantık yürüterek diğer iki sayfa içinde bu kodu türetebiliriz.

Footer.php sayfasını dahil etmek için sayfanın en altına :

<?php get_footer(); ?>

sidebar.php sayfasını dahil etmek için

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

kodları arasında ki satıra

<?php get_sidebar(); ?>

ekleyiniz. Bu işlemleri eksiksiz tamamladıysanız artık sitemize ait tüm klasörler ve sayfaları ftp içerisine yükleyerek temayı test edebiliriz. İlk makalede paylaştığım zip dosyası içerisinden screenshot.png ve assets klasörü ile birlikte şu ana kadar oluşturduğumuz sayfaları ftp de ” wp-contents/themes ” klasörü altına yükledikten sonra panelden aktif hale getirebilirsiniz. Son yazıların listelendiği alanların dışında her yerin dinamik olarak geldiğini göreceksiniz. Şimdi yazıları listeleme işlemini gerçekleştirelim.

Her birinde ” Yazı Başlığı 1 ” isminde başlıkları bulunan 4 adet yazı alanı eklemiştik. Bunlardan sadece bir tane kalacak şekilde diğerlerini siliyoruz. Kalan tek yazı alanı da şu şekilde bir kod blogundan oluşuyor :

<article class="box">
	<header class="header">
		<a href="#">Yazı Başlığı 1</a>
	</header>
	<div class="text">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie condimentum iaculis. Etiam aliquet tincidunt egestas. Curabitur sed tellus odio. Pellentesque diam nisi, congue eget nunc nec, sagittis tincidunt magna. Proin auctor, mauris id blandit malesuada, tortor ligula posuere elit, eget aliquam quam nunc hendrerit augue. Vestibulum dignissim vestibulum lorem. Cras consequat gravida blandit. Vivamus molestie tellus non massa tempor rutrum. Etiam eu gravida lectus. Vestibulum mattis interdum augue nec tempus. Nunc in massa id nibh pharetra gravida vel sit amet odio. Donec quis felis nec risus luctus convallis. In nunc nisi, laoreet sed rhoncus lobortis, lobortis ut magna.
	</div>
	<a href="#" class="btn btn-blog">Devamını Oku</a>
</article>

Son eklenen 5 yazıyı listelemek için de yukarıda ki kodları şu şekilde güncellemeniz gerekmektedir :

<?php query_posts("showposts=5"); ?>
<?php while(have_posts()) : the_post(); ?>
<article class="box">
	<header class="header">
		<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
	</header>
	<div class="text">
		<?php the_excerpt(); ?>
	</div>
	<a href="<?php the_permalink() ?>" class="btn btn-blog">Devamını Oku</a>
</article>
<?php endwhile; ?>

Eklenen php kodları kısaca açıklamak gerekirse

<?php query_posts("showposts=5"); ?>

Listelenecek veri sayısını belirten sorgudur.

<?php while(have_posts()) : the_post(); ?>

Döngü bitene kadar kopyalanacak alanların başlangıç noktasını belirtir.

<?php the_permalink() ?>

Tıklandığında sayfayı yazı içeriğinin bulunduğu sayfaya yönlendirir.

<?php the_title(); ?></strong>

Yazı başlığını belirtir.

<?php the_excerpt(); ?>

Yazı içeriğininin kısa bir bölümünü ekrana yazdırır.

<?php endwhile; ?>

Döngü bitene kadar kopyalanacak alanların bitiş noktasını belirtir.

Buraya kadar her şey doğru bir şekilde yapıldıysa bu makale için son işlem olarak sayfalama yapalım. Bunun için şu kodları :

<nav id="pagination">
	<a href="#" id="old-posts">< Eski Yazılar</a>
	<a href="#" id="new-posts">Yeni Yazılar ></a>
</nav>

şu şekilde güncelleyiniz :

<nav id="pagination">
    <div style="float:left;"><?php next_posts_link('Eski Yazılar') ?></div>
    <div style="float:right;"><?php previous_posts_link('Yeni Yazılar') ?></div>
</nav>

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