Como añadir una tabla de contenidos en WordPress

En este video tutorial aprenderemos como añadir una tabla de contenidos en nuestros artículos y páginas de WordPress. Esto nos ayuda a organizar mejor nuestro contenido y le ayuda a nuestros visitantes a comprender mejor nuestros artículos.

Transcripción del video

Buen día bienvenido a este nuevo video de lievanosan.com, en este video descubrirás como añadir una tabla de contenidos en tus páginas o artículos de WordPress. Tengo aquí la página con los datos de WordPress dentro de Wikipedia, como puedes observar Wikipedia coloca esta tabla de contenidos wordpress en casi todas sus páginas, de esa forma podemos saltar entre la información y ver aquel contenido que realmente nos interesa, y esto es lo que lograremos añadir a nuestra web con este video tutorial.

Vamos a entrar en primer lugar a nuestra área de administración, entramos en plugins y luego en añadir nuevo, vamos a buscar un plugin llamado Table of Contents Plus, así que lo añadimos en el buscador y presionamos enter. Como puedes observar tenemos aquí el plugin que deseamos utilizar, así que simplemente lo vamos a instalar y recuerda activarlo. Muy bien, ahora podemos ir a sus opciones para configurarlo a nuestro gusto, podemos entrar en las opciones desde aquí en settings o podemos ir hacia ajustes y damos clic en TOC+

Muy bien, en primer lugar nos consulta si deseamos mostrar el plugin después del primer encabezado o después, en la parte superior o hasta el fondo de la página, yo te recomendaría dejarlo en después del primer encabezado, de esta forma tendremos un formato similar al de la Wikipedia, como puedes observar ellos colocan la tabla de contenidos justo después del primer encabezado. Luego debemos decidir cuándo mostraremos la tabla de contenidos. Debemos comprender que la principal función de la tabla de contenidos wordpress es ayudarnos a organizar mejor el contenido de una página y permitirle al usuario seleccionar lo que desea leer, de modo que deberemos estructurar bien nuestros artículos y páginas, haciendo un correcto uso de los encabezados.

Si un artículo en particular se comprende por más de 5 encabezados por ejemplo, entonces es muy posible que el artículo sea lo suficientemente extenso como para beneficiarse de tener una tabla de contenidos wordpress, así que en mi caso lo dejaré en 5, eso quiere decir que si yo creo un artículo que tiene 5 encabezados la tabla de contenidos wordpress se añadiría automáticamente. Luego podemos definir donde deseamos mostrar la tabla de contenidos, en mi caso lo dejaré en post y en páginas, las otras opciones que yo tengo son páginas personalizadas, de modo que si tú tienes páginas o formatos de páginas personalizadas también podrás usar el plugin dentro de ellas si lo deseas.

Ahora, en la siguiente opción podemos definir que texto aparecerá en la cabecera de la tabla de contenidos, en mi caso le colocaré “Índice”. En la siguiente opción podemos permitir a los visitantes mostrar u ocultar la tabla de contenidos, si lo desmarcamos entonces esta opción no se mostraría, en caso de que lo dejemos marcado las opciones de ocultar la tabla si se mostraría y abajo podremos definir el texto de los controles, yo voy a cambiarlos hacia mostrar y ocultar.

En la siguiente opción podemos definir si deseamos que la tabla de contenidos muestre de forma visual la jerarquía de nuestros encabezados, te recomiendo que lo dejes marcado. Igualmente la siguiente opción te recomiendo que la marques para que se añadan números al inicio de los títulos, para organizar aún mejor nuestra tabla de contenidos. La siguiente opción se encuentra desmarcada por defecto, pero esta opción nos permitirá añadir un efecto de scroll cuando el usuario de clic sobre un vínculo en nuestra tabla de contenidos, en lugar de simplemente saltar hacia ese encabezado, te recomiendo que lo marques para activar el efecto. Luego tenemos las opciones de apariencia, desde aquí podemos definir el ancho y el alto de nuestra tabla de contenidos, aunque yo te recomiendo que los dejes con los valores que trae por defecto.

Luego tenemos el tamaño de la fuente, desde aquí podemos definir el tamaño de la fuente en puntos, porcentajes y ems. Yo te recomendaría usar porcentajes o ems para definir el tamaño de la fuente, ya que son medidas relativas y son mejores a la hora de visualizar la página en móviles. Y finalmente tenemos las opciones para configurar los colores de la tabla de contenidos, yo voy a usar la plantilla llamada grey, ya que es la que creo que se adapta mejor a mi web, pero tú puedes usar la que quieras y desde la opción “custom” puedes crear tu propia plantilla y definir los colores que deseas usar.

Luego tenemos algunas opciones avanzadas que podrás ver haciendo clic en este enlace, pero no son necesarias y con lo que hemos configurado nuestra tabla de contenidos trabajará muy bien, así que vamos a guardar nuestros cambios. Muy bien, ahora vamos a crear un artículo en el que usaremos la tabla de contenidos, primero vamos hacia entradas y luego en añadir nueva. Y vamos a entrar en una web llamada lorem ipsum desde donde podemos copiar texto de prueba, que simula el texto real de nuestra web, voy ahora simplemente a copiar este texto, regreso a mi web y lo pego.

Como puedes observar es un texto muy grande, voy a simular que este texto tiene varios encabezados, así que vamos primero a crear un encabezado de nivel 1, justo aquí, al inicio del artículo. Para ello solamente separaré parte de este texto, y ahora voy a sombrearlo y seleccionar desde las herramientas de edición la opción llamada título 1. De esa forma se añade una etiqueta h1 a este texto, h1 es la etiqueta HTML para los encabezados de primer nivel, si vamos hacia la vista en código de nuestro artículo podremos ver la etiqueta h1 alrededor del texto que hemos seleccionado. Esa es la forma en la que das formato a tu texto en WordPress, posiblemente tú ya sabías esto, pero deseaba indicarlo para comprendamos que es lo que está pasando y como el plugin funciona.

