Añadir y personalizar enlaces ‘siguiente’ y ‘anterior’ en los posts en Genesis

Como regla general no suelo utilizar los enlaces de navegación de los post. Es algo que nunca me han pedido para ningún proyecto en concreto. Si es cierto que para un pequeño proyecto que tuve, si que necesité añadir los enlaces ‘siguiente’ y ‘anterior’ en las entradas. Lo hice porque tenía sentido ya que era un diario, así que el propio diseño casi «pedía»  unos enlaces para ir a la siguiente entrada, y porque no, ya de paso disponer de otro enlace para ir hacia atrás.

Genesis (y consecuentemente sus temas hijos) viene preparado con una función, aunque no esté activa por defecto, para implementarlos donde queramos.

A mi parecer, temas como Wintersong o Sixteen Nine, que están pensados casi exclusivamente para blogs, si que podrían traer los enlaces, sino por defecto como opción visible. Vaya es una opinión personal. 

La función por defecto de Genesis

Esta función es la que viene por defecto en Genesis y se encuentra en genesis/lib/structure/post.php. Así que, una manera fácil de implementar los enlaces es simplemente añadir la acción al pie de las entradas de Genesis. O justo después del contenido como hemos hecho en la función de arriba. Le aplicamos una prioridad de 8.  Las prioridades, son de lógica inversa. Cuanto menor es el número, mayor es la prioridad. 

Otro punto en el que podríamos añadir la acción es genesis_after_entry. Si no tenemos nada más añadido no habrá mucha diferencia, pero puede ser interesante contemplar las distintas opciones. Por ejemplo, por defecto en el genesis_entry_footer se visualizan las categorías y etiquetas de las entradas. Así que si lo añadimos a este hook saldrá todo en un mismo bloque pareciendo un mismo párrafo. Por supuesto, se le puede aplicar estilo con CSS, pero en mi caso, con cambiar el hook, se vio algo más separado y bastante más claro.

Personalizamos los enlaces. Creamos nuestra propia función

La función por defecto de Genesis nos crea dos enlaces con los nombres de la entrada anterior y la entrada posterior, añadiendo una doble flecha «»». Ahora bien, si nosotros por necesidad o simplemente por gusto queremos otra cosa, podemos crear nuestra propia función. 

Damos forma a los propios enlaces y añadimos un poco de HTML para poder luego aplicar estilos y maquetarlo como queramos. 

Y ahora le damos un poco de estilo. En este caso necesitaba darle un estilo un poco particular debido al tema de la web. Coloqué cada enlace en un espacio que ocupaba todo el ancho de la entrada, de esa manera quedaban uno encima del otro. 

Aprovechando el CSS de alineación de Genesis

De la misma manera que hemos creado nuestro propio CSS, también podemos aprovechar el que trae nuestro tema hijo de Genesis.

En esta ocasión también he personalizado un poco los enlaces para que sea todo aún más adaptativo. En la función original, cuando hay títulos largos no se adapta del todo bien a las pantallas de algunos dispositivos. De ahí que mi primera personalización incluyese cada enlace en una línea. Esta otra función sustituye los títulos de las entradas como enlaces por dos sencillas palabras. «Anterior» y «Siguiente». Para hacer esto he cambiado la variable %title por el texto personalizado correspondiente a cada enlace. Y le he añadido una flecha ;).

Las funciones previous_post_link() y next_post_link() son bastante potentes en las que podemos: Excluir categorías; Forzar que los enlaces sean de la misma categoría que la entrada mostrada; Forzar que sean del mismo formato (post_format), que el de la entrada mostrada; Crear enlaces de navegación con imágenes. 

Excluyendo entradas y forzando categorías

Tomando como ejemplo una de las funciones personalizadas antes mencionadas, vamos a personalizarla aún más excluyendo algunas entradas y forzando categorías. 

En este caso forzamos que el enlace a la entrada anterior sea de la misma categoría que la entrada mostrada, excluyendo la categoría con ID 13. Y el enlace de la entrada siguiente sea dentro del mismo tipo de entrada (custom post type). En este caso ha de ser una entrada del tipo de entrada portfolio. Por supuesto, esto no tiene mucho sentido hacerlo así, es sólo como ejemplos para que se vean las posibilidades de la navegación entre entradas. 

Ahora ya sólo queda ponerse manos a la obra y personalizar la tuya propia.

Seguimos!