Ad Inserterを使用して「Table of Contents Plus」で表示された目次の上に広告を表示する方法

WordPressの広告表示プラグイン、「Ad Inserter」を使って目次の上、つまり記事概要の下に広告を表示する設定方法について覚書。

「Table of Contents Plus」(TOC+)プラグインで目次を表示している場合、ちょっと特殊な設定が必要になります。

広告の表示箇所について

大抵のブログの記事の構成としては、以下のようになっていると思います。

上記構成の目次の上に広告を表示させます。

こんな感じです。

通常「Ad Inserter」を使って概要の下に広告を表示したい場合は、記事本文の最初の段落(H2とかH3タグが設定されている)の前に広告を表示する設定を行います。

ところが「Table of Contents Plus」(TOC+)プラグインで目次を表示している場合、この設定だと目次の下に表示されてしまいます。

TOC+は、動的に目次を表示する仕様上「Ad Inserter」で"Before HTML element"でTOC+のエレメント(div#article > div#toc_container)を指定しても表示されません。

TOC+を使用している場合は、少し工夫が必要です。

今回紹介する方法は、記事に必ずmore(続きを読む) が使用されていることが前提となります。

moreが使われていない場合は、広告は表示されません。

また、TOC+を使っているか使っていないかは、基本的には関係なく、目次が表示されている場合は目次の上、目次が表示されていなければ概要の下(moreの直後)に表示されます。

moreが設定されている記事であればTOC+を使っていても目次の前に広告が表示できるという設定方法になります。

WordPressの仕様上、moreを使用した場合、moreがspanタグで囲まれて出力されます。

WordPressのファイル、"wp-includes\post-template.php"のコードの以下の行からもそれが読み取れます。

$output .= '<span id="more-' . $post->ID . '"></span>' . $content[1];

実際、moreが設定されている記事のソースを確認すると「<span id="more-47"></span>」という感じに出力されていることがわかります。

この仕様に基づいてTOC+で表示された目次の上に広告を表示するための「Ad Inserter」の設定は、以下のようになります。

まず[Posts]のチェックをオンにし、[Insertion]のドロップダウンリストから"After paragraph"を選択します。

次に下の画像の赤四角で囲まれたボタン"Toggle paragraph counting settings"をクリックします。

[paragraph counting settings]エリアが表示されるので、以下のように設定します。

[Count]："from top"

[paragraphs with tags]："span"

[and]："contain"、"more"

設定条件を日本語的に説明すると、「1番最初の段落の後で、記事の先頭から数えて1番目に出てくるspanタグで、かつ、タグの中身に"more"文字列を含むspanタグの直後」という感じです。

"1番最初の段落"は、記事の概要部分になります。

moreを使うとspanタグの中にidの指定、"id="more-XX"という文字列が入るので"more"文字列を含むというのをAnd条件に指定すれば、"more"を文字列を含まない他のspanタグは無視されるため、誤表示されることもありません。

この設定をした場合の実際の表示例です。

目次の上に広告(468X60サイズ)が表示されています。

目次が表示されない場合でも以下のように本文の最初の段落前に表示されます。

WordPressの「Ad Inserter」プラグインを使用して「Table of Contents Plus」(TOC+)プラグインで目次を表示している場合でも目次の上に広告を表示する設定方法について記事にしました。

このブログで使っているテーマ「Simplicity2」では、ウィジェットが充実していて、「Ad Inserter」自体を使わなくても記事中に広告を簡単に設置できたりしますが、別で使っているテーマでは、そういったことができないので「Ad Inserter」を使用しています。

TOC+も併用していて、目次上に広告を表示するのに結構考えちゃったんで忘れないように記事にしました。

あらためて「Simplicity2」は、本当に優れたテーマだなぁと思います。