Dit zit al ingebakken in WordPress:
http://codex.wordpress.org/Template_Tags/previous_post_link
http://codex.wordpress.org/Function_Reference/next_post_link
Deze moet je in de loop gebruiken en zullen dan linken naar de volgende/vorige post in dezelfde categorie als je dat aangeeft:
<?php next_post_link('%link', 'Volgende post in category', TRUE); ?>
De parameter ’true’ geeft aan dat er in dezelfde categorie moet worden genavigeerd.
Dat zou er ongeveer zo uitkomen zien als je het in een template zet:
<div id="volgende_post" class="previous" >
<?php next_post_link('%link', 'Volgende post in category', TRUE); ?>
</div>
Deze div moet je dan absoluut positioneren bijvoorbeeld zo:
#volgende_post {
position: fixed;
top: 100px;
right: 20px;
}
Ben je hiermee op weg geholpen?
Thread starter
Bart
(@nieuweplaat)
Hallo Mike,
Bedankt! Wel nog een vraag: bij de vorige post, kan ik dan het template dupliceren en alle next en previous omdraaien?
Nee, in principe blijft de sjabloon hetzelfde. Alleen wordt er geen link getoond als er geen vorige of volgende is.
Thread starter
Bart
(@nieuweplaat)
Hi Mike,
Dank voor de info, maar het lukt me niet. Is het mogelijk om het in de bestaande code (uit het thema) aan te passen?
<?php if ( $ti_option['single_nav_arrows'] == 1 ) { // Show/Hide Previous Post / Next Post Navigation ?>
<nav class="single-box clearfix nav-single">
<?php
$prev_post = get_previous_post();
$next_post = get_next_post();
if ( !empty( $prev_post ) ){
?>
<div class="nav-previous">
<?php previous_post_link ( '%link', '<i class="icon-chevron-left"></i><span class="sub-title">' . __( 'Nieuwer', 'themetext' ) . '</span><br />%title' ); ?>
</div>
<?php } ?>
<?php if ( !empty( $next_post ) && !empty( $prev_post ) ) { ?>
<span class="sep"></span>
<?php } ?>
<?php
if ( !empty( $next_post ) ){
?>
<div class="nav-next">
<?php next_post_link( '%link', '<i class="icon-chevron-right"></i><span class="sub-title">' . __( 'Ouder', 'themetext' ) . '</span><br />%title' ); ?>
</div>
<?php } ?>
</nav><!-- .nav-single -->
<?php } ?>
http://bartdingen.nl (in aanbouw)
Thread starter
Bart
(@nieuweplaat)
Dit is overigens de CSS die erbij hoort:
/* The Next and Previous post links */
.nav-single {
padding:30px 0;
position:relative;
border-top:3px solid #000;
border-bottom:1px solid #000;
}
.nav-next,
.nav-previous {
width:36%;
padding:0 7%;
text-align:center;
}
.nav-next {
float:right;
}
.nav-previous {
float:left;
}
.nav-next a,
.nav-previous a {
font-size:12px;
display:block;
font-weight:bold;
text-decoration:none;
text-transform:uppercase;
}
.nav-next [class^="icon-"],
.nav-previous [class^="icon-"] {
font-size:25px;
position:absolute;
top:50%;
margin-top:-14px;
}
.nav-next [class^="icon-"] {right:0;}
.nav-previous [class^="icon-"] {left:0;}
.nav-single .sep {
display:block;
position:absolute;
top:0;
left:50%;
width:1px;
height:100%;
border-left:1px dotted #444;
}
dan moet je mij even naar een pagina sturen waar je die next previous navigatie hebt
Thread starter
Bart
(@nieuweplaat)
Bijvoorbeeld deze pagina: http://www.bartdingen.nl/rock/kings-of-leon-wait-for-me/
Onderaan staat de pagination. Deze wil ik weg hebben en alleen < en > in het midden aan de zijkanten van de pagina.
Uiteraard responsive, maar bij het schakelen naar de mobiele versie (dus smal) dan moeten ze verdwijnen.
Ik geef een los (niet perfect) voorbeeld:
Pas je navigatie code aan tot dat je onderstaande overhoudt:
<div class="nav-previous">
<a rel="prev" href="http://www.bartdingen.nl/rock/animal-collective-monkey-riches/"><i class="icon-chevron-left"></i></a>
</div>
Pas je css aan met:
.nav-previous {
position:fixed;
top:100px;
left:30px;
}
responsive etc dat kan je vanaf hier dan zelf denk ik wel aanvullen.
Thread starter
Bart
(@nieuweplaat)
Ik ga er mee aan de slag. Veel dank voor het meedenken!
