インストールするだけでもかなりいい感じの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行がページ遷移なしで表示されます。快適。
最後の「Mobile Theme」をOFFにすると、パソコンでの見た目になります。よく出来てるなぁ、このプラグイン。素晴らしい。
さてと、jQueryを入れてしまったので、他にも色々試していきますかねー。
こちらの関連エントリーも人気です。あわせてどうぞ。
こんにちは、Takamorryです。
1971年福井生まれ福井育ち。1996年に共同で独立し、日本中転々としながらシステム開発しているSEマネージャ。趣味はドラム、カヌー、カメラ、山登り、ゴルフ、ガンダム...続きを見る
7月 14th, 2009 at 00:13
iPhoneăŁă˝ă„ăƒ–ăƒă‚°ăŤĺ¤‰čşŤă•ă›ă‚‹WordPressăƒ—ăƒŠă‚°ă‚¤ăƒłă€ŒWPtouch〠– http://takamorry.com/article...
7月 14th, 2009 at 00:13
iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 http://takamorry.com/article...
7月 14th, 2009 at 00:13
iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 http://is.gd/1xfIT
7月 14th, 2009 at 00:13
iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 http://is.gd/1xfIT
7月 14th, 2009 at 01:47
iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 – http://takamorry.com/article...
7月 14th, 2009 at 09:45
iPhone: iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 : http://bit.ly/3lwQJd
7月 14th, 2009 at 09:45
iPhone: iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 : http://bit.ly/3lwQJd
7月 14th, 2009 at 11:06
iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 – http://takamorry.com/article...
7月 14th, 2009 at 15:05
iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場: 10 users http://bit.ly/OoRls
7月 14th, 2009 at 15:05
iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場: 10 users http://bit.ly/OoRls
7月 14th, 2009 at 17:25
インストールするだけでもかなりいい感じのiPhoneっぽい見た目にしてくれる、WordPress用のプラグイン「WPtouch」。ちょこっとだけ初期設定からいじって、さらにいい感じになったのでご紹介。いじったのはアイコンとjQuery。
7月 14th, 2009 at 20:06
iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 – http://takamorry.com/article...
7月 15th, 2009 at 03:01
iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 – http://takamorry.com/article...
7月 15th, 2009 at 08:44
[...] iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 [...]
9月 28th, 2009 at 12:41
試してみたい。まあまずWordPressのインストールからなんだがね。
10月 19th, 2009 at 14:51
ワードプレスのプラグイン
すげえです
12月 14th, 2009 at 00:00
iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 – http://takamorry.com/article...
3月 10th, 2010 at 17:50
このURLってブログからでも飛ぶんだろうか？テスト WPtouchセッティング、ファビコン設定 本質思考道場→http://bit.ly/cFMRGE
3月 10th, 2010 at 17:50
このURLってブログからでも飛ぶんだろうか？テスト WPtouchセッティング、ファビコン設定 本質思考道場→http://bit.ly/cFMRGE
5月 9th, 2010 at 23:05
wordpressのブログをiPhoneっぽいインターフェースに変えるプラグイン http://takamorry.com/article/20090714_wptouch.html
5月 9th, 2010 at 23:05
wordpressのブログをiPhoneっぽいインターフェースに変えるプラグイン http://takamorry.com/article/20090714_wptouch.html