WPTouch MobilePlugin(Wordpressプラグイン)

WPTouch MobilePlugin(WordPressプラグイン)の使い方(設定)・カスタマイズと、Pro版の紹介

WPTouch MobilePlugin とは・・・Wordpressブログをスマートフォン(スマホ)に対応させるプラグインのことです。一般的には、略して「WPTouch」と呼ばれています。

WordPressにデフォルトでインストールされているプラグインでもあり、ワードプレスを利用している方なら、ほとんどの方が知っている、超有名プラグインになります。

設定自体も、初心者でも簡単におこなう事ができるため、未だ「スマホ対応」していないWordpress管理者は、ぜひ「WPTouch MobilePlugin」を導入して、対応することをおすすめします。

これだけ、スマートフォンの普及が進んでいる昨今ですからね。

当ブログでも、4割ものユーザーが、スマホからアクセスしています(下図)

WPTouch MobilePlugin スマホ対応の必要性

今回の記事では、この「WPTouch MobilePlugin(Wordpressプラグイン)」のインストールと使い方。

また、カスタマイズ方法や、有料版「WPTouch Pro」の特徴(無料版との違い)についても、順に解説していきます。

以下、目次になります。

  • WPTouch MobilePlugin(Wordpressプラグイン)のインストールと使い方(設定手順)
  • WPTouch MobilePlugin のカスタマイズ(日本語化表示・アドセンス(adsense)広告の設置)
  • WPTouch Pro(有料版)について
  • WPTouchプラグインを使わずに、テーマ・テンプレートで解決する

※Wordpressの基本的な使い方やインストール手順については、こちらでまとめています→WordPressとは?ワードプレスのインストール方法・使い方と、オススメの無料テーマ(テンプレート)・プラグイン紹介

WPTouch MobilePlugin(Wordpressプラグイン)のインストールと使い方(設定手順)

当章では、「WPTouch MobilePlugin」のインストールと使い方(設定手順)について、順に解説していきます。

まずは、インストール手順ですが、通常「WPTouch MobilePlugin」は、Wordpressをインストールした際に、デフォルトで付いてくるプラグインになります。

WPTouch Mobile Plugin インストール手順1

なので、「プラグインの有効化」をするだけで、利用可能です。

もし、「WPTouch MobilePlugin」がインストールされていない場合は、プラグインの「新規追加」から、インストールしてください(下図参考)

WPTouch Mobile Plugin インストール2

以上です。

インストールして「プラグインの有効化」をしたら、これで基本的には「スマホ対応」がされます。

実際に、対応されているかどうかを確認するには、スマホで「サイト」を開いてみれば良いのですが、PC上からでも確認できます。

下記サイトを開いて、該当のURLを入力して確認してみてください。

Responsive Design Testing

下図のように、モバイル・スマホの画面サイズで、記事タイトルが綺麗に一覧化されていれば「OK」です(トップページの場合)

WPTouch Mobile Plugin 使い方(設定手順)1

また、Wordpressの管理画面には、「WPtouch」のメニューが追加されています。

WPTouch Mobile Plugin 使い方(設定手順)2

では、次に「WPtouch」の使い方(設定手順)について解説していきます。

まず、「WPtouch」のメニューから「Theme Settings」を選択してください。

すると、下図のような画面が開きます。
ここでは、モバイル・スマホで「サイト」を開いた時の表示形式が設定できます。

まず、「General」タブの設定です。

WPTouch Mobile Plugin 使い方(設定手順)3

以下、上図の設定項目の説明です。

  1. トップページの投稿表示数です。デフォルトでは「5」となっています

    下図、表示例
    WPTouch Mobile Plugin 使い方(設定手順)6

  2. サムネイル画像の表示可否設定です。デフォルトでは、「トップページなどの投稿リスト」・「投稿ページ」・「固定ページ」にサムネイル画像を表示する設定になっています

    下図、表示例
    WPTouch Mobile Plugin 使い方(設定手順)7

  3. 投稿(記事)に対して、表示させるメタ情報(投稿日時や投稿者)の設定です

    下図、表示例
    WPTouch Mobile Plugin 使い方(設定手順)-7

