ファイルを直接編集して、Google AdSenseを記事下に表示

せっかくブログを作成したので、Google AdSenseを表示する様にしました。月のレンタルサーバー代くらい稼げれば嬉しいです。

Google AdSenseの申し込み方法などは省略しますが、 WordPressの記事に貼り付けた方法など。

WordPressのプラグインにGoogle AdSense用のプラグインがたくさんありますが、たくさんプラグインを入れると個人的には余計管理が難しくなりそうなので、PHPファイルに直にコードを挿入しました。今回挿入した部分は記事の一番下です。

同じようなファイルがたくさんあったので、ペタペタ貼って検証したところ、僕の場合は、single.phpというファイルを編集すれば表示できました。

chromeの「検証」などでページの構成を確認すると、ファイルの内の下記の部分を編集してあげればよさそうです。

<section class="post-content" itemprop="text">※ブログの記事部分
        <?php the_content(); ?>
        <div id="single-page-adsence">※広告に枠などを表示したかったので囲みました
            <!--広告を記事の下部に表示-->
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- Google AdSence -->
            <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="秘密"
             data-ad-slot="秘密"
             data-ad-format="auto"></ins>
            <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>
      </section>

秘密となっている部分は、おそらく人によって違うので注意してください。 Googleから提供されるコードが人によって違うと思いますが、おおむね上記のとおりになると思います。

このままでもいいですが、広告に額縁をつけて他の人のブログなどで見る”広告”っぽくしたかったので、CSSも少し加えました。

/*記事の下の広告の区切りを分かりやすく*/
#single-page-adsence{
  padding: 4px;
  border: 1px #bfbfbf solid;
  box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8);
}

上記の変更をした後、WordPressを編集しているブラウザで見ると・・・(´・ω・`)表示されない貼り付け方間違えたかな・・・と思ってましたが、chromeのクッキーなどの影響で見えない場合があるようです。てっとり早く確認したい場合は、別のブラウザで開くか、chromeのシークレットモードで確認すればいいようです。

f:id:hpptms:20170921222820p:plain