Inicio Apuntes FPApuntes DAWTabla de contenidos, cómo añadirla a Wordpress sin plugins

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

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

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.

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.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.