サイトの目次をつける&その目次下にAdsense広告を表示させる方法

いろいろなサイトを参考にさせて頂いてこのサイトを運営しております。

ふとあるサイトをみた時に目次下の広告がありました。

なかなか効果がありあそうな気がしたので、試してみました。

今回は、

【サイトの目次をつける&その目次下にAdSense広告を表示させる方法】

です。自分の備忘録も兼ねて、目次を表示させる方法AdSense広告をその目次の下に表示させる方法を紹介していきます。



WordPressプラグインの「Table of Contents Plus」で目次を表示させる

サイトにおいて目次は必須といってもいいほど大切なものです。自分のみたいコンテンツの大体を把握できるため、
訪問者にとっての需要はかなり高いと考えられます。

Table of Contents Plusのインストール

  1. WordPressの左メニュー →「プラグイン」→「新規追加」
  2. 検索ボックスに「Table of Contents Plus」と入力し、検索
  3. Table of Contents Plusが最初に表示されているので、「今すぐインストール」をクリック
  4. インストール完了画面に遷移するので、「プラグインの有効化」をクリック
  5. インストール完了!

Table of Contents Plusの設定

【表示する場所】

「最初の見出しの前(デフォルト)」、「最初の見出しの後」、「トップ」、「ボトム」の4種類から選べますが、基本的には、「最初の見出しの前(デフォルト)」で問題ありません。それにしてもボトムって記事の一番下に目次を持ってくることがあるんでしょうかね・・・(笑)

【表示条件】

目次を表示させる為の条件を設定できます。「〇つ以上見出しがあるとき」のみの設定です。2個から10個の中で選択できるようになっています。常に見出しを表示したいのであれば2つを選択しておくといいと思います。

【次の投稿タイプの時に表示】

post、page、ml-slider、ml-slide、cta、lpの中から選択することができます。通常はpostが一般的なので、「post」を選択しましょう。

見だしテキスト
Table of Contents Plus_見出しテキスト

目次部分の固定テキストを設定します。「目次」ではなく、「概要」や「INDEX」等としているサイトもありますね。また表示、非表示を切り替えるボタンの有無、その固定テキストも設定できます。

Table of Contents Plus_目次画面

上記が設定した例です。

【階層表示】

階層表示するかしないかの設定です。階層表示するとインデントがかかるので、読み手にはわかりやすいですね。

《設定あり》

Table of Contents Plus_階層表示ON

《設定なし》

Table of Contents Plus_階層表示OFF

デフォルトでONになっていますので、そのまま設定しておきましょう。

【番号振り】

見出しの文字の横に番号が振られています。これを自動で振ってくれます。目次だけに表示される番号です。先ほどの上記画像のように記事内の見出しに番号をつけている場合は、番号が重複してつけられることになるので、ご注意ください。ここはご自分のサイトに合わせて設定してください。

【スムーススクロール】

目次の見出しをクリックしたときにその見出し部分までスクロールして飛ぶか一気に切り替えて飛ぶかの設定です。好きな方を選んでください。

【横幅】

目次欄の横幅の設定です。これはデフォルトの自動にしておきましょう。

【回り込み】

目次欄の配置に関係する項目です。基本的にデフォルトで問題ありません。

【文字サイズ】

文字のサイズを設定できます。

【デザイン】

目次欄のデザインを6パターンから選択することができます。これもサイトに合わせて選ぶといいでしょう。

【上級向け】

更に細かい設定をしたいときに使用するメニューですが、基本的な設定だけであればそのまま触らなくていいです。

作成した目次の下にAdSense広告を自動的に配置する

このTable of Contents Plusを利用して目次の下に広告を表示することができます。若干応用編ですが、手順通り行えば簡単です。

ご自分のサーバー管理コンソールからサイトを構成しているファイルを閲覧することができます。大体のものはFTPツールが入っていると思いますので、そこから「wp-content/plugins/table-of-contents-plus」配下に「toc.php」というファイルがあります。このファイルに少し修正をくわえていきます。この修正間違って保存やアップロードすると予期しないエラー等が発生する可能性がありますので、バックアップは必ず取りましょう。

