WordPressをスマホに最適化できる「WPtap Mobile Detector」にPC/モバイルの切り替え機能を追加するプラグイン

WordPressをスマートフォンに最適化するプラグインといえば、「WPtouch」が最もメジャーかと思います。僕もしばらくWPtouchを使っていたのですが、簡単に最適化できる反面、細かいところに手を入れるのに少し手間がかかります。

• テンプレート機能があるけど、WordPressのテーマの構造と少し違うので面倒
• テンプレートの切り替えはコードを直接書き換える必要あり（有料版では違うのかも？）。
• 上記の理由により、うっかりバージョンアップするとカスタマイズしたコードが消失してしまうかも…

WPtap Mobile Detectorとは

ということで他に良いプラグインがないか調べると「WPtap Mobile Detector」というプラグインを発見。これはデバイスに応じてどのテンプレートを使うかを選択できるというもの。WPtouchと違ってスマートフォン用にもうひとつテーマをつくる必要がありますが、普通にWordPressのテーマを使うことになるのでお手軽かつカスタマイズも自由です。

ただ、ひとつ困った点として、「PC/モバイルの切り替え機能」が無いことがあげられます。スマートフォンに最適化されたデザインの場合、軽量化のや見やすさの為にPCでは表示されている部分をあえて「削る」ことがあります。それをどうしても見たいときに切り替え機能が無いと不便で不便で…。てことでその機能を追加するプラグインを作成しましたので公開します。

ダウンロード

Githubにアップしていますのでダウンロードしてください。

使い方

ダウンロードして解凍すると、「mw_theme_switcher_on_wptap」というディレクトリが入っていると思いますので、これをお使いのWordPressのpluguinsディレクトリにアップロードしてください。あとは管理画面から有効化するだけでOKです。

有効化すると、「WPtap Mobile Detector」で設定したテーマを表示中のときのみ、wp_footerにフックして下記のコードを出力します。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>

WPtap Mobile Detectorに機能追加するプラグインですので、もちろんWPtap Mobile Detectorがインストールされていないといけませんのでご注意を！