Pagination omtoveren tot fixed chevrons in categorie

• 

  bartdingen · Lid · augustus 23, 2013 at 9:07 pm

  • Link kopiëren
  • Onderwerp toevoegen aan favorieten

  Ik heb een thema aangeschaft voor mijn WordPress Website, maar kom niet uit de volgende kwestie.

  Op dit moment heeft het thema een ingebouwde feature om te schakelen tussen posts. Deze werkt echter niet fatsoenlijk, dus wil ik hem aanpassen. Op deze pagina vind je een voorbeeld.

  Nu wil ik de bestaande pagination verwijderen en vervangen door twee vaste chevrons aan de zijkant van het scherm:
  – Naar links is nieuwer
  – Naar rechts is ouder
  – Is er geen nieuwere post, dan is er geen chevron te zien (ook bij oudere)
  – De pagination moet binnen dezelfde categorie blijven
  – De chevrons staan in het midden, aan de zijkant
  – De chevrons moeten meeschuiven bij het verkleinen van het venster en verdwijnen als er naar de mobiele versie wordt overgeschakeld.

  Dit is de code van het thema zoals het nu is:

  <?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 } ?>

  En hier is de CSS van de huidige pagination:

  /* 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;
  	}

  Ik heb van alles al geprobeerd, maar ik kom er niet uit. Wie kan mij helpen?

• 

  supportbot · Lid · augustus 23, 2013 at 9:07 pm

  • Link kopiëren

  Je hebt geen blog adres gespecificeerd of geen reden opgegeven om deze post te maken toen je dit topic aanmaakte

  Je website is niet gehost op WordPress.com, maar het is een WordPress.org zelf gehoste WordPress.org site. Wij kunnen alleen ondersteuning geven voor sites gehost op WordPress.com.

  Hier kan je meer lezen over de verschillen tussen WordPress.com en WordPress.org.

  Als je vergeten bent om je website link te plaatsen. Reageer hier dan op en laat ons je website link weten zodat we je verder kunnen helpen.

  Dit is een geautomatiseerd bericht.

• 

  kardotim · Lid · augustus 24, 2013 at 4:04 pm

  • Link kopiëren

  Zoals door onze bot aangegeven, je website is niet gehost op WordPress.com, maar het is een WordPress.org zelf gehoste WordPress.org site. Wij kunnen alleen ondersteuning geven voor sites gehost op WordPress.com.

  Hier kan je meer lezen over de verschillen tussen WordPress.com en WordPress.org.

  WordPress.org ondersteuning kan je vinden op deze sites:

  http://wordpress.org/support/
  http://codex.wordpress.org/