vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間11万PV〜。

[Stinger5] リード文下のAdSense広告をPC・スマホ用サイズに分岐して表示する

      2017/01/31

LINEで送る
Pocket

stinger5-adsense-in-article
こんにちは、okutani(@okutani_t)です。AdSenseの広告サイズは、PC・スマートフォン用の「336×280」と「300×250」がそれぞれ用意してあります。

今回はAdSenseの広告を、WordPressのテーマ「Stinger5」のリード文下に、PC・スマホ用サイズでそれぞれ表示させます。

設置の際、投稿ページに切り替え用コード(PHP)を書くとエラーを起こすので、本記事の設定で広告サイズを自動で切り替えるようにしていきましょう。

スポンサーリンク

PC・スマホで別サイズの広告を読み込む

Stinger5では下記のコードを使うことで、PCとスマホで表示したいコンテンツを分けることができます。

<?php if(is_mobile()) { ?>
  //ここにスマホ用の内容
<?php } else { ?>
  //ここにPC用の内容
<?php } ?>

上記のコードにそれぞれ「PC用の広告」と「スマホ用の広告」を設置していけば設置できそうですね。

しかし、残念ながら投稿ページ内ではPHPを利用することができません。

上記のコードはsingle.php等のPHPファイル内でしか扱えないのです。どうすればPC用・スマホ用の広告を使い分けることができるでしょうか。

この問題を解決するには、「広告用PHPファイル」を用意、「ショートコード」からPHPファイルを読み込むことで解決できます。

というわけで広告用PHPファイルを作成していきましょう。

広告用PHPファイルを作成

先ほどのPC・スマホのコンテンツ切り替え用コードを、広告用のPHPファイルに記述していきます。

広告用のPHPファイルは「functions.php」と同じ階層に設置します。

今回は「in-adsense.php」という名前でPHPファイルを作成し、下記コードを記述しました。

<div class="ad-center">
  <p class="ad-sponsored">スポンサーリンク</p>
  <?php if(is_mobile()) { ?>
    //ここにスマホ用の広告コード
  <?php } else { ?>
    //ここにPC用の広告コード
  <?php } ?>
</div>

適宜、AdSenseで取得したコードを記述してください。

レイアウト用のdivとpタグも一緒に設置しておきました。in-adsense.phpの設定は以上です。

ショートコードを作成

ショートコードの詳細を知りたい方は、こちらの記事を読むとより理解が深まります。

WordPress投稿ページにPHP利用→ショートコードを使おう!
こんにちは、okutani(@okutani_t)です。WordPressではPHPを使って動的なサイトを...
2015-04-16 22:08
はてブ

では、PHPファイルを呼び出すショートコードを「functions.php」に記述しましょう。

<?php
function short_php($params = array()) {
  extract(shortcode_atts(array(
    'file' => 'default'
  ), $params));
  ob_start();
  include(get_theme_root() . '/' . get_template() . "/$file.php");
  return ob_get_clean();
}

add_shortcode('myphp1', 'short_php');

子テーマを使っている場合は、7行目を下記のように書き換えておきましょう。

include(get_theme_root() . '/' . get_template() . "/$file.php");
 
↓
 
include(STYLESHEETPATH . "/$file.php");

投稿ページに下記コードを記述することで、作成したPHPファイルを読み込むことができます。

[myphp1 file='in-adsense']

設定は以上です。記事を投稿してみてください。

PCでは「336×280」、スマホでは「300×250」の広告が表示されていれば正しく設定されています。

[おまけ] 広告レイアウトを整える

お使いのstyle.cssに下記を記述しましょう。中央寄せ、スポンサーリンク文字を調整しています。

.ad-center{
    margin:0 auto 24px;
    text-align:center;
}
.ad-sponsored {
    margin-bottom: 5px;
    font-size: 14px;
}

参考になれば幸いです。

まとめ

もし、PCでも「300×250」の広告サイズで大丈夫だという方は、スマホ用サイズの広告を記事内に貼り付けるだけでOKです。

少しでも広告のクリック数をあげたいのであれば、本記事の方法でPC用とスマホ用広告を分けて表示すれば効果的ですね。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
今回の「外部PHPファイル+ショートコード」の組み合わせ、何か便利なことに使えそうですね。...ぱっとは思いつきませんが(´・ω・`)

 - Stinger5, WordPress

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

ロリポップのWordPressデータベースを手動バックアップする方法

こんにちは、okutani(@okutani_t)です。みなさんはWordPre …

WordPress記事内の画像に影をつける方法

こんにちは、okutani(@okutani_t)です。WordPressサイト …

WordPressサイトをGitで管理。Macローカル開発環境編

こんにちは、okutani(@okutani_t)です。みなさんはちゃんと「Wo …

[WordPress] 記事下に一言コメントを挿入!カスタムフィールドを使ってみよう

こんにちは、okutani(@okutani_t)です。よくブログを読んでいると …

Stinger5にiPhone用のアイコンを設置する

こんにちは、okutani(@okutani_t)です。iPhoneのホーム画面 …

『Vagrant+VCCW』でWordPressローカル環境を構築してみよう

こんにちは、okutani(@okutani_t)です。お店のサイトやブログなん …

WordPressでテーブルを利用する方法(HTML+CSS)

こんにちは、okutani(@okutani_t)です。サイトを運営していると、 …

[Stinger5] スマホレイアウトのナビメニューをカスタマイズしてみよう

こんにちは、okutani(@okutani_t)です。Stinger5のスマー …

WordPressにGravatarを導入してアバターを設定してみよう!

こんにちは、okutani(@okutani_t)です。WordPressでは、 …

Simplicity,Stinger5で超簡単にアイコンを使う方法

こんにちは、okutani(@okutani_t)です。あ、もう一度言いますね。 …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。