インストールするだけでもかなりいい感じの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://is.gd/1xfIT
7月 14th, 2009 at 00:13
iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 http://is.gd/1xfIT
7月 14th, 2009 at 00:13
iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 http://takamorry.com/article…
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 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
ワードプレスのプラグイン
すげえです
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
10月 2nd, 2010 at 10:28
[...] 2、iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 ・本質的思考道場 [...]
10月 17th, 2010 at 14:17
[...] iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 – 本質思考道場 [...]
11月 24th, 2010 at 12:59
メモ / iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 http://htn.to/9WWit8
11月 24th, 2010 at 12:59
メモ
11月 25th, 2010 at 10:54
[...] iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 [...]
11月 26th, 2010 at 06:05
[...] iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 – 本質思考道場 [...]
12月 14th, 2010 at 20:20
[...] 今回は本質思考道場さんと花とみかんさんのサイトを参考にさせていただきました。 感謝！！ [...]
1月 13th, 2011 at 23:24
[...] ③iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 [...]
1月 17th, 2011 at 13:49
WPtouchの使い方。
2月 14th, 2011 at 07:40
[...] とりあえずデフォルト設定でいいようです。 9. WP-touch （12） スマートフォンに最適化するプラグイン iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 [...]
2月 19th, 2011 at 21:42
iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場: 1人が登録 http://bit.ly/ggm72f
4月 4th, 2011 at 13:12
iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 http://htn.to/8x7yQo
7月 1st, 2011 at 10:53
iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 – http://takamorry.com/article…
7月 6th, 2011 at 10:00
[...] WPtouch [...]
7月 13th, 2011 at 21:42
[...] 【参考URL】iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 【日本語化情報】WPtouch-ja (日本語化) at yamk blog 【公式ページ】WordPress › WPtouch « WordPress Plugins [...]
8月 4th, 2011 at 01:23
[...] iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 [...]
9月 7th, 2011 at 10:30
[...] iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 [...]
9月 13th, 2011 at 23:25
iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」http://t.co/7jEauss
9月 27th, 2011 at 23:23
[...] フォン対応用のプラグインです。 iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 [...]
11月 11th, 2011 at 23:08
[...] Plugins 【参考サイト】 [N] WordPressへの道 「WPtouch」でiPhone対応する編 iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 [...]
11月 21st, 2011 at 22:07
[...] ■WPtouch [...]
1月 19th, 2012 at 10:37
iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 http://t.co/Ylzko7i8
2月 11th, 2012 at 13:55
これ便利そ～。
2月 11th, 2012 at 13:55
[WordPress]これ便利そ～。 / “iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場” http://t.co/ccxMOUh9