WordPressでスマホ最適化させるプラグインWPtouchの導入

1.スマホ利用時の見栄えを最適化したい!!

PCで記事を書き、確認することが多かったため気が付かなかったのですがスマホだと画面が非常にちっちゃく表示されてしまい記事へのリンクをクリックするのも大変なことにいまさらながら気が付きました。

そこで、スマホに特化した見栄えにしてみたいと思いインターネットで調べてみました。

2.WPtouchを導入

調べたところ、Wordpressで利用可能な「WPtouch」というプラグインが評判が良さそうでしたので導入してみることにしました。

難しい設定やプログラミングなしにPC用とスマホ用のデザインを自動的に切り替えてくれるそうなのでWPtouchを選びました。

プラグインのインストール画面で「WPtouch」と入れて検索。「WPtouch Mobile Plugin」を選択して、インストール、有効化でOKです。ここまでわずか3分でできてしまいました。

今回インストールしたバージョンはWPtouch3.1.5の無料バージョンです。

3.スマホで確認

さて、インストールした状態でスマホから確認してみます。

スマホ画面

おおおおおおおお。

デフォルト設定だけでもスマホ用画面に大変身!!

ちょっと味気ない画面ですが無料ですし十分でしょう!!

気になるのはタイトルの文字が切れてしまっていること。。。

4.カスタマイズしてみよう

デフォルト設定でも十分利用可能な状態の「WPtouch」ですが設定でどのぐらいカスタマイズができるのか調べてみました。

4-1.Core Settings -General-

管理画面のWPtouchメニューから「Core Settings」を選択します。

Generalタブについて説明します。

WPtouch_Core Settings(General)1

「Site Title & Byline」

ブログのタイトルですね。スマホ用画面を開いたときのみ適用されるタイトルです。PC用画面では元のタイトルが表示されます。

「Display “Powered by WPtouch Pro” in footer」

画面の下部に”Powered by WPtouch Pro”という文字を表示するかどうかです。私は不要なのでチェックを外しました。

「Regionalization」

直訳すると「地域化」ですが要は利用を想定した言語を選択します。日本なので「Japanese」を選択します。

※WPtouchの管理画面の文字を変更してくれるようですが、設定を保存してもメッセージは英語表示のままでした。

「Display Mode」

表示モードの設定です。

「Normal (active for all mobile visitors)」

すべてのモバイルユーザに対してスマホ用画面を表示する設定のようです。デフォルト値です。

管理画面もスマホ用画面になります。通常はこの設定のままでよいでしょう。

「Preview (active only for logged-in site administrators)」

ログイン者のみスマホ用画面にする設定です。訪問者はPC用サイトと同じ表示になります。

プラグインを導入した直後に管理者がサイトの見栄えを確認するときに利用する機能でしょう。

「Disabled (mobile theme will never show)」

無効化設定です。プラグインは入れたけどスマホ用サイトを表示したくない場合に利用します。どういう場合に利用するのでしょうか?

ということで訪問者にスマホ用画面で閲覧してもらいたい人はデフォルト値のままでよいようです。

WPtouch_Core Settings(General)2

「Custom Code」

画面下部に埋め込むことができるHTMLやJavaScriptを記述することができるそうです。

訪問者へのメッセージや自己紹介などを記述するとよいと思います。

「Admin Mode」

「Advanced」を選択して設定を保存すると上級者用の設定ができるようになるようです。

上級者用の追加設定箇所には「Advanced」というロゴが項目の横につきます。

上級者用設定については今回は割愛します。

4-2.Core Settings -Compatibility-

compatibilityタブを選択すると表示されます。

※WPtouch Proのときのみ有効にできる設定のようです。

WPtouch_Core Settings(Compatibility)_

[Shortcodes]

指定したShortcodeの場合にはWPtouchは利用しないという設定ができるようです。

複数ある場合は「,」カンマで区切るようです。

「Ignored URLs」

指定したURLの場合にはWPtouchを利用しないという設定ができるようです。

特定ページのみPC用サイトを表示させたい場合などに利用するのでしょうか。

「Custom User-Agents」

スマホ用サイトを表示する「user-agent」を指定できるようです。複数ある場合は「,」カンマ区切りです。

PC用サイトを表示するのか、スマホ用サイトを表示するのかの判定は「user-agent」というものを利用して判定しています。user-agentはブラウザが自動的に送信する情報です。たとえばブラウザの種類、バージョン、OS情報などを送信しています。

WPtouchが元からスマホ用サイトとして認識している以外のuser-agentを指定する項目でしょう。

ぱっと思いつくのはタブレットです。私の持っているタブレット(Android)でWPtouch適用後の画面を開きましたがPC用サイトが表示されてしまいました。また、新しいブラウザなどが出てきたときに指定するとよいでしょう。上級者用の設定ですね。デフォルトのままでもよいと思います。

4-3.Themes & Extensions

ブラウザのテーマと拡張機能を設定できるようです。しかし、無料版では「Bauhaus」のみ利用可能です。有料版の方は自分の好みのテーマを選べばよいでしょう。

4-4.Theme Settings -General-

「Bauhaus」テーマの設定です。その他のテーマを選択している場合には異なる設定情報になるかもしれません。

WPtouch_Theme Settings

「Number of posts in post listings」

記事一覧ページに表示する件数を指定します。

記事一覧ページから除外するカテゴリーを指定します。複数ある場合はカンマ区切りです。

「Excluded tags」

記事一覧ページから除外するタグを指定します。複数ある場合はカンマ区切りです。

「Post thumbnails」

サムネイルの表示方法です。

記事にアイキャッチ画像を設定している場合にアイキャッチ画像を利用するかを設定します。[No thumbnails]以外はアイキャッチ画像を利用します。その他はお好みでよいでしょう。アイキャッチ画像が登録されていない記事の場合は投稿日付の画像が表示されるようです。

「Pages」

記事にコメントを表示するかどうかを設定します。PC用サイトと異なる表示にしたい場合に利用します。

「Login Form」

管理画面へログインするための画面へのリンクを表示させるかどうかの設定です。オンにするとメニューにログインリンクが設定されます。

4-5.Theme Settings -General-

スマホ用サイトの配色、ロゴを設定できます。利用方法については説明不要と思いますので割愛します。

「Sharing」はFacebookやTwitterなどのソーシャルサービスとの連携ボタンを表示するか否かの設定と表示方法(見栄え)の設定です。「Social network colors」を選択するとそれぞれのサービスのイメージカラーを利用します。

4-6.Theme Settings -Bookmark Icons-

ブックマーク時のタイトル、アイコンを設定できます。

最後は駆け足になってしまいましたが要点は伝わったと信じたいです。

しかし、デフォルト設定のままでも十分利用できるプラグインだったと思います。今のところカスタマイズしたのは配色ぐらいです。また、機会があれば調べた内容をアップしていきたいと思います。