インストールするだけでもかなりいい感じの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を入れてしまったので、他にも色々試していきますかねー。
コメント
iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 http://is.gd/1xfIT
iPhone: iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 : http://bit.ly/3lwQJd
iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場: 10 users http://bit.ly/OoRls
[…] iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 […]
このURLってブログからでも飛ぶんだろうか？テスト WPtouchセッティング、ファビコン設定 本質思考道場→http://bit.ly/cFMRGE
wordpressのブログをiPhoneっぽいインターフェースに変えるプラグイン https://takamorry.com/article/20090714_wptouch.html
[…] 2、iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 ・本質的思考道場 […]
[…] iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 – 本質思考道場 […]
[…] iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 […]
[…] iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 – 本質思考道場 […]
[…] 今回は本質思考道場さんと花とみかんさんのサイトを参考にさせていただきました。 感謝！！ […]
[…] ③iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 […]
[…] とりあえずデフォルト設定でいいようです。 9. WP-touch （12） スマートフォンに最適化するプラグイン iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 […]
[…] WPtouch […]
[…] 【参考URL】iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 【日本語化情報】WPtouch-ja (日本語化) at yamk blog 【公式ページ】WordPress › WPtouch « WordPress Plugins […]
[…] iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 […]
[…] iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 […]
[…] フォン対応用のプラグインです。 iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 […]
[…] Plugins 【参考サイト】 [N] WordPressへの道 「WPtouch」でiPhone対応する編 iPhoneっぽいブログに変身させるWordPressプラグイン「WPtouch」 | 本質思考道場 […]
[…] ■WPtouch […]
[…] Google Analyticsの解析コード導入 普通にheadに入れたほうが楽かな？ ・WPtouch スマホ対応 ダメとか言われてるけどまぁ入れておこう ・WSA Favicon […]