WordPress

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

投稿日:2018年6月5日 更新日:

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

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

1. Table of Contents Plus について

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

Table of Contents Plus
Table of Contents Plus

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

Table of Contents Plusで生成された目次
Table of Contents Plusで生成された目次

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

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 のよいところです。

📂-WordPress

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPress

WordPress テーマ STINGER 8 で、style.css の変更をすぐに反映させる方法

WordPress の無料テーマである STINGER 8 のカスタマイズのお話です。 スポンサードリンク 目次1. 問題点2. 対策準備作業style.css に変更を加えた後に必要な作業3. まと …

WordPress の Attitude テーマに日本語翻訳ファイルを使用する(子テーマ利用)

WordPress の Attitude テーマに日本語翻訳ファイルを追加する方法です。 子テーマを利用していることを前提としており、子テーマのディレクトリ側に翻訳ファイルを追加します。 目次前置き( …

WordPress

【WordPress】Gutenberg の 画像ブロック(core/image)で相対URLをセットする

WordPress の Gutenberg において、「 画像ブロック (core/image)」で相対URLを使用するプラグインを作りましたので紹介します。

WordPress

WordPress:本文に<p>や<br>が自動で追加されないようにする方法(wpautop を無効にする)

目次1. WordPress の wpautop 関数2. WordPress は投稿や固定ページの本文に対して wpautop 関数を実行します3. 本文に対する wpautop 関数を無効にする方 …

WordPress

【WordPress】Gutenberg をカスタマイズするための情報

WordPress の Gutenberg をカスタマイズするための情報を紹介します。