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

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.

(function($){

	if ( $('body.single').length ){
		//Enlaces para mostrar u ocultar la tabla de contenidos
		var botonMenu = "<p><div id='botonMO'>CONTENIDO - [<a href='javascript:mostrar();'>Mostrar</a> / <a href='javascript:cerrar();''>Ocultar</a>]</div></p>";
		//Plantillas para la tabla. Por defecto está oculta
		var tmplwrap = "<div id='tabla-contenido' style='display:none;'>\n<p class='titulo'>Tabla de Contenido </p>\n{contenido}</div>";
		var tmplink = "<p {clase}><i class='fa fa-caret-right'></i> <a href={link} class='enlaces'>{texto}</a></p>\n";
		var cadena 	= "";
		
		//Preparamos el segundo y tercer nivel para que tenga una clase
		$('article h2').siblings('h3').addClass('n2');
		$('article h2').siblings('h4').addClass('n3');

		//Bucle, recorremos elementos para construir la tabla
		$('article h2, article h3, article h4').each(function(index, element){
	
			clase = "";
			if ($(this).hasClass('n2'))
				clase = 'class="n2"';
			else if($(this).hasClass('n3'))
				clase = 'class="n3"';

			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 += tmplink.replace('{link}',"'#" + enlace_id + "'");
			cadena  = cadena.replace('{texto}',texto);
			cadena 	= cadena.replace('{clase}',clase);

		});

		//Ejemplo de link adicional, descomentar

		$('div.dc-social h3').attr('id','titulo-social');
		cadena +="<p><i class='fa fa-share-alt'></i> <a href='#titulo-social'>Compartir</a></p>\n";


		//artículos relacionados

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

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

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

		$(cadena).insertBefore( $('.entry-content h2').first() );
	}

})(jQuery);

//funciones para mostrar u ocultar la tabla de contenido
function mostrar() {
            div = document.getElementById('tabla-contenido');
            div.style.display = '';
        }

function cerrar() {
            div = document.getElementById('tabla-contenido');
            div.style.display = 'none';
        }

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:

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

#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;
	border:1px solid #8C8C8C
}

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.

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.