WPをiPhoneやアンドロイド・スマートフォンに最適化するプラグインWPtouchの使い方とKtai Styleとの併用法

スポンサーリンク

iPhoneやアンドロイド搭載のスマートフォンがデスクトップPCやノートPCの売り上げを大きく追い抜くことが分かっている今、私のサイトもiPhoneやスマートフォンに最適化せねば思いつつ、開先延ばしになっていました。今日は、やっとWordpressの無料のプラグイン「WPtouch」を導入して、スマートフォンに最適化してました。

image


Ktai Styleの併用方法プラグイン「WPtouch」とは

iPhoneなどのスマートフォンでWordpressで作ったサイトを表示させるには、プラグインで導入するのが一番手っとり早いですね。いくつかあるプラグインの中でも、評判のよい「WPtouch」をインストールしてみました。(追記:無料版から有料版に変更しました。快適です。詳しくは「WPtouch Pro」無料版から有料版に変えた理由とは?購入と導入手順について|アマモ場よりどうぞ。)

「WPtouch」はWPによって作られてブログやサイトをiPhoneだけでなく、アンドロイド搭載のスマートフォンにも、またブラックベリーなどの携帯にも最適化して表示してくれます。さらにブラウザ「Opera Mini」にも対応してくれますので、ニンテンドーDSでの表示も最適化表示してくれると思います。(試していませんが・・・。)

さらに、詳細な設定、スキンカラーのの変更やカスタマイズ、トップページやタイトルの変更、head内のタグを少なくしたり、アドセンスやgoogle解析コードを簡単にセットしたりできます。

ちなみに、左がWP用の日本の携帯電話での表示のためのプラグイン「Ktai Style」によるiPhoneでの表示で、右は「WPtouch」での表示です。やっぱり右が見やすいですね。

image image

WPtouchのインストールと使い方

では、早速プラグイン「WPtouch」をインストールして使ってみます。

インストール

いつものように、WordPressの管理画面から自動インストール、有効化できます。WPの管理画面のサイドバー[プラグイン]の[新規追加]をクリックし、キーワードに[WPtouch]と入力して検索を開始します。

先頭に[WPtouch]が現れますので、その下部の[いますぐインストール]を押します。次にインストール確認ウインドウが現れますので[OK]もクリックします。

image

最後にプラグインを有効化させれば、インストール完了です。

image

使い方

WordPressをiPhoneやアンドロイドスマートフォンに最適化してくれるプラグイン「WPtouch」ですが、使い方はほとんど説明するまでもありません。上記のようにインスト―ルし、有効化したらすでにスマートフォン用に最適化されて表示されているはずです。

iPhoneがなくてもPC上で仮想表示(シュミレーション)してくれるフリーソフト「iBBDemo2.0」使い方」がありますので、それをインストールしておけばPCでiPhoneでどのように表示されているのかを確認可能です。

詳細設定

この「WPtouch」は有用版があるほど優れた詳細設定が可能です。無料版での設定はWPの管理画面のサイドバーの[設定]から[「WPtouch」]をクリックすると、詳細設定が以下のように可能です。

言語は日本語に対応してませんので、自動選択(Automatically detectede)を選択します。サイトのトップページは変更可能ですし、サイトタイトルも変えられます。また表示させたくないカテゴリーに属する記事も設定可能です。(2011年9月27日追記:現在のWPtouchのバージョンは日本語化されています。設定でjapaneseを選択します。)

image

プルダウンメニューの表示・非表示を以下のように。

image

スキンカラーやデザインはタイトルカラー、背景色、リンクカラーなどを以下のように変えられます。

image

登録済みにアイコンに加え、自分オリジナルのアイコンをアップロード可能です。

image

さらに、サイトタイトルのアイコンや、プルダウンのメニューに表示させるページの選択とアイコンの選択が可能す。

image

image

加えてアドンセンスコードやアクセス解析コード導入欄もあります。本当に「WPtouch」は至れり尽くせりのiPhone最適化プラグインです。

アドセンスの特記

上述したように、「WPtouch」では下記のように、アドンセンスIDを設定すれば簡単に表示されますが、WPの個別記事内での広告表示は、タイトルに下になります。

20110211185154

アドセンスの規約が気になる方はタイトルの上に広告を挿入可能です。その方法は以下の通りです。

その下にはGoogle Analyticsなどのアクセス解析コードを入れられます。しかし私のブログは「Google Analyticator」というプラグインが入っていますので、「WPtouch」のテンプレートにも解析コードが自動挿入されます。したがってこの設定はスキップします。

wp-content/plugins/wptouch/themes/default 内の[header.php]のファイルの最下部の部分(以下の画像参照)にアドセンスコードを挿入してください。(アドセンスの規約によると記事上部はシングルタイプのみです。)

20110211185936

Ktai Styleの併用方法

多くのWP管理者はすでに日本の携帯サイト最適化プラグイン「Ktai Style」をすでに導入しておられると思います。その場合、上記のプラグイン「WPtouch」と併用する、つまり一般の携帯表示は「Ktai Style」で、iPhoneなどのスマートフォン表示では「WPtouch」で表示させたい場合は、忘れずに以下のように設定しておかねばなりません。

WPの管理画面のサイドバーの「携帯表示」から「テーマ」を選択します。

image

「電話キャリア別テーマ」のトップの「iPhone,Androido用」は、(Ktai Styleを使わない)にしておきます。そうすると、スマートフォンでのアクセスはプラグイン「WPtouch」での表示になります。

image

なお、「Ktai Style」の携帯のみ出力とPCのみ出力タグを用いて、PC用リンクと携帯用リンクを分けている方は、 「WPtouch」での表示はPC用リンクの選択になります。

以上が、WordpressをiPhoneやアンドロイド搭載のスマートフォンでの表示を最適化してくれるプラグイン 「WPtouch」の特徴と使い方でした。

スポンサーリンク
PC用
PC用

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメントを残す