Cómo crear un índice para tus post automáticamente en WordPress

Si eres lector de blogs y consumidor de tutoriales, seguramente agradeces que ciertos post largos tengan un índice de sus contenidos para poder llegar rápidamente a lo que te interesa, saltando las introducciones que a veces no necesitas. En este post, vamos a ver dos formas de crear este índice de forma automática ¿Listo?

Crear un índice automático en WordPress CON PLUGIN

Existe un plugin que puede generar este índice por nosotros, se llama Easy Table of Contents. La verdad es que es muy ligero y sencillo de configurar. Es importante señalar que es un plugin con muy buena salud, es decir, que los desarrolladores lo actualizan cada poco tiempo, algo que como dijimos en el post sobre actualizaciones de wordpress siempre tranquiliza un poco

Tip que viene a cuento: cuando necesites instalar un plugin en tu wordpress para cumplir una función concreta, revisa bien todas las opciones similares y elige la mejor, es decir, la que es más limpia, la que se actualizó hace menos tiempo y la más sencilla para tus necesidades (recuerda que tu web trabaja para ti, no al contrario).

Dicho esto, vamos a ver en cómo en unos segundos podemos generar una tabla de contenidos basada en los títulos de nuestro post usando este plugin:

1. Instalamos y activamos el plugin
2. Nos vamos a Ajustes > Tabla de contenidos

Primer bloque: Ajustes generales de Easy Table of Content

Tenemos que Activar la compatibilidad y seleccionar para Insertar automáticamente los post types que queramos que tengan el índice. Para este tutorial, seleccionaremos los post, pero es posible extender esta funcionalidad a todos los tipos de contenido.

La siguiente opción es bastante interesante, porque nos permite elegir la posición de la tabla de contenidos. Por defecto aparecerá antes del primer título, y nosotros recomendamos dejarla así por cuestiones de usabilidad (es en ese punto del post donde es más adecuado para la lectura, después de la introducción que sirve como texto SEO, y antes del meollo de la cuestión que está organizado con títulos).

El resto de ajustes del bloque general son:

• Mostrar cuando: establece un mínimo de títulos para generar el índice, de no haber suficientes, no lo muestra. Podemos dejarlo como está.
• Mostrar etiqueta de encabezado: dejamos esto marcado para poder usar la siguiente opción. De lo contrario, la tabla no tendrá titulo. Recomendamos marcarlo.
• Etiqueta del encabezado: Aquí podemos personalizar el texto del encabezado de la tabla, por ejemplo “Venga, te dejo que te saltes la introducción…”. Todo lo que sea personalizar tu web con copy es bien.
• Alternar vista: este check permite al usuario plegar o desplegar el índice de contenidos. Aquí, ambas opciones son válidas, depende de tu contenido y de los gusto de tu público.
• Vista inicial: define el estado inicial de la tabla, si lo clicamos, aparecerá plegada. No recomendamos marcarlo (hay usuarios que podrían pasarlo por alto)
• Mostrar jerarquía: este es un ajuste interesante que nos permite distinguir entre los tipos de títulos (del H1 al H6) y los interpreta como si unos estuvieran dentro de otros (por ejemplo, si tienes un H4 justo después de un H1, el plugin considera que ese H4 es un subcontenido del H1 anterior). Aunque es interesante, nosotros preferimos no marcarlo para no complicar la comprensión de la tabla.
• Contador: Indicamos al plugin qué tipo de lista debería tener el índice: numérica, decimal, romana… Recomendamos dejarlo por defecto.
• Scroll suave: En Wondermochi somos amigos de la suavidad, por lo tanto recomendamos que tengas esto marcado siempre, hará que cuando el usuario haga click en el enlace del índice, vaya al título correspondiente lentamente, y no de forma instantánea (que queda muy antiguo y raro)

Segundo bloque: Apariencia

Hasta ahora hemos programado el comportamiento del plugin, pero ahora vamos a definir su aspecto. Personalmente, no soy muy fan de este tipo de opciones en los plugins, ya que están llenas de conceptos técnicos relativos al diseño web y al CSS, por lo tanto un usuario sin nociones básicas de esto no debería configurar estos ajustes… pero si estamos usando un plugin, es precisamente para no tener que tener nociones de nada ¿no? Pues no, lo ideal es que la estética de todo cuando se ve en la web provenga del tema que estemos usando. Pero es imposible que los temas sean compatibles con todos los plugins estéticamente, por eso existen este tipo de opciones en los plugins.

