17 Jun Cómo crear un índice de contenidos en WordPress

4 (7)

¿Alguna vez has elaborado un texto largo que necesitara de un índice o tabla de contenidos para un mejor escaneo? Yo he necesitado este tipo de texto interactivo en todo tipo de WordPress y, sin ir más lejos, en mi apartado Sobre mí de mi primera versión web en WordPress.com:

Clicka en la imagen para ver este índice

¿Quieres saber cómo hacer un índice así para versiones de WordPress.com? A continuación pongo en práctica contigo, paso a paso, el método que yo utilizo para insertar índices de contenidos en todo tipo de WordPress, ¡es muy útil y sirve tanto en posts como en páginas!

¿Para qué sirve un índice de contenidos en WordPress?

Los índices de contenidos son muy atractivos para tus lectores porque en un único lugar y de forma ordenada presentas todo el contenido de tu post, favoreciendo una lectura más accesible.

Los índices de contenidos, además, optimizan tus contenidos : mejora tu posicionamiento orgánico (o SEO) porque cada click en tu índice es interacción del usuario con tu web, de forma parecida a una llamada a la acción (o CTA). Con ello tu marketing de contenidos se potencia y las visitas a tu web pasan a ser de mayor calidad; esto, sin duda, te beneficia.

El índice de contenidos que te propongo funciona para todo tipo de webs, también en WordPress.com y WordPress.org, puesto que NO necesita de ningún plugin. Se trata de estructurar los puntos del índice mediante código HTML, utilizando el anchor text.

¿Cómo funciona el anchor text?

Anchor significa ancla⚓ en inglés, de manera que el anchor text es el texto ancla⚓. Lo que introducimos en el texto mediante código HTML sigue la lógica de la metáfora del ancla: le decimos a la web que relacione cada punto del índice con su apartado del texto correspondiente:

Cada punto del índice lleva a su apartado del post: ejemplo punto tres

Esto convierte el texto en un texto interactivo, permitiendo minimizar el scroll a cambio de mayor usabilidad: se puede acceder con un solo click a cualquier apartado.

Copia y pega este código para crear un anchor text en tu WordPress

Para introducir en tu post el código HTML que te ofreceré a continuación en primer lugar debes irte a la pestaña HTML de tu post, entonces verás tu post (tu índice -que todavía no funciona-, tus títulos H2 y tu contenido de valor) de la siguiente manera:

A continuación haremos que tu índice sirva para interactuar con el contenido del post. En este pequeño tutorial construiremos el anchor text siempre con la URL absoluta, es decir, la URL completa que aparece en el navegador, de manera que:

Fíjate en las líneas de código, guardan relación entre sí. A continuación retomo el ejemplo del punto tres y te las ofrezco marcadas en azul, con ellas verás el patrón de las anclas⚓ de los puntos de este índice ficticio hacia sus apartados.

Este código es para que lo adaptes a tu WordPress; desliza ↔ sobre la zona gris si no ves las líneas completas:

El título de tu índice:
<a href="https://tuweb.com/tu-post/#punto-uno">1. Título del punto uno</a>
<a href="https://tuweb.com/tu-post/#punto-dos">2. Título del punto dos</a>
<a href="https://tuweb.com/tu-post/#punto-tres">3. Título del punto tres</a>
<h2><a name="punto-uno"></a>1. Título del punto uno</h2>
Contenido de Valor.
<h2><a name="punto-dos"></a>2. Título del punto dos</h2>
Contenido de Valor.
<h2><a name="punto-tres"></a>3. Título del punto tres</h2>
Contenido de Valor.

Además, te propongo usar el anchor text en ambas direcciones, tal y como hice en mi antiguo apartado Sobre mí: también para regresar al índice de contenidos desde el final de cada apartado.

Fíjate de nuevo en las líneas de código marcadas en azul, es anchor text a la inversa, de los apartados al índice; desliza ↔ sobre la zona gris si no ves las líneas completas:

<a name="titulo-indice"></a>El título de tu índice:
<a href="https://tuweb.com/tu-post/#punto-uno">1. Título del punto uno</a>
<a href="https://tuweb.com/tu-post/#punto-dos">2. Título del punto dos</a>
<a href="https://tuweb.com/tu-post/#punto-tres">3. Título del punto tres</a>
<h2><a name="punto-uno"></a>1. Título del punto uno</h2>
Contenido de Valor.
<a href="https://tuweb.com/tu-post/#titulo-indice">Vuelve al índice</a>
<h2><a name="punto-dos"></a>2. Título del punto dos</h2>
Contenido de Valor.
<a href="https://tuweb.com/tu-post/#titulo-indice">Vuelve al índice</a>
<h2><a name="punto-tres"></a>3. Título del punto tres</h2>
Contenido de Valor.
<a href="https://tuweb.com/tu-post/#titulo-indice">Vuelve al índice</a>

Finalmente, aquí te dejo este banco de emojis por si quieres decorar el índice con símbolos relacionados a la temática, tal y como yo hice en mi apartado Sobre mí; ¡sólo copia y pega!