WordPress Gutenberg – TOC (Table of Content)

Habt ihr auch teilweise sehr lange Blogbeiträge wie ich? Dann braucht ihr auch einen TOC!

    Inhaltsangabe
  1. Daten Sammeln
  2. Daten ausgeben

In letzter Zeit habe ich viel über den render_blocks Filter von WordPress geschrieben. Dieses Mal möchte ich über die Möglichkeit, ein Table of Content mit der Hilfe des render_block Filters zu erstellen kommen. Hierzu benötigt ihr lediglich eine globale Variable, den render_block und den the_content Filter.

Daten Sammeln

Als erstes erstellen wir ein globales Array und füllen diesen mit unserem render_block Filter.

<?php
$toc_data = array();
global $toc_data;
add_filter( 'render_block', 'content_toc_filter', 10, 2 );
function content_toc_filter( $block_content, $block ){
	$blockname = ($block['blockName'])? explode('/',$block['blockName'])[1] : false;

	if(!$blockname) return $block_content;
	$ret = $block_content;

	if(in_array($blockname, array('heading'))){
		preg_match('/<h(\d)[^>]*>([^<]+)/', $block['innerHTML'], $Hval);
		?>
		<?php
		global $toc_data;
		$toc_id = intval(count($toc_data));
		$toc_data[] = array(
			'level' => intval($Hval[1]),
			'content' => $Hval[2],
			'id' => $toc_id
		);
		$ret = preg_replace('/<h(\d)[ ]*/', '<h$1 tocid="'.$toc_id.'" ', $block_content);
	}
	return $ret;
}

Sobald wir das gemacht haben, haben wir einen Array mit allen Headlines, die in diesem Beitrag oder der Seite vorkommen samt deren ID’s. Die Blöcke mit den Headlines bekommen auch automatisch eine eindeutige kennung. Nicht mit einer ID sondern mit der Attribute tocid.

Daten ausgeben

Unseren Table of Content können dann wie wir wünschen mit dem the_content Filter ausgeben, weil jetzt unser zuvor deklariertes Array hier verfügbar ist.

<?php
add_filter( "the_content", "show_table_of_content", 999999 );
function show_table_of_content($content){
	global $post, $toc_data;
	if(is_admin() || !in_array( get_post_type($post), array('heading') ) ) return $content;

	$toc_html = ''; // Hier die TOC aufbauen.
	return $toc_html.$content;



	return $content;
}

Ich hoffe, dass euch dieses Tutorial weiter geholfen hat. Falls ihr noch Fragen habt, könnt ihr diese mir gerne zukommen lassen. Ansonsten bis dahin!

Themen

Code css Gutenberg Javascript php Produktivität Programmieren Technik Tipps WordPress

Beitrag teilen

WhatsAppen

Folgen Sie uns