• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Tabla de Contenidos en WordPress sin plugins

Tabla de Contenidos en WordPress sin plugins

Tabla de Contenidos en WordPress sin Plugins

[ 22 octubre 2016 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

css js

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

  • 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- 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:

Ejemplo de Tabla de contenidos

 

¿Aún con dudas?, en el siguiente video se explica cada uno de los puntos tratados anteriormente

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Relación bidireccional entre diferentes tipos de contenido con ACFRelación bidireccional entre diferentes tipos de contenido con ACF
  • Creación dinámica de Custom Post Types en WordPressCreación dinámica de Custom Post Types en WordPress
  • Mostrar / ocultar bloques Gutenberg para usuarios registrados o visitantesMostrar / ocultar bloques Gutenberg para usuarios registrados o visitantes
  • Borrar tablas wp_actionscheduler_actions y wp_actionscheduler_logsBorrar tablas wp_actionscheduler_actions y wp_actionscheduler_logs
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 4,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Fernando Javier Pastrana

    16 octubre, 2017

    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

    • Jhon Marreros Guzmán

      16 octubre, 2017

      Hola, tendrías que colocar una condicional antes de llamar al bucle .each, puedes usar lenght, revisa:
      https://api.jquery.com/length/

    • Jhon Marreros Guzmán

      16 octubre, 2017

      Por ejemplo:

      if ( $('article h2').length >= 4 ){
      //Aqui va el código del bucle	
      }
      
  2. luis

    26 octubre, 2017

    Como hago que el SCROLL no LLEGUE HASTA ARRIBA cuando se selecciona un subtitulo , que baje un poco

    • Jhon Marreros Guzmán

      27 octubre, 2017

      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/

  3. Jonatan

    9 abril, 2018

    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?

    • Jhon Marreros Guzmán

      9 abril, 2018

      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.

  4. Juan Hernandez

    19 agosto, 2018

    Hola, genial articulo es posible si se agrega solo a los post de una categoria?

    • Jhon Marreros Guzmán

      23 agosto, 2018

      Hola, para lo que comentas se tendría que cargar el código javascript condicionalmente, una opción sería que coloques el código en un nuevo archivo y luego registrar el script, pero al momento de ponerlo en cola validarlo para que sólo se muestre en una categoría. Revisa el punto 4 del siguiente artículo: https://decodecms.com/insertar-javascript-en-wordpress-de-forma-correcta/

  5. Luis Manga

    19 diciembre, 2018

    Funciona pero pero en chorme , no funciona para mozilla a que se debe eso?

    • Jhon Marreros Guzmán

      20 diciembre, 2018

      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.

  6. vetoriano

    6 abril, 2019

    Como meto codigo php en Edit Snippet. Gracias!!!!!!

    • Jhon Marreros Guzmán

      7 abril, 2019

      Hola supongo que te refieres a usar un plugin de snippets sin tocar functions.php, revisa: https://decodecms.com/agregar-codigo-a-tu-sitio-sin-usar-functions-php/

  7. vetoriano

    8 abril, 2019

    Como añado javascript solo puedo añadir php

    • Jhon Marreros Guzmán

      8 abril, 2019

      Hola, claro, los plugins de ese tipo sólo permiten snippets PHP, para javascript, revisa: https://decodecms.com/insertar-javascript-en-wordpress-de-forma-correcta/

  8. luis

    17 agosto, 2019

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

    gracias

    • Jhon Marreros Guzmán

      18 agosto, 2019

      Hola, en la función insertBefore() puedes establecer en donde irá, en mi caso lo inserto antes del primer h2 que se encuentra y que sería equivalente al segundo párrafo.

      • luis

        19 agosto, 2019

        hola como haria para insertarlo en el segundo h2? o en el segundo parrafo?

        • Jhon Marreros Guzmán

          20 agosto, 2019

          Hola, podrías probar con nth-child, revisa: https://api.jquery.com/nth-child-selector/

  9. Mati

    7 octubre, 2019

    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

    • Jhon Marreros Guzmán

      8 octubre, 2019

      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.

  10. Mati

    9 octubre, 2019

    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

  11. kenedi

    7 diciembre, 2019

    hola, no se me aparece en version de lista enumarada, gracias por la ayuda

    • Jhon Marreros Guzmán

      9 diciembre, 2019

      Hola, los números tendrían que ser parte de los títulos ya que la estructura HTML que uso no es de una lista enumerada.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Aprende a usar mu-plugins en WordPress

Refrescar los estilos CSS almacenados en el navegador de un usuario

Sincronizar WooCommerce y Excel

Subtítulo desde título de la entrada en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados