サイト移転しました → GLOSSY

     
  1. >
  2. >
  3. WordPress…
  • 最終更新日:
  • 投稿者: @signpostme

WordPressプラグインを使って、簡単にスマホ用デザインとPC用デザインを切り替える方法

スマートフォン用のデザインを作ったのにどうやったらWordPressに反映できるの?と思ったときに、「WPtap Mobile Detector」というプラグインを使うと簡単にスマホ用デザインとPC用デザインを切り替えることが出来たので報告。

スマートフォン用デザインとPC用デザインを切り替える手段

大きく分けて3つの手段があると思います。

 

まず、レスポンシブなデザインにする方法。ウィンドウサイズの幅に応じて、デザインを変更します。

そうすれば、特に何の設定もせずにスマートフォン用デザインとPC用デザインを切り替えられます。

 

次に、JavaScriptでユーザーエージェントを判別して切り替える方法。

こちらは多少設定が面倒になるものの、自由度が高くカスタマイズ性に富んでいるといえます。

 

最後に、有志のユーザーにより提供されているWordPressプラグインを使った切り替え方法。

「WPtap Mobile Detector」というプラグインを使います。このプラグインは、あらかじめ用意されたテーマファイルを選ぶだけで、スマートフォン用デザインとして表示させることができるお手軽なプラグインです。

 

今回は、この「WPtap Mobile Detector」を使った切り替え方法をご紹介します。

 

 

「WPtap Mobile Detector」の使い方

まず、「WPtap Mobile Detector」をWordPressの管理画面から検索してインストールします。
wp01インストールして有効化したら、設定項目に追加された「Mobile Detector」を開きましょう。
wp2メニューから設定画面を開くと、以下の画面になります。
wp3見てわかると思いますが、左側のユーザーエージェント(iPhoneやAndroidなど)に対応させたいテーマファイルを選択して「update」ボタンを押すだけの簡単な作業です。
 
iPhoneにはこのテーマファイルを、iPadにはこのテーマファイルを…と、デバイスごとに切り替えることも可能です。
 
直接のリンクにも対応しているみたいで、iPhoneの場合はこのリンク先に直接飛ばす…ということもできるようです。
 
 

スマートフォン用のデザインを作ったけどどうやって適用させればいいの…という場合にお勧め

なんといっても、このお手軽さ。
 
レスポンシブの場合は、別途テーマファイルを用意しなくて済むので楽なのですが、コンテンツをガラッと変えたい!って時には面倒です。
スマートフォンの場合とPCの場合で大きくデザインを変えたい場合は、一から「スマホ用サイト」として作ったほうが良いでしょう。
 
んー、スマホサイトは、PCサイトと少し違った作り方ができるので楽しいですねっ!
 

新着記事を見る

TOP