以上です、設定ができたら、「Save Changes」をクリックして保存しましょう。

また、「Preview Theme」ボタンにて、プレビューを確認することもできます(設定を反映させたプレビューを確認するには、一度「Save Changes」を押下してから、「Preview Theme」にて確認する必要があります)

次に、同画面の「Branding」タブです。

ここでは、デザイン(色やロゴ)や、ソーシャルメディアとの連携について、設定がおこなえます。

WPTouch Mobile Plugin 使い方(設定手順)4

以下、上図の設定項目の説明です。

  1. 背景や、ヘッダー・メニューの「色」の設定です

    ・「Theme Background」を「赤」に設定した場合(下図、表示例)

    WPTouch Mobile Plugin 使い方(設定手順)-8

  2. サイトの「ロゴ画像」の設定です

    以下、表示例
    WPTouch Mobile Plugin 使い方(設定手順)-9

  3. 主要ソーシャルメディアの共有リンクの表示設定です

    以下、表示例(タイトル・アイキャッチ画像の下部に表示される)
    WPTouch Mobile Plugin 使い方(設定手順)-10

  4. フッターに、自社サイトの主要ソーシャルメディア・アカウントのリンクを表示させる場合の設定です

    以下、表示例
    WPTouch Mobile Plugin 使い方(設定手順)-11

以上です、設定できたら「Save Changes」で保存しておきましょう。

また、同画面には「Bookmark Icons」タブ(下図)がありますが、こちらは、デフォルト設定のままで良いです。

WPTouch Mobile Plugin 使い方(設定手順)5

以上、「WPTouch MobilePlugin」のインストールと基本的な使い方(設定手順)でした。

WPTouch MobilePlugin のカスタマイズ(日本語化表示・アドセンス(adsense)広告の設置)

当章では、「WPTouch MobilePlugin」のカスタマイズについて、まとめてみました。

カスタマイズ内容は、下記の2つになります。

  1. 管理画面の日本語化表示
  2. アドセンス(adsense)広告の設置

どちらも、「WPtouch」の「Ver 2.x」までは、管理画面上からできたようですが、「3.x」からは、直接「WPtouch」プラグインのファイルを編集(カスタマイズ)しないと、できなくなっています。

※今回、対象とする Ver:3.1.4

では、順に解説していきましょう。

管理画面の日本語化表示 : 「WPTouch MobilePlugin」カスタマイズ

管理画面を、日本語化する設定欄は、いちよ「WPtouch」メニューの「Core Settings」にあります(下図、参考)

WPTouch Mobile Plugin カスタマイズ手順1

ただ、なぜか、これでは「日本語化」がされません。

