たかなblog

のんびりと色んな情報を発信していきます。

プラグイン

WordPressのスマホ対応を助けるプラグインWPtouch Mobile Plugin

2015/02/17

こんにちは、たかなです。

WordPressでサイトをガッツリ作成したあとに、私みたいに「そういえばスマホからの見え方確認してなかった!」
って人は多いのではないでしょうか。

最近ではWordpressのデフォルトテーマが既にレスポンシブウェブデザインだったり、既にSEOが施され、アフィリエイトを簡単に始められる無料テーマまで出回っています。
この「たかなblog」も、初めからモバイル対応されたアフィリエイト用テーマことSTINGER3を使用しています。

今やもう、スマホ対応は必須。
そんな中もしあなたのサイトがスマホ対応していないのであれば、「とりあえず」でいいので「WPtouch Mobile Plugin」などのプラグインを使ってスマホ対応させておくことをおすすめします。
今からレスポンシブウェブデザインにする為にスマホ用のCSSを作成するにしても時間がかかりますからね。
それまでのスマホユーザーを捨てるのではなく、他に(時間のかかる)選択肢があるのだとしても、その準備をしている間は、プラグインに頼ってみるのもありではないでしょうか。

 

WPtouch Mobile Pluginってどんなプラグイン?

長くなりましたが本題です。
WPtouch Mobile Pluginは、訪問者がモバイル端末だった場合、自動でモバイル対応デザインを表示してくれるプラグインです。

メリット

・簡単なこと。デザインやオリジナル性を気にしないのであれば、インストールして有効化するだけで完了です。

・速いこと。WPtouch Mobile Pluginで表示するモバイル向けページは迅速でユーザーフレンドリー。

・見慣れたデザインであること。WPtouch Mobile Pluginはかなり普及しているプラグインで、利用しているサイトが非常に多い。故に、既に有名なあのサイトやそのサイトとほぼ同じデザイン。深く考えなくても慣れ親しんだサイトがつくれます。

 

デメリット

・選べるデザインが少ないこと。もちろんカスタマイズできますが、オリジナルデザインを「簡単に」作りたいのであれば難しいかも。
・子テーマ的な概念がないので、テンプレートを触っちゃうと、バージョンアップの度に都度修正部分を戻してあげる必要があります。めんどくさいね。

 

インストール

インストール方法です。「WPtouch Mobile Plugin」はプラグインディレクトリに登録されているため、メニューバーの「プラグイン」の「新規追加」から、「WPtouch Mobile Plugin」で検索できます。
検索結果に表示されたら、「いますぐインストール」でインストールしてください。

WPtouch Mobile Plugin

 

インストール後、そのまま有効化してしまいます。

WPtouch Mobile Plugin2

有効化した時点でスマホ対応されます。べんりー。

ちなみに当ブログを「WPtouch Mobile Plugin」を使ってスマホ対応した場合、以下のように表示されます。

WPtouch Mobile Plugin3

 

「WPtouch Mobile Plugin」の設定

「WPtouch Mobile Plugin」プラグインを有効化すると、メニューバーに「WPtouch」が追加されます。

WPtouch Mobile Plugin4

メニューバーの「WPtouch」>「Core Settings」を選んで、「WPtouch Mobile Plugin」の設定をしていきましょう。

WPtouch Mobile Plugin5

 

日本語化

まずは日本語化です。
「Core Settings」の画面を開くと、「WPtouch Mobile Plugin」の基本設定が行える画面が開きます。
この中の「Regionalization」を、日本語に変更しましょう。

WPtouch Mobile Plugin6

 

クリックするとプルダウンが表示されます。

WPtouch Mobile Plugin7

変更後、一番下までスクロールし「Save Changes」をクリックしてください。

WPtouch Mobile Plugin8

 

これでおっけ、、、あれ?

WPtouch Mobile Plugin9

変化なし。

 

ちなみに、使用しているのは「WPtouch 3.3.1」
さくっと検索してみたところ、以下のサイトに解決方法が記載されていました。

wptouch3.2.2 をカスタマイズする | BKCのBの方

wp-content/plugins/wptouch/lang
内にあるファイル

wptouch-pro-ja_JP.mo
wptouch-pro-ja_JP.pot

を、
wp-content/wptouch-data/lang

に貼り付けてください。

