Multi Device Switcherでスマホ表示してる際に、PC用テンプレートに切り替え出来るプラグイン MW Theme Switcher on Multi Device Switcherをカスタマイズしてみた

2013/01/31

Multi Device Switcherでスマホ表示してる際に、PC用テンプレートに切り替え出来るプラグイン MW Theme Switcher on Multi Device Switcherをカスタマイズしてみた

追記：2013/04/12 本家プラグインでPCとスマホの切り替え機能が実装されたようです。そちらで当ブログ記事もご紹介頂きました、ありがとうございます。

wordpressでスマホ対応といえば、WPtouchが定番ですが、コーポレートサイトの場合、そうもいきません。
レスポンシブWEBデザインもありなのですが、どうもデザインの制約が出てしまうと、検証コストの問題で断念し、今回はＰＣテンプレートとスマホテンプレートの二つをそれぞれ作ることにしました。

閲覧デバイスを判別し、テンプレートの切り替えを自動で行う動作はMulti Device Switcherに任せたのですが、このままだと、スマホで見た人はPC版のサイトを見ることが出来ません。

WPtouchには、切り替えボタンがついてるのですが、今回選択したMulti Device Switcherにはその機能はありません。
どうしたものかとググっていると、Multi Device Switcherにテーマ切り替え機能を追加するMW Theme Switcher on Multi Device Switcherというプラグインを作ってくださっている方がいたので、これをありがたく流用させていただくことにしました。

このプラグインをそのまま入れた状態だと、こんな感じになります。

うーん、ちょっとかっこわるい＆使いにくそう。

そこで、カスタマイズして、このような表示に変えました。

どうでしょう？使いやすそうになってません？？良くある感じでしょ？
今表示してるのがスマホ用なのかＰＣ用なのか判別して、色がつくようなボタンに変えてみました。

本当はCSSだけで出来れば良かったんですが、無理そうなので、直接プラグインファイルをいじりました。

<div class="renderSwitcher">
	<ul>
		<li class="pc"><a href="?<?php echo self::FLG; ?>=pc">PC表示</a></li><!--
		--><li class="mobile"><a href="?<?php echo self::FLG; ?>=mb">モバイル表示</a></li>
	</ul>
<!-- end .renderSwitcher --></div>

<ul>

<li class="pc"><a href="?<?php echo self::FLG; ?>=pc">PC表示</a></li><!--

--><li class="mobile"><a href="?<?php echo self::FLG; ?>=mb">モバイル表示</a></li>

</ul>

</div>

73~78行目までのコードを以下のように変更しました。

<div class="renderSwitcher">
	<ul class="clearfix">
		<li class="<?php if($_COOKIE[self::FLG] == 'pc'){echo 'active';};?>"><a href="?<?php echo self::FLG; ?>=pc">PC表示</a></li><!--
		--><li class="<?php if($_COOKIE[self::FLG] == 'mb'){echo 'active';};?>"><a href="?<?php echo self::FLG; ?>=mb">スマホ表示</a></li>
		<div style="clear:both"></div>
	</ul>
<!-- end .renderSwitcher --></div>

<li class="<?php if($_COOKIE[self::FLG] == 'pc'){echo 'active';};?>"><a href="?<?php echo self::FLG; ?>=pc">PC表示</a></li><!--

--><li class="<?php if($_COOKIE[self::FLG] == 'mb'){echo 'active';};?>"><a href="?<?php echo self::FLG; ?>=mb">スマホ表示</a></li>

</ul>

</div>

