Table of Contents Plus es un plugin para crear tablas de contenido en WordPress


Última modificación: 28 julio 2018

Hoy vengo a enseñarte una herramienta muy práctica y útil, Table of Contents Plus (TOC+), un plugin para crear un indice en WordPress con tus propios contenidos o también, una tabla de contenidos WordPress automáticamente en tus artículos o páginas mediante las etiquetas HTML de los encabezados, lo que viene a ser, los títulos H1, H2, H3, H4, H5 y H6.

Si te fijas en mi sitio en todos los artículos tengo una tabla de contenidos que te permite enlazar directamente con cada sección del artículo para que vayas directo a lo que te interesa, ni más ni menos.

Bueno, pues esta herramienta tan chula la creó Mike, un desarrollador de Camberra que se inspiró en las tablas de contenidos de la wikipedia y ha sido todo un éxito desde su lanzamiento. Para que luego digamos que está todo inventado, ya.

Pues nada, hoy vamos a lo práctico, vamos a ver como se instala y configura este plugin que para eso estamos aquí. 😉

Instalar Table of Contents Plus (TOC+)

Como siempre en estos casos, la instalación del plugin para crear un indice en WordPress sigue el mismo camino que todos, Añadir nuevo plugin, escribir el nombre y darle a buscar.

Pasos para instalar Table of Contents Plus

Acto seguido, instala y Activa.

Instalación y activación de Tables of Content Plus

Una vez materializada la instalación verás que se ha generado un acceso directo dentro del menú Ajustes llamado TOC+

Acceso directo a Table of Contents Plus desde el menu de WordPress

Vamos a configurar Table of Contents Plus (TOC+)

Pestaña de ajustes principales

Dentro de la pestaña ajustes principales tienes distintas opciones de configuración.

Ajustes principales de configuracion de Table of Contents Plus

  • Posición. Desde esta opción controlas donde quieres que se coloque tu índice de contenidos. Puedes jugar con tres variantes. Yo soy partidario de dejar configurada la opción por defecto, “Antes del primer titular”. El resultado a mi es el que más me gusta.
  • Mostrar cuando. Con esta opción determinas cuando quieres que aparezca la tabla de índices. Viene a ser algo así como: “Mira, a menos que veas que hay 4 encabezados -da igual si es de tipo h1, h2, h3, h4… el caso es que la suma sea 4- o más no muestres una tabla de contenidos”.
  • Auto insertar para los siguientes tipos de contenidos. Esta opción es la que te genera automáticamente los índices en tus contenidos. Tu puedes decidir donde quieres que sea así.
    • En un blog donde publicas contenido de forma recurrente, pues es una opción muy buena tenerla en los post.
    • En el caso de las páginas, a menos que lo tengas muy claro, es más apropiado generar manualmente la tabla mediante un shortcode, un código corto vaya. De esa forma controlas completamente donde quieres colocarla e incluso, con las opciones avanzadas puedes determinar que se muestra y que no. Muy versátil esto.
  • Texto del encabezado. Con estas opciones controlas el texto que se mostrará en el título de tu tabla de contenidos y el texto para cambiar la visibilidad de la misma. También puedes determinar si quieres que la tabla se muestre siempre al cargar tus artículos o ésta permanezca compacta.

Ocultar y mostrar la tabla de contenidos (TOC+)

  • Mostrar jerarquía. Con esta opción indicas si quieres que exista una jerarquía en base a los distintos encabezados que contenga tu artículo. Los h6 estarán por debajo de los h5 con un mayor margen interior y así sucesivamente. A mi esta opción me gusta activarla.
  • Enumerar la lista de elementos. Si quieres que los elementos de tu tabla de contenidos tengan un número ordinal a su izquierda. A mi personalmente me gusta esta opción.

Con estas opciones defines un poco el comportamiento de tu tabla, ahora vamos con la estética.

Opciones de configuración de la apariencia de Table of Contents Plus (TOC+)

Apariencia de tu tabla de contenidos

  • Ancho. Elige aquí la anchura que ocupará tu tabla de contenidos. A mi personalmente me gusta la opción “definida por el usuario” al 95%, lo que significa que la tabla siempre tendrá un ancho de página del 95% de la anchura total. Aquí puedes jugar y ponerlo a tu gusto.
  • Envoltura. Sinceramente no se que es esta opción. No se si es algún tipo de borde o que, pero con esa traducción no me atrevo a pronunciarme. La dejo con el valor “ninguno” y listo.
  • Tamaño de fuente. Con esta opción se determina el tamaño de la fuente. Un pelín más pequeña que la fuente del texto suele quedar bien.
  • Presentación. Seleccionando una de estas opciones determinas la estética que tendrá tu tabla. Yo opto por la opción en Blanco, una sencilla que no desentona con la estética de mi sitio. Aquí puedes jugar con las opciones que tienes predefinidas o hilar más fino con la opción personalizar.

