[Cocoon] 各見出し後に「目次に戻る」リンクを追加した（functions.php）

• ブログの中でもっともよくクリックされるのは、「目次」だそうです。
• 各セクションに Cocoonの目次に対応した「戻る」ボタンを設置しました。
• 参考サイトを元に、自分のブログに合うように一部修正しました。

確かに、目次からサッと読みたいところを確認できるサイトは、とても便利ですよね。

1. 目次に戻るリンクを挿入するコード

functions.phpに追加します。

/** 自動で目次に戻るリンクを挿入 */
add_filter('the_content', function($content) {
	if (is_singular() && strpos($content, ' id="toc"') !== false) {
		//挿入するHTML
		$back_toc = '<div class="back-toc not-print"><a href="#toc">目次に戻る <i class="fa fa-arrow-up" aria-hidden="true"></i></a></div>';
		//AMPページではチェックボックスのidが変わるので置換
		if (is_amp()) {
			$id_check = preg_match('/ id="(toc-checkbox-\d+)"/', $content, $id_match);
			$back_toc = str_replace('#toc-checkbox-1', '#'.$id_match[1], $back_toc);
		}
		$count = 0;
		$content = preg_replace_callback('/<h[23] *[^>]*>/i', function($m) use( & $count, $back_toc) {
			$count++;
			if ($count == 1) {
				return $m[0]; //一番最初のh2には挿入しない
			} else {
				return $back_toc.PHP_EOL.$m[0];
			}
		}, $content, -1).$back_toc.PHP_EOL;
	}
	return $content;
}, 99999);

2. 修正した箇所

自サイトでは、目次ブロックのidが「toc」だったので修正しました。

    if ( is_singular() && strpos( $content, ' id="toc"' ) !== false ){

idに番号が付いていませんでした。

また、「目次に戻る」は印刷に不要なので、「not-print」クラスを追加した。

        $back_toc = '<div class="back-toc not-print"><a href="#toc"><i class="fa fa-arrow-up" aria-hidden="true"></i> 目次に戻る</a></div>';

ちいラボブログは、冊子印刷で教室テキストになるので、印刷時には非表示にする項目をスタイルシートで設定しています。

「h2」だけでなく、「h3」にも追加した。

        $content = preg_replace_callback('/<h[23] *[^>]*>/i', function( $m ) use (&$count, $back_toc) {

正規表現を使って、マッチするように変更しました。

2-1. コード保管庫（function.php）

「目次に戻る」が左だと「視線にぶつかりすぎる」気がしたので、右揃えにしました。

style.cssに追加しました。

/** 目次に戻るを右端に*/

.back-toc {
	position: relative;
	margin-bottom: 0;
	font-size: 90%;
}
.back-toc a {
	position: absolute;
	right: 0;	
	top: -1em;
        text-decoration: none;
        user-select: none;
}

3. きっかけ（目次は意外と使われている）

きっかけは、「サイト訪問者に目次は意外と使われている」という投稿を見かけたからです。

目次ってめっちゃ押されるから（ヒートマップ見てみて）最初から閉じる設定にしてる人は「もったいないなぁ」と思う

今はこうしてる

✓開きっぱなしで閉じれないように
✓「タップできる目次」と書いてタップできることを知らせる
✓追尾サイドバーにも入れる
✓見出し末尾に「目次へ戻る」を入れる

マクリン(新井涼太)さん: / X

確かに自分も調べるときに目次をよく使っていることに気付かされました。

検索してたくさんの記事から情報を探すときには、目次が便利。
サッと知りたいことだけ探しやすくなります。

これまでも、①、③はできていたのですが、今回 ②、④も取り入れてみることにしました。

ちいラボでは、初学者向けに前提から説明していることが多いです。
ある程度 知っている人は飛ばし読みしてもらった方がよいです。

目次を活用できるようにすれば、それぞれの理解度に応じて、ストレスなく読めるのではないかと思います。

4. 【追記】目次ウィジェットに対応した（2024-05-12）

Cocoon設定から目次を追加するのではなく、ウィジェットで挿入するように変更したら、リンクが表示されなくなりました。

目次のIDがtocからtoc-3に変更になったので、コードを２か所修正しました。

/** 自動で目次に戻るリンクを挿入
 * https://web.monogusa-note.com/cocoon-back-toc-auto#toc3
 * 2024-05-12: Cocoon設定の目次ではなくウィジェットにしたので目次のIDがtocからtoc-3へ
 */
add_filter('the_content', function( $content ){
    $toc_id_str ='toc-3';
    if ( is_singular() && strpos( $content, ' id="'.$toc_id_str.'"' ) !== false ){
        //挿入するHTML
        $back_toc = '<div class="back-toc not-print"><a href="#'.$toc_id_str.'">目次に戻る <i class="fa fa-arrow-up" aria-hidden="true"></i></a></div>';
        //AMPページではチェックボックスのidが変わるので置換
        if( is_amp() ) {
            $id_check = preg_match('/ id="(toc-checkbox-\d+)"/', $content, $id_match);
            $back_toc = str_replace('#toc-checkbox-1', '#'.$id_match[1], $back_toc);
        }
        $count = 0;
        $content = preg_replace_callback('/<h[23] *[^>]*>/i', function( $m ) use (&$count, $back_toc) {
            $count++;
            if( $count == 1 ) {
                return $m[0]; //一番最初のh2には挿入しない
            } else {
                return $back_toc.PHP_EOL.$m[0];
            }
        }, $content, -1).$back_toc.PHP_EOL;
    }
    return $content;
}, 99999);

こちらもどうぞ。

[Cocoon] 記事の関連タグをサイドバーに表示した・その2（ショートコードにできた）

結論としては、the_tag_links() ではなく、get_the_tag_links()を呼べばよかっただけでした。以前の方法の問題点以前、記事の関連タグをサイドバーに表示するときに、ショートコードにできず、テキストウィジェットでPHPコードを実行する、という方法でむりやり解決していました。ただし、この方法はウィジェットを確認するたびに、ビジュアル表示になって「コードが評価」されててまうため、作り直しが必要でした。ウィジェットを確認するだけで壊れてしまうのです……その後...

chiilabo.com

note風スタイル第４弾！目次のデザイン

「note風スタイル」ということで、ブログのスタイルシートを編集しています。今回は、目次について。主な変更点は……文字を細く・小さく・薄く背景色をグレーに項目の間に線を追加noteの目次の特徴は、「控えめ」なこと。記事によっては目次を付けていないものも多いです。目次（table of contents）のHTML構造.toc.toc-title.toc-contentol.toc-listliaリスト構造（ol, li）とアンカーリンク（a）の関係で、かなり複雑な入れ子になっ...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。