Ultimamente he estado buscando la manera mas elegante de poner unos botones simples de navegación en mi blog, pero sobre todo para evitar el clásico texto de NEXT y PREV, que opinan de estos que en este momento ven en sus extremos derecho e Izquierdo de la pantalla, estas pequeñas flechitas blancas con un fondo amarillo huevo y son los que he llamado WP botones de Navegacion cool.
WP botones de navegación
Les voy a compartir el código hay que usar y como hay que hacer para integrarlos al sitio en WordPress, los botones de navegación son de lo mas sutiles.
En el archivo de style css debes poner el siguiente codigo. ( En la sección de Apariencia puedes seleccionar editor), pero te recomiendo que uses una nueva hoja de estilo personalizada, si en tu sección de apariencia tendrás tambien una opción de edit css , esto depende mucho del tema que utilizas.
.arrowLeft a {
position: fixed;
z-index: 100;
left: -5px;
top: 45%;
padding: 15px 10px;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
}
.arrowLeft a:hover {
left: 0;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
color: #fff;
}
.arrowRight a {
position: fixed;
z-index: 100;
right: -5px;
top: 45%;
padding: 15px 10px;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
}
.arrowRight a:hover {
right: 0;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
color: #fff;
}
.arrowNav a {
background: #225773;
color: #fff;
text-decoration: none;
font-size: 16px;
}
Es necesario después hacer una modificación al archivo single.php, ( En la sección de Apariencia puedes seleccionar editor) donde hay que agregar las siguientes lineas, es algo muy sencillo y no afecta en nada el funcionamiento de nuestro sitio. Es muy importante que este codigo se encuentre dentro de div «content-area», si no esta asi, el loop de WordPress no funcionara y les dejara solo las mismas next y prev post.
<div class="arrowNav">
<div class="arrowLeft">
<?php previous_post_link('%link', '←', FALSE); ?>
</div>
<div class="arrowRight">
<?php next_post_link('%link', '→', FALSE); ?>
</div>
http://crunchify.com/create-new-cool-previous-next-navigation-button-for-wordpress-blog/
