ブログをスマートフォン向けに最適化するプラグイン「WPtouch」の導入と設定方法～サイトの表示確認方法

iPhone, Android 向けにブログを最適化するプラグイン「WPtouch」を入れて、ようやくブログをスマートフォン対応にした。

「WPtouch」は、iPhone, iPod touch, Android　などに対応し、デフォルトで６種類のスキン（テーマ）が用意され、カスタマイズはプラグイン管理画面から詳細設定が可能となっている。また、WPtouch Pro（有償）では iPad もサポートされている。

「WPtouch」の導入と設定方法～表示確認までをメモしておく。
（「WordTwit」の導入と設定、iPhone のアイコンの作成方法も含む）

ダウンロードはコチラから↓
WPtouch （WordPress.org）プラグイン

プラグインWEBサイトはコチラ↓

導入方法は、

１．ダウンロードしたファイルを解凍し、Pluginフォルダにアップロードして、管理画面からプラグインを有効化。
もしくは、管理画面からプラグイン＞新規追加で「WPtouch」で検索し、インストールしてプラグインを有効化。

２．設定＞「 WPtouch 」
まず、設定画面を日本語にするため、「WPtouch Language」で「Japanese」を選択し、画面最下部にある「Save Option」ボタンをクリックする。

３．一般設定＞「記事一覧オプション」
トップページの記事一覧画面で記事のサムネイルを使用したい場合は、「記事一覧表示」で「記事のサムネイルまたは指定画像を投稿」を選択する。
※WordPress のアイキャッチ画像を設定している場合のみ有効（アイキャッチ画像を使用するには、テーマの function.php に追加コードを記入する必要がある）

４．詳細オプション＞「Twitter リンクをヘッダーに表示する」
ヘッダーに Twitterへのリンクを表示したい場合は、プラグイン「WordTwit」を導入する必要がある。

◆「WordTwit」の導入と設定

「WordTwit」は、ブログの更新情報を自動で Twitter で流してくれるプラグイン。
WordTwit で使用する短縮URLサービスで「Bit.ly」を選択した場合は、bit.ly の「API Key」が必要となるので事前に調べておく。

bit.ly の「API Key」は、ログイン後、画面右上ににあるアカウント（ユーザー）名の右側▼マークをクリックし、「Setting」を選択すると、画面中程に「API Key」が表示されている。

「WordTwit」の導入は、

（１）管理画面からプラグイン＞新規追加で「WordTwit」で検索し、インストールしてプラグインを有効化。

（２）設定＞「 WordTwit」
「URL Shortening」で「Bit.ly」を選択し、「Update Options」ボタンをクリックする。

（３）保存後、「User Name」、「API Key」欄が表示されるので、アカウント（ユーザー）名、API Key を入力。

（４）「Account Login / Tweet Message」
「Message」は Twitterへ通知する際のテキストで、[title]は記事タイトル、[link]は短縮URLに置き換えられる。
記事タイトル前にテキストを入力したい場合は、「New blog posting,」を削除して、「ブログ更新： [title] – [link] 」などに変更する。

（５）次にTwitter と連携させるため、OAuth認証をさせるので、事前にTwitter にログインしておく。
「Message」欄の上にある「Sign-in Using Twitter」をクリック。Twitter によるアプリケーション認証画面が立ち上がってくるので、「許可する」をクリック。

（６）「Tag / Category Options」では、投稿に含めたいタグ・カテゴリ、もしくは除外するタグ・カテゴリを指定できる。
テキスト欄に表示したいタグ、カテゴリを入力。複数ある場合はカンマ区切りで入力する。
また、除外したいタグ・カテゴリがある場合は、「Reverse behaviour」をチェックをする。

（７）「Advanced Options」では、「Allow Tweeting of Old Ｐｏｓｔｓ」にチェックを入れれば、古い投稿記事から自動的にTwitter がつぶやいてくれる。

（８）全ての設定を終えたら、「Update Options」ボタンをクリックして保存する。

「WordTwit」の導入が完了後、（WPtouch の設定画面の）詳細オプション＞「Twitter リンクをヘッダーに表示する」をチェックする。

５．スタイル & カラーオプション＞「背景」
WPtouch のスキン（テーマ）が変更できる。６種類のテーマが用意されている。

６．ロゴアイコン／メニュー & ページアイコン＞「Email メニュー項目を有効にする」
デフォルトでは WordPress の一般設定で登録した E-mail アドレスが表示されてしまうため、「Email メニュー項目を有効にする」のチェックを外す。

７．ロゴアイコン／メニュー & ページアイコン＞「ロゴ & ホームスクリーンブックマークアイコン」「ページ＋アイコン」

「ロゴ & ホームスクリーンブックマークアイコン」ではサイトアイコン、
「ページ＋アイコン」ではページで使用するアイコンが、この項目の上部に表示されている「デフォルト & カスタムアイコンプール」よりプルダウンメニューで選択できる。

ここで独自アイコンを使用したい場合は、57×57 px のサイズでアイコン画像を作成し、png で保存。
「デフォルト & カスタムアイコンプール」の「アップロード」ボタンからアップロードするか、もしくは FTP で「wp-content/plugins/wptouch/images/icon-pool/」にアップロードする。