WordPress Snippet

TOC（Table of Contents)プラグインでに対応したものはないでしょうか？という質問があり、無理やり表示する　えげつない方法を考えてみました。

テーマのfunctions.phpに、フィルターを追加します。

add_filter( 'the_content', 'my_custom_toc', 120 );

function my_custom_toc( $content ) {
	global $post;
	
	if ( preg_match( '$<!--nextpage-->$', $post->post_content ) && function_exists( 'toc_get_index' ) ) {

		$pages= explode( '<!--nextpage-->', $post->post_content );

		$toc= '';
		foreach ( $pages as $key=> $page ) {

			$page_num= $key + 1;

			$page_content= toc_get_index( $page );

			$index= preg_replace( "!#!", get_permalink( $post->ID ) . '/' . $page_num . '#', $page_content );

			$toc .= $index;
		}
		$style= '<style scoped>
					.nextpage-toc-container + #toc_container{
						display:none!important;
					}
					.nextpage-toc-container{
						border:1px dotted rgba(222,222,222,.5);
						padding:1em;
					}
					.nextpage-toc-container li{
						list-style:none;
					}
				 </style>';
		return '<ul class="nextpage-toc-container">'. $style . $toc . '</ul>'. $content;
		
	} else {
		
		return $content;
	}
}

Note:firefoxでは、scopedが正しく動作するため、スコープの範囲外の指定

.nextpage-toc-container + #toc_container{
						display:none!important;
					}

のようなスタイルは、無視されて、本来のTOCが表示されます。実際に使う場合は、style.css等に置き換えてください 🙂

scoped css が使えなくなってた

<!–nextpost–>のあるような、コンテンツをフィルタ処理をする場合、普通に$contentを使って、explode()しようとしても、かなり前に処理されてしまっているので、そのままでは処理できないので、$post->post_contentを使って処理しています。

その2　メニュー開閉付き

add_filter( 'the_content', 'my_custom_toc', 120 );

function my_custom_toc( $content ) {
	global $post;
	
	if ( preg_match( '$<!--nextpage-->$', $post->post_content ) && function_exists( 'toc_get_index' ) ) {

		$pages= explode( '<!--nextpage-->', $post->post_content );

		$toc= '';
		foreach ( $pages as $key=> $page ) {

			$page_num= $key + 1;

			$page_content= toc_get_index( $page );

			$index= preg_replace( "!#!", get_permalink( $post->ID ) . '/' . $page_num . '#', $page_content );

			$toc .= $index;
		}

		$style= '<style scoped>
					#toc_container + #toc_container{
						display:none!important;
					}
					.nextpage-toc-container{
						border:1px dotted rgba(222,222,222,.5);
						padding:1em;
					}
					.nextpage-toc-container li{
						list-style:none;
					}
				 </style>';
		return '<div id="toc_container"><p class="toc_title">title</p><ul class="toc_list nextpage-toc-container">'. $style . $toc . '</ul></div>'. $content;
		
	} else {
		
		return $content;
	}
}