Resumiendo esta idea, lo que recomendamos a los diseñadores es que instalen el plugin y “limpien” el estilo del mismo hasta dejarlo “crudo” y listo para ser estilado en CSS sin competencia con otras hojas de estilo.

Tochos a parte, vamos a comentar las opciones de apariencia ideales, intentaremos ser lo más explicativos posible:

• Ancho: Tenemos un montón de opciones para establecer el ancho de la caja del índice. Lo ideal es dejarlo en el valor auto o 100%. Si eliges un valor en pixeles o personalizado, recuerda comprobar en todos los dispositivos que se ve correctamente, ya que diseñar estructuras en valores fijos como pixeles suele dar problemas de adaptabilidad.
• Float: Si quieres que tu caja se comporte como una imagen con el contenido, puedes marcar que flote a izquierda o derecha. Nosotros no lo recomendamos (y el plugin tampoco, aunque te deje [una incongruencia salvaje apareció])
• Tamaño de texto del título: En este punto, podemos dejar el valor defecto (120%), pero lo que recomendamos es usar 1em, un tamaño adaptativo que quiere decir que va a heredar el tamaño del elemento padre (en este caso el post, que lleva el estilo del tema, o sea, mejor que mejor [la uniformidad web es sexy])
• Peso de la fuente de título: se refiere al grosor de la fuente, aunque el plugin recomienda un peso medio, nosotros recomendamos negrita o seminegrita (ya que es un titulo)
• Tamaño de la fuente de la lista: Aquí definimos el tamaño del texto de los enlaces de la lista. También recomendamos el valor 1rem para que herede el estilo del post. Dependiendo de tu tema, esto puede tener un efecto u otro, pero lo importante es que usando la unidad em, podemos cambiar el tamaño del texto en base al estilo
• Tema: esto es como la introducción que hemos hecho, pero al cuadrado. Para nuestro gusto, no hay nada peor que una web uniforme que de pronto tenga un elemento con estética radicalmente diferente. Eso se nota babys, eso no es sexy. Pero bueno, dentro de lo que cabe, nos dejan una opción Personalizada (que configuramos justo debajo) para ponerle nuestros propios colores.

Tercer bloque: Avanzado

Oh wait! ¿pero esto no era la versión fácil de generar una índice de contenidos, qué pinta la opción avanzada? Pues eso mismo pensamos nosotros. Hagamos una cosa:

1. Dejamos por defecto todas las opciones de este bloque
2. Si somos diseñadores, marcamos la opción CSS, que anula todo el estilo del plugin para que la tabla herede los estilos del tema
3. Si algo falla en el plugin, venimos a esta sección y leemos las explicaciones de cada una de las opciones. Los desarrolladores han tenido la cortesía de explicar en lenguaje humano cada opción.
4. Si aún así sigue fallando todo, deja un comentario en este post y lo solucionamos entre todos
5. Cuando todo funcione bien, nos tomamos un café, que nos lo merecemos

Resultado

Vamos a ver cómo ha quedado nuestra lista. En este screenshot podemos ver el resultado de la lista por defecto (con el parámetro de ancho al 100%)

