SWELL│「目次へ戻る」のアンカーリンクを自動挿入するカスタマイズ

2022.04.122024.03.07

有名ブロガーさんのブログで、h2タグに「目次へ戻る」のアンカーリンクがあるのを見たことがないでしょうか？

目次と閲覧したい項目とを行き来できるアンカーリンクはユーザービリティを向上させます。

本記事ではSWELL用にh2タグ上に「目次に戻る」のアンカーリンクを自動挿入するカスタマイズを作成しましたので紹介します。

「目次に戻る」のアンカーリンクを自動挿入するカスタマイズ

「目次に戻る」のアンカーリンクを自動挿入するカスタマイズはfunctions.phpをコードを挿入するだけです。

以下、詳しく解説いたします。

functions.phpにコードを挿入する

コードを記述する場所は下記になります。

WordPressの管理画面＞外観＞テーマファイルエディター＞ functions.php

functions.phpに下記のコードを挿入してください。

投稿ページとカテゴリーページにこのカスタマイズが適応できるように指定しています。

PHP8以降エラーが出ていたので、コードを修正いたしました。

Warning: Undefined variable $m in /home/motoki/motoki.wpx.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(582) : eval()'d code on line 12

Warning: Trying to access array offset on value of type null in /home/motoki/motoki.wpx.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(582) : eval()'d code on line 12

修正版のコード（PHP8も対応）

function motoki_back_toc( $content ){
    if ( is_single() || is_category() ){
        $back_toc = '<div class="back-toc"><a href="#mokuji">⇧ 目次に戻る</a></div>';
        $count = 0;
        $content = preg_replace_callback('/<h2 *[^>]*>/i', function( $m ) use (&$count, $back_toc) {
            $count++;
            if( $count == 1 ) {
                return $m[0]; 
            } else {
                return $back_toc.PHP_EOL.$m[0];
            }
        }, $content, -1);
    }
    return $content;
}
add_filter('the_content','motoki_back_toc',999);

function motoki_add_toc_id() {
	echo <<< EOM
	<script>
		var tmp = document.getElementsByClassName("p-toc__ttl") ;
		var val="mokuji";
		try {
		  tmp[0].setAttribute("id",val);
		} catch (error) {
	}
	</script>
	EOM;
	}
add_action( 'wp_footer', 'motoki_add_toc_id' );

カスタマイズは以上です。

コード挿入後にキャッシュをクリアして、h2上に「目次に戻る」のアンカーリンクが表示されているか確認しましょう。