X
Jhon Marreros Guzmán

Tabla de Contenidos en WordPress sin plugins

Tener un tabla de contenidos ayuda a la navegación de usuario y además es bueno para SEO, en este artículo veremos cómo crear una tabla de contenidos en WordPress sin usar plugins y que se genere de manera automática.

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

 

1- Estructura de nuestro 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- Agregando el 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:

 

3- Agregando 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:

 

Artículos Relacionados

Categorías: Themes
Etiquetas: cssjs

Ver comentarios (24)

  • Muy buen articulo, gracias es lo que estoy buscando. HAy algunos articulos que no tienen mucho contenido y no tiene sentido tener una tabla de contenido. Hay alguna manera de indicarle que solo aparezca cuadno tenga determinada cantidad de contenido?. Por ejemplo que solo se vea la tabla de contenido cuadno tenga 4

    • Hola, en este artículo se deja el comportamiento de desplazamiento al navegador, si quieres otro comportamiento tendrías que hacerlo por javascript, específicamente sumando algunos pixeles a la función scrollTop(), revisa : https://api.jquery.com/scrollTop/

  • Hola, gran aportación y única. Esto de no usar plugins no esta nada extendido.
    Me gustaría que la caja se contrajera como hace la del plugin TOC+, vamos que solo cquedase el titulo de la tabla y un link a mostrar. Me podrías ayudar o aconsejar como?

    • Hola Jonatan, lo revisaré, sin embargo creo que antes de hacer esto hay que acomodar un poco la estructura HTML para que sea más fácil mostrar/ocultar.

    • En el video uso Firefox, de hecho en este artículo verás que la tabla de contenidos funciona en firefox igualmente. Debe haber algo mal en tu código o algún conflicto js con algún plugin o con tu theme.

  • Hola , podria ayudarme ¿como haria para que aparezca la tabla de contenido en el segundo parrafo?

    gracias

  • Hola mira estoy probando de hacerlo funcionar, pero no me da error ni se muestra nada nuevo, mi html generado es

    texto
    primer subtitulo

    si uso

    //Preparamos el segundo nivel para que tenga una clase
    $('.extract h2').siblings('h3').addClass('n2');

    //Bucle, recorremos elementos para construir la tabla
    $('.extract h2, extract h3').each(function(index, element)

    te parece que tengo algún error? por que probé con . y sin punto por si no detectaba la clase y no funciona, y el js lo veo importado bien en el header

    gracias

    • Hola, de manera general lo veo correcto, supongo que estas usando comilla simple, no se si al enviar como comentario lo enviaste con otra comilla, prueba comilla doble. También asegúrate de que la clase .extract exista en el detalle de tu artículo.

  • Hola, gracias por contestar y si estoy usando comilla simple, recien probe con comillas dobles para seleccionar la clase y en el html que me genera tengo la etiqueta donde esta el texto del post

Deja un comentario