Un poco soso ¿no? Vamos a ver cómo queda poniendo un poco de CSS (spoiler ¿no será este el estilo de la nueva web de Wondermochi? Tal veeeez ( ͡° ͜ʖ ͡°)

¡Mucho mejor! Y aquí se termina la parte fácil de cómo crear un índice de contenidos automático con plugin… Ah, ¿estabas esperando un tutorial sobre cómo poner estilo personalizado a este plugin? Deja tu comentario abajo pidiéndolo y prepararé una guía.

Crear una tabla de contenidos automáticamente en WordPress SIN PLUGINS

Antes de empezar con este tema, la documentación oficial de WordPress me obliga a advertirte de que esta personalización se considera de funcionamiento, por lo tanto hay que almacenarla en un plugin, y no en el tema. Esto tiene sentido, ya que son los plugins los que encargan de añadir funcionalidades y los tema de añadir estilo. En la práctica, todos los tutoriales que tú y que nosotros consultamos te dicen que tienes que poner el código PHP en el archivo functions.php del tema hijo activo.

En este tutorial vamos a seguir la guía rápida del común de los mortales y lo vamos a poner en el functions.php, por dos razones principales: primero, el código es simple y ligero; segundo, explicar cómo crear un plugin haría que el post fuera más interminable de lo que ya es. Pero como somos buena gente, os recomendamos este post sobre la creación de plugins personalizados para este tipo de cosas, the right way.

Dicho esto, vamos al turrón.

Creando la función de javascript

En el codepen de abajo he dejado la función que será ejecutada en nuestro WordPress. Esta función cumple los siguientes requisitos:

• Buscar todos los títulos (de H1 a H6) en un contexto (el post)
• Añadirles a todos un ID único basado en su orden numérico
• Generar una lista con esos títulos
• Generar enlaces en cada elemento de la lista, cuya ruta sea el ID único correspondiente
• Introducir la lista dentro de la caja del índice

Con esto, ya tenemos el mecanismo base: enlaces a diferentes alturas de la página en la posición exacta de cada título.

Mostrando la función en el footer de los post

Para hacer esto, tenemos que abrir el archivo functions.php del tema hijo activo que tengamos en nuestra web. Al final de dicho archivo, vamos al poner el siguiente código:

Vamos a explicar un poco qué es. Se trata de una función php ( auto_index() ) que estamos guardando como hook (create_index), es decir, que solo se va a ejecutar cuando sea llamada. Lo más importante que tenéis que saber es que el parámetro context de la función javascript es el div dentro del cual se van a buscar los títulos, como veis, yo tengo la clase .post-entry-content. Si no ponemos esto correctamente, la consola nos puede lanzar errores (cosa que no queremos) o generarnos una lista con títulos que no queremos.

Ahora te toca revisar qué clase tiene el contenido de tu post para usarla como contexto y sobreescribir el parámetro de la función indexContext(). Cuando tengamos esto listo, guardamos nuestro archivo functions.php y recargamos la página para comprobar que no hemos provocado un error en PHP (si, el que te saca la pantalla en blanco y no te da ni una sola pista sobre lo que pasa).

Creando un shortcode para generar la caja del formulario en la parte que queramos del post

Volvemos a nuestro functions.php y añadimos el siguiente código para crear un shortcode en nuestro tema (si, así de sencillo es):

Aquí lo importante es el código HTML dentro del return de la función. La función de javascript solo necesita un elemento HTML con la ID index-table, ahí dentro es donde va a poner los elementos de la lista. Yo he añadido un poco más de HTML, un <p> que hace de título y un <div> contenedor de todo para poder estructurar mejor mi estilo posteriormente.

Ahora solo tenemos que incluir en shortcode [ post-index ] para que se genere todo ese bloque de html en la parte que queramos del contenido. ¿Guay no? Pero todavía nos falta algo por hacer.

Llamando al hook en los post

Para llamar al hook que va a incrustar todo el mecanismo, solo tenemos que ir al archivo single.php dentro de nuestro tema hijo activo (si no existe, solo tienes que copiarlo del padre y pegarlo en la raíz del tema hijo).

Al final de este archivo, encontramos una llamada al footer de wordpress: get_footer(); solo tenemos que incluir nuestro hook justo después para que toda la magia funcione:

Ya podemos guardar los cambios, recargar la página y comprobar que no se ha roto nada. Si hemos puesto el shortcode en nuestro post, en ese mismo lugar debería aparecer la tabla de contenidos con el HTML que hemos preparado. Algo así:

Creando el estilo para nuestro índice

Ya solo nos queda generar el estilo para nuestra tabla, aunque tenemos que tener en cuenta que si hemos hecho este proceso manual es, en parte, por cuestiones de optimización y uniformidad, es decir, que debemos aprovechar al máximo el estilo que podamos heredar del post.

Teniendo esto en cuenta, solo tenemos que hacer un poco de estilo para la caja contenedora y para el título de la tabla. Éste es el SCSS que he usado para mi tabla:

Y el resultado combinado con el estilo heredado es:

Y ya tenemos nuestro índice funcionando en nuestros post, apareciendo en el lugar que queramos gracias a nuestro shortcode, con acceso al HTML para meterle iconos y clases personalizadas. De esta forma lo haces totalmente como quieras con código propio.

Si has llegado hasta aquí, más que un café te mereces una cerveza. Estás un paso más cerca de controlar todos los aspectos de tu wordpress y de no depender de plugins. Enhorabuena.

No olvides dejar tus comentarios, dudas o propuestas y te ayudaremos 🙂