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のみ・スマホのみで表示するコンテンツを指定するショートコードを作ってみた

月	火	水	木	金	土	日
« 7月
				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

SPOTブログ

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

キーワードで検索

月別で探す

カテゴリー

リンク

SPOTブログ

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

関連記事一覧

キーワードで検索

月別で探す

カテゴリー

タグ

リンク