Post anterior y siguiente en WordPress

Post anterior y siguiente en WordPress

5/5 (1)

En las plantillas de WordPress suele haber, en la visualización de post individual, un apartado al final para navegar entre posts. En la inmensa mayoría pone “Anterior” y “Siguiente”, quedando un tanto soso a la vista.

¿Por qué modificar la navegación entre posts en un theme WordPress?

Si quieres tener un blog medianamente elegante y vistoso no puedes dejar la navegación de esa manera, tienes que dejar la navegación entre posts de la forma más visual posible.

Afortunadamente son muchas ya las plantillas que lo personalizan o, sencillamente, no lo implementan. En mi opinión si no puedes personalizarlo no merece la pena tenerlo.

Ejemplo de navegación personalizada

Navegación entre posts

Esta es la navegación que tengo implementada en mi blog. Al pasar el ratón por encima se pone el fondo blanco y las letras negras o azules.

Lo “malo” de esta navegación es que has de tener unos mínimos conocimientos de WordPress a nivel interno y es conveniente trabajar con tema hijo. El motivo por el que es conveniente trabajar con un Child Theme es que los themes se actualizan constantemente. Las actualizaciones son buenas, pero cuando hay una lo que hace es, por decirlo de alguna manera, machacar el tema anterior. Lo que hace es grabar los archivos (HTML, PHP, CSS, JS, …) sobre los originales, de forma que perderías los cambios.

Pero vayamos al grano. Lo primero que tenemos que hacer es localizar la posición donde quieres poner la navegación en el archivo single.php. Puede encontrarse también como singular.php. Casi con toda seguridad tendrás que buscar mucho, ya que los ficheros en WordPress suelen estar hechos con módulos y funciones que se encuentran en otros archivos. Por desgracia cada theme es único, por lo que tendrás que buscar donde está el archivo.

Una vez localizado, grabas en el tema hijo una copia, siguiendo el árbol de directorios. Por ejemplo, hemos dicho que suele estar en single.php, que está en el directorio raiz, pero la función que controla la navegación entre posts puede estar en /partials/single/next-prev.php y llamar a esa función desde single.php.

También debes localizar el archivo de estilos del tema hijo, que está en el directorio raíz y se llama style.css.

En single.php o en su correspondiente fichero auxiliar escribiremos el siguiente código para asignar los valores correspondientes al post siguiente y anterior, como la imagen, el enlace, el título, …:

Navegación entre posts de WordPress

En el mismo fichero, y seguido, escribiremos el siguiente código:

Navegación entre posts de WordPress

Como puedes ver, hay iconos de Font Awesome, si no lo tienes puedes utilizar otros. (No olvides cambiar las clases en el CSS).

Y por último el CSS en el archivo style.css:

Navegación entre posts de WordPress

Y así puedes tener una navegación entre posts personalizada. Si te fijas verás que lo único imprescindible es el módulo de las variables en PHP. El resto, sabiendo HTML y CSS lo puedes hacer perfectamente a tu gusto.

Si me permites un consejo, te recomiendo utilizar para el CSS un preprocesador como LESS o SASS. Es mucho más práctico. Yo, inicialmente tenía hecho el CSS en SASS.

Espero que te haya servido de algo y conviertas tu navegación entre posts en algo mucho más visual.

Por favor, valora este artículo

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.