【レスポンシブでスマートフォンのWordPressオリジナルテーマを作ろう】１つのCSSで出し分ける方法

Posted on by Eternal-tears
Sponsored Link

bodyタグにclassまたはidを振って、
PCとスマートフォンのCSSを１枚で管理する方法です。

Sponsored Link

元ネタはBrowser Detection and the body_class() Functionです。
ブラウザ別にbody_class() 関数にブラウザ別のクラスを加えるという方法。

つまり、bodyタグにスマートフォン用のclassが付与されるので、
頭に.iphoneを付けてCSS内で切り分ける方法です。

WordPressが提供する変数に下記の種類があります。

  • $is_lynx
  • $is_gecko
  • $is_IE
  • $is_winIE
  • $is_macIE
  • $is_opera
  • $is_NS4
  • $is_safari
  • $is_chrome
  • $is_iphone

body_class() 関数にブラウザ別のクラスを加えるには、
function.phpに以下のように追記します。

<?php
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
     global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

     if($is_lynx) $classes&#91;&#93; = 'lynx';
     elseif($is_gecko) $classes&#91;&#93; = 'gecko';
     elseif($is_opera) $classes&#91;&#93; = 'opera';
     elseif($is_NS4) $classes&#91;&#93; = 'ns4';
     elseif($is_safari) $classes&#91;&#93; = 'safari';
     elseif($is_chrome) $classes&#91;&#93; = 'chrome';
     elseif($is_IE) $classes&#91;&#93; = 'ie';
     else $classes&#91;&#93; = 'unknown';

     if($is_iphone) $classes&#91;&#93; = 'iphone';
     return $classes;
}
?>

bodyタグに下記のソースを記述します。

<body <?php body_class(); ?>>

iPhoneで閲覧した場合、下記のソースを出力します。

<body class="home blog logged-in iphone">

ですが、私的にはclassよりもidの方がオススメです。
idの場合は、function.phpに下記の関数を記述します。

<?php
function browser_body_class() {
	global $is_iphone;
	if($is_iphone){
		echo 'id="iphone"';
	}else{
		echo 'id="pcsite"';
	}
}
?>

bodyタグに下記のソースを記述します。

<body <?php body_class(); ?> <?php browser_body_class(); ?>>
iPhoneで閲覧した場合、下記のソースを出力します。
<body class="home blog logged-in" id="iphone">

これで、CSS内にスマートフォン向けの記述で#iphoneを記述すれば良いです。
PCサイトの場合は、#pcsiteを記述すればCSSで切り分けが出来ます。

【レスポンシブでスマートフォンのWordPressオリジナルテーマを作ろう】はシリーズ化しています。

この記事はシリーズ化しています。
概要編と基本編は読んでくださいね。

Sponsored Link