【WordPress】Table of Contents Plus が生成した目次の直前に、ウィジェット（広告など）を表示するコードを自分で書く

Table of Contents Plus (TOC+) という WordPressプラグインが生成した目次の直前に、ウィジェットを表示する方法について説明します。

※ 2018年6月6日：目次のプラグインとして、代わりに Easy Table of Contents を使った場合についても追記しました。

1. Table of Contents Plus について
2. 目次の上にウィジェットを表示する
- 手順
3. おわりに

1. Table of Contents Plus について

Table of Contents Plus は、WordPress のプラグインです。

このプラグインは、記事の目次を自動的に生成して表示してくれるという優れものです。

最終更新が２年前となっているのが気になりますが、まだまだ使われているようです。このサイトでも使っています。

2. 目次の上にウィジェットを表示する

そして本題ですが、この Table of Contents Plusで生成された目次のすぐ上の部分に、ウィジェットを表示します。どんなウィジェットでもいいのですが、「カスタム HTML」というウィジェットを使えば広告を表示することができますので、やり方を知りたい人は結構いらっしゃるのではないでしょうか。

手順

(1) コードの記述

使用しているテーマの functions.php に以下のコードを追記して下さい。

// 専用のサイドバーを用意する
register_sidebars( 1,
  array(
    'name'=>'目次上',
    'id' => 'widget-above-toc',
    'description' => '目次の上に表示されるウイジェット。',
    'before_widget' => '<div id="%1$s" class="widget-above-toc %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<div class="widget-above-toc-title">',
    'after_title' => '</div>',
  )
);

/**
 * 記事内の目次の上にサイドバーを追加する処理
 * 目次がなければ、記事の先頭に追加する。
 */
function add_widget_above_toc($the_content) {
  if ( is_single() && is_active_sidebar( 'widget-above-toc' ) ) {
    // ウィジェットの表示文字列を取得する
    ob_start();
    dynamic_sidebar( 'widget-above-toc' );
    $widget_content = ob_get_clean();

    $pos_start = mb_strpos( $the_content, '<div id="toc_container"' ); // 目次の位置を取得する（TOC+の場合）
    //$pos_start = mb_strpos( $the_content, '<div id="ez-toc-container"' ); // （Easy Table of Contents の場合）
    if ($pos_start === false) {
      $the_content = $widget_content . $the_content;
    } else {
      $html_before = mb_substr( $the_content, 0, $pos_start );
      $html_after = mb_substr( $the_content, $pos_start );
      $the_content = $html_before . $widget_content . $html_after;
    }
  }
  return $the_content;
}
add_filter( 'the_content','add_widget_above_toc', 110 );

コードの中にも書いていますが、TOC+ の目次が見つからなかった場合は、記事の先頭にウィジェットを追加します。

TOC+ ではなく、Easy Table of Contents を使っている場合は、25行目（$pos_start = mb_strpos( ... の行です）をコメントにして、代わりに26行目のコメントを外して下さい。

ここのコードは少しアバウトなやり方になっています。

$pos_start = mb_strpos( $the_content, '<div id="toc_container"' );

TOC+ で追加される目次部分のHTMLが「<div id="toc_container"」で始まっていたので、それをそのまま利用しています。生成されるHTMLが変われば、ここの部分のコードもそれに合わせて変更しなければいけません。Easy Table of Contents の場合も同様です。

また、最後の部分で add_filter 関数の第三引数に、110 をセットしていますが、これは TOC+ のコードを見たら同じような部分があり、そこでは 100 がセットされていたからです。TOC+ による目次追加処理の後に、こちらのコードを実行する必要があります。（Easy Table of Contents も 100でした）

(2) サイドバーにウィジェットを追加する

WordPress管理サイトの [外観] – [ウィジェット] を開くと、「記事上」というサイドバーが追加されています。

ここに、お好みのウィジェットを追加していくだけです。

(3) CSS で位置を調整する

また、テーマによっては CSS の調整も必要かもしれません。

その際には、Widget CSS Classes という WordPress プラグインが便利です。ウィジェット毎に CSSクラスをセットすることができるので、CSSファイル内では、このクラスに対して記述するだけで済みます（他の要素への影響を抑えられます）。

3. おわりに

あっけなかったのではないでしょうか？

こういうカスタマイズが、予め用意された関数を使ってスマートに実現できるのが WordPress のよいところです。