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

Posted on by Eternal-tears
Sponsored Link

PCとスマートフォンのCSSを完全に別にして、１つのテーマで管理する方法です。
余り知られていませんが、
WordPressには、PCサイトとスマートフォンサイトを出し分ける条件タグがあります。

Sponsored Link

<?php global $is_iphone;if($is_iphone){} ?>

この条件タグを利用して、テーマ内で出し分けを行います。
まずスタイルシートの出し分けは以下の通りに出来ます。

<?php global $is_iphone;if($is_iphone){ ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/android.css" type="text/css" media="screen" />
<?php }else{ ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php } ?>

勿論、CSS内の画像参照も、PCサイト向けとスマートフォンサイト向けでフォルダを分けた方が分かりやすいかと思います。

画像やコンテンツをPCサイトとスマートフォンサイトで出し分ける方法

画像もコンテンツも同じ原理で、条件タグで出し分けます。
例えば、PCサイトとスマートフォンサイトの画像を出し分ける場合は、下記のように記述します。

<?php global $is_iphone;if($is_iphone){ ?>androidimg<?php }else{ ?>images<?php } ?>

例えばロゴがPCサイトとスマートフォンサイトでデザイン上で異なる場合のソースです。
画像サイズは設定しないようにします。
設定する場合は、条件タグを使って出し分けすると良いです。

<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><img src="<?php bloginfo('template_directory'); ?>/<?php global $is_iphone;if($is_iphone){ ?>androidimg<?php }else{ ?>images<?php } ?>/logo.png" alt="<?php bloginfo('name'); ?>"></a></h1>

function.phpに関数を書いてPCサイトとスマートフォンサイトのロゴ画像を出し分ける方法

テーマ内のソースが乱雑になる…という人は、function.phpに関数を作っちゃってもいいですね。

<?php function sitelogo(){
	global $is_iphone;
	if($is_iphone){
		echo bloginfo('template_directory') ."/androidimg/logo.png";
	}else{
		echo bloginfo('template_directory') ."/images/logo.png";
	}
}
?>

header.phpの該当箇所には下記を記述します。

<?php sitelogo(); ?>

メリット

１つのテーマで管理できる。

デメリット

ごちゃごちゃになる。
条件タグによって出し分け箇所が多いと、テーマが重くなったりする。

PCレイアウトとスマートフォンレイアウトは、
見せる範囲がスマートフォンは限られるので、
見て欲しいコンテンツの優先順位が決まってきます。

スマートフォン向けにコンテンツの配置を変えたい場合、
結構複雑になってきます。

その場合、予めfunction.phpに関数を書いて、
出し分けするようにすればスッキリしますが、
function.phpも膨大になります。

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

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

Sponsored Link