Bir önceki girdide belirttiğim gibi ne görsek istiyoruz durumu var, bu girdide de şu ok işaretlerini yazacağım. Hayır şimdi yazsam bir dert yazmasan bir dert kardeşim seviyor özeniyor insanlar napalım her taraf zırt”ca” zurt”ca” da dolmuş bu yüzden.
Bu navigasyon sistemi özünde yay!everyday isimli siteye ait ben o siteden önce sanırım uzun zaman önce bir thumblr tasarımında rastlamıştım orada da görünce hoşuma gitti uyarladım buraya.
Bunu yapmak bir öncekinden daha basit, sitenin <body> etiketinden sonrasına aşağıdakini ekleyin;
<div id="nav-above">
<div class="nav-previous">
<?php previous_posts_link('<span class="meta-nav">«</span>') ?>
</div>
<div class="nav-next">
<?php next_posts_link('<span class="meta-nav">»</span>') ?>
</div>
</div>
Daha sonra CSS de şöyle, style.css e ekleyin;
div#nav-above, #nav-above div{_display:none!important;}
#nav-above{display:block;position:fixed;top:35%;}
#nav-above a{display:block;padding:0 20px;color:#777;text-shadow:#fff 1px 1px 0px;}
#nav-above a:hover{color:#FFB321;text-decoration:none;}
#nav-below{clear:both;float:right;margin:3em 0 0;padding:0px;width:100%;color:#888;}
#nav-above .nav-previous {position:absolute;display:block;width:100px;top:50%;left:-90px;text-align:right;line-height:4em;font-size:5em;color:#888;}
#nav-above .nav-next {position:absolute;display:block;width:100px;top:50%;right:-850px;text-align:left;line-height:4em;font-size:5em;color:#888;}
#nav-below a {font-weight:800;margin:0px;}
.nav-next{background:transparent;float:right;font-size:1.2em;min-height:60px;padding:0;position:relative;margin:0;width:50%;}
.nav-previous{background:transparent;float:left;font-size:1.2em;min-height:60px;padding:0;position:relative;margin:0;width:50%;}
Bu da bu kadar.
Tekil yazılar için kod şöyle değişiyor, bunun farkı aynı kategoride ki yazıları sayfalaması;
<div id="nav-above" class="navigation">
<div class="nav-previous">
<?php previous_post_link('%link', '<span class="meta-nav">«</span>', true); ?>
</div>
<div class="nav-next">
<?php next_post_link('%link', '<span class="meta-nav">»</span>', true); ?>
</div>
</div>
Kullanımı yukarıda anlatıldığı gibi.