Cómo agregar la siguiente publicación anterior de WordPress con miniatura

Agregar paginación a su sitio de WordPress no debería ser un proceso complicado. De hecho, con un conocimiento mínimo de programación , puede cambiar fácilmente su paginación predeterminada de publicaciones a una paginación numerada de WordPress como se ilustra en mi tutorial anterior sobre la paginación numérica de WordPress . Hoy, quiero que nos concentremos en crear paginación para la única publicación que ha presentado imágenes que probablemente haya encontrado en varios temas de revistas de WordPress.

Es común ver la siguiente publicación anterior de WordPress con una miniatura y un título debajo de la publicación individual o en la parte superior, según el diseño del tema.

WordPress Siguiente Publicación anterior con ejemplo de miniatura

Por ejemplo, en uno de los temas de revistas de WordPress más vendidos: Periódico , puede ver que la publicación individual tiene una paginación con una miniatura como se muestra en la imagen a continuación:

La imagen de arriba representa un buen ejemplo de una publicación única de WordPress con la siguiente paginación anterior que tiene una miniatura.

Al final de este tutorial de desarrollo de WordPress, debe agregar fácilmente el código que creamos a su complemento o tema de WordPress y mostrar la siguiente publicación anterior de WordPress con una miniatura como se ve en el tema Newspaper WordPress.

Siguiente Anterior Código de paginación de WordPress

En pocas palabras, los dos fragmentos de código importantes que debe tener son uno que obtiene la publicación anterior o siguiente y otro que recupera la imagen destacada de la publicación específica (ya sea al lado o anterior)

Para ilustrar este tutorial, vamos a utilizar el tema predeterminado de WordPress de Twenty Seventeen, que es mi favorito por varias razones; una de las razones es su simplicidad.

Este código definitivamente funcionará en todos los demás temas o complementos de WordPress. Entonces, para empezar, tenemos el tema instalado y activado con una sola publicación de muestra publicada.

Empezando

Como puede ver en la imagen a continuación, como lo indica la flecha, debajo de la publicación no hay paginación para las próximas publicaciones anteriores. En esta sección, agregaremos la próxima publicación anterior de WordPress con paginación en miniatura.

El primer paso es ubicar el archivo single.php en su tema ya que es el archivo donde agregaremos el código justo debajo de the_content() y dentro del bucle.

Después de ubicar el archivo single.php, el siguiente paso es crear dos variables $next y $prev que se asignan a dos funciones principales de WordPress; get_next_post() y get_previous_post() respectivamente, como se muestra en el fragmento de código a continuación:

 <?php
$anterior = get_anterior_post();
$siguiente = get_next_post();
?>

Estas dos funciones son similares en la forma en que funcionan; la función anterior recupera la publicación anterior, mientras que la función siguiente recupera la publicación siguiente como objects .

Para demostración, he publicado las tres publicaciones como se muestra en la imagen a continuación:

Ahora necesitamos obtener el título de la publicación anterior y la miniatura y también asegurarnos de envolverlos en a href tag con el enlace permanente respectivo que ayuda a que se pueda hacer clic en los enlaces:

 <a href="<?php echo get_permalink( $prev->ID ); ?>">

<?php echo apply_filters('the_title', $anterior->post_title ); ?>

<?php echo get_the_post_thumbnail($prev->ID, 'thumbnail'); ?>

</a>

A continuación, obtenemos el título de la siguiente publicación y la miniatura y también envolvemos con una etiqueta href y el enlace permanente para la próxima publicación como el valor de la etiqueta href:

 <a href="<?php echo get_permalink( $siguiente->ID ); ?>">

<?php echo apply_filters('the_title', $next->post_title ); ?>

<?php echo get_the_post_thumbnail($siguiente->ID, 'miniatura'); ?>

</a>

Hasta este punto, tenemos el código que funciona y que puede mostrar la siguiente publicación anterior de WordPress con una miniatura. El código completo hasta este paso debe ser como se muestra a continuación:

 <?php

