パターン１：テンプレートタグを利用する

デバイス毎にテンプレートファイルを作成し、UA判定後に読み込ませるタイプです。

デバイスの数だけphpファイルを作る必要があるので、「メニュー」や「ウィジェット」を活用するなど「保守の負担にならない方法」を考える必要がありそうです。

<?php
	$ua = $_SERVER['HTTP_USER_AGENT'];
	if (
	(strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) ||
	(strpos($ua, 'iPod') !== false) ||
	(strpos($ua, 'iPhone') !== false) ||
	(strpos($ua, 'Windows Phone') !== false)){
	 get_template_part( 'content', 'sp' );
	} elseif (
	(strpos($ua, 'DoCoMo') !== false) || 
	(strpos($ua, 'KDDI') !== false) || 
	(strpos($ua, 'SoftBank') !== false) || 
	(strpos($ua, 'Vodafone') !== false) || 
	(strpos($ua, 'J-PHONE') !== false)) {
	 get_template_part( 'content', 'ketai' );
	} elseif (
	(strpos($ua, 'Android') !== false) || 
	(strpos($ua, 'iPad') !== false)){
	 get_template_part( 'content', 'tablet' );
	} else { 
	 get_template_part( 'content', 'other' );
	}
?>

パターン２：htmlタグのみの場合

phpコードが入っていない場合、「ヒアドキュメント」を使うことで比較的簡単に記述できます。
ヒアドキュメント – Wikipedia

言語によって記述法が異なりますが、WordPressで使用するPHPの場合

<<<EOD ＜文字列＞ EOD;

となります。

そしてこちらが実装例です。

<?php
	$ua = $_SERVER['HTTP_USER_AGENT'];
	if (
	(strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) ||
	(strpos($ua, 'iPod') !== false) ||
	(strpos($ua, 'iPhone') !== false) ||
	(strpos($ua, 'Windows Phone') !== false)){
echo <<<EOD
	<p>スマートフォンから閲覧中</p>
EOD;
	} elseif (
	(strpos($ua, 'DoCoMo') !== false) || 
	(strpos($ua, 'KDDI') !== false) || 
	(strpos($ua, 'SoftBank') !== false) || 
	(strpos($ua, 'Vodafone') !== false) || 
	(strpos($ua, 'J-PHONE') !== false)) {
echo <<<EOD
	<p>携帯から閲覧中</p>
EOD;
	} elseif (
	(strpos($ua, 'Android') !== false) || 
	(strpos($ua, 'iPad') !== false)){
echo <<<EOD
	<p>タブレットから閲覧中</p>
EOD;
	} else { 
echo <<<EOD
	<p>PCその他のデバイスから閲覧中</p>
EOD;
	}
?>

パターン３：CSSファイルを出し分けたい場合

htmlタグとphpが混在している場合、phpを分割してしまうことが効率的かもしれません。

<?php
	$ua = $_SERVER['HTTP_USER_AGENT'];
	if (
	(strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) ||
	(strpos($ua, 'iPod') !== false) ||
	(strpos($ua, 'iPhone') !== false) ||
	(strpos($ua, 'Windows Phone') !== false)){
?>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mobile.css" type="text/css" media="all" />
<?php
	} elseif (
	(strpos($ua, 'DoCoMo') !== false) || 
	(strpos($ua, 'KDDI') !== false) || 
	(strpos($ua, 'SoftBank') !== false) || 
	(strpos($ua, 'Vodafone') !== false) || 
	(strpos($ua, 'J-PHONE') !== false)) {
?>
	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/ketai.css" type="text/css" media="all" />
<?php	
	} elseif (
	(strpos($ua, 'Android') !== false) || 
	(strpos($ua, 'iPad') !== false)){
?>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php	} else { ?>
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php	}?>

もっと手軽な方法

いちいちUAを記述しなければならないことや、タグ・テンプレートファイルを個別に作成しないといけないなどどれもなかなか保守性に難ありです。

身も蓋もない話ですが、「そもそも使わないか、最小限に抑える」ということが最も保守性を高めるのではないかと思います。

例えばパターン３のCSS振り分けなどは、「WPtouchプラグイン」や「Stingerテーマ」などで使用されている手法です。

しかしCSSの振り分けをしたいだけであれば、「メディアクエリ」を利用した記述法のほうが圧倒的に行数が少なくなります。

<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" media="screen and (max-width: 480px)" href="mobile.css">
<link rel="stylesheet" media="screen and (min-width: 481px)" href="other.css">
<!--[if lt IE 8]>
<link rel="stylesheet" href="other.css">
<![endif]-->

WordPressはPHPさえ使いこなせば何でもできるCMSですが、

その分「本当にそうすべきなのか？」をしっかりと考えて制作をする必要がありそうです。

さらに手軽な切替方法[PR]

aishipRでは、デバイス別の表示切り替えを１クリックでできるようになってます。

スマートフォンやフィーチャーフォンでは、画像リサイズ・不要なhtmlタグの削除などがサーバー側で実施され、かなり気軽に表示切り替えができるようになってます。