※ネットワーク設定をしていて、ひとつのWordpressで複数のサイトを運営している場合、
wp-content/wptouch-data/の中に「1」や「2」といったフォルダが作成されます。
その場合、wp-content/wptouch-data/1/lang の中に上記ファイルを貼り付けることで、対応するWebサイトで使用しているプラグインを日本語化できるようです。

その後管理画面を開くと日本語化されているのが確認できます。

WPtouch Mobile Plugin10

言語選択の「日本語」が、ja_JPになってしまっていますが、これはもう仕方ないのでしょうね。

サムネイル(アイキャッチ表示)の設定変更

デフォルトの設定だと、記事上部にアイキャッチで登録した画像が表示されます。

WPtouch Mobile Plugin15

広告を挿入しちゃうとほとんどがアイキャッチ画像になっちゃいますね。
横長の画像とかであればもう少し表示サイズは小さくなるのでしょうが、逆に縦長の画像をアイキャッチに設定していると、画面いっぱいに画像が表示され記事本文がスクロールしないと見えない!なんてことも。

アイキャッチとして設定している画像のサムネイル表示については、WPtouch>Theme Settings(テーマ設定)で変更できます。

WPtouch Mobile Plugin16

デフォルトではブログの記事リスト、投稿ページ、固定ページにそれぞれアイキャッチを表示する設定になっています。
アイキャッチを使っていない場合は「サムネイルなし」に、トップページである記事リストの記事横に表示されているサムネイルはそのままにしたい場合は「ブログリストのみ」に設定を変更してください。

WPtouch Mobile Plugin17

だいぶいい感じになったんじゃないでしょうか。

 

スライダーを無効にする

Webサイトのトップにアクセスすると、サイトタイトルの下にスライダーが表示されているのが確認できると思います。

WPtouch Mobile Plugin18

新着5記事を、サムネイル画像付きで表示してくれるスライダーです。横にスライドさせることで別記事のサムネイルに移動します。
ぶっちゃけいらないです。 画像で画面が専有されちゃうし、新着記事はちゃんと一覧で下に表示されています。

スライダー機能をOFFにするには、サムネイルOFFと同じくWPtouch>Theme Settings(テーマ設定)の中で設定します。

WPtouch Mobile Plugin20

テーマ設定の下部に機能スライダーの項目がありますので(日本語化しています)、こちらの「機能スライダーを有効にする」のチェックを外すだけです。

WPtouch Mobile Plugin21

新着タイトルがリスト表示される、非常にシンプルなトップ画面になりました。

 

配色の変更

デフォルトだとタイトルの背景は黒。記事の背景は白に近い灰色になっています。
リンクは水色。ここまではいいのですが、、

WPtouch Mobile Plugin22

タイトルの黄緑が気持ちわるい
なんだろう。黒のタイトル、水色のリンク、灰色の背景色に黄緑の記事タイトルだけが浮いてる。とにかく気持ちわるい。

そんなあなたに朗報です。配色は設定画面で簡単に変更できます。
先程から設定変更でアクセスしているWPtouch>Theme Settings(テーマ設定)の、一番上、「ブランド設定」を選択。

WPtouch Mobile Plugin23

テーマカラーを好みの色に変更し、

WPtouch Mobile Plugin24

ついでにトップ画像なんかも設定しちゃいます。これを設定するとトップのタイトルテキストが表示されなくなるようなので注意。

WPtouch Mobile Plugin25

ついでにブックマークアイコンも設定します。
一番上の「ブックマークアイコン」から、96×96、120×120の画像をアップロード

WPtouch Mobile Plugin26

設定すると、スマホでサイトをブックマークし、ショートカットアイコンを作成した時にアップロードした画像が表示されるようになります。

が。

ネットワーク化(ひとつのWordpressで複数のWebサイトを運営できる設定のこと)していると、上手く反映してくれないようです。
時間があれば今度記事にしよう。

これで一通りの設定は完了です。

こんな感じ。

WPtouch Mobile Plugin31

 

色を変えただけでだいぶ雰囲気が変わりますね。オリジナリティは色だけでも十分出せるのではないでしょうか。

ちなみに、ソーシャルボタンの色を変更することもできます。
カラースキームを「ソーシャルネットワークカラー」にすると、

WPtouch Mobile Plugin30

 

こんな感じ。ソーシャルに力を入れているサイトは、こうして目立たせてみるのもいいかもしれませんね。
共有してください!の文言を持ってきたり、位置を記事下に変更してもいいかも。

Google Analytics トラッキングコードの挿入

