WPTouch設定日本語化カスタマイズでアドセンスとスマホ最適化

スマホの圧倒的シェアにより、
今やpcよりもアクセスの割合が多いスマホ。

そこで、今回はWPtouchを導入し、
日本語化、カスタマイズすることで、
アドセンスとスマホへの最適化設定を解説します。

最新版はバージョン『3.1.1』となっていますが、
ここでは『WPtouch 1.9.8.1』を解説します。

 
wptouchトップカスタマイズ
 

上の画像は、
トップページのカスタマイズ、ビフォーアフターですが、
どうでしょう?全然印象が違うと思います。

僕が運営しているトレンドサイトでも、
このWPtouchのカスタマイズを導入することで、
直帰率とアドセンスのクリック率が劇的に良くなりました!

そこで、最低限これだけはやっておきたい!
というカスタマイズ設定をご紹介します。

WPTouch各種ファイルのカスタマイズ

cssのカスタマイズ

  • チェックリストwptouchスマホテーマの枠削除
  • サムネイルの表示拡大
  • ヘッダー画像&幅設定変更
  • ヘッダー画像の変更

index.phpのカスタイマイズ

  • Topページの投稿時間の表示変更、投稿者の削除
  • Topページにアドセンス広告

header.phpのカスタマイズ

  • 背景色を消す。
  • menuボタン修正
  • タイトルアイコンを削除する

single.phpのカスタマイズ

  • 記事ページの投稿時間の表示変更、投稿者の削除
  • 記事下にアドセンス広告を設置
  • ソーシャルブックマーク最適化
  • 関連記事表示のプラグイン設置
  • 人気記事(Popular Posts)の設置

footer.phpのカスタマイズ

  • 人気記事(Popular Posts)の設置。

インストールと準備

まず、
jetpack モバイルテーマ
Any Mobile Theme Awitcher

を使用している場合は
必ず停止してください。

 
それでは、『WPtouch Mobile Plugin』 を
インストール ⇒ 有効化します。

こちらからプラグインをダウンロードして、
ZIPファイル形式で追加をします。

プラグインのダウンロードはこちらから
wptouch.1.9.8.9.zip

ZIPファイルでのインストールの仕方はこちらを参照
プラグインのインストール方法

※ダッシュボード検索からプラグインを追加すると
最新バージョンの『3.1.1』がインストールされてしまいます。
ここでは、『1.9.8.1』を解説していきます。

無事インストールが終了し、有効化できたら、
引き続き、初期設定をします。

FTPソフトとエディターのインストール

WPtouchのカスタマイズには、サーバー操作が必要になるので、
FFFTP を導入されていない人はこちらから導入してください。
FFFTPダウンロードサイト

macの人はこちらのソフトがお薦めです。
『Cyberduck』ダンロードサイト

FTPソフトの設定について
XサーバーのFTP設定の解説

 
さらに、プログラムの編集や書き込みをするので、
メモ帳ではなくテキストエディターがあるとかなり便利です。
TeraPad ダウンロードサイト

macはこちら
『mi』ダウンロードサイト

それでは本格的なカスタマイズをして行きましょう。

初期設定〜日本語化

まず、日本語化と、ダッシュボードの設定画面で出来る
簡単な初期設定を済ませてしまいましょう。

ここでは、

  • wptouch日本語化
  • 記事一覧表示のアイコンを変更
  • タイトル省略を無効化
  • 投稿者名を非表示
  • アナリティクスのトラッキングコード設定
  • ホームアイコンの変更
  • フッターメッセージを変更する。
  • タイトル部分の背景色の変更

という設定が出来ます。

これらの項目の設定後、スマホからみたトップ画面は
このように変わります。

 
wptouch最適化
 

それでは設定していきましょう。

wptouch日本語化

ダッシュボードのメニューから
設定⇒WPtouch を選択。

 
wptouch設定
 

設定画面に切り替わったら、
まず日本語化します。

一番上にあるタブをクリックし、
『Japanese』を選択します。

画面を一番下までクルロースし、保存。

 
wptouch日本語化

wptouch設定

これで日本語化されています。