また、CSSは以下のようにしました

	.renderSwitcher ul{
		padding:0px;
		margin:20px auto;
		width:203px;
	}
	.renderSwitcher ul li:first-child{
		border:1px solid #CCC;
		border-right:none;
		border-radius: 8px 0 0 8px;
	}
	.renderSwitcher ul li:nth-child(2){
		border:1px solid #CCC;
		border-radius: 0 8px 8px 0;
	}
	.renderSwitcher ul li{
		text-align:center;
		float:left;
		width:100px;
		height:30px;
		line-height:30px;
		background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f0f0f0));
		background: linear-gradient(#fff, #f0f0f0);
		list-style: none;
	}
	.renderSwitcher ul li.active{
		background-image:-moz-linear-gradient(50% 0% -90deg,rgb(138,182,218) 0%,rgb(65,140,201) 50%,rgb(136,182,219) 100%); 
		background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(138,182,218)),color-stop(0.5, rgb(65,140,201)),color-stop(1, rgb(136,182,219)));
		background-image:-webkit-linear-gradient(-90deg,rgb(138,182,218) 0%,rgb(65,140,201) 50%,rgb(136,182,219) 100%);
		background-image:-o-linear-gradient(-90deg,rgb(138,182,218) 0%,rgb(65,140,201) 50%,rgb(136,182,219) 100%);
		background-image:-ms-linear-gradient(-90deg,rgb(138,182,218) 0%,rgb(65,140,201) 50%,rgb(136,182,219) 100%);
		background-image:linear-gradient(-90deg,rgb(138,182,218) 0%,rgb(65,140,201) 50%,rgb(136,182,219) 100%);
		-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8ab6da,endColorstr=#ff88b6db,GradientType=0)";
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8ab6da,endColorstr=#ff88b6db,GradientType=0);
	}
	.renderSwitcher ul li a{
		color:#666666;
		text-decoration: none;
	}
	.renderSwitcher ul li.active a{
		color:#FFF;
	}
	div{font-size:13px;}

.renderSwitcher ul{

padding:0px;

margin:20px auto;

width:203px;

}

.renderSwitcher ul li:first-child{

border:1px solid #CCC;

border-right:none;

border-radius: 8px 0 0 8px;

}

.renderSwitcher ul li:nth-child(2){

border:1px solid #CCC;

border-radius: 0 8px 8px 0;

}

.renderSwitcher ul li{

text-align:center;

float:left;

width:100px;

height:30px;

line-height:30px;

background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f0f0f0));

background: linear-gradient(#fff, #f0f0f0);

list-style: none;

}

.renderSwitcher ul li.active{

background-image:-moz-linear-gradient(50% 0% -90deg,rgb(138,182,218) 0%,rgb(65,140,201) 50%,rgb(136,182,219) 100%);

background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(138,182,218)),color-stop(0.5, rgb(65,140,201)),color-stop(1, rgb(136,182,219)));

background-image:-webkit-linear-gradient(-90deg,rgb(138,182,218) 0%,rgb(65,140,201) 50%,rgb(136,182,219) 100%);

background-image:-o-linear-gradient(-90deg,rgb(138,182,218) 0%,rgb(65,140,201) 50%,rgb(136,182,219) 100%);

background-image:-ms-linear-gradient(-90deg,rgb(138,182,218) 0%,rgb(65,140,201) 50%,rgb(136,182,219) 100%);

background-image:linear-gradient(-90deg,rgb(138,182,218) 0%,rgb(65,140,201) 50%,rgb(136,182,219) 100%);

-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8ab6da,endColorstr=#ff88b6db,GradientType=0)";

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8ab6da,endColorstr=#ff88b6db,GradientType=0);

}

.renderSwitcher ul li a{

color:#666666;

text-decoration: none;

}

.renderSwitcher ul li.active a{

color:#FFF;

}

div{font-size:13px;}

これで、良い感じのＰＣ・スマホ切り替えボタンが出来ました。
PC版では切り替えボタンがちっちゃく見えてしまうので、サイズは%指定した方がより良いかもしれませんが、ご参考にどうぞ

前の記事
WENARENAのSuiteXでwordpress3.5をインストールする方法

次の記事
WordPressでPCのみ・スマホのみで表示するコンテンツを指定するショートコードを作ってみた

月	火	水	木	金	土	日
« 1月
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

SPOTブログ