【Cocoonカスタマイズ】目次リンクを見出しH2の前に追加する方法

はじめに
完成イメージ
実装手順
参考：PHPで実装する場合
さいごに

はじめに

以下をCocoonで実現します。

SWELL目次へ戻るリンクをh2へ自動挿入する方法

SWELLの通常投稿で、本文目次がある場合に2つ目以降のH2直前へ「目次に戻る」リンクを追加する方法。PHP・CSSの設置、キーボード操作と戻し方を解説します。固定ページ・カテゴリーアーカイブは対象外です。

完成イメージ

本ページに完成イメージを反映させます。

実装手順

以下の手順で実装します。

ラベル
Cocoon設定

表1に示す項目を設定します。

Cocoon設定
設定大項目項目設定値
目次目次の表示目次を表示するオン

設定	大項目	項目	設定値
目次	目次の表示	目次を表示する	オン

ラベル

JavaScriptを追加

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  // 記事本文内に目次が存在しない場合は処理対象外
  if (!$('.entry-content .toc').length) {
    return;
  }

  // 「目次に戻る」リンクのHTMLを設定
  var html = '<div class="back-toc"><a href="#toc">↑目次に戻る</a></div>';

  // 2番目以降のH2見出しの直前に「目次に戻る」リンクを挿入
  $('.entry-content').find('h2:not(:first)').before(html);

  // 記事本文の末尾に「目次に戻る」リンクを追加
  $('.entry-content').append(html);
});

参考：PHPで実装する場合

以下のコードをfunctions.phpに追加します。

add_filter('the_content', function ($content) {
  // 本文内に目次（id="toc"）が存在しない場合は処理対象外
  if (strpos($content, 'id="toc"') === false) {
    return $content;
  }

  // 「目次に戻る」リンクのHTMLを設定
  $html = '<div class="back-toc"><a href="#toc">↑目次に戻る</a></div>';

  // すべてのH2見出しの直前に「目次に戻る」リンクを挿入
  $content = preg_replace('/<h2/i', $html . '<h2', $content);

  // 本文の末尾に「目次に戻る」リンクを追加
  $content .= $html;

  // 最初のH2見出しの前に挿入されたリンクを削除
  $content = preg_replace('/' . preg_quote($html, '/') . '/', '', $content, 1);

  return $content;
}, 20000);

さいごに

今回紹介した方法を使えば、各章（見出しH2）の終わりに目次へ戻るリンクを自動で追加することができます。
これにより、ユーザーが目次に戻りやすくなり、ナビゲーションが向上します。