Cómo agregar enlaces siguientes/anteriores en WordPress (Guía definitiva)
¿Quieres añadir enlaces siguientes/anteriores en WordPress?
Los enlaces siguiente y anterior son enlaces dinámicos que permiten a los usuarios ver la publicación siguiente o anterior.
En este artículo, le mostraremos cómo agregar fácilmente enlaces siguientes/anteriores en WordPress y aprovecharlos al máximo.
¿Cuáles son los enlaces siguientes/anteriores en WordPress?
Los enlaces siguiente/anterior son enlaces dinámicos agregados por un tema de WordPress que permiten a los usuarios navegar fácilmente a la publicación siguiente o anterior. Esto puede ayudar a aumentar las páginas vistas y reducir los abandonos.
De forma predeterminada, las publicaciones del blog de WordPress se muestran en orden cronológico inverso (primero las publicaciones más recientes).
Esto significa que la siguiente publicación es la publicada después de la publicación actual que el usuario está viendo, y la publicación anterior es la publicada antes de la publicación actual.
Los enlaces siguientes/anteriores permiten a los usuarios navegar fácilmente a través de artículos individuales y páginas de blogs de archivo. También te ayuda a obtener más páginas vistas para tu blog.
La mayoría de los temas de WordPress tienen enlaces integrados a la publicación siguiente y anterior, que aparecen automáticamente en la parte inferior de cada publicación. Sin embargo, algunos temas no los muestran, o es posible que desee personalizar dónde y cómo aparecen en su sitio de WordPress.
Veamos cómo puede agregar fácilmente enlaces siguientes y anteriores en WordPress.
A continuación se muestra una lista de temas que cubriremos en este artículo.
Agregue enlaces siguientes / anteriores a WordPress usando un complemento
Este método es más fácil y se recomienda para principiantes a quienes no les gusta agregar código a sus sitios web.
Primero debes instalarlo y activarlo CBX Siguiente Artículo anterior enchufar. Consulte nuestra guía paso a paso para instalar el complemento de WordPress para obtener más detalles.
Después de la activación, debe visitar Ajustes »CBX Siguiente Anterior Remover. Desde aquí puede elegir dónde desea mostrar los enlaces siguientes y anteriores en su sitio.
El complemento le permite mostrar flechas para los enlaces "Siguiente" y "Anterior" en publicaciones individuales, páginas, páginas de archivo y más.
Para que sus enlaces siguientes y anteriores sean más relevantes, también puede revisar publicaciones futuras y anteriores en la misma categoría o etiqueta.
En la versión gratuita del complemento, solo puede mostrar flechas para los elementos siguientes y anteriores. Puede actualizar a la versión Pro para desbloquear otras opciones de visualización, como una ventana emergente deslizante.
Si desea ver las publicaciones siguientes/anteriores de la misma taxonomía, debe ir a la sección Navegación de taxonomías.
Desde aquí, debe elegir qué taxonomía desea utilizar para seleccionar el enlace siguiente y anterior.
Opcionalmente, el complemento le permite realizar un seguimiento de los clics con Google Analytics. Para utilizar esta función, primero debe instalar Google Analytics en WordPress.
Luego cambie a la pestaña Google Analytics en la configuración del complemento y habilite las opciones de seguimiento de clics.
Cuando haya terminado, asegúrese de hacer clic en el botón Guardar configuración para guardar los cambios.
Ahora puede visitar su sitio de WordPress para ver los enlaces siguientes/anteriores en acción.
Este método es más fácil, pero no le da mucha flexibilidad. Por ejemplo, la versión gratuita no muestra el título de la publicación siguiente o anterior.
Si necesita más flexibilidad, siga leyendo.
Añadir enlaces siguiente/anterior a un tema de WordPress
Este método requiere de puede editar sus archivos de temas de WordPress. Si aún no lo ha hecho, consulte nuestra guía para copiar y pegar código en WordPress.
Luego debe conectarse a su sitio web de WordPress usando un cliente FTP o a través de la aplicación de administrador de archivos en el panel de control de alojamiento de WordPress.
Una vez conectado, debe ir a la carpeta /wp-content/themes/your-current-theme/.
Ahora necesita encontrar el archivo single.php. Este es el archivo responsable de mostrar cada elemento de la publicación en su sitio web.
Algunos temas de WordPress pueden vincularse a otros archivos en el archivo single.php. Estos archivos se denominan partes de plantilla y se encuentran en la carpeta de partes de su plantilla de tema de WordPress.
Para obtener más detalles, consulte nuestro artículo sobre qué archivos deben editarse en el tema de WordPress.
Luego simplemente copie y pegue el siguiente código en el archivo de plantilla donde desea mostrar el enlace siguiente y anterior.
Ahora puede guardar sus cambios y visitar su sitio para ver los enlaces siguientes/anteriores en acción.
La etiqueta de la plantilla anterior simplemente muestra el enlace a publicaciones futuras y anteriores con el título de la publicación como texto de anclaje. Esto no significa que estos sean los enlaces a los artículos siguientes y anteriores.
Cambiemos eso un poco y demos a los usuarios algo de contexto para estas conexiones. Para ello añadimos los parámetros disponibles para the_post_navigation etiqueta de plantilla.
Simplemente reemplace el código anterior con el siguiente:
__( 'Previous Article: %title' ),
'next_text' => __( 'Next Article: %title' ),
) );
?>
Ahora puede guardar sus cambios y ver su sitio.
Así es como se veía en nuestra página de prueba:
También puede usar caracteres especiales y flechas junto con los títulos de las publicaciones siguientes y anteriores.
Simplemente reemplace el código con lo siguiente:
__( '← %title' ),
'next_text' => __( '%title →' ),
) );
?>
Así es como se veía este código en nuestro sitio web de prueba:
Ahora suponga que desea que el enlace siguiente y anterior sean más relevantes para el artículo que el usuario está viendo actualmente.
Puede hacer esto mostrando los enlaces siguiente y anterior en la misma categoría o etiquetas.
__( '← %title' ),
'next_text' => __( '%title →' ),
'in_same_term' => true,
'taxonomy' => __( 'category' ),
) );
?>
Este código le dice a WordPress lo siguiente y ver publicaciones anteriores en la misma categoría. Puede cambiar el parámetro de taxonomía de etiquetas u otra taxonomía personalizada si es necesario.
Diseño de enlaces hacia adelante/atrás en WordPress
Ahora que hemos aprendido cómo agregar enlaces siguientes/anteriores a WordPress, veamos cómo diseñarlos correctamente.
De forma predeterminada, WordPress agrega automáticamente varias clases de CSS para publicar enlaces de navegación. Puede usar estas clases de CSS en su tema de WordPress para diseñar estos enlaces.
Aquí hay algunos CSS básicos para agregar a su tema.
.nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
display: flex;
}
.nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
flex: 1 0 50%;
}
.nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
text-align: end;
flex: 1 0 50%;
}
Este CSS básico simplemente muestra los enlaces siguiente y anterior uno al lado del otro, pero desde diferentes lados de la misma línea.
También puede hacer que sus enlaces de navegación se destaquen agregando color de fondo, efecto de retención del mouse y más.
Aquí hay algunos ejemplos de códigos CSS que puede usar como punto de partida.
.post-navigation {
background-color:#f3f9ff;
padding:0px;
}
.nav-previous, .nav-next{
padding:10px;
font-weight:bold
}
.nav-previous:hover,.nav-next:hover {
background-color:#0170b9;
}
.nav-previous:hover a:link ,.nav-next:hover a:link {
color:#fff;
}
Este código estiliza el texto del enlace y agrega un color de fondo y un efecto de retención del mouse para resaltar el enlace anterior y el siguiente.
Agregue enlaces siguientes / anteriores a las páginas de WordPress
Por lo general, los enlaces de navegación de enlaces se utilizan para publicaciones de blog en WordPress. Esto se debe a que estos artículos se publican en orden cronológico inverso.
Por otro lado, los sitios de WordPress no suelen publicarse en orden cronológico. Consulte nuestra guía sobre la diferencia entre publicaciones y páginas de WordPress para obtener más detalles.
Sin embargo, algunos usuarios pueden necesitar mostrar la navegación de la página para permitirles encontrar fácilmente la página siguiente.
Afortunadamente, puede usar el mismo código que usamos para las páginas anteriores. Sin embargo, debe pegar el código en la plantilla page.php.
__( '← %title' ),
'next_text' => __( '%title →' ),
) );
?>
Así es como se veía en nuestra página de demostración:
Agregue enlaces siguientes / anteriores en WordPress con miniaturas
Usted quiere haces que tus próximas y anteriores relaciones sean más llamativas? Las imágenes son la forma más fácil de llamar la atención de los usuarios y hacer que estas conexiones sean más atractivas.
Agreguemos los enlaces siguientes y anteriores a una miniatura de la publicación o imagen que se presenta junto a ella.
Primero, debe agregar el siguiente código al archivo functions.php del tema o a un complemento específico del sitio.
function wpb_posts_nav(){
$next_post = get_next_post();
$prev_post = get_previous_post();
if ( $next_post || $prev_post ) : ?>
Este código simplemente crea una función que muestra las publicaciones siguientes y anteriores con imágenes destacadas o miniaturas de las publicaciones.
Entonces tienes que agregar wpb_posts_nav() -Agregue una función al archivo single.php de su tema donde desea mostrar los enlaces.
Si su tema ya tiene enlaces anteriores y siguientes, es posible que desee encontrar la línea que contiene la función post_navigation () y eliminarla.
Ahora agregue el siguiente código para mostrar sus enlaces siguientes y anteriores personalizados.
Una vez que haya agregado el código, asegúrese de guardar los cambios y visite su sitio web para ver los enlaces en acción.
Ahora puede notar que estos enlaces no se ven muy limpios.
Cambiemos eso agregando CSS personalizado para darles estilo.
.wpb-posts-nav {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 50px;
align-items: center;
max-width: 1200px;
margin: 100px auto;
}
.wpb-posts-nav a {
display: grid;
grid-gap: 20px;
align-items: center;
}
.wpb-posts-nav h4,
.wpb-posts-nav strong {
margin: 0;
}
.wpb-posts-nav a svg {
display: inline-block;
margin: 0;
vertical-align: middle;
}
.wpb-posts-nav > div:nth-child(1) a {
grid-template-columns: 100px 1fr;
text-align: left;
}
.wpb-posts-nav > div:nth-child(2) a {
grid-template-columns: 1fr 100px;
text-align: right;
}
.wpb-posts-nav__thumbnail {
display: block;
margin: 0;
}
.wpb-posts-nav__thumbnail img {
border-radius: 10px;
}
Ahora puede guardar sus cambios y visitar su sitio para ver enlaces en miniatura futuros y anteriores.
Así es como se veía en nuestra página de prueba:
Para obtener más información, consulte nuestra guía para agregar miniaturas a enlaces a publicaciones anteriores y futuras.
Bonificación: elimine los enlaces "siguiente" y "anterior" en WordPress
Algunos usuarios pueden querer eliminar los enlaces siguientes y anteriores en WordPress.
Por ejemplo, algunos usuarios pueden encontrar que estos enlaces son menos útiles. Algunos pueden querer mostrar publicaciones relacionadas o publicaciones populares en su lugar.
Hay dos formas de eliminar enlaces futuros y anteriores en WordPress.
Método 1. Elimina el código en tu tema de WordPress
Para eliminar los enlaces siguientes y anteriores en WordPress, debe eliminar el código responsable de mostrar los enlaces en su tema de WordPress.
El problema con este enfoque es que una vez que actualiza su tema, se devuelve el código eliminado.
Para evitar esto, debe crear un tema para niños.
Luego, debe encontrar el código responsable de mostrar los enlaces siguiente y anterior en su tema principal.
Por lo general, se encuentra en las plantillas single.php o content-single.php.
Básicamente, está buscando un código que contenga la siguiente función.
Este código puede tener un formato y parámetros ligeramente diferentes. Por ejemplo, en nuestra página de prueba, el tema usa este código para mostrar enlaces:
the_post_navigation(
array(
'prev_text' => ' ',
'next_text' => ' ',
)
);
Si usa un subtema, deberá duplicar esa plantilla en particular en su subtema y luego eliminar las filas utilizadas para mostrar los enlaces siguientes o anteriores.
Si prefiere simplemente eliminarlo en su tema principal, también puede hacerlo.
Eliminar el código evitará que WordPress muestre los enlaces siguientes y anteriores.
Método 2. Ocultar enlaces a publicaciones futuras y anteriores
Este método en realidad no elimina los enlaces anteriores y posteriores. En cambio, los hace invisibles para los lectores humanos.
Simplemente agregue el siguiente CSS personalizado a su tema de WordPress.
nav.navigation.post-navigation {
display: none;
}
Recuerda guardar tus cambios y visitar tu sitio para ver como desaparecen los enlaces de navegación.
Esperamos que este artículo le haya ayudado a aprender cómo agregar fácilmente enlaces anteriores y siguientes a WordPress. También puede leer nuestra guía para elegir el mejor software de diseño web o nuestra comparación experta de los mejores registradores de dominios.
Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para videos tutoriales para WordPress. También puedes encontrarnos en Closermarketing.es y Facebook.
Deja una respuesta