$anterior = get_anterior_post();
$siguiente = get_next_post();

// el título y la miniatura de la publicación anterior

?>

<?php echo get_the_post_thumbnail($prev->ID, 'thumbnail'); ?>

<a href="<?php echo get_permalink( $prev->ID ); ?>">

<?php echo apply_filters('the_title', $anterior->post_title ); ?>

</a>

<?php

// el título y la miniatura de la siguiente publicación

?>

<?php echo get_the_post_thumbnail($siguiente->ID, 'miniatura'); ?>

<a href="<?php echo get_permalink( $siguiente->ID ); ?>">

<?php echo apply_filters('the_title', $next->post_title ); ?>

</a>

<?php

Agregue este código al archivo single.php y asegúrese de escapar del HTML con las etiquetas de apertura y cierre de PHP adecuadas y actualice el archivo y luego verifique los cambios en la interfaz.

Debería ver la publicación anterior y la miniatura de la siguiente publicación con el título que se muestra como se muestra en la imagen a continuación:

Estilizar WordPress Previous Next Post

Ahora necesitamos introducir dos divs y agregar los estilos apropiados para asegurarnos de que flotamos cada una de las publicaciones en cada lado. Podemos lograr esto envolviendo el código con dos divs como se muestra a continuación:

 <div clase="arreglar">

<?php

$anterior = get_anterior_post();

$siguiente = get_next_post();

// el título y la miniatura de la publicación anterior

?>

<div class="post-box prevPost">

<a href="<?php echo get_permalink( $prev->ID ); ?>">

<?php echo apply_filters('the_title', $anterior->post_title ); ?>

<?php echo get_the_post_thumbnail($prev->ID, 'thumbnail'); ?>

</a>

</div>

<?php

// el título y la miniatura de la siguiente publicación

?>

<div class="post-box nextPost">

<a href="<?php echo get_permalink( $siguiente->ID ); ?>">

<?php echo apply_filters('the_title', $next->post_title ); ?>

<?php echo get_the_post_thumbnail($siguiente->ID, 'miniatura'); ?>

</a>

</div>

</div>

<?php

Después de agregar las clases para los divs, ahora podemos aplicar los estilos usando CSS como se muestra a continuación:

 * {
  tamaño de caja: cuadro de borde;
} 

.buzón {
  flotador izquierdo;
  ancho: 50%;
}

.clearfix::después de {
  contenido: "";
  Limpia los dos;
  pantalla: mesa;
}
.post-box.prevPost img {
    ancho máximo: 40%;
    altura: automático;
}
.post-box.nextPost img {
    ancho máximo: 40%;
    altura: automático;
}

Conclusión

Con este código, puede agregar fácilmente la paginación de la siguiente publicación anterior de WordPress con una miniatura. También puede agregar mejores estilos para mejorar la presentación visual de la paginación de una sola publicación. Después de agregar el código CSS, debería ver aparecer el diseño de las dos publicaciones como se muestra en la imagen a continuación.

También es importante que verifique si la miniatura o la publicación existe agregando una declaración condicional. Por ejemplo, puede envolver la sección $prev con una condición como se muestra a continuación:

 <?php

$prev_ = get_previous_post();

if ( ! vacío( $anterior ) ): ?>

    <a href="<?php echo get_permalink( $prev->ID ); ?>">

        <?php echo apply_filters( 'el_título', $prev_post->post_title ); ?>

    </a>

<?php endif; ?>

La validación de código es una parte importante del desarrollo de WordPress y no debe pasarse por alto. Espero que esta publicación le haya dado una idea y que ahora pueda agregar paginación de una sola publicación con una miniatura en su sitio o tema. Si desea aprender cómo crear una paginación de blog de WordPress, puede consultar este tutorial anterior: cómo crear una paginación de números en WordPress.

Si necesita más ayuda, puede obtener ayuda de un desarrollador de temas de WordPress, especialmente para aquellos usuarios que no entienden cómo funciona el código. También puede ponerse en contacto conmigo para obtener ayuda.