スマホでPC版とスマホ版の切り替えスイッチ

スマホでサイトを閲覧すると、上部に切り替えスイッチを表示。

functions.phpに関数追加

function check_view_device(){

	$ua;
	$device;

	$ua = mb_strtolower($_SERVER['HTTP_USER_AGENT']);
	
	if(strpos($ua,'iphone') !== false){
		$device = 'mobile';
	}elseif(strpos($ua,'ipod') !== false){
		$device = 'mobile';
	}elseif((strpos($ua,'android') !== false) && (strpos($ua, 'mobile') !== false)){
		$device = 'mobile';
	}elseif((strpos($ua,'windows') !== false) && (strpos($ua, 'phone') !== false)){
		$device = 'mobile';
	}elseif((strpos($ua,'firefox') !== false) && (strpos($ua, 'mobile') !== false)){
		$device = 'mobile';
	}elseif(strpos($ua,'blackberry') !== false){
		$device = 'mobile';
	}elseif(strpos($ua,'ipad') !== false){
		$device = 'tablet';
	}elseif((strpos($ua,'windows') !== false) && (strpos($ua, 'touch') !== false)){
		$device = 'tablet';
	}elseif((strpos($ua,'android') !== false) && (strpos($ua, 'mobile') === false)){
		$device = 'tablet';
	}elseif((strpos($ua,'firefox') !== false) && (strpos($ua, 'tablet') !== false)){
		$device = 'tablet';
	}elseif((strpos($ua,'kindle') !== false) || (strpos($ua, 'silk') !== false)){
		$device = 'tablet';
	}elseif((strpos($ua,'playbook') !== false)){
		$device = 'tablet';
	}else{
		$device = 'others';
	}
	return $device;
	
}

header.phpに以下を各自追加

[一番上]

/* 閲覧している端末を調べる */
$deviceflag = check_view_device();
if($deviceflag == "mobile") {
	session_start();
	
	if(empty($_SESSION['device']['view'])){
		$_SESSION['device']['view'] = "sp";
	}
	if(!empty($_POST['view_switch'])) {
		if($_POST['view_switch'] == "pc") {
			$_SESSION['device']['view'] = "sp";
		} else {
			$_SESSION['device']['view'] = "pc";
		}
	}
}

[head内]

// テンプレート名が表示されるcssを別で用意
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url') ?>/style_main.css">
// 装飾するcssは端末別に設定
<?php if($_SESSION['device']['view'] == "sp"): ?>
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url') ?>/css/style_sp.css">
<?php else: ?>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url') ?>/css/style_pc.css">
<?php endif; ?>

[bodyタグ直下]

<?php if($deviceflag == "mobile"): ?>
	<script type="text/javascript">
		// form送信javascript
		$(function(){
			$("#view_switch").click(function(){
				$("#switch_form").submit();
			})
		})
		</script>

		// 切り替え用フラグ
		<form id="switch_form" method="POST">
			<input type="hidden" value="<?php echo $_SESSION['device']['view']; ?>" name="view_switch">
		</form>

		// 切り替えボタン
		<div>
		<?php if($_SESSION['device']['view'] == "sp"): ?>
			<a id="view_switch" style="display: block; text-align: center;"> PC版に切り替え </a>
		<?php else: ?>
			<a id="view_switch" style="display: block; text-align: center;"> スマホ版に切り替え </a>
		<?php endif; ?>
	</div>
<?php endif; ?>