Cómo Insertar una Tabla de Contenidos en WordPress SIN usar Plugins

Las tablas de contenidos son muy eficientes en una página web; te ayudan a localizar con mayor agilidad un contenido en específico. Ayudan al usuario a navegar mejor entre el contenido de tu artículo, y también suelen gustar bastante a google.

¿Cómo insertar una de estas tablas de contenido (TOC) en WordPress SIN usar plugins?

En el presente artículo aprenderás a hacerlo de forma muy detallada y sencilla de implementar. Simplemente, debes prestar atención al paso a paso.

Antes de nada, accedo al WP-Admin de tu página web.

Consideraciones generales y códigos a copiar

Para poder llevar a cabo este paso a paso, tendrás en cuenta las siguientes líneas:

Código HTML para indicar que corresponde a uno de los elementos del TOC:

<h2 id="ancla">titulo cualquiera</h2>

La URL para introducir en cada parte del TOC y que te lleve al apartado correspondiente:

tudominio.com/#ancla

Primero, añade el texto de cada encabezado que quieras que forme parte de la tabla de contenidos

Abre una entrada, una página nueva, o lo que quieras, en tu editor de WordPress.

Crea un nuevo párrafo, y pulsa el icono + (el que está a la derecha), para que añadas un nuevo bloque HTML.

• Dentro del menú, teclea “HTML” para obtener el resultado “HTML personalizado” y pulsa encima de él.

Añadir el encabezado a través de dicho código HTML en vez de texto plano, nos permite personalizarlo. Así conseguimos que, además de tener el mismo efecto y verse igual que cualquier encabezado, también sirva para linkearlo en una talba de contenidos manual (de eso va el tutorial) 😉.

Copia y pega en el espacio HTML esta línea de código:

<h2 id="ancla">titulo</h2>

Dicha línea de código, está compuesta por varios elementos, de la siguiente forma:

> Se abre el H2 = Puedes cambiar H2, por H3, o el que quieras. Normalmente, es un sub-título (que significa un apartado) del artículo.

id=»ancla» = Puedes cambiar la palabra «Ancla», por el sufijo que quieres que se añada a la url del artículo. Servirá para acceder directamente a esta sección.

título = Introducirás, como tal, el texto que quieres que tenga ese H2/3, según lo que haya seleccionado.

Se cierra el H2 = Se cierra el H2 (o el que hayas puesto), y el código en general.

Una vez añadida la línea de código todo, le puedes dar a «Vista Previa» para asegurarte que todo se ve correctamente. Visualmente, debería verse igual que un encabezado normal.

Importante: Según el contenido del artículo, y los H2/3 que quieras poner, y enlazar en la tabla de contenidos; podrás replicar este paso a paso y añadir varios H2/3, «con truco».

Ejemplo Práctico

En la siguiente imagen, podrás ver que yo añadí un H2 con título de «Parte 1» y con ID de «parte1».

PD: Es importante que el id esté todo junto y no haya separaciones, si quieres poner separaciones, pon un «-«.

Seguidamente del Encabezado (H2), añadí texto en modo párrafo, con enlaces e imágenes. Lo que es normal.

• Luego, en el ejemplo, yo seguí añadiendo otros H2 + algún párrafo (intercalados según necesidad), para hacer un ejemplo más completo.

Segunda parte: Crear la tabla de contenidos con el enlazado para que funcione

• Vamos arriba de todo del artículo, justo debajo del H1, y escribimos, en modo párrafo normal, «Tabla de Contenidos» o el nombre que quieras darle a la misma.

• Debajo de «Tabla de Contenidos», puedes añadir tantos puntos (= partes) que quieres que tenga dicha tabla de contenidos (TOC).

• Aquí puedes verlo con el ejemplo que hice. Básicamente, escribo un texto «ancla», al cual, luego le añadiré el enlace de la URL del Artículo + el ID del encabezado, para que nos desplace hasta el H2/3/… en cuestión.

Armada ya la estructura en código de tu tabla de contenidos, lo que faltaría sería hacerla funcionar. Para lograrlo se deben dar estos pasos:

Ejemplo Práctico

• Copia la URL del artículo que estás modificando, en este caso de ejemplo sería así (ya que es un borrador).

• Ahora, pegas la URL en el primer apartado del título de contenidos. Pero no lo guardes.

• Justo después de esta URL, añades un slash (/) seguido de un hastag (#) y seguido, escribes el ID que pusiste al H2/3/etc. dónde quieres que lleve dicha url. Ahora sí, guarda la URL, pulsando intro.

• Repite este procedimiento con todas las partes que quieres que tenga la tabla de contenidos.
• Teniendo todo listo, procedes a actualizar la entrada.

• Luego, asegúrate de borrar el caché de tu web (si usas plugin de caché, que deberías).

Listo, ya puedes ir a la entrada en cuestión, y si todo lo has hecho correctamente, la tabla de contenidos ya estará funcionando.

Cuando pulses encima de cada una de las partes, te llevará al H2/3/etc. en cuestión, según hayas configurado.

Las tablas de contenido permitirán a tus visitantes desplazarse de una manera más cómoda, ordenada y eficiente, dentro de tus páginas y demás publicaciones en WordPress, lo que repercutiría a una mejor experiencia en página.

Videotutorial de cómo incrustar una tabla de contenidos en WordPress sin plugins en 2023

Con el siguiente videotutorial, puedes complementar la información de la que te ha hablado el presente artículo, si hay algo que no has entendido ¡Este vídeo te ayudará!.

ENTRADAS RELACIONADAS OTROS ARTÍCULOS DE LA WEB