Ondersteuning » Code oplossingen gezocht » Aangepaste Single Post Navigatie

  • Ik ben al een tijdje op zoek naar een manier om binnen dezelfde categorie van post te wisselen, door middel van pijltjes aan de zijkant van het scherm.

    Naar rechts is ouder. Naar links is nieuwer. Als er geen nieuwere post is, wil ik het pijltje niet kunnen zien. Dat geldt ook voor wanneer er geen oudere post is.

    Eigenlijk hetzelfde als hier, maar dan met andere symbolen uiteraard en binnen dezelfde categorie.

    Het gaat om de website (in aanbouw) http://bartdingen.nl

    Wie kan mij helpen?

10 reacties aan het bekijken - 1 tot 10 (van in totaal 10)
  • Moderator Mike

    (@mike_vl)

    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?

    Moderator Mike

    (@mike_vl)

    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;
    	}
    Moderator Mike

    (@mike_vl)

    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.

    Moderator Mike

    (@mike_vl)

    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!

    Moderator Mike

    (@mike_vl)

    succes!

10 reacties aan het bekijken - 1 tot 10 (van in totaal 10)
  • Het onderwerp ‘Aangepaste Single Post Navigatie’ is gesloten voor nieuwe reacties.