Como insertar indice (Tabla de Contenidos) en WordPress sin plugins

Tabla de Contenidos en WordPress con HTML

En esta publicación podrás saber si es importante o no tener una tabla de contenidos en tu WordPress. Además, no es todo, aprenderás a insertar una tabla en tu proyecto web sin necesidad de plugins.

Para esto usaremos el código HTML y JavaScript del repositorio de GitHub Genera tabla de Contenidos, que está preparado para trabajar con WordPress.

Si aún no sabes el porqué es importante tener un indice en tus entradas de blog, te recomiendo darle una leída a ¿Qué son los enlaces anclas y porque me ayudan al SEO?

¿Por qué es valioso tener una tabla de contenidos en tu blog?

Todo está en la experiencia de usuario, Imagina que un usuario llega a tu sitio web y encuentra un artículo largo sin ningún tipo de organización. Es posible que se sienta abrumado y tenga dificultades para encontrar la información que está buscando.

Si, en cambio, el mismo artículo incluye una índice que explique el contenidos de forma clara y concisa, el usuario puede navegar fácilmente por el contenido, encontrar lo que busca y tener una experiencia de usuario mucho más satisfactoria.

Además, una tabla de contenidos puede mejorar significativamente el SEO de una página web. Al incluir palabras clave importantes en los títulos de sección, se facilita a los motores de búsqueda entender de qué trata el contenido de la página y cómo debe clasificarla en sus resultados de búsqueda.

Sigue leyendo para descubrir cómo crear una tabla de contenidos en WordPress que mejore la experiencia de usuario y el posicionamiento SEO de tu sitio web.

Como insertar tabla de Contenidos en WordPress sin plugins

En este artículo, aprenderás a crear una tabla de contenidos en WordPress sin necesidad de instalar plugins adicionales.

Posiblemente, te estés preguntando cuáles son las ventajas de no usar complementos que lo hacen todo más fácil y nos ahorran tiempo como webmasters. La respuesta puede ser obvia, pero a veces la dejamos pasar de lado,

Una de las ventajas de no utilizar plugins es que te permitirá tener un sitio web más ligero y rápido, en especial si tu sitio web ya cuenta con muchos complementos, lo cual puede afectar el rendimiento de tu web.

¡Muy bien! Ahora que sabes por qué utilizar código, es momento de que aprendas a codear la tabla… ¿Listo?

1. Prepara tu contenido

Primero definimos la estructura, los títulos de nuestro contenido tendrán la etiqueta HTML h2, los subtítulos con h3, y si queremos otro nivel más con h4, por ejemplo:

<h2>titulo contenido</h2> 
<p>Algún texto</p> 
<h3>subtítulo contenido</h3> 
<p>Algún texto</p>

2. Agrega código JavaScript

Dependiendo del nivel de detalle que tenemos en nuestro contenido, h2, h3, h4, y lo que queremos mostrar en nuestra tabla, podemos usar un script para dos niveles o para tres niveles, en este caso asumiremos que tenemos un contenido a dos niveles por lo que usaremos el siguiente script:

(function($){

	//Comprobación para que se ejecute sólo al ver el detalle de una entrada
	if ( $('body.single').length ){

		//Plantillas para la tabla
		var tmplwrap ="<div id='tabla-contenido'>\n<p class='titulo'>Tabla de Contenido</p>\n{contenido}</div>";
		var tmpllink = "<p {clase}><i class='fa fa-caret-right'></i> <a href={link}>{texto}</a></p>\n";
		var cadena 	= "";
		
		//Preparamos el segundo nivel para que tenga una clase
		$('article h2').siblings('h3').addClass('n2');

		//Bucle, recorremos elementos para construir la tabla
		$('article h2, article h3').each(function(index, element){
	
			clase = $(this).hasClass('n2')?'class="n2"':'';
			texto 	 	= $(this).text();
			enlace_id	= texto.replace(/\d-\s|\?|¿/g,'');
			enlace_id 	= enlace_id.replace(/\s+/g, '_');
			$(this).attr('id',enlace_id);

			//Agregamos en una variable cadena
			cadena += tmpllink.replace('{link}',"'#" + enlace_id + "'");
			cadena  = cadena.replace('{texto}',texto);
			cadena 	= cadena.replace('{clase}',clase);

		});

		//Ejemplo de link adicional, descomentar

		//$('div.rel_posts h3').attr('id','relacionados');
		//cadena +="<p><i class='fa fa-link'></i> <a href='#relacionados'>- Artículos relacionados</a></p>\n";

		cadena = tmplwrap.replace('{contenido}',cadena);

		//Finalmente insertamos la cadena antes del primer elemento
		$(cadena).insertBefore( $('.entry-content h2').first() );
	}


})(jQuery);

Tener en cuenta:

• En este mismo repositorio también se encuentra el script para tres niveles.
• Para insertar este código puedes revisar el artículo Insertar Javascript de manera correcta en WordPress
• Este código usa iconos de FontAwesome, puedes revisar Insertar una fuente de Iconos en WordPress

3. Agrega código CSS

Luego que obtenemos la tabla, y comprobamos su funcionalidad, podemos entonces agregar el código CSS para dar un aspecto visual más atractivo, usaremos el siguiente código:

#tabla-contenido{
	background-color: #EDEDED;
	max-width:600px;
	padding:10px 20px 20px;
	margin: 10px auto 30px;
	border-radius: 5px;
}

#tabla-contenido p{
	margin:0;
}

#tabla-contenido p.n2{
	margin-left: 20px;
}

#tabla-contenido p.n3{
	margin-left: 40px;
}

#tabla-contenido .titulo{
	background-color: #D8D8D8;
	padding: 2px;
	margin-bottom: 10px;
	border-radius: 5px;
	width: 100%;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}

4. Resultado Final

Finalmente, luego de realizar estos pasos obtendremos algo similar a la siguiente imagen:

Ya puedes crear un índice en WP sin plugins

Ahora ya lo sabes, tener una tabla de contenidos es una herramienta valiosa para mejorar la experiencia de usuario y, por tanto, para mejorar el posicionamiento SEO de una página web.

Solo para recortar, una tabla de contenido facilita a los usuarios saltar a la sección que desean leer de manera rápida, y también darse cuenta desde el inicio, si el contenido que están buscando se encuentra en este blog.

Y ayuda con tu SEO de WordPress porque Google agrega automáticamente un enlace ancla a la sección junto al enlace de tu sitio en los resultados de búsqueda.

Esperamos que este artículo te haya ayudado a aprender a crear una tabla de contenidos para WordPress. Y si se te complica, puedes usar el plugin de Easy Table of Contents que es el mismo que estoy utilizando en este blog, ya que no tengo el sitio web lleno de plugins como en algún e-commerce.

¿Aun con dudas? Háznoslo saber en los comentarios.