iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」

WordPress

2009.07.14

インストールするだけでもかなりいい感じのiPhoneっぽい見た目にしてくれる、WordPress用のプラグイン「WPtouch」。ちょこっとだけ初期設定からいじって、さらにいい感じになったのでご紹介。いじったのはアイコンとjQuery。

１．WPtouchとは

WordPressのプラグインで、iPhoneのSafariブラウザからアクセスすると、見た目がiPhoneっぽくなって、操作もしやすくなるプラグインです。

■WPtouch: Mobile Plugin + Theme for WordPress ↔ BraveNewCode Inc.

２．アイコンを自分のファビコンに変更

WordPressのダッシュボードのWPtouch設定画面からアップロード出来そうなボタンがあったので簡単にアップ出来そうでしたが、ボタンが反応せず。ディレクトリ解析したら下のディレクトリにpngファイル入れておけばプルダウン表示に現れたので、そうしました。

wp-content/plugins/wptouch/images/icon-pool/

pngファイルは50×50あたりで作ってみました。ついでに、iPhone用はiPhoneっぽく透明感のあるものにしたい。ということで参考にさせて頂いたのはコチラ。
■iPhone風アイコンの超カンタンな作り方2つ教えます。 | 和洋風◎

ここで紹介されている、iConeというサイトにpngファイルアップしてパラメータいじって出来上がり。簡単です。

その後、さきほどのディレクトリに任意の名前でpngファイルをアップして、WPtouch設定画面を開くと、こんな風にアイコン表示されるようになりました。

↑ちょっと小さいけどまぁいいか。

そしてiPhoneから見るとこんな感じ。左上に微妙に透明感あるアイコンが表示されています。畳の部分はあくまでもマットな感じにした。

３．jQueryを使って無限スクロール

Ajaxのフレームワーク「jQuery」を使って、トップページやアーカイブページで無限にスクロール出来るようにしました。これまでjQueryは使ってこなかったのですが、あれこれ面白そうなのでそろそろ使ってみる。

バージョンアップ毎にFTPアップするのも面倒なので、Googleでホストしているのを使わせてもらうことに。参考にしたのはこちら。
■GoogleでホストされているjQueryを使う方法 – IDEA*IDEA ～百式管理人のライフハックブログ～

ここで紹介されているscriptを自分のWordPressテーマ配下のheader.phpに加えれば完了。と、実はちょっとだけハマってしまい、パフォーマンスアップのためのHead Cleanerというプラグインを使っていたのですね。これでJavaScriptをフッタにマージして固めたりしてレスポンスを速めていたのですが、どうも私の設定がまずいのか出来上がったソースを読むとうまくいかない。ひとまず無効にしておきました。後日ゆっくり眺めてみよう。

すると、こんな感じでiPhoneに表示されます。スルスルッとトップページをスクロールすると「Load more entries…」と表示されていて、そこをタッチすると次の15行がページ遷移なしで表示されます。快適。