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.

https://vimeo.com/130317898

Transcripción del video

Buen día bienvenido a este nuevo video de josel63.sg-host.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 josel63.sg-host.com