エディターで「toc.php」を編集していきます。

その中で「add container」という文字列で検索します。この部分が、目次を挿入している箇所です。

// add container, toc title and list items
$html = ‘<div id=”toc_container” class=”‘ . $css_classes . ‘”>’;
if ( $this->options[‘show_heading_text’] ) {
$toc_title = $this->options[‘heading_text’];
if ( strpos($toc_title, ‘%PAGE_TITLE%’) !== false ) $toc_title = str_replace( ‘%PAGE_TITLE%’, get_the_title(), $toc_title );
if ( strpos($toc_title, ‘%PAGE_NAME%’) !== false ) $toc_title = str_replace( ‘%PAGE_NAME%’, get_the_title(), $toc_title );
$html .= ‘<p class=”toc_title”>’ . htmlentities( $toc_title, ENT_COMPAT, ‘UTF-8’ ) . ‘</p>’;
}
$html .= ‘<ul class=”toc_list”>’ . $items . ‘</ul></div>’ . “\n”;

太字で書いた部分を修正していきます。

$html .= ‘<ul class=”toc_list”>’ . $items . ‘</ul></div>’ . “\n”;

$html .= ‘<ul class=”toc_list”>’ . $items . ‘</ul></div>’ . “\n”.'<br />ここにアドセンスの広告コードをそのまま貼り付け<br />’;

上記のように修正すれば完了です!!

ちょうどこのサイトを記事を見て頂いているのであれば、目次の下に広告がきているはずです。うまく設定できればこのようになります。

(おまけ)目次に表示する見出しレベルを設定する

WordPressの見出しには、h1~h6まであります。これをどこまで目次に表示させるかを設定することもできます。ただし、上級設定となるので、標準設定にはない項目です。前述しましたが、【上級向け】という設定項目があります。そのメニューを表示するとこの設定が表示されます。

TOC見出しレベル

どこまでの見出しを目次に表示させるかをチェックしてください。それがそのまま目次に反映されます。今回のこの記事では、見出し5を使用していますが、h4までしか設定していないため、目次には表示されていません。このようにどこまでを目次に表示させるかも設定可能です。

(おまけ2)除外したい見出しを目次に表示させないようにする

Table of Contents Plusをそのまま設定してしまうと不要な見出しまで目次に追加されることがあります。例を挙げると別プラグインで表示可能になる関連記事や著者プロフィール等です。下記画像を見ると確かに見出しに含まれてしまっています。(3.1著者プロフィールと4.関連記事の紹介が表示されている。)毎回これが目次に表示されるのは、読み手からしてもうっとしいですし、目次としてもすっきりしません。

TOC除外目次

これを表示させないようにする設定をしていきましょう。

標準の設定にはありません。【上級向け】という非表示されているメニューの中に設定があります。「除外する見出し」という設定があるので、ここに除外する文字列を入力していきます。先ほどの上記画像で「3.1著者プロフィール」と「4.関連記事の紹介」が表示されているので、これを非表示にしたいので、下記の図のように入力欄にその見出し名を入力します。ちなみに複数指定するときは、「|」を間に入力して複数入力してください。

TOC除外見出し設定

設定更新し、目次を確認するとちゃんと消えています。

TOC記事見出し設定後

このような設定まで可能になっています。上級向けの設定ではまだ細かくいろいろ設定可能です。当記事ではここまでとしておきます。また役に立つがあれば紹介したいと思います。

著者プロフィール

pandaman
30歳の二人の子持ちで、職業はSEです。
1年間スマホ記事のゲームライターをしていました。
企業内システムエンジニアで、主にモデル設計を担当。
(TMモデル・ERモデル)当サイトについては、ネタ記事、本格ゲーム攻略、子供向けアニメ・・様々なジャンルの記事を書いています。
Pocket

コメントを残す

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

ABOUTこの記事をかいた人

30歳の二人の子持ちで、職業はSEです。 1年間スマホ記事のゲームライターをしていました。 企業内システムエンジニアで、主にモデル設計を担当。 (TMモデル・ERモデル)当サイトについては、ネタ記事、本格ゲーム攻略、子供向けアニメ・・様々なジャンルの記事を書いています。