有名ブロガーさんのブログで、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上に「目次に戻る」のアンカーリンクが表示されているか確認しましょう。
まとめ
本記事では「目次に戻る」のアンカーリンクを自動挿入するカスタマイズを紹介いたしました。
じっくり記事を見比べるときは、目次との各h2への行き来が便利になってきますので、ユーザービリティをあげるためにも是非導入を検討してみてください。