iPhoneなどのスマートフォンに最適化されたWordPressテーマを、WPtouch無しで適用できるプラグイン「WPtap Mobile Detector」

Smartphone theme wptap mobile detector title

とんでもない早さで普及しつつある、スマートフォン。

ブログのアクセスを見ても、スマートフォンやiPadからのアクセスは増加傾向にあります。

しかし、スマートフォンでは画面が小さく性能も低いため、パソコンと同様のページ全部を表示すると、見づらいし表示に時間がかかってしまいます。

というわけで、スマートフォン用のページを勝手に表示してくれるプラグイン「WPtouch」を今までは導入していました。

しかし、このWPtouchは便利なだけに使っている人が多く、どれも見た目が同じになってしまいつまらない。
それに、モバイル用だけカスタマイズしたり修正したりができないのもネックでした。

そんなとき、こんな記事を発見。

これはやってみねばなるまい…!

というわけで、以下私がWPtouch無しでスマートフォン用テーマを適用するまでの手順をご紹介。


目次

 ① プラグイン「WPtap Mobile Detector」のインストール

 ② モバイル用テーマの選定

 ③ WPtouchオフ&WPtapの有効化

 ④ WPtap Mobile Detectorの設定

 ⑤ テーマ編集(Analyticsコード等の貼り付け)

① プラグイン「WPtap Mobile Detector」のインストール

まずは、プラグイン「WPtap Mobile Detector」をインストールしましょう。

WordPressの管理画面からやると簡単。
プラグインの新規追加画面から、WPtap Mobile Detectorを検索して…

Smartphone theme wptap mobile detector 1

インストールするだけです。

Smartphone theme wptap mobile detector 2

② モバイル用テーマの選定

次に、モバイル用のテーマを選びましょう。
この辺の記事を参考に。
(レスポンシブデザインって何だよ…という疑問は置いといて)

で、いくつか導入してみたんですが、どうもうまくいかない。
サイドバーなどが無理やり詰め込まれたような表示になってしまうのです。

前述の記事で導入されていたRenovaに至っては、閉鎖したのかリンク切れ…orz

…といろいろ探してみたのですが、よく考えるとWEB・モバイル両対応のデザインにする必要はないことに気付く。
今回は、あくまで「iPhoneなどのスマートフォン用」のテーマが探せればいいわけです。

ならば、Wordpressのモバイル専用テーマを探せばいいじゃない。

というわけで、辿り着いたのが以下のモバイル用テーマ。

WordPress › Carrington Mobile « Free WordPress Themes

これを導入することにしました。

他にも、「wordpress mobile theme」などのキーワードで検索すればいろいろ出てくるので、お好きなものを。

使いたいテーマをダウンロードしたら、Wordpress管理画面の「テーマ」-「テーマのインストール」から、テーマのzipファイルをアップロードしましょう。

このとき、「有効化」はしないように注意!これをやってしまうと、モバイルだけでなくパソコン用の画面も全てアップロードしたテーマに変わってしまいます。

Smartphone theme wptap mobile detector 4

③ WPtouchオフ&WPtapの有効化

今まで使っていたWPtouchプラグインを停止し、WPtap Mobile Detectorを有効化します。

これは簡単なのでスクショは省略。

④ WPtap Mobile Detectorの設定

次は、プラグインの設定。

左サイドバーの一番下あたりに「WPtap Mobile Detector」の設定があるはずなのでそれをクリック。

すると、以下のような画面に。
ここで、機種ごとにどのテーマを表示させるか選ぶことができます。

Smartphone theme wptap mobile detector 3

スマートフォンのみ今回インストールしたテーマ(私の場合は「Carrington Mobile」)に変更して、右のUpdateボタンをクリック。

これで、iPhoneやAndroidでアクセスしたときには設定したモバイル用テーマが適用されるようになりました。

⑤ テーマ編集(Analyticsコード等の貼り付け)

以上、とりあえず終了!

と思いきや、ここでふと気付く。
今までテーマに直接貼り付けていたコードは、当然新しいモバイル用テーマには貼り付けられていない。

ということは、Analyticsやchartbeatの貼り付けコードも…((((;゚Д゚))))ガクガクブルブル

元のパソコン用テーマのコードを見ながら、モバイル用テーマにもAnalytics等の貼り付け用コードをコピーします。

他にもちょくちょく修正・追加を実施。以下にやったことを列挙しておきます。

・Analyticsコード貼り付け
・Chartbeatコード貼り付け
・Twitter等のソーシャルボタンを文末に設置
・モバイルAdsense設置
・linkwithinの設置
・掲載している画像が若干はみ出てしまっていたので、CSS(スタイルシート)に以下のコードを追加で記述

[note] [/note]

最終的に、見た目は以下のようになりました。

Smartphone theme wptap mobile detector title Smartphone theme wptap mobile detector 5

うん、それほど違いはわからん程度かもね…。
でもええねん。以下のようなメリットがあるし。

やって良かったポイントと、残課題

メリットとしては、やっぱり1つ目の「モバイル用のみのカスタマイズが可能」これが大きいですね。

やって良かったポイント

・今までWPtouchの自動変換に頼るしかなかったものが、モバイル用のみをカスタマイズが可能になった

・他のサイトと見た目が違うのが嬉しい

・最下部に「Recent Posts(最近の記事)」欄ができた

・最上部に、「前の記事」「次の記事」ボタンができた


今後修正していきたい課題は、以下の通り。
もし解決策をご存知の方がいましたら、ぜひ教えていただきたく…m(__)m

残課題

・色を青にしたいけど、ブログ名の背景色をどうやって変えるかわからん
 →CSSにもそれっぽいところがないし。。。

・Social Bokmarking Lightがなぜか改行される、しかもいいねとGoogle+が表示されない
 →原因不明。

・画像付き関連記事表示は、linkwithinに変わるモバイル用のを見つけないと
 →今のところ、以下のように切れてしまっててイマイチ

IMG 4427

・コメント欄はPC版と同様Facebookコメントにしたい
 →こちらは手付かず

あとがき

知識があまりないためテーマ編集には勇気がいりましたが、先人達のブログ記事のおかげでなんとかここまでできました。感謝、感謝。

もし「自分もやってみたい…!」という人がいましたら、参考にしてみてください。

ABOUTこの記事をかいた人

牛嶋 将太郎@ushigyu

牛嶋 将太郎@ushigyu

株式会社エコーズ代表取締役社長(と名乗ってみたくて会社をつくりました)。当ブログにておすすめの製品やお店、旅行先、ガジェットなどを気のむくままに、わかりやすさを心がけて紹介しています。 長崎出身で福岡市在住。東京で就職しましたが独立を機に学生時代を過ごした大好きな福岡に帰還。