モバイル版を「WPtouch Mobile Plugin」で用意した場合、Googleのアナリティクスを使用している方は、モバイル表示になった時も情報を拾ってくるよう、設定をする必要があります。

GoogleAnalytics?なにそれおいしいの?という方はこの機会に是非導入してください。かなり美味しいです。
GoogleAnalyticsの導入方法

既に登録をしている方は、トラッキングコードをWPtouch>コア設定>カスタムコード内にぺたっと貼り付けるだけでOKです。

WPtouch Mobile Plugin29

簡単なので是非導入初日に済ませておいてください。

 

GoogleAdSenceの挿入(記事ページ)

「WPtouch Mobile Plugin」を使用してスマホ用デザインにGoogleアドセンスを表示したい場合、プラグインのファイルを直接編集する必要があります。
前述しましたがWPtouchには子テーマという概念が存在しないので、広告表示のためにテーマファイルを編集しても、バージョンアップしたら消えちゃいます。
なので、以下の設定を行った場合は、ローカルにかならず編集したファイルのバックアップを残しておいてくださいね。
バージョンアップで編集対象ファイルが大幅に修正されることはまずないと思うので、プラグイン更新後に毎回ローカルに置いてある編集後のファイルをアップしてあげてください。

心配性の方は、編集前のファイルも残しておいて、プラグイン更新後に更新前後の対象ファイルをWinMage等で比較してあげるといいかもしれません。

 

編集対象ファイル

/wp-content/plugins/wptouch/themes/bauhaus/default/single.php

を編集していきます。FTPツール等でファイルを取得し、さくらエディタなどのエディタで開いて編集してください。
Windowsに付属しているメモ帳で編集すると文字コードがおかしくなってしまうので、できれば専用のエディタか、レンタルサーバーが提供しているFTPツール内で編集を済ませてくださいね。

 

編集位置

Googleアドセンスは1ページに3つまで広告を挿入することができます。
逆に言えば3つ以上の挿入は規約違反です。アカウント削除の対象となりますので、編集後はかならずサイト全体を確認しましょう。

PCからスマホの表示を確かめる方法は以前紹介していますので、スマホをお持ちでない方、PCから確認したい方は参考にされてください。
スマホ表示をPCから確認する方法

それでは編集位置です。

 

例1 ブログタイトル下

※例2と併用すると、「メインコンテンツを広告で押し下げる行為」としてアドセンスの規約に引っかかる可能性があります。
 この位置に300×250サイズの広告ユニットを使用することは規約違反です。320×50、もしくは320×100の広告ユニットを利用ください。

アドセンスコード挿入位置

[php firstline="4" highlight="12"]
<div class="crumb-path bauhaus">
<p>
<a href="<?php wptouch_bloginfo( 'url' ); ?>"><?php wptouch_bloginfo( 'site_title' ); ?></a>
<i class="icon-angle-right"></i>
<span><?php wptouch_the_title(); ?></span>
</p>
</div>
-->
//ここにアドセンスコード
<div id="content">[/php]

広告位置イメージ(320×100の場合)

WPtouch Mobile Plugin14

例2 記事タイトル下

※例1と併用すると、「メインコンテンツを広告で押し下げる行為」としてアドセンスの規約に引っかかる可能性があります。
 この位置に300×250サイズの広告ユニットを使用することは規約違反です。320×50、もしくは320×100の広告ユニットを利用ください。

アドセンスコード挿入位置

[php firstline="29" highlight="34"]
<h2 class="post-title heading-font"><?php wptouch_the_title(); ?></h2>
<?php if ( bauhaus_should_show_author() ) { ?>
<span class="post-author"><?php the_author(); ?></span>
<?php } ?>
</div>
//ここにアドセンスコード
<div class="post-page-content">[/php]

広告位置イメージ(320×50の場合)

WPtouch Mobile Plugin13

例3 記事下

ページ送りの上、記事の下にアドセンスを挿入します。

アドセンスコード挿入位置

[php firstline="61" highlight="62"]
</div> <!-- content -->
//ここにアドセンス
<?php get_template_part( 'nav-bar' ); ?>

<?php get_template_part( 'related-posts' ); ?>
[/php]

広告位置イメージ

WPtouch Mobile Plugin33

 

例4 ページ送り下

ページ送りの下、コメントの上にアドセンスを挿入します。

アドセンスコード挿入位置

[php firstline="63" highlight="64"]
</div> <!-- content -->

<?php get_template_part( 'nav-bar' ); ?>
//ここにアドセンスコード
<?php get_template_part( 'related-posts' ); ?>
[/php]

