Tabla de contenidos, cómo añadirla a WordPress sin plugins

top feature image

Tabla de contenidos, cómo añadirla a WordPress sin plugins

Valora este artículo:
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (4 votos, promedio: 5,00 de 5)
Cargando…

Una vez más aquí. En esta ocasión vengo a responder una pregunta que me han echo el hace unos días. Me preguntaban qué plugin utilizo en esta web para mostrar la tabla de contenidos dentro de cada post. Bueno, pues mi respuesta a aquella pregunta fue que no uso ninguno. Lo que hago es utilizar un archivo JavaScript y un poco de CSS3 para darle formato.

Por si alguien no lo sabe, tener un tabla de contenidos en nuestro WordPress va a ayudar a la navegación del usuario y además es bueno para el SEO. En fin, en las siguientes líneas vamos a ver cómo crear una tabla de contenidos en WordPress sin usar plugins y que además se va a generar e insertar de manera automática dentro de cada artículo.

Añadir una tabla de contenidos sin plugins a WordPress

Para poder realizar esto, utilizo el código que he subido al repositorio de GitHub tabla de Contenidos, que está listo y preparado para trabajar con WordPress.

Archivo JavaScript

Lo primero que debemos conocer es la estructura de nuestros artículos. Los títulos de nuestro contenido tendrán la etiqueta HTML h2, los subtítulos con h3, y si queremos otro nivel más lo debemos utilizar con h4.

Dependiendo del nivel de detalle que tenemos en nuestro contenido, h2, h3, h4, y lo que queremos mostrar en nuestra tabla, podemos utilizar el siguiente script para tres niveles.

 

Este código solo tendremos que guardarlo en un archivo, que para este ejemplo he llamado “tabla-contenidos”. Una vez guardado el archivo, no habrá más que subirlo a nuestro hosting y guardarlo dentro carpeta-de-theme/js. Hecho esto, si recargas tu WordPress verás que la tabla de contenidos aparece ya justo antes del primer h2 del post. Pero todavía falta darle algo de formato. Esto vamos a poder hacerlo con algunas líneas de CSS3.

Un poco de estilo para la tabla de contenidos

Después de obtener la tabla y comprobar su funcionalidad, ya podemos agregar el código CSS para dar un aspecto visual más atractivo. Este código es tan solo un ejemplo, y se puede encontrar disponible en elrepositorio de GitHub. Como digo, en el archivo style podemos utilizar el código:

El resultado de una tabla de contenidos sin plugins en WordPress

Una vez terminado lo de añadir el código, tan solo nos queda limpiar la caché de nuestro WordPress y actualizar la página para poder verla como se puede ver en esta misma web.

tabla de contenidos implementada en WordPress

Y con esto, creo que cualquiera va a poder implementar una tabla de contenidos en su WordPress sin necesidad de añadir más plugins.







Resumen
Tabla de contenidos, cómo añadirla a Wordpress sin plugins
Nombre
Tabla de contenidos, cómo añadirla a Wordpress sin plugins
Descripción
En este artículo vamos a ver cómo podemos añadir una tabla de contenidos a nuestros artículos de Wordpress sin necesidad de utilizar plugins.
Autor
Nombre del editor
entreunosyceros
Logo del editor

Deja un comentario

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

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