賢威でトップページにアドセンス広告やメルマガ登録フォームを設定する方法


賢威のトップページのメニュー下、以下の画像赤枠の場所にアドセンス広告やメルマガ登録の為の入力フォームを置きたいという方もおられると思います。

1

ここに設置する方法自体はそんなに難しくありません。

ただ、アドセンス広告の場合、PCで見たときとスマホで見た時とで、広告のサイズを変えたいという方もいらっしゃるかと思いますので、今回はそれについてまず解説します。

トップページにアドセンス広告を設置する

まずはトップページのその場所にアドセンス広告を設置してみましょう。

ワードプレスのダッシュボード→外観→エディター→メインインデックスのテンプレート(index.php)に行きます。

そしたら、次の場所を探して下さい。

2

この部分にアドセンスコードを差し込めば、OKです。

3

このようになります。

※今回は便宜的にアドセンスコードではなく、画像を挿入しています。青いラインの部分があなたのアドセンスコードを設置する部分になります

また、画像ではアドセンスコードを中央寄せにしています。

<div align=”center”>スポンサーリンク<br />

広告コード</div>

<br />は改行のためのコードです。必ずコードの結びは</div>で閉じてください。

できたら、「ファイルを更新」ボタンをクリックして、トップページに戻ってみます。

4

この様になっていればOKです。

設定自体はこれで完了なのですが、現在はスマホからのサイトのアクセスが増えているので、アドセンス広告もスマホ用に最適化させたほうがいいです。

アドセンス広告にはレスポンシブ対応の広告もあるのですが、思ったように表示の切り替わりがなされていなかったり、位置的にどうしてもPCでは横長のバナー広告を使いたいという方もいると思います。

そんな時は簡単なコードでスマホとPC用の広告を切り替える方法があります。

スマホとPCでアドセンスの広告表示を変える方法

その前に、上の方法では便宜的にアドセンスコードをそのまま貼りましたが、実際この様に貼り付けると極稀にレイアウトが崩れるときがあります。また、読み込むソースコードの量も増えるので、サイトの表示速度も遅くなります。

なので、「Adsense Manager」というプラグインを使って、コードを短くします。

このプラグインの使い方の説明は割愛しますが、簡単に言えば、ソースコードの引き出しをつくるプラグインです。引き出しの中に広告コードを入れておいて、その引き出しの名前をPHPのプログラムで読み込み、中のコードをサイトに反映させることができます。

アドセンスのコードをたった1行にできる上、引き出しの中身(広告コード)さえ変えれば、別の広告も表示させることができるので、大変便利です。

以降は、そのプラグインを使った状態で解説して行きます。

コードでスマホとPCの広告をスイッチする

スマホとPCでアドセンス広告の表示を切り替えるには、こちらのコードを使います。

<?php if ( function_exists(‘wp_is_mobile’) && wp_is_mobile() ) :?>

スマホ用の広告コード

<?php else: ?>

PC用の広告コード

<?php endif; ?>

これはどういう仕組みかというと、まずアクセスしてきた人のデバイスがスマホだった場合は、上のコード内に記載されている「スマホ用の広告コード」の広告が表示されます。

次に、アクセスしてきた人のデバイスがPCだった場合、その次の「PC用の広告コード」が反映されてPC用の広告が表示されます。

要は、スマホだったらこの広告、そうじゃなかったらこっちの広告を表示させる、という切り替えスイッチなんです。

今回はこの様にしました。

<?php if ( function_exists(‘wp_is_mobile’) && wp_is_mobile() ) :?>

<?php adsensem_ad(‘sumaho’); ?>

<?php else: ?>

<?php adsensem_ad(‘pc’); ?>

<?php endif; ?>

先ほどの「Adsense Manager」によってコードが簡略化されていますよね。

「<?php adsensem_ad(‘sumaho’); ?>」にはスマホで表示させたい広告コードが、「<?php adsensem_ad(‘pc’); ?>」にはPCで表示させたい広告がそれぞれ入っています。

そして、これを先ほどアドセンス広告を設置した場所に入れてみます。

5

設置したら、「ファイルを更新」ボタンをクリックして、トップページに戻ってみます。

まずはPC用の広告です。

6

分かりやすいように横長の広告(今回はイメージ画像)を貼ってみました。横幅が728で高さが90なので、ちょっとはみ出しましたが、PCではこのようになります。

続いて、スマホでアクセスするとこうなります。

7

このようになりました。スマホ用には冒頭のレクタングル大(336×280)の広告イメージを挿入してみました。一目瞭然ですね。スマホではレクタングル大、PCでは横長の広告が表示されました。

この様にすれば、スマホとPCで広告が使い分けられます。

スイッチできるコードの応用

<?php if ( function_exists(‘wp_is_mobile’) && wp_is_mobile() ) :?>

スマホで表示したいコード

<?php else: ?>

PCで表示したいコード

<?php endif; ?>

先ほどの、表示を切り替えるコードですが、「スマホで表示したいコード」の部分を空欄にすると、スマホには何も表示されず、PCだけに「PCで表示したいコード」の部分が反映されます。逆に「PCで表示したいコード」の部分を空欄にすると、PCには何も表示されず、スマホだけに「スマホで表示したいコード」が反映されます。

このように、広告の表示をスイッチできるコードは、広告以外のコードを入れるなど、応用次第でいくらでも活用できるものです。今後さらにスマホからのアクセスが増えることを考えると、覚えておきたい方法です。

メルマガ登録フォームを設置する

続いて、メルマガ登録フォームの設置をしてみたいと思います。

僕のサイトでも、トップページにメルマガ登録フォームが設置されています。

メルマガ登録フォーム説明画像

設定は簡単で、アドセンス広告を設置したように、ここにもメルマガ登録フォームを設置できます。

先ほどアドセンスコードを設置した場所に、「メルマガ登録を促す画像」と、「契約したメルマガ配信スタンドから取得したアドレス登録フォームのコード」、そして「メルマガ登録の送信ボタンとなる画像」を設置するだけです。

次ページ

12次

今回の記事はお役にたてましたでしょうか?

もし、今回の記事を読んで感想や分からない事などありましたら、下のフォームより僕にお伝え下さい。

些細な事でも構いません。

おそらく、あなたが抱いた疑問は、これからこの記事を読む方も抱く疑問です。

そういった疑問を1つ1つ解決していきます。

コメントして頂ければ気づき次第、すぐに回答いたします。

このブログは、

・アフィリエイト開始初月から9万円のネット収入が得られた秘密

アフィリエイト開始2ヶ月目で以前勤めていた会社からの給料と
 同額
のネット収入を確保した方法

・5ヶ月目で月収120万円を達成した最先端テクニック

・これから流行り始めるブログマネタイズの新しい思考法

などを書いています。

只今、ブログの内容をより体系的にまとめたビジネス教科書を
無料でプレゼントしています。

以下のフォームに教科書を受け取るメールアドレスと、
あなたの苗字を記入してプレゼントをお受け取り下さい。





記事一覧


著者:ヒデアキ
現在は、毎月100万円の収入を得ているブログアフィリエイトの知識を活かして「新たな収入源を手に入れ大切な人を守りたい」と真剣に考えている方を全力でサポートしています。
更に詳しいプロフィールはこちら


このページの先頭へ