続いて、以下の設定をします。

ダッシュボードから出来る設定

  • 記事タイトルの省略無効化
  • 投稿者名を非表示
  • 記事サムネイルの画像を「カレンダーアイコン」から、
     「記事のサムネイルまたは指定画像を投稿」に変更

 

wptouch設定カスタマイズ

こちらは画像と同じ様にチェックを入れるか外すかします。
僕はタグは使用しないので、外しています。

 
wptouch設定カスタマイズ

グーグルアナリティクスの設定

グーグルアナリティクスのトラッキングコード
このダッシュボードの設定から出来ます。

まだアナリティクスのアカウントがなければ、
これを機に導入しておきましょう。

グーグルアナリティクスの登録

アナリティクスをプラグインで設定している場合は、
以下の設定は必要ありません。

プラグインでの設定と、WPtouchでの設定が重なってしまうと、
正確なアクセス解析ができなくなります。

 
ヘッダーにトラッキングコードを貼り付けている場合は、
このまま設定を続けましょう。

トラッキングコードの場所はこちらで確認できます。
アナリティクスのホームで右上の『アナリティクス設定』(画像参照)をクリック。
画面が以下の画像に変わったら真ん中赤枠の『トラッキング情報』をクリック。

 
アナリティクストラッキングコード

アナリティクストラッキングコード

さらにトラッキングコードをクリックすると
画面がかわり、トラッキングコードが表示されます。

アナリティクストラッキングコード

これをコピーしてwptouchの設定へ貼り付けましょう。

wptouchアナリティクス設定

以上でダッシュボードから出来る、
初期設定は終わりです。

WPtouchカスタマイズ

FTPソフトでサーバーにアクセス、
/public_html/wp-content/plugins/wptouch/themes/

の中にある、『default』フォルダをpcにダウンロード、保存します。

 
wptouchカスタマイズ設定
 

PC上に保存した『default』フォルダの名前を変更します。
変更する名前はなんでもいです。
ご自由に決めてください!

ここでは仮に『tako』とします。
PC上で名前変更をした『tako』フォルダを/themes/ へと戻します。

 
wptouchカスタマイズ設定
 

続いて、
/public_html/wp-content/plugins/wptouch

の中にある 『wptouch.php』 のファイルをpcにダウンロード、保存します。
PC上に保存したwptouch.phpファイルをテキストエディターで開きます。

606行目あたりにある、
return “default”; を return “tako”; へと書き換えます。

続いて、615行目あたりにある
return “default”; も同じように return “tako”; へと書き換えます。

 
wptouchカスタマイズ
 

書き換えたら保存し、サーバーへ戻します。
このときアラートがでますが、
上書き保存を選択します。

上書き保存

ここを変更することによって、
スマホで見た時に、
『tako』フォルダを読み込みますよ~という設定にしました。

今後、『tako』フォルダの中身を書き換える事で
カスタマイズ、スマホ最適化となります。

さらに、 wptouch がバージョンアップしたとしても、
wptouch.phpファイルのこの部分だけを書き換えることで、
カスタマイズバージョンに戻せます。

それでは各ファイルのカスタマイズへと。
 
style.css

index.php

header.php

single.php

footer.php

 

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


ビジネスメール講座を無料で配信中!

多湖弘明

はじめの一歩

アフィリエイトとは?
自分の得意な事、好きな趣味などをブログやインターネットを使って発信し、広告収入を得てみませんか?特に難しい技術や知識はいりません。その方法を知っているか、知らないか。ただそれだけの差です。
実践して報酬を手にしよう!
こんなに簡単!広告収入の仕組みを解説します。実際にやってみてください。パソコンとインターネットがあれば、誰もが数万円のお小遣いならすぐ稼げます。一度限りの贅沢に使うか、継続した数万円の為に使うかは、自分次第。
チェンジザワールド!!
この先、このままでは不安。何かしなきゃと、わかってはいるけど、何もしていない。 何をしていいのか、わからない。 考えてるだけじゃなく、空いた時簡に収入を得れるように、今こそ、はじめの一歩を踏み出しましょう。

コメントを残す