Crear índices de contenido

Voy a explicar cómo crear índices de contenido para WordPress y en HTML básico. Es cierto que hay complementos que se encargan de gestionarlos automáticamente pero no siempre nos ofrecen el mejor resultado, a veces porque para 3 encabezados que va a tener la entrada no es necesario, o porque para la mayoría de post que hacemos no lo necesitamos. He visto algunos complementos que crean los índices pero al pulsar sobre ellos usando lector de pantalla se mantienen estáticos en el sitio. Si usamos mucho los índices tendríamos que buscar un complemento que cumpla con nuestras necesidades o mirar dentro de los ajustes del plugin a ver si es que hay alguna opción sin activar para que sean accesibles.

1. Crear índices de contenido a mano en WordPress
2. Bloque Tabla de Contenidos
3. Crear índice de contenido en HTML

Crear índices de contenido a mano en WordPress

Para empezar tenemos que localizar los bloques que queramos tomar como referencia, (normalmente serán encabezados) para que al pulsar sobre los enlaces nos lleve a ellos. Una vez localizado el bloque sobre el que vayamos a trabajar activamos el modo foco para que se seleccione. Si no tenemos los ajustes del bloque abiertos buscamos en la parte inferior un botón llamado abrir los ajustes del documento. Con el modo foco desactivado navegamos hasta avanzado (podemos encontrarlo tanto por encabezados o botones).

Una vez desplegamos el ajuste de avanzado nos encontraremos un cuadro de edición llamado Anclaje HTML. Aquí nos dice que introduzcamos una o dos palabras sin espacios. Recomiendo poner algún término que resuma el texto de esa sección a la que queremos hacer referencia, escribirlas en minúsculas y separar las palabras con guiones. Este proceso hay que repetirlo por cada bloque que queramos añadir al índice. Recomiendo apuntar en un documento el texto del bloque y la referencia que hemos añadido para no tener que ir luego buscándolas bloque a bloque.

Una vez tengamos todos los anclajes creados llega el momento de crear el índice de contenidos. Tendremos que insertarlo entre los párrafos de texto iniciales y antes de que empiecen los encabezados que dividirán nuestra entrada. Podemos crear una lista o un párrafo en el que añadir todos los enlaces. Si lo hacemos en un párrafo tendríamos que hacer un shift + intro, en HTML sería un <br>, para no crear un párrafo por línea. Aunque me gusta menos organizar los índices en una lista por el exceso de información que da el lector de pantalla entre inicio y fin de lista, las viñetas… Entiendo que visualmente y a la hora de navegar por distintos tipos de elementos es mejor hacerlo así.

Situados en el bloque donde crear el índice podemos añadir todas las líneas de texto y poner todos los enlaces a continuación, o escribir el texto y acto seguido insertar el enlace repitiendo el proceso en cada línea. Personalmente prefiero escribir todo el texto y luego crear los enlaces.

Para añadir los enlaces seleccionamos el texto como en cualquier otro documento y pulsamos Control + K para insertar la ruta del enlace. En este caso es muy sencillo, la ruta será «#palabra-clave» sin las comillas. Una vez escrito pulsaremos intro para que quede añadido el enlace. También podemos poner la ruta absoluta de la página, el enlace sería «http://entradadeejemplo.com/#palabra-clave». Este proceso hay que repetirlo tantas veces como referencias de texto queramos enlazar en nuestro índice.

Bloque Tabla de Contenidos

Redactando otra entrada en la que necesitaba crear una tabla me encontré con un nuevo bloque llamado Tabla de contenidos (va a la ayuda oficial de WordPress). Lo han añadido hace poco porque antes no estaba y tenía que hacerlos a mano. Este bloque nos evita la parte de añadir los enlaces a mano. Lo positivo es que si queremos incluir todos los encabezados con añadir un ancla a cada encabezado sería más que suficiente, además si cambiamos el texto del encabezado nos cambia automáticamente el texto del enlace de la tabla de contenidos. Aconsejo que añadáis los encabezados y anclas que queráis vosotros, porque si no las creará automáticamente con todo el texto del encabezado y puede crearos un ancla con una URL excesivamente larga. El último paso sería insertar el bloque de tabla de contenidos al final de la redacción de la entrada.

Este bloque no recomiendo usarlo cuando en los propios encabezados haya un enlace a otro sitio. Ya que estaríamos duplicando el texto con dos enlaces idénticos. Uno saltaría a la referencia de texto y el siguiente abriría el propio enlace. Esto puede crear confusión si se navega por la lista de enlaces con lector de pantalla. Aunque podría editarse posteriormente en HTML, yo recomiendo hacerlo a mano en estos casos.

Crear índice de contenido en HTML

En este caso tendríamos que añadir la id de referencia al párrafo o encabezado. Para ello voy a usar de ejemplo el encabezado que da nombre a esta sección. El código sería:

<h2 id="indice-html">Crear índice de contenido en HTML</h2>

Lo que he echo a sido poner la id de referencia dentro del h2 de apertura.
Ahora, para añadir los enlaces nos situamos en la zona superior, antes de que empiecen los encabezados. Podemos meterlos en una lista ordenada o desordenada. La primera parte hace referencia a la URL y justo después introduciremos el texto que tendrá el enlace que veremos en pantalla. A continuación tenéis el ejemplo:

<a href="#indice-html">Índice de contenidos en HTML</a>

También podemos añadir la ruta absoluta por si queremos enlazarla desde otra página

<a href="http://paginadeejemplo.com/#indice-html">Índice de contenidos en HTML</a>

En las aplicaciones que tienen un menú para insertar enlaces también se puede usar este método. En aplicaciones ofimáticas hay menús para crear índices de contenidos siguiendo los pasos del propio asistente.