Con todas estas opciones configuradas ya puedes irte a un articulo donde sepas que tienes más de 4 encabezados y ver el resultado.

Si lo que encuentras te gusta, perfecto no es necesario que toques más. En caso contrario, a seguir haciendo cambios hasta que la cosa te guste. No tiene más.

Las opciones avanzadas

De estas opciones a priori no hay que tocar nada.

Si acaso, interpreto que a lo mejor quieres modificar la que hace referencia al CSS para ver si con la propia estética de tu tema el resultado visual de la tabla de contenidos gana puntos, y la que hace referencia a los niveles de titulares, por si no quisieras mostrar por alguna razón algún encabezado. Se me ocurre que los de tipo H5 y H6 los podrías querer omitir.

Por otro lado, si sabes lo que son los estilos de viñeta en un tema de WordPress (cosa que yo aún no) puedes tratar de activarlo e igualmente ver si ganas en estética.

El resto los puedes dejar como están.

  • Minúsculas.
  • Usar guiones
  • Incluir portada
  • Excluir archivo CSS
  • Mantener los estilos de viñera del tema
  • Niveles de titulares
  • Excluir titulares

Opciones de configuración avanzadas de Table of Contents Plus

Más opciones avanzadas

A priori no es necesario tocar nada de estos puntos.

Más opciones de configuración avanzadas de Table of Contents Plus

La pestaña del mapa del sitio

Esta es una funcionalidad extra que trae el plugin de serie y es que puedes crearte mapas de tu sitio de las páginas o de las categorías mediante el shortcode: “sitemap”.

Esta opción nunca la he probado y la verdad es que seguro que somos unos cuantos.

Si por alguna razón en alguna parte de tu sitio te interesa tener un listado de items de páginas o categorías tal cual aquí se indica, pues con este plugin lo tienes resuelto.

Parece que se puede hilar bastante fino. Lo puedes ver en las opciones avanzadas.

Configuración del mapa del sitio de Table of Contents Plus (TOC+)

El uso avanzado de los mapas del sitio

Con estas opciones puedes tunear el código corto para mostrar realmente lo que te interesa de un listado de páginas o de categorías. Las posibilidades son interesantes. Ahora no te puedo dar un ejemplo concreto pero vaya, que es cuestión de darle a la imaginación y probar.

Uso avanzado de los mapas del sitio de Table of Contents Plus

Otra idea de uso para Table of Content Plus (TOC+)

Te cuento un uso paralelo de este plugin para darte otra idea adicional. En la Academia estamos traduciendo la documentación de los temas de Genesis para facilitar a los alumnos la tarea de personalizar sus blogs.

Pues bien, estamos empleando este plugin para que nos genere un completo índice de contenidos para que puedan navegar por toda la documentación del tema. Francamente útil.

Caso práctico de uso de Table of Contents Plus. Cear un indice de contenidos de la documentación de un tema de WordPress

Vídeo: crear un índice en WordPress

En conclusión

Como te decía al principio Table of Contents Plus es un plugin super útil y práctico que lo tienes disponible en castellano. Cero barreras para que decidas emplearlo.

Fíjate que su uso principal es muy claro y una vez configurado al gusto, tanto el comportamiento para generar tus índices de contenidos así como la estética, no tienes que preocuparte de nada más, más que de escribir.

Si tu le metes caña a los contenidos y el día de mañana tienes oportunidad de contar con la ayuda de un diseñador web, puedes crear tablas tan chulas como la que tiene AntonioG en su blog.

Estate atento a lo logrado de la estética de sus tablas de indices y no te digo nada de sus contenidos en sí, va todo muy de la mano, ¿a que si?

Ejemplo práctico de indice de contenidos de AntonioG con table of contents plus (toc+)

Y si el día de mañana te creas un curso online para tus alumnos y decides añadirle a éste material extra, como la documentación de unos temas de WordPress, pues ya sabes como ponerle orden al asunto, otra idea más.

Y tú, ¿cómo creas tus índices de contenidos? ¿Empleas este plugin? ¿Empleas otro? ¿Prefieres hacerlo a mano? ¿No te preocupa en absoluto este asunto?

Si te animas, cuéntamelo en los comentario o hasta el próximo artículo.

Actualización Julio 2018. Alternativa a Table of Content Plus – Fixed TOC + Vídeo

A raíz del comentario de Toni Herrera de emarketersocial.info considero apropiado actualizar este artículo con una alternativa a Table of content plus que puede ser interesante para muchas personas.

Es una alternativa que he descubierto gracias a Sergio de Malagaware.com.

Toni plantea crear una tabla de contenidos que se fije automáticamente en la barra lateral del blog cuando el artículo contiene más de 600 palabras y a medida que te desplazas hacia abajo por el contenido, es decir, cuando tienes un artículo entre manos muy largo.

