SwapSkills 2011(vol.7)「スマートフォン+jQuery Mobile in WordPress」レポート

この記事を読むのに必要な時間:およそ 3 分

WordPressのページをスマートフォン化させる勉強会を開催

2011年9月17日に,WordPressのページをスマートフォン化させる方法をテーマにSwapSkillsが開催されました。スマートフォンの普及に伴いブログサイトもスマートフォンに対応させるニーズが出てきた事や,デフォルトテーマのWordPressTheme(テーマ:Twenty Eleven)もレスポンシブウェブデザインでスマートフォンサイトにも対応できるようになっている事も受けて参加者の注目を浴び,すぐに満席になったイベントとなりました。

まずはKtaiStyleのプラグインを作成されている池田百合子氏から,WordPressでのスマートフォン対応及び,携帯サイトへの対応方法にどのようなものがあるのかをご紹介いただきました。

WordPressはパソコン用のCMSツールとして誕生していますので,当然現状のパソコンページとスマートフォン,フューチャーフォンページに分ける必要がでてきます。

振り分け対応方法として,池田氏ご自身でも作成されているようなプラグインをWordPressにインストールする事で実現する方法と,Twenty Elevenベースでのカスタマイズを解説していただきました。

WordPressのプラグインで簡単スマートフォン化

プラグインの利用は簡単で手間がかからないけれど,デザインのカスタマイズは大変で,一見してどのプラグインを利用していているのかがわかってしまう,などのメリット,デメリットを解説し,よく利用されているプラグインの紹介をしていただきました。

WordPressは世界で最もよく利用されているCMSツールという事もありまして,多くのテーマやプラグインが存在します。その中でも,フューチャーフォン,スマートフォン向けに便利なプラグインを紹介していただきましたので以下に紹介させていただきます。

フューチャーフォンでは,Ktai Style,FortySix Mobile,WordPress Mobile Editionで対応する事が多く,スマートフォン対応としては,WPtouch,WordPress PDA&iPhoneがメインになります。

ただ,スマートフォン用のWordPress PDA&iPhoneは海外向けのスマートフォンが主流で,実際にはWPtouchがよく利用されています。予算がなく対応だけさせたい案件の場合などはWPtouchが利用可能です。

画像

Twenty Elevenはレスポンシブウェブデザインでできている

デフォルトテーマのTwenty Elevenは,WordPress 3.2に附属していて,子テーマを利用してデザインカスタマイズができます。

Media Query(Media Queries)を利用してデバイスのスクリーンサイズを変えたり,状態によってはCSSを切り替えるというレスポンシブウェブデザインの仕組みを利用しています。

@media(max-width:480px)=スクリーンサイズが480px;の場合,@media(orientation:portrait)=スマートフォンの縦利用の場合,@media(min-resolution:200dpi)=解像度200dpi以上のデバイスという意味で,この後に記述するCSSが適応されます。

実装方法として,親テーマと同じ階層に子テーマのフォルダを作成して,その中にCSSファイルを作成しています。親テーマのテンプレート・関数を引き継ぎ,変更点のみオーバーライドする仕組みになっています。子テーマのCSSファイルには以下の記述をして認識させます。

/*
Theme Name: Twenty Eleven Mobile  << 管理画面に出てくる子テーマの名前
Template: twentyeleven << 親テーマの名前
Author: IKEDA Yuriko  << 作者の名前
Author URI: http://en.yuriko.net/  << 作者のURL
Description: Mobile version of Twenty Eleven
Version: 1.0
License: GNU General Public License
License URI: license.txt
*/

スマートフォンかどうかはユーザーエージェントによって判別させます。PHPを使ってWordPressプラグインとして実装すると以下のようになります。これはiPhoneやAndroidかを判定する事ができます。

<?php
/*
Plugin Name: Smartphone Switcher
Version: 0.7.0
Author: IKEDA Yuriko
*/
if ( $is_iphone ) {
  add_action('stylesheet','change_stylesheet', 20);
}
function change_stylesheet($stylesheet) { ! return ‘smartphone’;
}

これらのPHPファイルを認識させるために,管理画面でiPhoneやAdroidのテーマを有効化させます。カスタムで作成の場合はオリジナルフォルダを作り,そのフォルダをアクティブにさせます。

Ktai Styleでもスマートフォン向けサイトの作成も可能ですが,デフォルトで画像を小さくするなどの機能を追加していたり,JSが利用できない設定にしている部分があるので最適ではない,と作成者ゆえに細かな解説もしていただけました。

その他,スマートフォンサイト制作のポイントなどをいくつか紹介していただき,WordPressでのスマートフォンサイトの大枠を理解する事ができました。

著者プロフィール

SwapSkills

都内でWebプロフェッショナル向けに講座の開催をしているallWebクリエイター塾主催のマンスリー勉強会。講座では教えられない内容,実務についてのウェブの技術者にむけて低価格にて提供しています。allWebクリエイター塾では,2011年10月29日(土)にWordPressカスタマイズ講座が開催され,2011年12月17日(土)にjQuery Mobile徹底習得講座詳細ページが予定されています。

コメント

コメントの記入