2 min 25/09/2021

Lo sé, hace mogollón de tiempo que no publico nada, pero mira, viene contenido calentito y que espero que os sea útil 😁.

Y vamos empezar por algo que quise implementar en mi web y es como crear una tabla de contenidos personalizada o TOC. Sí, lo sé, hay un plugin específico que hace justo eso. Pero es que puede que te pase como a mí y que en un momento dado tengas que crear una a medida porque vas tener que hacer más cosas con ella. Yo te voy a poner el ejemplo de mi propia tabla de contenidos (la verás en este mismo post), pero créeme que con ese código puedes extender luego las funcionalidades mucho. ¿Qué puedes hacer? Pues mira, meter un hook para insertar otro código ahí. Puedes meter un banner de publicidad. O crear ahí una sugerencia destaca que quitas de otra parte o de algún custom field que metas en los post. Yo que sé!!! Estos son ejemplos que yo tuve que hacer 😅, pero tu imaginación seguro que encuentra otra cosillas.

Vamos al lío entonces.

Crear el filtro del contenido

Lo primero va ser crear el filtro del contenido. Pero ese filtro tiene que llevar un condicional, y es que se aplique solo a los single, porque sino se aplicará a todas las páginas y eso no lo queremos 😉. Aquí te paso el código:

/**
 * Toc personalizado para insertar antes del primer h2. Saca los enlaces dentro de un div.
 *
 * @param $string $content Contenido del artículo actual.
 */
function soivigol_custom_toc( $content ) {
	if ( is_single() ) {
		// Lo que va ser nuestro toc
	}
	return $content;
}

add_filter( 'the_content', 'soivigol_custom_toc' );

Detalle importante, el return del $content aseguraros de ponerlo después del cierre del if. Os lo digo por experiencia que luego lleváis algún susto 😅.

Ahora vamos a meter lo que es el código del toc. Lo puedes meter en el functions.php de tu child theme o en un plugin de funcionalidades. A tu gusto 😉.

/**
 * Toc personalizado para insertar antes del primer h2. Saca los enlaces dentro de un div.
 *
 * @param $string $content Contenido del artículo actual.
 */
function soivigol_custom_toc( $content ) {
	if ( is_single() ) {
		$html_toc = '';
		$clase    = '';
		// Primero quitamos un array con todos los títulos del contenido.
		preg_match_all( '/(<h([1-6]{1})[^>]*>)(.*)<\/h\2>/msuU', $content, $matches, PREG_SET_ORDER );
		foreach ( $matches as $key => $value ) {
			// Ponemos un id en cada uno de los títulos.
			$val                = preg_replace( '/>/', ' id="titulo-' . $key . '">', $value[1] );
			$content            = str_replace( $value[0], $val . $value[3] . '</h' . $value[2] . '>', $content );
			$matches[ $key ][1] = $val;
			// Creamos un enlace para cada título y lo metemos en un string.
			if ( ! empty( $value[2] ) ) {
				$clase = 'item-toc-' . $value[2];
			}
			$html_toc .= '<a href="#titulo-' . $key . '" class="' . $clase . '">' . strip_tags( $value[3] ) . '</a>';
		}
		// Creamos el toc personalizado.
		ob_start();
		?>
			<div class="soivigol-toc">
				<p class="soivigol-titulo-toc">Indice</p>
		<?php
			echo wp_kses_post( $html_toc );
		?>
			</div>
		<?php
		$salida = ob_get_clean();
		// Ponemos el toc justo antes del primer título.
		$content = str_replace( $matches[0][1], $salida . $matches[0][1], $content );
	}
	return $content;
}

add_filter( 'the_content', 'soivigol_custom_toc' );

Creo que con las explicaciones se entiende bien, pero sino deja un comentario y lo aclaro mejor.

Le ponemos un poco de estilo

Para poner bonito nuestro toc le vamos dar un poco de estilo CSS. Este es el que puse yo para mi toc:

.soivigol-toc {
	background-color: rgba( 0, 0 , 0 , .1);
	border-radius: 5px;
	padding: 2rem;
}

.soivigol-toc a {
	display: block;
}

.soivigol-toc p {
	margin-bottom: 1rem;
	font-size: 1.2rem;
	font-weight: 700;
}

.soivigol-toc .item-toc-3 {
	padding-left: 1rem;
}

.soivigol-toc .item-toc-4 {
	padding-left: 1.5rem;
}

.soivigol-toc .item-toc-5 {
	padding-left: 1.8rem;
}

.soivigol-toc .item-toc-6 {
	padding-left: 2rem;
}

Muy básico, pero funcional 😜.

Para que veas en el toc como quedan los estilos si meto un h3 o un h4 voy poner dos párrafos de ejemplo con los respectivos títulos.

Este es un encabezado tipo h3

Y aquí va un texto de ejemplo por cubrir espacio y no meter un lorem ipsilum

Este es un encabezado tipo h4

Y aquí va un texto de ejemplo por cubrir espacio y no meter un lorem ipsilum

Pues ahora te vuelves al toc de arriba y verás porque hay esos encabezados tan raros 😁.

Conclusión

Sé que es un caso raro el que tú tengas que hacer tu propio toc, pero puede que te pase en algún momento como a mí y esto te sirva de ayuda para no tener que dar mil vueltas como me pasó a mi 😅.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *