Crear una Tabla de Contenidos en PHP

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>poner texto</p> 
<h3>subtítulo contenido</h3> 
<p>poner texto</p>

<div class="rel_posts">
  <h3>Artículos Relacionados</h3>		
</div>

Agregando el código usando Jquery

<script>
	(function($){
		$.noConflict();		

		//NOTA los iconos se definen en D:\Google Drive\Web\Wampserver64\www\desarrollounidadvirtualphp7.com\templates\2modelo>
		//inicializar-valores-font-awesome.php

		//alert('test');
	//Comprobación para que se ejecute sólo al ver el detalle de una entrada

		//Plantillas para la tabla
		var icono_articulos_flecha_derecha = "<?=$icono_articulos_flecha_derecha?>";

		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 tmpllink = "<p {clase}> "+icono_articulos_flecha_derecha+"  <a href={link}>{texto}</a></p>\n";
		var cadena 	= "";
		var v_articulo = document.querySelector('article');
		var xnumeroconsecutivo_h1=0;
		var xnumeroconsecutivo_h2=0;

		//Preparamos el segundo y tercer nivel para que tenga una clase		
		$('article h2').siblings('h3').addClass('n2');  
		$('article h2').siblings('h4').addClass('n3');  // Agregado


		if ( $('article h2').length >= 2 ){ // Si hay etiquetas h2 mas de 3 o igual comienza el buble

			//Bucle, recorremos elementos para construir la tabla usando Jquery			
			$('article h2, article h3, article h4').each(function(index, element){					

				// Evitar que se liste Artículos Relacionados porque tienela etiqueta h3 pero 
				//como lo estamos poniendo abajo ya no es necesario
				if ( $(this).text()!="Artículos Relacionados" ){				  
					//alert($(this).text());
					clase = "";
					if ($(this).hasClass('n2'))
						clase = 'class="n2"';
					else if($(this).hasClass('n3'))
						clase = 'class="n3"';	

					texto 	 	=  $(this).text();  //Original				

					enlace_id	= texto.replace(/\d-\s|\?|¿/g,'');
					enlace_id 	= enlace_id.replace(/\s+/g, '_');
					$(this).attr('id',enlace_id);					

					/*--------------INICIO Agregando Numeral -------------------*/
					if ($(this).hasClass('')){ // Es un H1						
						xnumeroconsecutivo_h1++; //Agregado alex
						texto  	 	= xnumeroconsecutivo_h1 +") "+ $(this).text();				
						//$(this).append('your text'); agrega al texto 
						$(this).text(texto);

					}
					if ($(this).hasClass('n2')){ //Es un H2
						xnumeroconsecutivo_h2++; //Agregado alex
						texto  	 	= xnumeroconsecutivo_h1+"."+xnumeroconsecutivo_h2 +") "+ $(this).text();
						$(this).text(texto);
					} else {
						xnumeroconsecutivo_h2=0; // si ya es otro titulo lo vuelve a 0 
					}
					/*--------------FIN Agregando Numeral -------------------*/

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

					//alert(cadena);			
				}	//Fin Artículos Relacionados
			});	 	

			/*---------------INICIO articulos Relacionados------------------------------------*/
			//Ejemplo de link adicional articulo relacionado, 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";
			var icono_articulos_relacionados = "<?php echo $icono_articulos_relacionados;?>";

			// Formato del HTML 
			//<div class="rel_posts">   // Este es el contenedor del articulo relacionado
		    //El Titulo articulo relacionado deve estar entre etiqueta H3 
			//<h3>Artículos Relacionados</h3>	aqui se agrega al h3  id="relacionados" quedando asi 
			//<h3 id="relacionados">Artículos Relacionados</h3>	

			$('div.rel_posts h3').attr('id','relacionados');

			//cadena +="<p><i class='fas fa-link'></i> <a href='#relacionados'>- Artículos relacionados</a></p>\n";
			var icono_articulos_relacionados = "<?=$icono_articulos_relacionados?>";
			cadena +="<p> " +icono_articulos_relacionados+" <a href='#relacionados'>- Artículos relacionados</a></p>\n";

			/*---------------FIN articulos Relacionados------------------------------------*/

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

			//Finalmente insertamos la cadena (.contenido_articulo es una clase para un  div )
			//$(cadena).insertBefore( $('article .fecha_publicacion').first() );		
			$(cadena).insertBefore( $('article .contenido_articulo'));				

		} // Fin contador h2		

	})(jQuery);
</script> 

Nota tambien podemos usar variables php por ejemplo en los iconos:

Codigo PHP

$icono_articulos_relacionados="<i class='fas fa-link'></i>&nbsp &nbsp";
$icono_articulos_flecha_derecha="<i class='fa fa-caret-right'></i>&nbsp &nbsp";

Código Javascript

var icono_articulos_flecha_derecha = "<?=$icono_articulos_flecha_derecha?>";
var tmpllink = "<p {clase}> "+icono_articulos_flecha_derecha+"  <a href={link}>{texto}</a></p>\n";

Agregando código CSS

#tabla-contenido{background-color: #EDEDED;width: 80%; 
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;}

Fuente:

Tabla de Contenidos en WordPress sin plugins

https://github.com/jmarreros/Genera-Tabla-de-contenidos