Entrada anterior y siguiente con imagen destacada.

por | temas, wordpress | 0 Comentarios

A la hora de crear nuestros temas de WordPress debemos ser originales o por lo menos intentarlo.

Aunque está todo hecho e inventado en el mundo de los temas de wp siempre podemos dar un toque diferente que nos haga lucir nuestra web atractiva al usuario final.

En esta ocasión vamos hacer que en nuestra entrada individual en el blog el post anterior y siguiente se muestra la imagen destacada correspondiente a cada uno y no el típico “Next” , “Previous” que vemos siempre.

Para veais a lo que me refiero , esto seria lo que vemos en el tema Twenty Nineteen:

Aquí se muestra un enlace a Entrada anterior y posterior con el título de la entrada y el código seria algo como esto:

the_post_navigation( array(
	'prev_text' => __( ' %title','fitness-passion' ),
	'next_text' => __( ' %title →','fitness-passion' ),
        'screen_reader_text' => __( 'Continue Reading','fitness-passion' ),
) );

Pues vamos a hacer algo como lo siguiente , que seria lo mismo pero mostrando las imágenes destacadas y un poco de css para mejorar la apariencia.

Para ello usaré una función, la cual usa get_previous_post y get_next_post y a partir de ellas obtenemos el $post y usamos sus propiedades para montar nuestra navegación.

<?php 
themeslug_posts_navigation(){ global $post; ?> 
        <div class="posts-navigation"> 
            <div class="nav-links">
              <?php $prevPost = get_previous_post(true); if($prevPost) { $args = array( 
                    'posts_per_page' => 1, 
                    'include' =>; $prevPost->;ID ); 
                    $prevPost = get_posts($args); 
                    foreach ($prevPost as $post) { setup_postdata($post);?> 
               <div class="nav-previous" style="background-image: url(<?php echo get_the_post_thumbnail_url('get_the_ID('),'large');?>"> 
                <h4><?php echo get_the_post_title();?></h4> </div> 
                       <?php wp_reset_postdata(); 
                    } //end foreach } // end if 
                  $nextPost = get_next_post(true); if($nextPost) { $args = array( 
                  'posts_per_page' =>; 1, 
                  'include' => $nextPost->ID ); 
                   $nextPost = get_posts($args); 
                   foreach ($nextPost as $post) { setup_postdata($post); ?> 
              <div class="nav-next" style="background-image: url(<?php echo get_the_post_thumbnail_url('get_the_ID('),'large'); ?>"> 
                <h4><?php echo get_the_post_title();?></h4> </div> <?php wp_reset_postdata(); } //end foreach } // end if ?></div> </div>

Ten en cuenta que themeslug sería el slug de tu tema.

La función su lugar más habitual seria en el single.php de tu tema después del contenido , por ejemplo así:

y con un poco de css en nuestro style.css.

.posts-navigation { 
   margin: 0 0 1.5em; 
   width: 100%; 
   text-transform: uppercase; } 

.posts-navigation .nav-links { 
   display: -webkit-box; 
   display: -ms-flexbox; 
   display: flex; 
   -webkit-box-pack: justify; 
   -ms-flex-pack: justify; 
   justify-content: space-between; } 

.posts-navigation .nav-next, .posts-navigation .nav-previous { 
   overflow: hidden; 
  flex: 1; 
  min-height: 10rem; 
  background-repeat: no-repeat; 
  background-size: cover; 
  background-position: 20% 50%; } 

.posts-navigation .nav-next h4, .posts-navigation .nav-previous h4 { 
  width: 100%; 
  height: 100%; 
  margin: 0; 
  background-color: #0e0e0e42; 
  transition: background-color .4s ease-in; font-size: .8rem; 
  font-weight: 100; } 

.posts-navigation .nav-next h4:hover, .posts-navigation .nav-previous h4:hover { 
  background-color: #a1624c; } 

.posts-navigation .nav-next h4 { text-align: right; } 

.posts-navigation .nav-next a, .posts-navigation .nav-previous a { 
  color: white; 
  height: 100%; 
  display: flex; 
  justify-content: center; 
  align-items: center; }

Ya tienes otra forma de mostrar tu navegación de post en WordPress , seguro tu tema te lo agradecerá.

Si te ha gustado la entrada o tienes algo que aportar haz tu comentario, un saludo y hasta la próxima.

J.Rafael Simarro

J.Rafael Simarro

Desarrollador WordPress , entusiasta de la tecnología y todo lo relacionado con el diseño web. Últimamente muy enfocado en el tema Divi como primera herramienta de diseño , he probado muchas y Divi se lleva la palma.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Share This