開発

WordPressプラグイン「Easy Table of Contents」を使っている場合に目次の下にGoogle AdSenseを表示させる方法

投稿日:

ブログの目次の下にGoogle AdSenseの広告が表示されているのを見かけました。

AdSenseの自動広告を設定すると本文中の思わぬところに広告が出てしまうので、自動広告をオフにした場合、目次の下というのはあまり邪魔にならなくていい場所だと思います。

それにAdSenseは記事上と記事下、サイドバーに表示するのが効果的という話を聞いたことがあります。サイドバーはPCにしか表示されないので記事の上下は特に重要です。

そこで目次の下にAdSenseを設定しようとしたところ、ウィジェットやプラグインの設定だけでは簡単にできないことが判明。

「Table of Contents Plus」というプラグインでのやり方はネット上に見つけることができたのですが、自分が使っている「Easy Table of Contents」についてはあまり情報がありませんでした。

目次のプラグインを入れる際に調べた情報では「Easy Table of Contents」の方が「軽くて最近でも更新されているのでおすすめ!」という記事を見かけたような気がしたのですが、まだまだ「Table of Contents Plus」の方が多く使われているようです。

以下「Easy Table of Contents」で広告を出す手順を紹介していきます。

WordPressでプラグインの設定が保存できなくなったり、ウィジェットにAdSenseのコードが保存できなくなった時の対処法

functions.phpを書き換える方法

テーマの編集からfunctions.phpを書き換えてウィジェットに項目を追加するという方法を見つけました。

試してみると、確かにウィジェットからコードが入れられて便利だし、無事広告も表示されました。ところが、どうしても目次の下じゃなくて上に広告が表示されてしまう。

この処理自体はきちんと最初のh2タグの上に広告を出そうとしているようですが、目次のプラグインにその場所を取られてしまった結果、目次の上に表示されてしまうようです。

プラグイン編集をする方法

上記方法はウィジェットからコードが編集できてスマートだったのですが、やはり目次の下に広告を出したかったのでプラグインを編集することにしました。
※WordPressやEasy Table of Contentsのバージョンによっては下記条件と一致しない場合があるのでご注意ください

easy-table-of-contents.phpを開く

WordPressのメニューからプラグイン→プラグイン編集をクリックすると、テーマの編集のようにプラグインのファイルを直接編集することができます。

プラグイン編集

右側の「編集するプラグインを選択」のプルダウンから「Easy Table of Contents」を選んで選択ボタンを押します。デフォルトで「easy-table-of-contents.php」が編集できる状態のはずですが、他のファイルになっている場合は正しいファイルを選んでください。

easy-table-of-contents.php編集

「選択したファイルの内容:」下のエディタ内を一度クリックして編集状態にし、Ctrl+Fを押します。出現したSearch:枠内に

$html .= '</div>' . PHP_EOL;

と入れてEnterキーを押すと検索結果が2件出てきます。下の方(1077行)と

// Enqueue the script.

の間にAdSenseのコードを入れていきます。

AdSenseコード挿入場所

AdSenseのコードを編集

Google AdSenseのサイトから記事内広告のコードを取得します。

そのままだと10行くらいになっているので3行程度に編集します。エディタに貼り付けてコードをよく見ると3つのタグで書かれていることに気付きます。

最初のscriptタグはそのままで、次のinsタグは要素ごとに改行されているので半角スペースを空けて1行に編集し、最後のscriptは改行を詰めるだけです。

後は他のhtmlが書かれている行と同じように$htmlという変数に入れていきます。

上記の編集後を流用する場合はdata-ad-clientとdata-ad-slotの数字を自分のコードに書き換えてください。
※AdSenseコードは変更になる可能性があります。なるべく最新のものを使うようにしてください

easy-table-of-contents.phpの編集

あとは1078行目に編集したコードを貼り付けてファイルを更新ボタンを押せば完了です。

ファイルを更新

エラーが出た場合は間違っているのでよく確認してください。ミスがあると正しく動作しなくなる可能性があります。作業はバックアップをとりながら慎重におこなってください。

ウィンドウを閉じなければCtrl+Zで編集内容を元に戻すことができます。

ブログに反映されない場合

ファイルを更新ボタンを押してもブログに何も変化がない場合、キャッシュが残っている可能性があります。

レンタルサーバーによっては高速化のためにキャッシュの設定を用意してある場合があるのでクリアしてみましょう。

ロリポップ!の場合はロリポップ!アクセラレータの設定ボタンからキャッシュをクリアできます。

ロリポップ!アクセラレータ

ポップアップが表示されたら、キャッシュを削除ボタンを押してください。

キャッシュを削除

この後にブラウザをリロードすると変更が反映されるはずです。念のためにChromeの場合はF12を押してデベロッパーツールを出してリロードボタンの上で右クリックし、「キャッシュの消去とハード再読み込み」をおこなうと確実かもしれません。

-開発
-,

Copyright© Workerブログ|仕事を続けるための工夫 , 2020 All Rights Reserved Powered by STINGER.