Muy bien, ahora lo que haremos es crear más encabezados vamos a bajar un poco y voy a colocar aquí un encabezado de nivel 2, así que voy a copiar este pequeño texto y lo voy a colocar aquí, entre estos dos párrafos, lo sombreamos y lo convertimos en un título 2. Muy bien ahora crearé 3 títulos más debajo de este párrafo, voy a crear un poco de espacio aquí y colocaré el mismo texto, recuerda que solo estamos fingiendo el texto real de la web para que puedas ver el resultado final.

Ok, a este encabezado lo convertiré en un título 3, muy bien ahora voy a partir este párrafo y en medio voy a colocar otro título 3, simplemente voy a copiar el titulo anterior y lo pego aquí, y luego crearé otro título 3 en medio de estos párrafos. Muy bien, ahora voy a copiar el título 2 que teníamos arriba y voy a colocar otro título 2 aquí, entre estos otros dos párrafos.

Ahora voy a colocar un título 3 aquí, y finalmente abriré un espacio aquí y colocaré un título 4. Muy bien, ahora voy a guardar y publicar este artículo. Y una vez nuestra nueva entrada se guarda y pública vamos a dar clic en ver entrada para visualizar como queda la tabla de contenidos. Como puedes observar tenemos aquí nuestra nueva tabla de contenidos que ha organizados de forma jerárquica el contenido de nuestro artículo, tomando como base los títulos que hemos ido creando. Esto quiere decir que tenemos que ser cuidadosos al momento de añadir nuestros encabezados, esto es un gran ejemplo del porqué es muy importante cuidar la jerarquía semántica de nuestros títulos. Ahora nuestros visitantes pueden hacer clic en cualquiera de estos títulos y serán llevados con este efecto scroll hacia el contenido que desean leer.

Muchas gracias por ver este video tutorial, espero que el video te sea de ayuda. No olvides alojar tu sitio web WordPress con nosotros, todos nuestros planes de Hosting se encuentran optimizados para WordPress, y nuestro equipo de soporte es experto en el uso de esta plataforma de modo que estaremos siempre felices de poder ayudarte con cualquier inconveniente o consulta que se te presente. Mi nombre es José Lievano y nos veremos en un próximo video tutorial de lievanosan.com

¿Quieres aprender a crear sitios web?
Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos de WordPress, HTML, CSS y mucho más.
¡REGÍSTRATE GRATIS!

También te puede interesar

10 Comments on “Como añadir una tabla de contenidos en WordPress”

  1. Buenas tardes, hace mucho que quería incorporar la tabla de contenidos en mis post. Excelente el tutorial mil gracias por la información.
    Estoy teniendo un inconveniente con la tabla de contenidos que aparece, también me toma como contenido la información de mi bio que esta al final del todo (Esta también esta con un plugin) si pudieras verlo en mi último post: http://www.2puntocero.com.co/diseno-web-responsive-compruebalo-aqui , para que entiendas lo que te digo y ver como me puedes orientar. Te lo agradecería enormemente.
    Mil gracias. Un saludo.

    1. lievanosan

      Buen día, muchas gracias por su mensaje y por ver nuestros tutoriales. He ingresado en su sitio web y he visto el inconveniente que tiene, el problema es que su área de Bio tiene su nombre y el texto: “Latest posts by Maria Alejandra Muñoz” como headlines con la etiqueta < H4 >, entonces el plugin esta tomando eso como otro headline en su contenido, y debido a eso lo esta mostrando en la tabla también, pero hay una solución, lo que debes hacer es lo siguiente:
      1 – Como puedes ver en el minuto 4:35 de este video, hay una sección de opciones avanzadas dentro del plugin, debes entrar en esas opciones.
      2 – Debido a que el área de Bio se encuentra utilizando la etiqueta headline < H4 >, únicamente debes desmarcar dentro de las opciones avanzadas del plugin > Heading levels > desmarca el Heading 4 – h4, de esa forma ya no tomará el headline del bio como parte de la tabla de contenidos.
      Debes tomar en cuenta que esto quiere decir también que ningún heading 4 será añadido en la tabla de contenidos, asi que no podrás utilizar el heading 4 en tus artículos. Esa es la solución más rápida que puedes utilizar.
      La otra opción sería modificar el plugin que añade la información Bio para que no utilice una etiqueta de heading, pero eso sería un poco más complicado y requiere que modifiques el código php de ese plugin o widget que añade la información de bio, asi que te recomiendo mucho mejor utilizar la primera solución que te he indicado.
      Espero que esto sea de ayuda 😀

  2. Hola. Lo has probado en paginas?. A mi solo me aparece en las entradas aunque tengo activadas ambas opciones. He probado en diferentes temas de wp y nada

  3. Muy buen tutorial. He instalado el plugin, pero tengo un problema con la tabla. Al hacer clic en cualquier índice, este regresa al home page. :S

    no entiendo por que.

    Como puedo hacer para que se mantenga en el post, y no regrese al inicio. ?

    Mil gracias

    1. lievanosan

      Buen día, he visitado tu sitio web, y puede ser un conflicto con plugins adicionales, si tienes una cuenta de cliente con nosotros, por favor ingresa en tu área de cliente y un agente de soporte con gusto solucionará tu inconveniente.

  4. Genial, Lievanosan como todos tus tutoriales, ya lo he hecho porque me hizo falta, gracias por tus aportes y sigue con nosotros.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *