投稿ページに目次を自動生成するphpコピペ

目次の作り方

長めの記事を作ったとき、ユーザーに必要な情報を素早く得てもらうためにも、目次って必要ですよね。
でもいちいち目次書くのもめんどくさい方必見。コピペでコンテンツ内にあるh2、h3を目次にしてくれます。
もちろんページ内リンク付き。
このサイトで使っている目次のcssも載せているので、コピペで速攻使用可能です。

functionに以下をコピペ

function my_add_content( $content ) {
	if ( is_single() ) {
		$pattern = '/<h[2-3]>(.*?)<\/h[2-3]>/i';
		preg_match_all( $pattern, $content, $matches, PREG_SET_ORDER );
		if( count( $matches ) > 3 ){ 
			$toc = '<div class="mokubox"><div class="mokuji">もくじ</div><ol>';
			$hierarchy = NULL;
			$i = 0;
			foreach( $matches as $element ){ 
				$i++;
				$id = 'chapter-' . $i;
				$chapter = preg_replace( '/<(.+?)>(.+?)<\/(.+?)>/',  '<$1 id ="' . $id . '">$2</$3>', $element[0] );
				$content = preg_replace( $pattern, $chapter, $content, 1);
				if( strpos( $element[0], '<h2' ) === 0 ){ 
					$level = 0;
				}else{        
					$level = 1;
				}
				
				if( $hierarchy === $level ){ 
					$toc .= '</li>';
				}elseif( $hierarchy < $level ){ 
					$toc .= '<ol>';               
					$hierarchy = 1;
				}elseif( $hierarchy > $level ){ 
					$toc .= '</li></ol></li>';               
					$hierarchy = 0;
				}elseif( $i == 1 ){ 
					$hierarchy = 0;
				}
				
				$title = $element[1]; 
				$toc .= '<li><a href="#' . $id . '">' . $title . '</a>';
			}
			
			if( $level == 0 ){
				$toc .= '</li></ol></div>';
			}elseif( $level == 1 ){
				$toc .= '</li></ol></li></ol></div>';
			}
			
			$content = $toc . $content;
		}
	}
	return $content;
}
add_filter( 'the_content', 'my_add_content' );

cssに以下をコピペ

最初のcontent:none　はリセットをかけている感じです。
リストなどに装飾をしていなければ、削除してください。
スマホサイズ（768px幅以下）になったときに余白の調整をしています。
ブレイクポイントはサイトに合わせて調整してください。

.mokubox li:before,.entry-content .mokubox ol li:before,.entry-content .mokubox ol li:after  {
    content: none;
}
.entry-content .mokubox ol {
    border: none;
    list-style-type: decimal !important;
}
.mokubox {
    padding: 1rem 2rem;
    border: solid 2px #5c9ee7;
}
.mokubox ol {
    margin: 0;
    margin-left: 1rem;
}
.mokubox ol li {
    padding-left: 1rem;
}
.mokubox .mokuji {
    margin-top: 1rem;
    position: relative;
    padding-left: 2rem;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 2px;
}
.mokubox .mokuji:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 5px;
    margin-top: -12px;
    width: 20px;
    height: 20px;
    border: 4px solid #325A8C;
    border-radius: 100%;
    box-sizing: border-box;
}
.mokubox a {
    display: block;
    border-bottom: 1px dashed #888;
    text-decoration: none;
}
.entry-content .mokubox :nth-child(2) ol {
    margin-left: 0;
    padding-right: 0;
}
.entry-content .mokubox :nth-child(2) ol li {
    padding-right: 0;
}
.entry-content .mokubox :nth-child(2) ol li:before {
    content: "∟";
    left: -2.35rem;
    background: none;
    color: #333;
    font-family: serif;
    top: 1.2rem;
    font-size: 0.5rem;
}
@media screen and (max-width:768px) {
.mokubox {
    padding: 1rem;
}
.mokubox ol li {
    padding-left: 0;
}
.entry-content .mokubox ol {
    margin-left: 0.5rem;
    padding-right: 0;
    padding-left: 0.75rem;
}

めちゃくちゃ簡単。10秒でできますね。

注意するポイント

全投稿ページに表示するように指示されていますが、記事内の見出しの数によっては表示されません。
記事内にh2、h3が3つ以上ないと生成されないので、目次が表示されていないときは、見出しを確認してください。