そこで、ググってみたところ、どうやら「WPtouch」のプラグインファイルを直接編集(カスタマイズ)する必要があるようです(参考元:WordPress.org フォーラム:[解決済み] WPtouch3.3.1日本語化できません

手順としては、まず

「wordpress/wp-content/plugins/wptouch/wptouch.php」

上記ファイルに、下記赤文字部分を追記します。

load_plugin_textdomain( ‘wptouch-pro’, false, ‘/wptouch/lang’ );
define( ‘WPTOUCH_VERSION’, ‘3.1.4’ );

次に、

「wordpress/wp-content/plugins/wptouch/lang/wptouch-pro-ja_JP.mo」

上記ファイル名を、下記ファイル名にリネームします(赤文字:変更箇所)

「wordpress/wp-content/plugins/wptouch/lang/wptouch-pro-ja.mo」

以上です。

これで管理画面を開いてみると、下図のように日本語表記になっています。

WPTouch Mobile Plugin カスタマイズ手順2

アドセンス(adsense)広告の設置 : 「WPTouch MobilePlugin」カスタマイズ

アドセンス(adsense)広告の設置に関して、以前のバージョン(2.x)では、管理画面上に設定欄がありました。

ですが、「3.x」のバージョンでは、設定欄がなくなっています。

フッターに表示させるだけで良いなら、下図のように、「WPTouch」のメニュー「Theme Settings」を選択し、「Branding」タブの「Theme Footer」欄に、アドセンスの広告コードを貼り付けるだけですが、、、

WPTouch Mobile Plugin カスタマイズ手順3

おそらく、サイト管理者の方は、フッターだけでなく、記事の上部や下部にも表示させたい場合がほとんどでしょう。

その場合は、「WPTouch」のファイルを直接編集(カスタマイズ)する必要があります。

まず、「wordpress/wp-content/plugins/wptouch/themes/bauhaus/default/single.php」を開いてください。

このファイルをカスタマイズすることによって、記事の上部や下部に「アドセンス広告」を表示させることができます。

・【記事の下部に「アドセンス広告」を表示させる場合】

</div> <!– content –>

<div>
アドセンスの広告コード
</div>

上記、赤文字が追加部分です。「div:content」の次に、追加しましょう。

・【記事の上部に「アドセンス広告」を表示させる場合】

<div>
アドセンスの広告コード
</div>

<?php wptouch_the_content(); ?>

上記、赤文字が追加部分です。「wptouch_the_content()」の前に、追加しましょう。

以上です。

これで、記事の上部と下部に、アドセンス広告を表示させることができます。

WPTouch Pro(有料版)について

WPTouch Pro

WPTouchには、「WPTouch Pro」という有料版があります。

当章では、この「Pro(有料版)」と、無料版との違いについて、以下にまとめました。

  1. 「Pro(有料版)」の値段 : 1サイト=49ドル(約5000円)、5サイト=99ドル(約1万円)
  2. 「WPtouch Pro」は、選択したプラグインのフックを無効にすることができる。

    要は、プラグインが独自に読み込んでいるモノで、無駄な「CSS」や「JS」ファイルの読みこみ・表示をカットすることができる。

    これによって、無料版より速い表示速度を実現できる。

  3. 「WPtouch Pro」は、「iPad」をサポートしている。インターフェースや動きも「iPad」スタンダードになっている。
  4. 「Pro(有料版)」は、カスタム投稿タイプに対応している。
  5. 「Pro(有料版)」は、設定項目のバックアップが可能
  6. 利用できるテーマ・テンプレートが増える(無料版では、下図の「Bauhaus」のみ利用可)

    WPTouch-pro 無料版との違い-1

  7. WPtouch Pro専用の、「モバイルキャッシング機能(Infinity Cache)」が利用できる。これにより、無料版より高速の表示が可能になる
  8. 「WPtouch Pro」は、同じ投稿(記事)において、PCとモバイル(スマホ)で、異なるコンテンツを表示できる(Mobile Content機能)
  9. 「WPtouch Pro」は専用フォーラムがある。ここでの質問なら、遅くとも 2、3営業日程度で返信される模様(無料版でもサポートはある)
  10. 購入から7日以内なら返金可能

参考にしたページ:buslog : WordPress の有料プラグイン、WPtouch Proを買ってみました

以上です。

WPTouchプラグインを使わずに、テーマ・テンプレートで解決する

WPTouchプラグインの代わり レスポンシブWebデザイン対応テーマ・テンプレート

WordPressブログを、スマホ対応させる方法は、「WPTouch」のようなプラグインを使う方法の他に、

レスポンシブWebデザインに対応した「テーマ・テンプレート」を利用する方法もあります。

レスポンシブWebデザインとは、サイトに訪れてきたユーザーのデバイス(PCやスマホなど)によって、表示サイズを最適化する手法のことです。

昨今では、この「レスポンシブWebデザイン」に対応したテーマ・テンプレートが主流となってきていて、わざわざプラグインをインストールしなくても、「スマホ対応」しているパターンが増えてきています。

当ブログでも、この方法で、スマホ対応をおこなっています。

「レスポンシブWebデザイン」に対応したテーマ・テンプレートの紹介など、詳細は、下記記事にてまとめているので、参考にしてください。

wordpress(ワードプレス)のスマホ最適化!レスポンシブWebデザインでスマートフォン対応するテーマ・テンプレート

以上です。

コメントを残す

メールアドレスが公開されることはありません。