このサイトをスマホ対応にしてみた【WPプラグイン情報】

カレンダーDate: | カテゴリーCategory:【無料】便利なWordPressプラグインとその使い方を紹介
※景品表示法に基づく表記:本記事には商品の広告が含まれています
スマホ対応プラグインのイメージ画像

さて、現在通っているスクールで、jQuery mobileを使ったスマホサイトの制作を学んでいます。

で、このサイトもスマホ対応をした方が良いなと感じ、スマホ対応用のプラグインを導入しましたので紹介しようと思います。

導入にかかった時間は15分くらいでしたので、実に手軽です。

スマホ、タブレット、PCなど閲覧者のデバイスごとにテーマを切り替えるプラグイン「WPtap Mobile Detector」

とりあえず、実装した結果です。 スマホから このサイトを見ると以下のように表示されます。

スマホでこのサイトを表示させたときの画像

使い方も簡単でプラグインのインストール後、次のような操作を行うと閲覧者のデバイスによって、どのテーマを表示させるのかを設定することができます。

WPtap Mobile Directorの使い方1

WPtap Mobile Directorの使い方2

ただ、WPtap Mobile Directorは、あくまでテーマを自動で切り替えるプラグインですので、スマホ用のテーマを用意する必要があります。

スマホ・タブレット・PCによってレイアウトが変わるレスポンシブルなテーマ

今回、WPtap Mobile Directorでスマホ用に設定したのは「iTheme2」というレスポンシブルWEBデザインなテーマ。 以下の画像からiTheme2のデモサイトにいけますので、そこでウィンドウのサイズを変えてみていただくとレスポンシブルWEBデザインを実感いただけると思います。

http://themify.me/demo/#theme=itheme2
Apple社の製品やサイトを思わせるようなデザインです。

テーマの無料ダウンロードは→http://themify.me/themes/itheme2

今後スマホページ用のテーマは、カスタマイズしたりいろいろ変えると思いますが、このプラグインにはしばらくお世話になりそうです。

Tags


Trackbacks & Comments

Trackback URL for this post:

Trackback(s)

  1. […] 先日、ワードプレスをスマートフォンやタブレットに対応するプラグイン「WPtap Mobile Director」を紹介しました。 […]

Comment(s)


Leave a Reply

flight