Önceki konu-sonraki kodu

Eminim  çoğu  yerde görmüşsünüzdür  bu özelliği. Yazı için önceki ve  sonraki yazı linki ekleme özelliği.  Bu sadece yazılar için geçerli değil tabi. Sonraki/önceki kategori, sonraki/önceki resim gibi  daha  birkaç tane  kullanılabilir seçenek var bunun gibi. İşlemler olukça basit ve function.php  dosyası ile  uğraşmak  zorunda değiliz  bunun için. Çoğu kişi eklenti  zanneder  ama eklenti değildir bu. Önceki WordPress sürümlerinde sanırım bu özellik  yoktu ve buna  benzer sayfalama gibi özellikler  için eklentiler  kullanıldığı  doğrudur.

Gün geçtikçe  Wordpress daha da gelişiyor ve daha da kullanışlı hale geliyor. Kim bilir  ilerleyen zamanlarda yönetim paneli üzerinden kendi kendinize  sürükle  bırak ile kendi temanızı bile oluşturmak mümkün olabilir. Şimdilik bu fikir  biraz uzak görünse de  bence  ilerde yapılacak birşeydir.

Önceki yazı ve sonraki yazı : 

Bunun için ihtiyacımız  olan  sadece  aşağıdaki kodlardır. Temamızın single.php  dosyası içine  aşağıdaki kodları yerleştirirseniz  önceki ve sonraki yazı diye  yazı içinde linkler çıkacaktır. Yazının en üstüne yada en altına  eklerseniz daha iyi olur sizin için. Bunun için ftp ile giriş yapmanız  gerekmiyor.  Sitenizin yönetim paneli >>Görünüm>>Düzenleyici adımlarını izleyerek kullandığınız temanın single.php dosyasını seçip aşağidaki kodları uygun bir yere yapıştırıp kaydedin.

<?php previous_post_link(); ?>
<?php next_post_link(); ?>

Bu şekilde  alıp yazıya  eklersek  eğer görüntüsü  aşağıdaki gibi  olacaktır. Localhostta  rastgele  yamzış olduğum iki tane yazının başlıkları  bunlar. Ayrıca aralarda boşluk yok. Her iki link te  bitişik duruyor. Ne olduğu belli olsun diye  biraz ayırmak istedim.

Bu  hali  ile  olduğu gibi yazı içine  eklemek biraz çirkin duruyor. Bu yüzden biraz Css yardımıyla değişiklik yapalım. Öncelikle kodlarımızı Css div içine almamız gerekiyor.

<div class="oncekisonraki">   
	      <?php previous_post_link('<div class="onceki">%link</div>'); ?>
	     <?php next_post_link('<div class="sonraki">%link</div>'); ?>
</div>

.oncekisonraki  çerçevemiz her iki çerçevenin içinde bulunduğu genel çerçevemiz. Yazı içine  ekleyeceğimiz için genişlik değerini 100%  olarak ayarlayacağız. Bu 100%’lük oran temanın tam genişliği değil yazının tam genişliğine eşittir. Diğer iki çerçevemizi de sağ ve sola yapıştıracağız. Bunun için de float:left ve float:right kullanacağız. Bunların dışında linklerin arkaplan rengi yazı rengi  gibi ayarları da aşağıdaki kodlardan inceleyip kendi temanıza  göre  düzenleyebilirsiniz.  Aşağıdaki kodları alıp temanızın style.css dosyasına kaydedin.

.oncekisonraki {
 width: 100%;
 height:50px;
 background-color:#FFFF00;
}
.oncekisonraki .onceki {
 float:left;
 width:auto;
 height:auto;
}
.oncekisonraki .sonraki {
 float:right;
 width:auto;
 height:auto;
}
.oncekisonraki .sonraki a, .oncekisonraki .onceki a {
   padding: 10px 5px;
   color: #5c555c;
   font: bold 17px Georgia, Serif;
   text-decoration: none;
   outline: none;
   vertical-align: middle;
}
.oncekisonraki .sonraki a:hover, .oncekisonraki .onceki a:hover {
   color:#FF0000;
}

Sonuç  olarak bu resim gibi olacaktır. .oncekisonraki {background-color: sarı rengi} buradaki genel çerçevenin rengini ben sırf göstermek için ekledim. İsterseniz  arkaplan rengini silersiniz yada başka bir renk eklersiniz size kalmış birşey.

Buraya kadar  doğru yapmışsanız  eğer sonuç sarı renkli resimde olduğu gibi olacaktır. Birde  bunun aynı kategori içindeki yazılar  için de  kullanabilirsiniz.  Diyelim ki ziyaretçiniz Javascript adlı kategoriye girdi ve muhtemelen ziyaretçinin istediği örnekler de Javascript olacağı için karşısına  sadece Javascript kategorisini göstermek istiyorsunuz.  Ziyaretçi hangi kategorideyse  ona göre önceki ve sonraki yazı görüntülenmesini istiyorsanız eğer aşağıdaki kodları kullanabilirsiniz.

<div class="oncekisonraki"> 
<?php previous_post_link('<div class="onceki">%link</div>', 'Sonraki yazı', TRUE, '13'); ?>
<?php next_post_link('<div class="sonraki">%link</div>', 'Onceki yazı', TRUE, '13'); ?>
</div>

Önceki resim sonraki resim : 

image.php  dosyası  için  resim galeri tarzı resim inceleme  için kullanılır buda. Hemen hemen yazılar için olanıyla aynı. Localhostta  kurduğum yarım yamalak  temada henüz image.php hazırlamadığım için resim üzerinde gösteremeyeceğim. Aşağıdaki kodları aynı yukarda  gösterdiğim gibi image.php  dosyasına yüklerseniz  resim sayfanızda  ziyaretçileriniz  bir önceki ve bir sonraki resme kolay bir şekilde geçiş yapabilecekler. Aynı Css kodları bu örnek için de  kullanabilirsiniz.

<div class="oncekisonraki">  
   <div class="onceki"><?php previous_image_link() ?></div>
   <div class="sonraki"><?php next_image_link() ?></div>
</div>