WordPress個別サポート

賢威で作成するサイトで個別記事の下にアドセンス広告を表示させる方法を紹介します。テンプレートファイルの修正が必要ですが、それほど難しくありません。

事前にGoogleアドセンスのサイトから広告のタグをコピーしておきましょう。

アドセンスのタグをコピーする

アドセンスのタグをコピーする

アドセンスに限らず各種アフィリエイト用に発行されるタグでも大丈夫です。

次に、賢威の個別記事用のテンプレート(単一記事の投稿/single.php)を開いてアドセンスの表示場所を検討しましょう。single.phpをダウンロードしてテキストエディタで編集するのが理想的ですが、「外観」‐「テーマの編集」(またはエディタ)メニューから開いても大丈夫です。

「外観」‐「テーマの編集」メニューで個別記事のテンプレート「single.php」を開く

「外観」‐「テーマの編集」メニューで個別記事のテンプレート「single.php」を開く

アドセンス広告の表示場所は記事のすぐ下、またはソーシャルボタンの下が定番です。

アドセンス広告の表示場所を検討する

アドセンス広告の表示場所を検討する

記事のすぐ下に表示する場合

single.phpから次のようなコードを見つけましょう。「the_content」が記事の本文を表示する命令です。

<!--本文-->
<?php the_content(); ?>
<!--/本文-->

すぐ下にアドセンスのタグをペーストして「ファイルを更新」ボタンをクリックします。

本文のすぐ下に広告タグをペースト

本文のすぐ下に広告タグをペースト

ペーストするタグの前後に数行空けておくのは、お試しの作業を後ですぐに元に戻せるようにする目印の意味もあります。

本文のすぐ下に広告が表示されるようになります。

本文のすぐ下に広告が表示される

本文のすぐ下に広告が表示される

ソーシャルボタンの下に表示する場合

single.phpから次のコードを見つけましょう。上記の本文表示の少し下にあります。このコードでソーシャルボタンを表示しています。

<?php get_template_part('social-button'); ?>

この下にアドセンスのタグをペーストして「ファイルを更新」ボタンをクリックします。

ソーシャルボタンの下に広告タグをペースト

ソーシャルボタンの下に広告タグをペースト

ソーシャルボタンの下に広告が表示されるようになります。

ソーシャルボタンの下に広告が表示される

ソーシャルボタンの下に広告が表示される

広告を中央に表示する

広告を左寄せではなく中央に表示する場合は、広告タグを次のdivタグで囲む方法があります。

<div align="center">
広告タグ
</div>

表示結果は次のようになります。

広告を中央に表示する

広告を中央に表示する

2つの広告を横並びに表示する

アドセンス以外のアフィリエイトタグなどと合わせて2つの広告を横に並べたいこともあります。その方法はいくつかありますが、次のようにdivタグで2つのブロックを作成して横に並べる方法があります。

<div style="float:left;width:300px;">
広告タグ1
</div>
<div style="float:left;width:300px;margin-left:10px;">
広告タグ2
</div>
<div style="clear:both;"></div>

ここでは、幅300pxのブロックを2つ作成して「float:left;」で横に並べています。ブロックの間隔は10px空けています。唯一の正解ではないので、いろいろと試行錯誤してみてください。たとえば、2つ目のブロックを「float:right;」にして自動で余白を入れる方法もあります。

表示結果は次のようになります。

2つの広告を横並びで表示する

2つの広告を横並びで表示する

以上、簡単にですが賢威の記事下にアドセンスを表示する方法を紹介してきました。アドセンスのタグをペーストする位置や組み合わせるdivタグをアレンジして自分なりに見た目などを調整してみてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート