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í. ;)
Contenidos
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.
Acto seguido, instala y Activa.
Una vez materializada la instalación verás que se ha generado un acceso directo dentro del menú Ajustes llamado TOC+
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.
- 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.
- 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.
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
Más opciones avanzadas
A priori no es necesario tocar nada de estos puntos.
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.
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.
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.
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?
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.
Hola, no puedo instalar ningun plugin que supuestamente son gratis porque me dice que «mejore plan» hay algun plugin para tabla de contenidos que sea gratuita u otra manera de usarlo? gracias.
Hola Rubén sospecho que tu tienes un blog en la plataforma wordpress.com y por esa razón te está diciendo «mejore el plan». Desconozco si lo que planteas es posible pero me temo que estás confundido. Espero que puedas resolver lo que tienes en mente.
Un abrazo.
Hola, tengo el plugin table of content plus instalado, y no me muestra la tabla de contenidos en la home page, pudieras darme una idea de lo que esta pasando
igual :. /
Resulta que en el Menú avanzado de TOC+ está la opción de «Incluir portada» ^~^/
Hola ¿Podrías añadirme el código necesario para crear jerarquía en la categoría?
Solo me aparece el titulo de dicha categoria pero no sus post o jerarquia.
Serias muy amable gracias
Hola, primero enhorabuena por el pedazo de post que te has currado .
Tengo una duda con la jerarquía, tengo un titulo h2 por ejemplo:2.0 lugares y quiero que en el índice, debajo de el ponga 2.1 parques, 2.2 lagos etc..esos lugares tendrían que ser h3?porque lo he probado y no me funciona aún teniendo la casilla de jerarquia activada.Gracias
Hola Diego, sospecho que eso es debido que a has configurado dos niveles de profundidad, es decir, que solo se muestran enlaces cuando detecta un H1 y un H2. En las opciones generales se puede modificar. ¡A por ello!
gracias hermano en un foto vi tambien que se hacia con puro codigos para lo que usamos blogger y cosas asi!
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.
Hola Jose, gracias por la crítica. En relación a lo que me comentas, desconozco porque puede ser. Raro es un rato.
Un abrazo.
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?
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.
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
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.
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.
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.
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
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.
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.
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.
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.
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.
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?)
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.