【Cocoonカスタマイズ】目次を本文の先頭に表示する方法

記事に記載したコードは、スキンに追加されています。

はじめに
実装手順
さいごに

はじめに

Cocoonには標準で目次機能が搭載されていますが、デフォルトでは最初の<h2>タグの直前に表示されます。
導入文が長い記事や<h2>タグから始まらない記事では、目次が途中に表示されて読みにくくなることがあります。

そこで、目次を本文の先頭に表示します。

この記事では、この方法について説明します。

ウィジェットエリア「投稿本文上」に「目次」ウィジェットを配置することで実装可能です。
ただし、その場合はCocoon設定→目次→「目次の表示」設定に関わらず、目次が強制的に表示される仕様となります。

実装手順

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

/**
 * 目次を表示する条件を満たしている場合、本文の先頭に [toc] を追加
 *
 * @param string $content 投稿またはアーカイブの本文
 * @return string 目次ショートコードが付与されたコンテンツ
 */
if (!function_exists('prepend_toc_to_content')):
function prepend_toc_to_content($content) {
  if (is_total_the_page_toc_visible()) {
    $content = do_shortcode('[toc]') . $content;

    // 自動表示される目次を無効化
    add_filter('theme_mod_toc_visible', '__return_false');
  }

  // 処理済みのコンテンツを返却
  return $content;
}
endif;


// 本文を変更
add_filter('the_content', 'prepend_toc_to_content');
add_filter('the_category_content', 'prepend_toc_to_content');
add_filter('the_tag_content', 'prepend_toc_to_content');

さいごに

今回紹介した方法を使えば、目次を本文の先頭に表示できます。
レンダリング時に動的に挿入するため、ウィジェットの設定を個別に行う必要もありません。
導入文が長い記事やタグから始まらない記事でも、読者が迷うことなく目次にアクセスできる環境を、ぜひ構築してみてください。