WordPressでスマートフォンだけ広告を切り替えて表示する方法。

WordPressを利用しているとパソコンとスマホで表示を切り替えたい事もあると思います。
タイトルは一番需要がありそうな広告の切り替えという事にしましたが、
それ以外でも切り替えを利用したい場面はいくつかあります。

■デバイス毎に表示を切り替える方法

今回紹介する方法はwp_is_mobileという関数を用いた方法です。
簡単に言うと利用者のデバイスのヘッダー情報を参照して任意のコンテンツ表示を行います。
wp_is_mobile関数はWordPressのバージョンが3.4以上であることが条件となります。
新しいバージョンを利用していれば問題ありません。

<?php if (wp_is_mobile()) :?>
	スマートフォンに表示したいコンテンツ
<?php else: ?>
	パソコンに表示したいコンテンツ
<?php endif; ?>

 
この記述をする事でスマホとパソコンに任意のコンテンツを表示する事ができます。
スマートフォンに表示したいコンテンツの部分に任意のコンテンツを記入してあげれば終了です。
タイトルのように広告を切り替えて表示したい場合はそれぞれに適切な広告のコードを埋め込めば完了します。

例えばスマホ向けアプリの広告などはパソコン向けに表示しても意味がほとんどありません。
またスマートフォンではパソコンと比較して表示できる情報量が少ないため一部のメニューを表示しないような使い方も有効です。

更に細かくデバイスによって表示を切り替えるためにはfunctions.phpを編集します。
外観>テーマの編集からfunctions.phpを開いて以下を記述します。

function is_mobile(){
	$useragents = array(
		'iPhone',          // iPhone
		'iPod',            // iPod touch
		'Android',         // 1.5+ Android
		'dream',           // Pre 1.5 Android
		'CUPCAKE',         // 1.5+ Android
		'blackberry9500',  // Storm
		'blackberry9530',  // Storm
		'blackberry9520',  // Storm v2
		'blackberry9550',  // Storm v2
		'blackberry9800',  // Torch
		'webOS',           // Palm Pre Experimental
		'incognito',       // Other iPhone browser
		'webmate'          // Other iPhone browser
	);
	$pattern = '/'.implode('|', $useragents).'/i';
	return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

functions.phpが存在しない場合には作成します。

参考:WordPress:PCとスマートフォンでコンテンツを切り替えたい際に便利なwp_is_mobile関数+α

広告以外の用途として思い当たるのが動画の埋め込み再生などでしょうか。
YouTubeやニコニコ動画はWEBサイト内にプレイヤーを埋め込んで表示できます。
スマートフォンから見た場合には埋め込みプレイヤーがあっても結局外部アプリで開くはずです。
であれば通常のリンクの方が利便性は高いと思われます。

以下に私がニコニコ動画に投稿したものを埋め込んであります。
パソコンからでは埋め込みプレイヤーでそのまま視聴する事ができ、
スマートフォンからでは文字リンクとなるように切り替えをしてあります。

■WordPressの記事内でPHPを実行するためのプラグイン

phpプラグイン

wp_is_mobileを利用して記事内でスマートフォン用の記述をする場合にはPHPを実行する環境が必要です。
そこで記事内のPHPを実行できるようにするプラグインを導入します。

私が利用しているのは「PHP Code For Posts」です。
プラグインの新規追加で検索すればすぐに出てくるのでインストールして有効にします。
すると記事内に記述したPHPが実行されスマートフォンとパソコンの表示を切り替える事ができます。

これ以外にもPHPを実行できるようになるプラグインは多数公開されています。
基本的にはどれを利用しても問題ないと思います。

■そもそもデバイスごとにテーマを切り替えてしまう方法

ここまでは記事内の一部のコンテンツを切り替える方法を紹介してきました。
しかしプラグインの中にはデバイス毎に全く違ったテーマを表示できるものもあります。
「Multi Device Switcher」などが有名です。

当サイトでは利用していないため紹介までにとどめておきます。
スマホでPC表示が可能に!デバイスごとにテーマを切り替えれるWordPressプラグイン「Multi Device Switcher」
こちらので詳しく説明されているため興味があれば挑戦してみるのも良いと思います。

スポンサーリンク






Be the first to comment

Leave a Reply

Your email address will not be published.