KH-WEBLOG TOP > WEBメモ > WordPress > スマホとPCで表示を切り替える:WordPress

スマホとPCで表示を切り替える:WordPress

WordPressでテーマを切り替えずにスマホとPC用の表示を切り替えたい場合に便利な方法をメモ。

まず、
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']);
}

と記述し、表示を切り替えたい箇所に

<?php 
//スマホ用コンテンツここから------------------------------------------------
if (is_mobile()):?>
ここにスマホ用
<?php 
//PC向けコンテンツここから------------------------------------------------
else: ?>
ここにPC用
<?php endif; ?>

のようにしてあげると、スマホとPCの表示を切り替えることができます。

ちょっと切り替えたい処理がある場合などに便利です。

もし記事の投稿画面で切り替えたい場合は、デフォルトではPHPが使用できないので、投稿内でもPHPを使えるようにするプラグイン(Exec-PHP等)を使用するかショートコードとして上記の処理を登録することで投稿画面内でも切り替えができるようになります。

ショートコードとして使用する方法は
functions.php内に

function pccontent( $atts, $content = null ) {
if(is_mobile()) {  
        return '';  
} else {
        return '' . do_shortcode($content) . '';
}
}
function spcontent( $atts, $content = null ) {
if(is_mobile()) {  
        return '' . do_shortcode($content) . '';  
} else {
        return '';
}
}
add_shortcode('pcswitch', 'pccontent');
add_shortcode('spswitch', 'spcontent');

と記述し、あとは投稿記事内に

	
[pcswitch]PC用コンテンツ[/pcswitch]
[spswitch]スマホ用コンテンツ[/spswitch]

のようにしてあげればOK

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パンくずリスト パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事