WordPressで構築しているサイトをスマートフォンからのアクセスに対応させる方法として、phpのテーマファイル内で判別して出力する方法、javascriptで判別してそれぞれに最適化したスタイルシートを読み込む方法、レスポンシブルなテーマを利用して1ソースで済ませる方法。
1ソースは最近の流行でもあるが、パソコンからのアクセスに合わせたレイアウトとスマートフォンからのアクセスでそれぞれに最適なレイアウトで自由にレイアウトしたい場合は、プラグインを使う方法もおススメ。
代表的なWordpressのスマートフォン対応プラグインは
- MobilePress
- WordPress Mobile Pack
- WPtouch
- WordPress PDA & iPhone
などがあり、どのプラグインも独自のスマートフォン用レイアウトが表示されるようになる。
HTMLのコーディングに詳しくない人はそのまま使えるプラグインをおススメするが、オリジナルのデザイン・レイアウトにしたい場合は、カスタマイズされたレイアウトが逆に邪魔になることもある。
なるべく自分でデザインを設定したい人は、WordPress PDA & iPhoneをおススメする。
実はこのプラグイン、最終更新が2011年で停止しており、開発が終了している様子。ただし現在のアンドロイドやiPhone、その他スマートフォンからのアクセスを振り分ける機能としては問題なく作動するのでベースにこれを使う。
プラグインを導入すると、プラグインフォルダの中に以下のディレクトリが作られる
/wp-content/plugins/wp-pda/jqmobile-theme
/wp-content/plugins/wp-pda/pda-theme
カスタマイズするのは
/jqmobile-theme
フォルダ内の各ファイル
ファイルリストを見ると、通常のテーマファイルと同様にheaderやfooterをはじめとする各ファイルが存在することが分かるだろう。
この中のファイルはスマートフォンのアクセス時だけに呼ばれるから、この中の一式はパソコンからのアクセスには影響しないから、独立したテーマファイルとして作っていけばいい。
実際に、このサイトでもWordPress PDA & iPhoneを使った振り分け後にカスタマイズしたテーマファイルで構築している。
パソコンからアクセスしている人は是非、スマートフォンからアクセスしてもらいたい。
http://www.digital-gate.com/
カスタマイズすればここまでデフォルトとは違うレイアウトデザインが可能となるということが分かるはず。
デフォルトのjqueryは古いままなので、
jquery.mobile-1.3.2.min.css
jquery-1.9.1.min.js
を使用するようにしてある他、facebook風のメニュー等、オリジナルには無い機能も追加している。