Esto que plantea Toni tiene solución con un plugin que puedes adquirir en Codecanyon.net llamado Fixed TOC.

Coloquialmente hablando podemos decir que se trata de una tabla de contenidos “deslizante”.

Tiene un coste de 20 dólares, lo que considero un importe bastante económico si consideras que esta funcionalidad es relevante para tu sitio web.

Aprovecho que Sergio ha hecho un vídeo que te dejo aquí publicado.


16 comentarios en “Table of Contents Plus es un plugin para crear tablas de contenido en WordPress”

  1. Hola Paul,

    Enhorabuena por el post.
    A mi TOC+ me funciona en todos los posts excepto en uno de ellos. Al poner el shortcode y luego inspeccionar la página en lugar de aparecer las tabla de contenidos me aparece . ¿Te suena por donde pueden ir los tiros?

    Gracias por adelantado.

  2. Hola Paul,

    Lo primero enhorabuena por el post. Pero me estoy rompiendo la cabeza desde hace días con este plugin. El problema que tengo es que en los posts cuando los pongo en modo “borrador”, al ver la vista previa si que se visualiza el índice de contenidos pero al publicar el post desaparece.
    He comprobado todo lo que se me ha ocurrido (que el número de h’s sea el mínimo, que no haya el codigo no toc por el post, he revisado concienzudamente los ajustes del plugin…) pero nada.
    He pensado que pudiera ser por una incompatibilidad con algun plugin instalado anteriormente pero nada, no doy con la tecla, he desactivado el plugin de caché, el itheme security…y nada. ¿Alguna idea?

    1. Hola Victor, te oriento un poco.

      Para tratar de localizar el problema haz esto.
      1. Desactiva todos los plugins de tu sitio menos Table of Contents Plus.
      2. Verifica en los post si te aparece la tabla de contenidos.

      De esa forma puede determinar si estás ante un problema con un conflicto de plugins o es otra cosa lo que impide que funcione.

      Si no quieres hacer la prueba en el sitio principal, create un clon en 5 minutos con el plugin WP Staging y con la ayuda de este tutorial https://www.administrandowp.com/wp-staging-crea-laboratorio-pruebas-wordpress/

      Así no dejas la web fuera de juego con tus pruebas. Es como lo haría yo.

      Un abrazo y a por ello.

  3. Hola Paul.
    En primer lugar felicitarte por el magnífico artículo y por la manera que tienes que lo que puede ser complicado parezca fácil.
    Bueno ahora voy al grano. Aunque llevo tiempo trabajando con WordPress, más de 5 años, no soy programador ni se de programación. Tengo 60 años y ya se me hace difícil retener cosas en mi memoria. Resulta que utilizo del plugin desde hace un par de años pero me gustaría saber si sería posible el colocar el indice del contenido de los post en la barra lateral, lo he visto en varios blog y me parece magnífico ya que facilita mucho al visitante es moverse por el artículo, especialmente cuando se trata de artículos de más de 600 palabras.
    He visto en un comentario de JuanM que pregunta algo similar o posiblemente lo mismo pero, como te he dicho, no se código por lo que sé como hacer eso del shortcode. Sería posible que hiciera un tutorial sobre este tema, te estaría muy agradecido pues llevo ya tiempo queriendo hacer esto.
    Te comenta también que hasta hace poco mi sitio web estaba desarrollado con Genesis pero actualmente lo estoy realizando con Generatepress y Elementor. Todavia estoy realizando cambios en el sitio web.
    Muchas gracias por compartir tu conocimiento y experiencia con todos y recibe un cordial saludo

    Toni Herrera

    1. Hola Toni, gracias por esa crítica constructiva.

      Coincido contigo en que tiene su razón de ser el que la tabla de contenidos permanezca siempre visible en artículos largos y se comporte como describes. Imagino que mediante programación se puede lograr el resultado que deseas con este plugin pero es algo que a mi se me escapa.

      Yo particularmente dejaré la tabla de contenidos fija pero te invito a que le eches un vistazo a este video https://www.youtube.com/watch?v=XkofqGe1x1o&t donde Sergio te muestra un plugin alternativo a Table of Content Plus que se comporta tal cual es tu deseo. Tras ello, valora si crees conveniente invertir en el.

      Respecto al cambio hacia GeneratePress + Elementor viniendo de Genesis pues me parece acertado sobre todo si tu fuerte no es la programación, cosa que interpreto que no es de tus palabras. Estoy seguro de que has ganado en control, autonomía y mejores acabados sin tener que lidiar con lineas de código. ¿Me equivoco?

      Otro combo que está muy bien es Astra + Beaver Builder, que es lo que en estos momentos recomiendo como primera opción a pesar de que la inversión es un poquito mayor. En cualquier caso ambos combos son muy potentes y prácticamente están a la par en prestaciones.

      Otro saludo para ti Toni. Pásate a comentar cuando gustes.

      Un abrazo.

  4. Buenas. Lo he probado y a priori funciona genial, excepto que para móviles siempre sale muy estrecho y queda muy feo. ¿Sabes por qué? De todas formas muchas gracias. Muy útil.

    1. Hola Alex, a mi me funciona bien. Puedes comprobarlo tu mismo. Puede ser que sea cosa del tema que esté afectando de alguna forma.

      No he investigado otra alternativa para crear este indice de contenidos. Quizás puedas investigar otras opciones y nos cuentas como te han resultado.

      Un abrazo.

      1. Hola Paul, al final era tema de cache. Limpiandola ya se venía bien. Luego me salio otro problema en la versión AMP. Me daba un error al poner la tabla de contenidos y el KK Star Rating para las estrellitas. Cuando las uso juntas en la versión AMO me añade un javascript del KK Star Rating que es invalido y google canta el error. No quiero borrar el plugin por no perder las puntuaciones, por lo que he pensado en desactivar la versión AMP. Pero creo que como es tema de google fijo que ayuda a posicionar. Todo quebraderos de cabeza, pero ahí seguiremos.
        Pero gracias por tu blog, me está ayudando mucho. saludos

        1. Hola ALexRC, pues por tu descripción nunca me hubiese imaginado que era la cache. Conocer el contexto tecnológico es fundamental para hacer un diagnóstico preciso y muchas veces con un comentario es bastante complicado acertar.

          En cualquier caso, me alegro de que por fin lo tengas resuelto y de que mi blog te esté resultando de ayuda. Pásate a comentar cuando gustes.

          Un abrazo.

  5. Buen post. Tengo un problema y me gustaría saber si me puedes ayudar. Cuándo uso el plugin en una página el título de la tabla, supongamos que pone “Índice del artículo”, se pone correctamente. Pero al usar el puglin en un post la primera letra del título, en este caso “I”, se pone mayúscula muy grande en negro a la izquierda de los títulos dejando “ndice del artículo” solo en la parte superior. Hay forma de arreglar eso? Por lo que estuve mirando es cosa de la tabla y no del tema o letra etc. Y como digo, solo me ocurre esto en los post en las páginas se ve perfectamente. Gracias.

    1. Hola Christian pues no entiendo lo que te pasa a pesar de que intentas explicarte. Es posible que sea algo relacionado con el CSS de tu sitio pero esto es jugar a ser adivino. Hay que investigarlo y ver que puede ser.

      ¿Has pensado en cambiar el titulo? ¿”Tabla de contenidos” no te encaja? Lo mismo con una letra “T” no te sucede lo que describes.

      Un abrazo.

  6. Hola Paul.

    Súper tu post. Si, también me va mal lo de que no se haya actualizado en más de 2 años, lo que no es bueno.
    Me gustaría hacerte una pregunta: no quiero que salga debajo del titular, sino en una zona que a mi me parezca bien. ¿Cómo puedo ponerlo en un lugar determinado?

    Saludos.

    1. Hola JuanM, para conseguir lo que tu deseas tienes que emplear un código corto o “shortcode”. La idea que sospecho en tu caso te puede venir bien es no configures el plugin como explico en el post y mediante el shortcode lo pegues en la parte del contenido que a ti te venga bien.

      Un abrazote y pasa un buen día.

  7. Es un plugin muy interesante pero le veo dos pegas:
    – no se ha actualizado en los dos últimos años
    – no se visualiza en páginas AMP (¿conoces alguno que lo haga?)

    1. Hola Ramón, te cuento como lo veo yo.

      Estás en lo cierto en que lleva más de 2 años sin actualizarse y eso pues es para preocuparse.

      A mi me tranquiliza saber que de momento no se le conoce vulnerabilidad alguna al plugin.

      https://wpvulndb.com/plugins?get=T

      Respecto al tema AMP pues la verdad es que no estoy muy puesto, es decir, la mayoría de mi trafico viene por PC y no por móvil por lo que no estoy muy al quite con el tema AMP. No sabría decirte una alternativa que cree un indice de contenidos y se pueda visualizar con AMP.

      En la versión móvil de mi tema si que se muestra el contenido de la tabla de contenidos y la navegabilidad en mi opinión es correcta.

      Tendrás que seguir investigando alternativas.

      Gracias Ramón por pasarte y darme tu punto de vista.

      Un fuerte abrazo.

Dejar un comentario

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

Responsable » Paul Benítez Icatt
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que me facilitas estarán ubicados en los servidores de SiteGround (proveedor de hosting de AdministrandoWP) dentro de la UE. Ver política de privacidad de SiteGround. (https://www.siteground.es/privacidad.htm).
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.