※3.3.4から、'nav-bar'(ページ送り)と'related-posts'(カテゴリーとか)が逆になっているようです。気に入らない人は戻してもいいと思うし、大きくデザインが変わるわけではないですがいろいろ試してみてください。

広告位置イメージ

WPtouch Mobile Plugin32

 

例4 ページ送り下

ページ最下部

アドセンスコード挿入位置

広告位置イメージ

WPtouch Mobile Plugin34

 

GoogleAdSenceの挿入(INDEXページ)

サイトのトップであるINDEXページ広告を挿入したい場合、記事ページとは違うファイルを編集してあげる必要があります。

例外として、上で紹介したテーマ編集のフッターにアドセンスコードを登録した方は、INDEXページにも固定ページにも表示されています。
アドセンスは1ページ3つまでなので、フッターに登録した方は注意してくださいねー。

編集対象ファイル

/wp-content/plugins/wptouch/themes/foundation/default/index.php

を編集していきます。FTPツール等でファイルを取得し、さくらエディタなどのエディタで開いて編集してください。
Windowsに付属しているメモ帳で編集すると文字コードがおかしくなってしまうので、できれば専用のエディタか、レンタルサーバーが提供しているFTPツール内で編集を済ませてくださいね。

それでは編集位置です。

例1 ブログタイトル下

アドセンスコード挿入位置

[php firstline="1" highlight="2"]
<?php get_header(); ?>
//ここにアドセンスコード
<div id="content">[/php]

広告位置イメージ(320×50の場合)

WPtouch Mobile Plugin35

 

INDEX(トップページ)については、ページ最下部のフッター部分にも既に設定しているので、例1の箇所に小さめの広告を入れてあげれば充分な気がしますが、3つどうしても入れたい!という人は以下の場所も検討してみてください。

例2 他のエントリーを読み込む…の上

アドセンスコード挿入位置

[php firstline="11" highlight="13"]
<!-- no posts -->
<?php } ?>
//ここにアドセンスコード
<?php if ( foundation_is_theme_using_module( 'infinite-scroll' ) ) { ?>

<?php if ( get_next_posts_link() ) { ?>[/php]

広告位置イメージ

WPtouch Mobile Plugin36

 

 

GoogleAdSenceの挿入(固定ページ)

固定ページにも広告を挿入したい方は、page.phpも編集する必要があります。

編集対象ファイル

/wp-content/plugins/wptouch/themes/bauhaus/default/page.php

例1 ブログタイトルの下

アドセンスコード挿入位置

[php firstline="4" highlight="9"]
<?php get_template_part( 'index' ); ?>
<?php } else { ?>

<?php get_header(); ?>
//ここにアドセンスコード
<div id="content">[/php]

広告位置イメージ

WPtouch Mobile Plugin37

 

 

以上になります!

WPtouchネタは需要があれば更新していきたいと思いますので、「こういうカスタマイズがしたいんだけどどうしたらいいか」とか、「こんなことしたいけど可能か?」とか、「例には上がっていなかったけど、○○のページの○○に広告を挿入したいけどどうやればいいのか」などなど、疑問があればコメントいただければと思います。

こんな長い記事にお付き合い頂きありがとうございました!


たかなblogでは、これをまとめてほしい!という疑問を募集しております。
気になったもの、多かったものを記事にしていく形になるかとは思いますが、何かを探すとき、ネットから色々情報を拾って整理するのって、自分でやると意外と時間がかかるんですよね。

そういったものを探すお手伝いが出来ればと思っています。
ご希望があれば是非お気軽にコメント欄へ!
コメントは基本、私が承認すると表示される仕様になっているため(スパム防止)、コメントを送信したのに表示されるのに2、3日かかる、ということもございます。
確認次第公開していきますのでお待ちください。

それではまた。

-プラグイン
-, ,

おすすめ記事

1
12月目前!クリスマスグッズ、どんなものに関心が集まっているの?

今回気になってまとめてみたのは、「クリスマスの人々の関心」について。 昨年(20 ...

2
年賀状印刷、業者に委託してでオシャレに?自宅で徹底的にこだわる?

年賀状作成は、プロにお願いする時代!? 年賀状のテンプレートが簡単に手に入るよう ...

3
ハロウィン、クリスマスに!とにかく可愛いコスプレ子供服【最新版】

ハロウィンも終わり、クリスマスが楽しみな季節になりました! これからクリスマスパ ...